chore

leather-io · Apr 2, 2024 · 7beb029 · 7beb029
1 parent d8c25f2
commit 7beb029
Show file tree

Hide file tree

Showing 10 changed files with 219 additions and 169 deletions.
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
@@ -17,7 +17,6 @@ import {
 import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { Link } from '@app/ui/components/link/link';
-import { Card } from '@app/ui/layout/card/card';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 import { RetrieveTaprootToNativeSegwitLayout } from './components/retrieve-taproot-to-native-segwit.layout';
@@ -56,26 +55,24 @@ export function RetrieveTaprootToNativeSegwit() {
       onApproveTransaction={handleBroadcastRetrieveBitcoinTx}
       onClose={() => navigate(RouteUrls.Home)}
     >
-      <Card 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>
-      </Card>
+      <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/send/ordinal-inscription/hooks/use-send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/hooks/use-send-inscription-form.tsx
@@ -133,6 +133,7 @@ export function useSendInscriptionForm() {
           time,
           feeRowValue,
           signedTx: signedTx.extract(),
+          backgroundLocation: { pathname: RouteUrls.Home },
         },
       });
     },

diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
@@ -1,7 +1,7 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { bytesToHex } from '@noble/hashes/utils';
-import { Box, Stack } from 'leather-styles/jsx';
+import { Box, Flex, Stack } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -15,6 +15,7 @@ import { useAppDispatch } from '@app/store';
 import { inscriptionSent } from '@app/store/ordinals/ordinals.slice';
 import { Button } from '@app/ui/components/button/button';
 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';
 
@@ -58,13 +59,15 @@ export function SendInscriptionReview() {
             arrivesIn,
             txid,
             feeRowValue,
+            backgroundLocation: { pathname: RouteUrls.Home },
           },
         });
       },
       onError(e) {
         navigate(`/${RouteUrls.SendOrdinalInscription}/${RouteUrls.SendOrdinalInscriptionError}`, {
           state: {
             error: e,
+            backgroundLocation: { pathname: RouteUrls.Home },
           },
         });
       },
@@ -78,25 +81,39 @@ export function SendInscriptionReview() {
       onGoBack={() => navigate(-1)}
       onClose={() => navigate(RouteUrls.Home)}
     >
-      <Box px="space.06" mt="space.06">
-        <InscriptionPreviewCard
-          image={<InscriptionPreview inscription={inscription} />}
-          subtitle="Ordinal inscription"
-          title={inscription.title}
-        />
-      </Box>
+      <Card
+        footer={
+          <Footer variant="card">
+            <Button aria-busy={isBroadcasting} onClick={sendInscription}>
+              Confirm and send transaction
+            </Button>
+          </Footer>
+        }
+      >
+        <Box px="space.06" mt="space.06">
+          <InscriptionPreviewCard
+            image={<InscriptionPreview inscription={inscription} />}
+            subtitle="Ordinal inscription"
+            title={inscription.title}
+          />
+        </Box>
 
-      <Card pt="space.06" pb="space.06" px="space.06">
-        <Stack width="100%" mb="36px">
-          <InfoCardRow title="To" value={<FormAddressDisplayer address={recipient} />} />
-          <InfoCardSeparator />
-          {arrivesIn && <InfoCardRow title="Estimated confirmation time" value={arrivesIn} />}
-          <InfoCardRow title="Fee" value={feeRowValue} />
-        </Stack>
-
-        <Button aria-busy={isBroadcasting} width="100%" onClick={sendInscription}>
-          Confirm and send transaction
-        </Button>
+        <Flex
+          alignItems="center"
+          flexDirection="column"
+          justifyItems="center"
+          width="100%"
+          pt="space.06"
+          pb="space.06"
+          px="space.06"
+        >
+          <Stack width="100%" mb="36px">
+            <InfoCardRow title="To" value={<FormAddressDisplayer address={recipient} />} />
+            <InfoCardSeparator />
+            {arrivesIn && <InfoCardRow title="Estimated confirmation time" value={arrivesIn} />}
+            <InfoCardRow title="Fee" value={feeRowValue} />
+          </Stack>
+        </Flex>
       </Card>
     </Dialog>
   );

