fix: deprecate InfoCard to add border correctly

leather-io · Apr 5, 2024 · b6864cd · b6864cd
1 parent 629ef97
commit b6864cd
Show file tree

Hide file tree

Showing 19 changed files with 489 additions and 425 deletions.
diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx
@@ -1,26 +1,13 @@
 import { ReactNode } from 'react';
 
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { Box, BoxProps, Flex, FlexProps, HStack, Stack, styled } from 'leather-styles/jsx';
+import { Box, BoxProps, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
 import { isString } from '@shared/utils';
 
 import { Button } from '@app/ui/components/button/button';
 import { DashedHr } from '@app/ui/components/hr';
 
-// InfoCard
-interface InfoCardProps extends FlexProps {
-  children: ReactNode;
-}
-/** @deprecated - replace with ui/card */
-export function InfoCard({ children, ...props }: InfoCardProps) {
-  return (
-    <Flex alignItems="center" flexDirection="column" justifyItems="center" width="100%" {...props}>
-      {children}
-    </Flex>
-  );
-}
-
 // InfoCardRow
 interface InfoCardRowProps {
   title?: string;

diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
@@ -4,6 +4,7 @@ import { Stack, styled } from 'leather-styles/jsx';
 
 import { ErrorLabel } from '@app/components/error-label';
 import { Button } from '@app/ui/components/button/button';
+import { Card } from '@app/ui/layout/card/card';
 import { Page } from '@app/ui/layout/page/page.layout';
 
 import { AddNetworkForm } from './add-network-form';
@@ -16,42 +17,44 @@ export function AddNetwork() {
     <Page>
       <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
         {() => (
-          <Form data-testid={NetworkSelectors.NetworkPageReady}>
-            <Stack
-              gap="space.05"
-              maxWidth="pageWidth"
-              px={['space.05', 'space.04']}
-              textAlign={['left', 'center']}
-              my="space.05"
-            >
-              <styled.span textStyle="body.02">
-                Use this form to add a new instance of the{' '}
-                <a
-                  href="https://github.com/blockstack/stacks-blockchain-api"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Stacks Blockchain API
-                </a>{' '}
-                or{' '}
-                <a href="https://github.com/Blockstream/esplora" target="_blank" rel="noreferrer">
-                  Bitcoin Blockchain API
-                </a>
-                . Make sure you review and trust the host before you add it.
-              </styled.span>
-              <AddNetworkForm />
-              {error ? (
-                <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
-              ) : null}
-              <Button
-                aria-busy={loading}
-                data-testid={NetworkSelectors.AddNetworkBtn}
-                type="submit"
+          <Card>
+            <Form data-testid={NetworkSelectors.NetworkPageReady}>
+              <Stack
+                gap="space.05"
+                maxWidth="pageWidth"
+                px={['space.05', 'space.04']}
+                textAlign={['left', 'center']}
+                my="space.05"
               >
-                Add network
-              </Button>
-            </Stack>
-          </Form>
+                <styled.span textStyle="body.02">
+                  Use this form to add a new instance of the{' '}
+                  <a
+                    href="https://github.com/blockstack/stacks-blockchain-api"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Stacks Blockchain API
+                  </a>{' '}
+                  or{' '}
+                  <a href="https://github.com/Blockstream/esplora" target="_blank" rel="noreferrer">
+                    Bitcoin Blockchain API
+                  </a>
+                  . Make sure you review and trust the host before you add it.
+                </styled.span>
+                <AddNetworkForm />
+                {error ? (
+                  <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
+                ) : null}
+                <Button
+                  aria-busy={loading}
+                  data-testid={NetworkSelectors.AddNetworkBtn}
+                  type="submit"
+                >
+                  Add network
+                </Button>
+              </Stack>
+            </Form>
+          </Card>
         )}
       </Formik>
     </Page>

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
@@ -6,6 +6,7 @@ import { Callout } from '@app/ui/components/callout/callout';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
 import { Header } from '@app/ui/components/containers/headers/header';
+import { Card } from '@app/ui/layout/card/card';
 
 interface RetrieveTaprootToNativeSegwitLayoutProps {
   isBroadcasting: boolean;
@@ -30,29 +31,37 @@ export function RetrieveTaprootToNativeSegwitLayout(
         </Footer>
       }
     >
-      <Flex alignItems="start" flexDirection="column" mx="space.06" textAlign="left">
-        <BtcAvatarIcon />
-        <styled.span mt="space.04" textStyle="label.01">
-          Retrieve Bitcoin deposited to <br /> Taproot addresses
-        </styled.span>
-        <styled.span mt="space.05" textStyle="body.02">
-          Taproot addresses are used by Leather for Ordinal inscriptions, but they can also contain
-          bitcoin.
-        </styled.span>
-        <styled.span mt="space.04" textStyle="body.02">
-          As we don't support tranferring from Taproot addresses yet, you can retrieve funds to your
-          account's main Native SegWit balance here.
-        </styled.span>
-        <styled.span mt="space.04" textStyle="body.02">
-          This transaction may take upwards of 30 minutes to confirm.
-        </styled.span>
-        {children}
-        <Callout variant="warning" mt="space.05" mb="space.05">
-          We recommend you check the URL for each "Uninscribed UTXO" listed above to ensure it
-          displays no inscription. If it does display one, do not proceed with retrieval or you may
-          lose it!
-        </Callout>
-      </Flex>
+      <Card>
+        <Flex
+          alignItems="start"
+          flexDirection="column"
+          mx="space.06"
+          mt="space.05"
+          textAlign="left"
+        >
+          <BtcAvatarIcon />
+          <styled.span mt="space.04" textStyle="label.01">
+            Retrieve Bitcoin deposited to <br /> Taproot addresses
+          </styled.span>
+          <styled.span mt="space.05" textStyle="body.02">
+            Taproot addresses are used by Leather for Ordinal inscriptions, but they can also
+            contain bitcoin.
+          </styled.span>
+          <styled.span mt="space.04" textStyle="body.02">
+            As we don't support tranferring from Taproot addresses yet, you can retrieve funds to
+            your account's main Native SegWit balance here.
+          </styled.span>
+          <styled.span mt="space.04" textStyle="body.02">
+            This transaction may take upwards of 30 minutes to confirm.
+          </styled.span>
+          {children}
+          <Callout variant="warning" mt="space.05" mb="space.05">
+            We recommend you check the URL for each "Uninscribed UTXO" listed above to ensure it
+            displays no inscription. If it does display one, do not proceed with retrieval or you
+            may lose it!
+          </Callout>
+        </Flex>
+      </Card>
     </Dialog>
   );
 }
diff --git a/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx b/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx
@@ -8,7 +8,7 @@ import { delay } from '@shared/utils';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { formatMoneyPadded } from '@app/common/money/format-money';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
-import { InfoCard, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
+import { InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
 import { useToast } from '@app/features/toasts/use-toast';
 import {
   useCurrentTaprootAccountBalance,
@@ -55,26 +55,24 @@ export function RetrieveTaprootToNativeSegwit() {
       onApproveTransaction={handleBroadcastRetrieveBitcoinTx}
       onClose={() => navigate(RouteUrls.Home)}
     >
-      <InfoCard mt="space.05">
-        <Stack width="100%">
-          <InfoCardRow title="Your address" value={<FormAddressDisplayer address={recipient} />} />
-          <InfoCardSeparator />
-          <InfoCardRow title="Amount" value={formatMoneyPadded(balance)} />
-          <InfoCardRow title="Fee" value={formatMoneyPadded(fee)} />
-          <InfoCardSeparator />
-          {uninscribedUtxos.map((utxo, i) => (
-            <InfoCardRow
-              key={utxo.txid}
-              title={`Uninscribed UTXO #${i}`}
-              value={
-                <Link href={`https://ordinals.com/output/${utxo.txid}:${utxo.vout}`}>
-                  {`${truncateMiddle(utxo.txid, 4)}:${utxo.vout}`} ↗
-                </Link>
-              }
-            />
-          ))}
-        </Stack>
-      </InfoCard>
+      <Stack width="100%">
+        <InfoCardRow title="Your address" value={<FormAddressDisplayer address={recipient} />} />
+        <InfoCardSeparator />
+        <InfoCardRow title="Amount" value={formatMoneyPadded(balance)} />
+        <InfoCardRow title="Fee" value={formatMoneyPadded(fee)} />
+        <InfoCardSeparator />
+        {uninscribedUtxos.map((utxo, i) => (
+          <InfoCardRow
+            key={utxo.txid}
+            title={`Uninscribed UTXO #${i}`}
+            value={
+              <Link href={`https://ordinals.com/output/${utxo.txid}:${utxo.vout}`}>
+                {`${truncateMiddle(utxo.txid, 4)}:${utxo.vout}`} ↗
+              </Link>
+            }
+          />
+        ))}
+      </Stack>
     </RetrieveTaprootToNativeSegwitLayout>
   );
 }
diff --git a/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx b/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx
@@ -7,7 +7,6 @@ import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-l
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import {
-  InfoCard,
   InfoCardAssetValue,
   InfoCardBtn,
   InfoCardFooter,
@@ -18,6 +17,7 @@ import { useToast } from '@app/features/toasts/use-toast';
 import { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
 import { ExternalLinkIcon } from '@app/ui/icons/external-link-icon';
+import { Card } from '@app/ui/layout/card/card';
 
 export function RpcSendTransferSummary() {
   const { state } = useLocation();
@@ -52,31 +52,29 @@ export function RpcSendTransferSummary() {
   }
 
   return (
-    <>
-      <InfoCard>
-        <InfoCardAssetValue
-          fiatSymbol={txFiatValueSymbol}
-          fiatValue={txFiatValue}
-          icon={<CheckmarkIcon width="lg" />}
-          mb="space.05"
-          symbol={symbol}
-          value={txValue}
-        />
-        <Stack pb="space.06" width="100%">
-          <InfoCardRow title="To" value={<FormAddressDisplayer address={recipient} />} />
-          <InfoCardSeparator />
-          <InfoCardRow title="Total spend" value={totalSpend} />
-          <InfoCardRow title="Sending" value={sendingValue} />
-          <InfoCardRow title="Fee" value={feeRowValue} />
-          {arrivesIn && <InfoCardRow title="Estimated confirmation time" value={arrivesIn} />}
-        </Stack>
-        <InfoCardFooter>
-          <HStack gap="space.04" width="100%">
-            <InfoCardBtn icon={<ExternalLinkIcon />} label="View details" onClick={onClickLink} />
-            <InfoCardBtn icon={<CopyIcon />} label="Copy ID" onClick={onClickCopy} />
-          </HStack>
-        </InfoCardFooter>
-      </InfoCard>
-    </>
+    <Card>
+      <InfoCardAssetValue
+        fiatSymbol={txFiatValueSymbol}
+        fiatValue={txFiatValue}
+        icon={<CheckmarkIcon width="lg" />}
+        mb="space.05"
+        symbol={symbol}
+        value={txValue}
+      />
+      <Stack pb="space.06" width="100%">
+        <InfoCardRow title="To" value={<FormAddressDisplayer address={recipient} />} />
+        <InfoCardSeparator />
+        <InfoCardRow title="Total spend" value={totalSpend} />
+        <InfoCardRow title="Sending" value={sendingValue} />
+        <InfoCardRow title="Fee" value={feeRowValue} />
+        {arrivesIn && <InfoCardRow title="Estimated confirmation time" value={arrivesIn} />}
+      </Stack>
+      <InfoCardFooter>
+        <HStack gap="space.04" width="100%">
+          <InfoCardBtn icon={<ExternalLinkIcon />} label="View details" onClick={onClickLink} />
+          <InfoCardBtn icon={<CopyIcon />} label="Copy ID" onClick={onClickCopy} />
+        </HStack>
+      </InfoCardFooter>
+    </Card>
   );
 }
diff --git a/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx b/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx
@@ -6,7 +6,6 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import {
-  InfoCard,
   InfoCardAssetValue,
   InfoCardBtn,
   InfoCardFooter,
@@ -16,6 +15,7 @@ import { useToast } from '@app/features/toasts/use-toast';
 import { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
 import { ExternalLinkIcon } from '@app/ui/icons/external-link-icon';
+import { Card } from '@app/ui/layout/card/card';
 
 export function RpcSignPsbtSummary() {
   const { state } = useLocation();
@@ -40,7 +40,7 @@ export function RpcSignPsbtSummary() {
 
   return (
     <Flex alignItems="center" flexDirection="column" p="space.05" width="100%">
-      <InfoCard>
+      <Card>
         <InfoCardAssetValue
           fiatSymbol={txFiatValueSymbol}
           fiatValue={txFiatValue}
@@ -59,7 +59,7 @@ export function RpcSignPsbtSummary() {
             <InfoCardBtn icon={<CopyIcon />} label="Copy ID" onClick={onClickCopy} />
           </HStack>
         </InfoCardFooter>
-      </InfoCard>
+      </Card>
     </Flex>
   );
 }