use old component names

FuelLabs · Feb 6, 2025 · 9d943e6 · 9d943e6
1 parent 0a42187
commit 9d943e6
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 10 deletions.
diff --git a/packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.tsx b/packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.tsx
@@ -58,6 +58,17 @@ export function TransactionRequest() {
     return status('loading') || status('sending') || isLoadingAssets;
   }, [status, isLoadingAssets]);
 
+  if (!defaultValues) {
+    return (
+      <Layout title={title} noBorder>
+        <Layout.TopBar type={TopBarType.external} />
+        <Layout.Content css={styles.content}>
+          <TxContent.Loader />
+        </Layout.Content>
+      </Layout>
+    );
+  }
+
   return (
     <FormProvider
       onSubmit={handlers.approve}
@@ -74,7 +85,7 @@ export function TransactionRequest() {
         <Layout.TopBar type={TopBarType.external} />
         <Layout.Content css={styles.content}>
           {shouldShowTxSimulated && (
-            <TxContent
+            <TxContent.Info
               showDetails
               tx={txSummarySimulated}
               isLoading={isLoadingInfo || !defaultValues}
@@ -84,7 +95,7 @@ export function TransactionRequest() {
             />
           )}
           {shouldShowTxExecuted && (
-            <TxContent
+            <TxContent.Info
               showDetails
               tx={txSummaryExecuted}
               txRequest={proposedTxRequest}

diff --git a/packages/app/src/systems/Transaction/components/TxContent/TxContent.stories.tsx b/packages/app/src/systems/Transaction/components/TxContent/TxContent.stories.tsx
@@ -0,0 +1,90 @@
+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),
+    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>
+);
diff --git a/packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx b/packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx
@@ -1,5 +1,13 @@
 import { cssObj } from '@fuel-ui/css';
-import { Alert, Box, Copyable, Icon, Text } from '@fuel-ui/react';
+import {
+  Alert,
+  Box,
+  CardList,
+  ContentLoader,
+  Copyable,
+  Icon,
+  Text,
+} from '@fuel-ui/react';
 import type {
   BN,
   TransactionRequest,
@@ -9,7 +17,7 @@ import type {
 } from 'fuels';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
-import type { Maybe } from '~/systems/Core';
+import { type Maybe, MotionStack, animations } from '~/systems/Core';
 import type { SendFormValues } from '~/systems/Send/hooks';
 import {
   type GroupedErrors,
@@ -57,9 +65,30 @@ const ConfirmHeader = () => (
   </Box>
 );
 
+const LoaderHeader = () => (
+  <CardList.Item
+    css={{ padding: '$2 !important' }}
+    aria-label="Loading Transaction"
+  >
+    <ContentLoader width={300} height={40} viewBox="0 0 300 40">
+      <rect x="20" y="10" rx="4" ry="4" width="92" height="20" />
+    </ContentLoader>
+  </CardList.Item>
+);
+
+function TxContentLoader() {
+  return (
+    <MotionStack {...animations.slideInTop()} gap="$4">
+      <LoaderHeader />
+      <TxOperations.Loader />
+      <TxFee.Loader />
+    </MotionStack>
+  );
+}
+
 export type TxViewVariant = 'default' | 'history';
 
-type TxContentProps = {
+export type TxContentInfoProps = {
   tx?: TransactionSummary | TransactionResult;
   txRequest?: TransactionRequest;
   txStatus?: Maybe<TransactionStatus>;
@@ -75,7 +104,7 @@ type TxContentProps = {
   };
 };
 
-export function TxContent({
+function TxContentInfo({
   tx,
   txStatus,
   showDetails,
@@ -85,7 +114,7 @@ export function TxContent({
   isConfirm,
   fees,
   txRequest,
-}: TxContentProps) {
+}: TxContentInfoProps) {
   const { getValues } = useFormContext<SendFormValues>();
 
   const status = txStatus || tx?.status || txStatus;
@@ -168,6 +197,11 @@ export function TxContent({
   );
 }
 
+export const TxContent = {
+  Loader: TxContentLoader,
+  Info: TxContentInfo,
+};
+
 const styles = {
   content: cssObj({
     paddingTop: '$2',

diff --git a/packages/app/src/systems/Transaction/pages/TxApprove/TxApprove.tsx b/packages/app/src/systems/Transaction/pages/TxApprove/TxApprove.tsx
@@ -30,7 +30,7 @@ export const TxApprove = () => {
       </OverlayDialogTopbar>
       <Dialog.Description as="div" css={styles.description}>
         {ctx.shouldShowTxSimulated && (
-          <TxContent
+          <TxContent.Info
             showDetails
             tx={ctx.txSummarySimulated}
             isLoading={isLoading}
@@ -51,7 +51,7 @@ export const TxApprove = () => {
           />
         )}
         {ctx.shouldShowTxExecuted && (
-          <TxContent
+          <TxContent.Info
             showDetails
             tx={ctx.txSummaryExecuted}
             txStatus={ctx.executedStatus()}

diff --git a/packages/app/src/systems/Transaction/pages/TxView/TxView.tsx b/packages/app/src/systems/Transaction/pages/TxView/TxView.tsx
@@ -40,7 +40,7 @@ export function TxView() {
         )}
         {txResult && (
           <FormProvider {...form}>
-            <TxContent
+            <TxContent.Info
               tx={txResult}
               isLoading={ctx.isFetching}
               showDetails={ctx.shouldShowTxFee}