diff --git a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
@@ -1,6 +1,6 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Box, HStack, Stack } from 'leather-styles/jsx';
+import { Box, Flex, HStack, Stack } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { Blockchains } from '@shared/models/blockchain.model';
@@ -9,12 +9,13 @@ import { RouteUrls } from '@shared/route-urls';
 
 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 { copyToClipboard } from '@app/common/utils/copy-to-clipboard';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import { InfoCardBtn, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
 import { useToast } from '@app/features/toasts/use-toast';
 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 { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
@@ -43,7 +44,7 @@ export function SendInscriptionSummary() {
     txid,
   };
 
-  const { onCopy } = useClipboard(txid || '');
+  const id = txid || '';
   const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
 
@@ -52,8 +53,8 @@ export function SendInscriptionSummary() {
     handleOpenTxLink(txLink);
   }
 
-  function onClickCopy() {
-    onCopy();
+  async function onClickCopy() {
+    await copyToClipboard(id);
     toast.success('ID copied!');
   }
 
@@ -63,27 +64,40 @@ export function SendInscriptionSummary() {
       isShowing
       onClose={() => navigate(RouteUrls.Home)}
     >
-      <Box mt="space.06" px="space.06">
-        <InscriptionPreviewCard
-          icon={<CheckmarkIcon mt="space.01" width="lg" />}
-          image={<InscriptionPreview inscription={inscription} />}
-          subtitle="Ordinal inscription"
-          title={inscription.title}
-        />
-      </Box>
-
-      <Card pt="space.06" pb="space.06" px="space.06">
-        <Stack mb="space.06" width="100%">
-          <InfoCardRow title="To" value={<FormAddressDisplayer address={recipient} />} />
-          <InfoCardSeparator />
-          {arrivesIn && <InfoCardRow title="Estimated confirmation time" value={arrivesIn} />}
-          <InfoCardRow title="Fee" value={feeRowValue} />
-        </Stack>
-
-        <HStack gap="space.04" width="100%">
-          <InfoCardBtn onClick={onClickLink} icon={<ExternalLinkIcon />} label="View details" />
-          <InfoCardBtn onClick={onClickCopy} icon={<CopyIcon />} label="Copy ID" />
-        </HStack>
+      <Card
+        footer={
+          <Footer variant="card">
+            <HStack gap="space.04" width="100%">
+              <InfoCardBtn onClick={onClickLink} icon={<ExternalLinkIcon />} label="View details" />
+              <InfoCardBtn onClick={onClickCopy} icon={<CopyIcon />} label="Copy ID" />
+            </HStack>
+          </Footer>
+        }
+      >
+        <Box mt="space.06" px="space.06">
+          <InscriptionPreviewCard
+            icon={<CheckmarkIcon mt="space.01" width="lg" />}
+            image={<InscriptionPreview inscription={inscription} />}
+            subtitle="Ordinal inscription"
+            title={inscription.title}
+          />
+        </Box>
+        <Flex
+          alignItems="center"
+          flexDirection="column"
+          justifyItems="center"
+          width="100%"
+          pt="space.06"
+          pb="space.06"
+          px="space.06"
+        >
+          <Stack mb="space.06" width="100%">
+            <InfoCardRow title="To" value={<FormAddressDisplayer address={recipient} />} />
+            <InfoCardSeparator />
+            {arrivesIn && <InfoCardRow title="Estimated confirmation time" value={arrivesIn} />}
+            <InfoCardRow title="Fee" value={feeRowValue} />
+          </Stack>
+        </Flex>
       </Card>
     </Dialog>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -133,6 +133,7 @@ export function useSendInscriptionForm() { @@
               time,
               feeRowValue,
               signedTx: signedTx.extract(),
+              backgroundLocation: { pathname: RouteUrls.Home },
             },
           });
         },
@@ Expand Down @@