chore: add copy button to errors header & stories (#1510)

## This PR
- Closes #1303
- Adds a few stories to highlight the changed behaviour

.changeset/tall-forks-poke.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Added a Copy Button to ErrorHeader on TxContent, and a few stories

packages/app/src/systems/Transaction/components/TxContent/TxContent.stories.tsx

@@ -0,0 +1,91 @@
+import { Box, Button } from '@fuel-ui/react';
+
+import type { Meta, StoryFn } from '@storybook/react';
+import { TransactionStatus, bn } from 'fuels';
+import { FormProvider, useForm } from 'react-hook-form';
+import type { SendFormValues } from '~/systems/Send/hooks';
+import { TxContent, type TxContentInfoProps } from './TxContent';
+
+export default {
+  component: TxContent.Info,
+  title: 'Transaction/Components/TxContent',
+  decorators: [(Story) => <Story />],
+  parameters: {
+    viewport: {
+      defaultViewport: 'chromeExtension',
+    },
+  },
+} as Meta;
+
+const defaultArgs = {
+  tx: {
+    id: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
+  },
+  isLoading: false,
+  showDetails: true,
+  txStatus: TransactionStatus.success,
+  fees: {
+    baseFee: bn(0.01),
+    minGasLimit: bn(0.01),
+    regularTip: bn(0.01),
+    fastTip: bn(0.01),
+  },
+} as TxContentInfoProps;
+
+const Template: StoryFn<typeof TxContent.Info> = (args) => {
+  const form = useForm<SendFormValues>({
+    defaultValues: {
+      asset: 'BTC',
+      address: '0x1234567890abcdef1234567890abcdef12345678',
+      amount: bn(0.12345678),
+      fees: {
+        tip: {
+          amount: bn(0),
+          text: '0',
+        },
+        gasLimit: {
+          amount: bn(0),
+          text: '0',
+        },
+      },
+    },
+  });
+  return (
+    <Box css={{ maxWidth: 300 }}>
+      <FormProvider {...form}>
+        <TxContent.Info {...args} />
+      </FormProvider>
+    </Box>
+  );
+};
+
+export const Default: StoryFn = Template.bind({});
+Default.args = {
+  ...defaultArgs,
+} as TxContentInfoProps;
+
+export const Errors: StoryFn = Template.bind({});
+Errors.args = {
+  ...defaultArgs,
+  tx: undefined,
+  txStatus: TransactionStatus.failure,
+  errors: 'No assets available',
+  footer: (
+    <Button
+      size="sm"
+      variant="ghost"
+      intent="error"
+      onPress={() => console.log('try again')}
+    >
+      Try again
+    </Button>
+  ),
+} as TxContentInfoProps;
+
+export const Loader = () => (
+  <Box
+    css={{ maxWidth: 300, display: 'flex', flexDirection: 'column', gap: '$4' }}
+  >
+    <TxContent.Loader />
+  </Box>
+);

packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx

@@ -4,10 +4,11 @@ import {
   Box,
   CardList,
   ContentLoader,
+  Copyable,
+  Icon,
   Text,
   VStack,
 } from '@fuel-ui/react';
-import type { AssetData } from '@fuel-wallet/types';
 import type { BN, TransactionStatus, TransactionSummary } from 'fuels';
 import { type ReactNode, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -25,14 +26,24 @@ import { TxFeeOptions } from '../TxFeeOptions/TxFeeOptions';
 const ErrorHeader = ({ errors }: { errors?: GroupedErrors }) => {
   return (
     <Alert status="error" css={styles.alert} aria-label="Transaction Error">
-      <Alert.Description
-        as="div"
-        css={{
-          wordBreak: 'break-word',
+      <Copyable
+        value={errors ?? ''}
+        aria-label={errors}
+        iconProps={{
+          icon: Icon.is('Copy'),
+          'aria-label': 'Copy Error',
         }}
+        tooltipMessage="Copy Error"
       >
-        {errors}
-      </Alert.Description>
+        <Alert.Description
+          as="div"
+          css={{
+            wordBreak: 'break-word',
+          }}
+        >
+          {errors}
+        </Alert.Description>
+      </Copyable>
     </Alert>
   );
 };
@@ -66,7 +77,7 @@ function TxContentLoader() {
   );
 }
 
-type TxContentInfoProps = {
+export type TxContentInfoProps = {
   footer?: ReactNode;
   tx?: Maybe<TransactionSummary>;
   txStatus?: Maybe<TransactionStatus>;