feat: matching psbt start

leather-io · Oct 26, 2023 · a0e752c · a0e752c
1 parent d9bd157
commit a0e752c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 49 deletions.
diff --git a/src/app/pages/bitcoin-contract-request/bitcoin-contract-request.tsx b/src/app/pages/bitcoin-contract-request/bitcoin-contract-request.tsx
@@ -1,45 +1,50 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Stack } from '@stacks/ui';
-
 import { RouteUrls } from '@shared/route-urls';
 import { BitcoinContractResponseStatus } from '@shared/rpc/methods/accept-bitcoin-contract';
 
 import { useBitcoinContracts } from '@app/common/hooks/use-bitcoin-contracts';
 import { BitcoinContractOfferDetails } from '@app/common/hooks/use-bitcoin-contracts';
 import { useOnMount } from '@app/common/hooks/use-on-mount';
+import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { initialSearchParams } from '@app/common/initial-search-params';
-import { useCurrentAccountNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
 import { BitcoinContractOfferDetailsSimple } from './components/bitcoin-contract-offer/bitcoin-contract-offer-details';
 import { BitcoinContractRequestActions } from './components/bitcoin-contract-request-actions';
-import { BitcoinContractRequestHeader } from './components/bitcoin-contract-request-header';
 import { BitcoinContractRequestLayout } from './components/bitcoin-contract-request-layout';
-import { BitcoinContractRequestWarningLabel } from './components/bitcoin-contract-request-warning-label';
+import { BitcoinContractRequestHeader } from './components/bitcoin-contract-request-header';
+import { useRouteHeader } from '@app/common/hooks/use-route-header';
+import { PopupHeader } from '@app/features/current-account/popup-header';
+import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
+import { closeWindow } from '@shared/utils';
+import { LoadingSpinner } from '@app/components/loading-spinner';
+import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
 export function BitcoinContractRequest() {
-  const getNativeSegwitSigner = useCurrentAccountNativeSegwitSigner();
+  const { address: bitcoinAddress } = useCurrentAccountNativeSegwitIndexZeroSigner();
+  const network = useCurrentNetwork();
   const navigate = useNavigate();
 
   const { handleOffer, handleAccept, handleReject, sendRpcResponse } = useBitcoinContracts();
 
   const [bitcoinContractJSON, setBitcoinContractJSON] = useState<string>();
   const [bitcoinContractOfferDetails, setBitcoinContractOfferDetails] =
     useState<BitcoinContractOfferDetails>();
-  const [bitcoinAddress, setBitcoinAddress] = useState<string>();
-  const [attestorURLs, setAttestorURLs] = useState<string[]>([]);
 
   const [isLoading, setLoading] = useState(true);
   const [isProcessing, setProcessing] = useState(false);
+
+  useRouteHeader(<PopupHeader displayAddresssBalanceOf="all" />);
+  useOnOriginTabClose(() => closeWindow());
 
   const handleAcceptClick = async () => {
     if (!bitcoinContractJSON || !bitcoinContractOfferDetails) return;
     setProcessing(true);
     await handleAccept(
       bitcoinContractJSON,
       bitcoinContractOfferDetails.counterpartyWalletDetails,
-      attestorURLs
+      ['']
     );
     setProcessing(false);
   };
@@ -54,13 +59,7 @@ export function BitcoinContractRequest() {
     const counterpartyWalletDetailsJSON = initialSearchParams.get('counterpartyWalletDetails');
     const attestorURLs = initialSearchParams.get('attestorURLs');
 
-    const bitcoinAccountDetails = getNativeSegwitSigner?.(0);
-
-    if (!bitcoinAccountDetails) return;
-
-    const currentBitcoinNetwork = bitcoinAccountDetails.network;
-
-    if (currentBitcoinNetwork !== 'testnet') {
+    if (network.chain.bitcoin.network !== 'testnet') {
       navigate(RouteUrls.BitcoinContractLockError, {
         state: {
           error: new Error('Invalid Network'),
@@ -72,7 +71,6 @@ export function BitcoinContractRequest() {
     }
 
     if (
-      !getNativeSegwitSigner ||
       !bitcoinContractOfferJSON ||
       !counterpartyWalletDetailsJSON ||
       !attestorURLs
@@ -84,15 +82,13 @@ export function BitcoinContractRequest() {
       counterpartyWalletDetailsJSON
     );
 
-    const currentAddress = getNativeSegwitSigner(0).address;
-
     setBitcoinContractJSON(bitcoinContractOfferJSON);
     setBitcoinContractOfferDetails(currentBitcoinContractOfferDetails);
-    setBitcoinAddress(currentAddress);
-    setAttestorURLs(JSON.parse(attestorURLs));
     setLoading(false);
   });
 
+  if (isLoading) return <LoadingSpinner height="600px" />;
+
   return (
     <>
       {!isLoading && bitcoinAddress && bitcoinContractOfferDetails && (
@@ -105,11 +101,6 @@ export function BitcoinContractRequest() {
               bitcoinContractOfferDetails.counterpartyWalletDetails.counterpartyWalletIcon
             }
           />
-          <Stack spacing="base" backgroundColor="white" borderRadius="lg">
-            <BitcoinContractRequestWarningLabel
-              appName={bitcoinContractOfferDetails.counterpartyWalletDetails.counterpartyWalletName}
-            />
-          </Stack>
           <BitcoinContractRequestActions
             isLoading={isProcessing}
             bitcoinAddress={bitcoinAddress}

diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-header.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-header.tsx
@@ -1,40 +1,37 @@
-import { memo } from 'react';
-
-import { Flex } from '@stacks/ui';
-import { BitcoinContractRequestSelectors } from '@tests/selectors/bitcoin-contract-request.selectors';
+import { Flex, styled } from 'leather-styles/jsx';
 
+import { Favicon } from '@app/components/favicon';
 import { Flag } from '@app/components/layout/flag';
-import { Caption, Title } from '@app/components/typography';
 
 interface BitcoinContractRequestHeaderBaseProps {
   counterpartyWalletIcon: string;
   counterpartyWalletName: string;
 }
 
-function BitcoinContractRequestHeaderBase({
+export function BitcoinContractRequestHeader({
   counterpartyWalletName,
   counterpartyWalletIcon,
 }: BitcoinContractRequestHeaderBaseProps) {
-  const caption = `${counterpartyWalletName} is requesting you accept this offer`;
+  const caption = `Requested by ${counterpartyWalletName}`;
 
   return (
-    <Flex flexDirection="column" my="loose" width="100%">
-      <Title fontSize={4} fontWeight="bold" mb="base">
-        Lock Bitcoin
-      </Title>
+    <Flex flexDirection="column" my="space.05" width="100%">
+      <styled.h1 mb="space.04" textStyle="heading.03">
+        Lock
+        <br />
+        Bitcoin
+      </styled.h1>
+      <styled.p mb="space.04" textStyle="label.01">
+        By signing the contract YOU AGREE TO LOCK YOUR BITCOIN with {counterpartyWalletName} into a
+        contract where it will remain until a triggering event will release it.
+      </styled.p>
       {caption && (
-        <Flag
-          align="middle"
-          img={<img src={counterpartyWalletIcon} height="32px" width="32px" />}
-          pl="tight"
-        >
-          <Caption data-testid={BitcoinContractRequestSelectors.BitcoinContractOfferorText}>
+        <Flag align="middle" img={<Favicon origin={counterpartyWalletIcon} />} pl="tight">
+          <styled.span textStyle="label.02" wordBreak="break-word">
             {caption}
-          </Caption>
+          </styled.span>
         </Flag>
       )}
     </Flex>
   );
 }
-
-export const BitcoinContractRequestHeader = memo(BitcoinContractRequestHeaderBase);
diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-layout.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-layout.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@stacks/ui';
+import { Stack } from 'leather-styles/jsx';
 
 interface BitcoinContractRequestLayoutProps {
   children: React.ReactNode;
@@ -8,10 +8,10 @@ export function BitcoinContractRequestLayout({ children }: BitcoinContractReques
     <Stack
       alignItems="center"
       maxHeight="calc(100vh - 72px)"
-      overflowY="scroll"
+      overflowY="auto"
       pb="120px"
       px="loose"
-      spacing="tight"
+      gap="base-loose"
       width="100%"
     >
       {children}