chore: deprecate FormFooter and refactor to share global footer

leather-io · Jan 19, 2024 · 5511943 · 5511943
1 parent 0bd51fb
commit 5511943
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 112 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -17,6 +17,7 @@ const preview: Preview = {
         ...customViewports,
       },
     },
+    toc: true,
   },
 };
 

diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useRef } from 'react';
 
+import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { Form, Formik } from 'formik';
 import { Stack, styled } from 'leather-styles/jsx';
 import * as yup from 'yup';
@@ -8,7 +9,6 @@ import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
 import { createMoney } from '@shared/models/money.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { PreviewButton } from '@app/components/preview-button';
 import { LeatherButton } from '@app/ui/components/button';
 
 import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list';
@@ -120,7 +120,14 @@ export function BitcoinCustomFee({
                   />
                 </Stack>
               </Stack>
-              <PreviewButton isDisabled={!props.values.feeRate} text="Use custom fee" />
+              <LeatherButton
+                data-testid={SendCryptoAssetSelectors.PreviewSendTxBtn}
+                disabled={!props.values.feeRate}
+                onClick={() => props.handleSubmit}
+                type="submit"
+              >
+                Use custom fee
+              </LeatherButton>
             </Stack>
           </Form>
         );

diff --git a/src/app/components/preview-button.tsx b/src/app/components/preview-button.tsx
diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
@@ -7,12 +7,12 @@ import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
 import { Money } from '@shared/models/money.model';
 
 import { formatMoney } from '@app/common/money/format-money';
-import { AvailableBalance } from '@app/components/available-balance';
 import { BitcoinCustomFee } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee';
 import { MAX_FEE_RATE_MULTIPLIER } from '@app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee';
 import { OnChooseFeeArgs } from '@app/components/bitcoin-fees-list/bitcoin-fees-list';
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
 
 import { BitcoinChooseFeeLayout } from './components/bitcoin-choose-fee.layout';
 import { ChooseFeeSubtitle } from './components/choose-fee-subtitle';
@@ -82,7 +82,7 @@ export function BitcoinChooseFee({
           feesList={feesList}
         />
         <Box mt="space.05" width="100%">
-          <AvailableBalance balance={btcBalance.balance} />
+          <AvailableBalance balance={formatMoney(btcBalance.balance)} />
         </Box>
       </Stack>
     </BitcoinChooseFeeLayout>

diff --git a/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx
diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx
@@ -1,16 +1,19 @@
 import { Outlet, useLocation } from 'react-router-dom';
 
+import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { Form, Formik } from 'formik';
 import { Box, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
+import { formatMoney } from '@app/common/money/format-money';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { InfoLabel } from '@app/components/info-label';
 import { LeatherButton } from '@app/ui/components/button';
+import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon';
 
 import { AmountField } from '../../components/amount-field';
-import { FormFooter } from '../../components/form-footer';
 import { SelectedAssetField } from '../../components/selected-asset-field';
 import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout';
 import { SendMaxButton } from '../../components/send-max-button';
@@ -80,11 +83,20 @@ export function Brc20SendForm() {
                   </LeatherButton>
                 </InfoLabel>
               </SendCryptoAssetFormLayout>
+              <Footer>
+                <LeatherButton
+                  data-testid={SendCryptoAssetSelectors.PreviewSendTxBtn}
+                  onClick={() => props.handleSubmit()}
+                  type="submit"
+                >
+                  Continue
+                </LeatherButton>
+                <AvailableBalance
+                  balance={formatMoney(moneyBalance)}
+                  balanceTooltipLabel="Total balance minus any amounts already represented by transfer inscriptions in your wallet."
+                />
+              </Footer>
 
-              <FormFooter
-                balance={moneyBalance}
-                balanceTooltipLabel="Total balance minus any amounts already represented by transfer inscriptions in your wallet."
-              />
               <Outlet />
             </Form>
           );

diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -7,14 +7,17 @@ import { Box } from 'leather-styles/jsx';
 import { HIGH_FEE_WARNING_LEARN_MORE_URL_BTC } from '@shared/constants';
 import { CryptoCurrencies } from '@shared/models/currencies.model';
 
+import { formatMoney } from '@app/common/money/format-money';
 import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer';
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { LeatherButton } from '@app/ui/components/button';
+import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 
 import { AmountField } from '../../components/amount-field';
-import { FormFooter } from '../../components/form-footer';
 import { SelectedAssetField } from '../../components/selected-asset-field';
 import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout';
 import { SendFiatValue } from '../../components/send-fiat-value';
@@ -92,7 +95,17 @@ export function BtcSendForm() {
                 <BitcoinRecipientField />
                 {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && <TestnetBtcMessage />}
               </SendCryptoAssetFormLayout>
-              <FormFooter balance={btcBalance.balance} />
+
+              <Footer>
+                <LeatherButton
+                  data-testid={SendCryptoAssetSelectors.PreviewSendTxBtn}
+                  onClick={() => props.handleSubmit()}
+                  type="submit"
+                >
+                  Continue
+                </LeatherButton>
+                <AvailableBalance balance={formatMoney(btcBalance.balance)} />
+              </Footer>
               <HighFeeDrawer learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_BTC} />
               <Outlet />
 

diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx
@@ -1,5 +1,6 @@
 import { Outlet, useNavigate } from 'react-router-dom';
 
+import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { Form, Formik, FormikHelpers } from 'formik';
 import { Box } from 'leather-styles/jsx';
 import { ObjectSchema } from 'yup';
@@ -10,13 +11,16 @@ import { StacksSendFormValues } from '@shared/models/form.model';
 import { Money } from '@shared/models/money.model';
 import { RouteUrls } from '@shared/route-urls';
 
+import { formatMoney } from '@app/common/money/format-money';
 import { EditNonceButton } from '@app/components/edit-nonce-button';
 import { FeesRow } from '@app/components/fees-row/fees-row';
 import { NonceSetter } from '@app/components/nonce-setter';
 import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer';
 import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values';
+import { LeatherButton } from '@app/ui/components/button';
+import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 
-import { FormFooter } from '../../components/form-footer';
 import { MemoField } from '../../components/memo-field';
 import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout';
 import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field';
@@ -46,7 +50,6 @@ export function StacksCommonSendForm({
 }: StacksCommonSendFormProps) {
   const navigate = useNavigate();
   const { onFormStateChange } = useUpdatePersistedSendFormValues();
-
   return (
     <Box width="100%" pb="space.04">
       <Formik
@@ -75,7 +78,17 @@ export function StacksCommonSendForm({
                     onEditNonce={() => navigate(RouteUrls.EditNonce)}
                   />
                 </SendCryptoAssetFormLayout>
-                <FormFooter balance={availableTokenBalance} />
+
+                <Footer>
+                  <LeatherButton
+                    data-testid={SendCryptoAssetSelectors.PreviewSendTxBtn}
+                    onClick={() => props.handleSubmit()}
+                    type="submit"
+                  >
+                    Continue
+                  </LeatherButton>
+                  <AvailableBalance balance={formatMoney(availableTokenBalance)} />
+                </Footer>
                 <HighFeeDrawer learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_STX} />
                 <Outlet />
               </Form>

diff --git a/src/app/components/available-balance.tsx → .../containers/footers/available-balance.tsx b/src/app/components/available-balance.tsx → .../containers/footers/available-balance.tsx
@@ -1,17 +1,17 @@
 import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
 
-import { Money } from '@shared/models/money.model';
-
-import { formatMoney } from '@app/common/money/format-money';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
-export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?: string }) {
-  const {
-    balance,
-    balanceTooltipLabel = 'Amount that is immediately available for use after taking into account any pending transactions or holds placed on your account by the protocol.',
-  } = props;
+interface AvailableBalanceProps {
+  balance: string;
+  balanceTooltipLabel?: string;
+}
 
+export function AvailableBalance({
+  balance,
+  balanceTooltipLabel = 'Amount that is immediately available for use after taking into account any pending transactions or holds placed on your account by the protocol.',
+}: AvailableBalanceProps) {
   return (
     <Flex alignItems="center" justifyContent="space-between">
       <HStack gap="space.01">
@@ -25,7 +25,7 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?:
         </BasicTooltip>
       </HStack>
       <styled.span color="accent.text-subdued" mr="space.02" textStyle="caption.01">
-        {formatMoney(balance)}
+        {balance}
       </styled.span>
     </Flex>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ const preview: Preview = { @@
             ...customViewports,
           },
         },
+        toc: true,
       },
     };
@@ Expand Down @@