fix: update ui library and deprecate footer

leather-io · Aug 21, 2024 · 0f5cfa2 · 0f5cfa2
1 parent b43cf8b
commit 0f5cfa2
Show file tree

Hide file tree

Showing 15 changed files with 169 additions and 538 deletions.
diff --git a/package.json b/package.json
@@ -141,7 +141,7 @@
     "@leather.io/query": "2.6.0",
     "@leather.io/stacks": "1.0.0",
     "@leather.io/tokens": "0.8.0",
-    "@leather.io/ui": "1.12.0",
+    "@leather.io/ui": "1.13.0",
     "@leather.io/utils": "0.13.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx b/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx
@@ -6,8 +6,6 @@ import get from 'lodash.get';
 
 import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 
-import { Footer } from '@app/components/layout';
-
 export function BroadcastErrorDialog() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -19,11 +17,9 @@ export function BroadcastErrorDialog() {
       header={<DialogHeader />}
       onClose={() => navigate('..')}
       footer={
-        <Footer>
-          <Button fullWidth onClick={() => navigate('..')} mt="space.05">
-            Close
-          </Button>
-        </Footer>
+        <Button fullWidth onClick={() => navigate('..')} mt="space.05">
+          Close
+        </Button>
       }
     >
       <Flex

diff --git a/src/app/components/layout/footer/footer.tsx b/src/app/components/layout/footer/footer.tsx
diff --git a/src/app/components/layout/index.ts b/src/app/components/layout/index.ts
@@ -1,5 +1,4 @@
 export { Page } from './page/page.layout';
-export { Footer } from './footer/footer';
 export * from './card';
 
 export { AvailableBalance } from './card/components/available-balance';

diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
@@ -14,7 +14,6 @@ import { useLocationStateWithCache } from '@app/common/hooks/use-location-state'
 import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils';
 import { BitcoinCustomFeeInput } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-input';
 import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item';
-import { Footer } from '@app/components/layout';
 import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
@@ -66,13 +65,11 @@ export function IncreaseBtcFeeDialog() {
             onClose={onClose}
             header={<DialogHeader title="Increase fee" />}
             footer={
-              <Footer>
-                <IncreaseFeeActions
-                  isDisabled={isBroadcasting}
-                  isBroadcasting={isBroadcasting}
-                  onCancel={() => navigate(RouteUrls.Home)}
-                />
-              </Footer>
+              <IncreaseFeeActions
+                isDisabled={isBroadcasting}
+                isBroadcasting={isBroadcasting}
+                onCancel={() => navigate(RouteUrls.Home)}
+              />
             }
           >
             <Stack gap="space.05" px="space.05" pb="space.05">

diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx
@@ -21,7 +21,6 @@ import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh-
 import { stacksValue } from '@app/common/stacks-utils';
 import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid';
 import { stxFeeValidator } from '@app/common/validation/forms/fee-validators';
-import { Footer } from '@app/components/layout';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { StacksTransactionItem } from '@app/components/stacks-transaction-item/stacks-transaction-item';
 import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction';
@@ -89,13 +88,11 @@ export function IncreaseStxFeeDialog() {
               onClose={() => navigate(RouteUrls.Home)}
               header={<DialogHeader title="Increase fee" />}
               footer={
-                <Footer>
-                  <IncreaseFeeActions
-                    isDisabled={stxToMicroStx(props.values.fee).isEqualTo(fee)}
-                    isLoading={isLoadingRawTx || isLoadingTx}
-                    onCancel={() => navigate(RouteUrls.Home)}
-                  />
-                </Footer>
+                <IncreaseFeeActions
+                  isDisabled={stxToMicroStx(props.values.fee).isEqualTo(fee)}
+                  isLoading={isLoadingRawTx || isLoadingTx}
+                  onCancel={() => navigate(RouteUrls.Home)}
+                />
               }
             >
               <Stack gap="space.05" px="space.05" pb="space.05">

diff --git a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
@@ -7,7 +7,6 @@ import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
 import { useWalletType } from '@app/common/use-wallet-type';
-import { Footer } from '@app/components/layout';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
@@ -53,11 +52,9 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDi
       wrapChildren={false}
       footer={whenWallet({
         software: (
-          <Footer>
-            <Button fullWidth onClick={() => onCreateAccount()}>
-              Create new account
-            </Button>
-          </Footer>
+          <Button fullWidth onClick={() => onCreateAccount()}>
+            Create new account
+          </Button>
         ),
         ledger: null,
       })}

diff --git a/...retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/...retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
@@ -2,8 +2,6 @@ import { Flex, styled } from 'leather-styles/jsx';
 
 import { BtcAvatarIcon, Button, Callout, Dialog, DialogHeader } from '@leather.io/ui';
 
-import { Footer } from '@app/components/layout';
-
 interface RetrieveTaprootToNativeSegwitLayoutProps {
   isBroadcasting: boolean;
   children: React.ReactNode;
@@ -20,11 +18,11 @@ export function RetrieveTaprootToNativeSegwitLayout(
       header={<DialogHeader />}
       onClose={() => onClose()}
       footer={
-        <Footer>
+        <Flex flexDirection="row">
           <Button onClick={onApproveTransaction} aria-busy={isBroadcasting} fullWidth>
             Retrieve bitcoin
           </Button>
-        </Footer>
+        </Flex>
       }
     >
       <Flex alignItems="start" flexDirection="column" mx="space.06" mt="space.05" textAlign="left">

diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx
@@ -8,7 +8,6 @@ import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
 
-import { Footer } from '@app/components/layout';
 import { NetworkListItem } from '@app/features/settings/network/network-list-item';
 import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks';
 import { useNetworks } from '@app/store/networks/networks.selectors';
@@ -46,18 +45,16 @@ export function NetworkDialog({ onClose }: NetworkDialogProps) {
       isShowing
       onClose={onClose}
       footer={
-        <Footer>
-          <Button
-            data-testid={SettingsSelectors.AddNewNetworkBtn}
-            fullWidth
-            onClick={() => {
-              addNetwork();
-              onClose();
-            }}
-          >
-            Add a network
-          </Button>
-        </Footer>
+        <Button
+          data-testid={SettingsSelectors.AddNewNetworkBtn}
+          fullWidth
+          onClick={() => {
+            addNetwork();
+            onClose();
+          }}
+        >
+          Add a network
+        </Button>
       }
     >
       {Object.keys(networks).map(id => (

diff --git a/src/app/features/settings/sign-out/sign-out.tsx b/src/app/features/settings/sign-out/sign-out.tsx
@@ -5,7 +5,7 @@ import { Flex, HStack, styled } from 'leather-styles/jsx';
 import { Button, Callout, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useWalletType } from '@app/common/use-wallet-type';
-import { ButtonRow, Footer } from '@app/components/layout';
+import { ButtonRow } from '@app/components/layout';
 
 interface SignOutDialogProps {
   isShowing: boolean;
@@ -39,30 +39,28 @@ export function SignOutDialog({ isShowing, onUserDeleteWallet, onClose }: SignOu
       isShowing={isShowing}
       onClose={onClose}
       footer={
-        <Footer>
-          <ButtonRow flexDirection="row">
-            <Button
-              color="gray"
-              data-testid={SettingsSelectors.BtnSignOutReturnToHomeScreen}
-              flexGrow={1}
-              variant="outline"
-              onClick={onClose}
-            >
-              Cancel
-            </Button>
-            <Button
-              color="lightModeInk.1"
-              opacity={!canSignOut ? 0.8 : undefined}
-              data-testid={SettingsSelectors.BtnSignOutActuallyDeleteWallet}
-              flexGrow={1}
-              disabled={!canSignOut}
-              onClick={handleSignOut}
-              type="submit"
-            >
-              Sign out
-            </Button>
-          </ButtonRow>
-        </Footer>
+        <ButtonRow flexDirection="row">
+          <Button
+            color="gray"
+            data-testid={SettingsSelectors.BtnSignOutReturnToHomeScreen}
+            flexGrow={1}
+            variant="outline"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button
+            color="lightModeInk.1"
+            opacity={!canSignOut ? 0.8 : undefined}
+            data-testid={SettingsSelectors.BtnSignOutActuallyDeleteWallet}
+            flexGrow={1}
+            disabled={!canSignOut}
+            onClick={handleSignOut}
+            type="submit"
+          >
+            Sign out
+          </Button>
+        </ButtonRow>
       }
     >
       <Callout variant="warning" width="100%" title="You'll need your Secret Key to sign in again">

diff --git a/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx b/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx
@@ -7,7 +7,7 @@ import { Button, Caption, Dialog, DialogHeader, ErrorIcon, Link, Title } from '@
 import { StacksSendFormValues } from '@shared/models/form.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { ButtonRow, Footer } from '@app/components/layout';
+import { ButtonRow } from '@app/components/layout';
 
 import { useStacksHighFeeWarningContext } from './stacks-high-fee-warning-container';
 
@@ -26,28 +26,22 @@ export function HighFeeDialog({ learnMoreUrl }: HighFeeDialogProps) {
       isShowing={showHighFeeWarningDialog}
       onClose={() => setShowHighFeeWarningDialog(false)}
       footer={
-        <Footer>
-          <ButtonRow flexDirection="row">
-            <Button
-              onClick={() => setShowHighFeeWarningDialog(false)}
-              variant="outline"
-              flexGrow={1}
-            >
-              Edit fee
-            </Button>
-            <Button
-              onClick={() => {
-                setHasBypassedFeeWarning(true);
-                handleSubmit();
-              }}
-              data-testid={SendCryptoAssetSelectors.HighFeeWarningDialogSubmit}
-              type="submit"
-              flexGrow={1}
-            >
-              Yes, I'm sure
-            </Button>
-          </ButtonRow>
-        </Footer>
+        <ButtonRow flexDirection="row">
+          <Button onClick={() => setShowHighFeeWarningDialog(false)} variant="outline" flexGrow={1}>
+            Edit fee
+          </Button>
+          <Button
+            onClick={() => {
+              setHasBypassedFeeWarning(true);
+              handleSubmit();
+            }}
+            data-testid={SendCryptoAssetSelectors.HighFeeWarningDialogSubmit}
+            type="submit"
+            flexGrow={1}
+          >
+            Yes, I'm sure
+          </Button>
+        </ButtonRow>
       }
     >
       <Stack px="space.05" gap="space.05" pb="space.06">

diff --git a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx
@@ -27,6 +27,9 @@ export function ChooseCryptoAssetToFund() {
       <Content>
         <Page>
           <Card
+            contentStyle={{
+              p: 'space.00',
+            }}
             header={
               <styled.h1 textStyle="heading.03" p="space.05">
                 choose asset <br /> to fund

diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
@@ -8,7 +8,6 @@ import { token } from 'leather-styles/tokens';
 import { AddressDisplayer, Button, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useLocationState } from '@app/common/hooks/use-location-state';
-import { Footer } from '@app/components/layout';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 
 interface ReceiveTokensLayoutProps {
@@ -41,11 +40,9 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
       isShowing
       onClose={() => navigate(backgroundLocation ?? '..')}
       footer={
-        <Footer>
-          <Button fullWidth onClick={() => onCopyAddressToClipboard(address)}>
-            Copy address
-          </Button>
-        </Footer>
+        <Button fullWidth onClick={() => onCopyAddressToClipboard(address)}>
+          Copy address
+        </Button>
       }
     >
       {warning && warning}

diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
@@ -10,7 +10,6 @@ import { RouteUrls } from '@shared/route-urls';
 import { ErrorLabel } from '@app/components/error-label';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
 import { InscriptionPreviewCard } from '@app/components/inscription-preview-card/inscription-preview-card';
-import { Footer } from '@app/components/layout';
 
 import { RecipientAddressTypeField } from '../send-crypto-asset-form/components/recipient-address-type-field';
 import { CollectibleAsset } from './components/collectible-asset';
@@ -45,11 +44,9 @@ export function SendInscriptionForm() {
               isShowing
               onClose={() => navigate(RouteUrls.Home)}
               footer={
-                <Footer>
-                  <Button onClick={() => props.handleSubmit()} type="submit" fullWidth>
-                    Continue
-                  </Button>
-                </Footer>
+                <Button onClick={() => props.handleSubmit()} type="submit" fullWidth>
+                  Continue
+                </Button>
               }
             >
               <SendInscriptionFormLoader isLoading={isCheckingFees}>