feat: replaced stacks/ui components, removed bitcoin contract formatting

leather-io · Oct 10, 2023 · 863e2d2 · 863e2d2
1 parent d9e4866
commit 863e2d2
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 27 deletions.
diff --git a/src/app/common/hooks/use-bitcoin-contracts.ts b/src/app/common/hooks/use-bitcoin-contracts.ts
@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import { RpcErrorCode } from '@btckit/types';
 import { JsDLCInterface } from '@dlc-link/dlc-tools';
 import { bytesToHex } from '@stacks/common';
-import { truncateMiddle } from '@stacks/ui-utils';
 
 import { BITCOIN_API_BASE_URL_MAINNET, BITCOIN_API_BASE_URL_TESTNET } from '@shared/constants';
 import {
@@ -274,19 +273,6 @@ export function useBitcoinContracts() {
     };
   }
 
-  function formatBitcoinContracts(
-    bitcoinContracts: Record<string, any>[]
-  ): BitcoinContractListItem[] {
-    return bitcoinContracts.map(bitcoinContract => {
-      return {
-        id: truncateMiddle(bitcoinContract.id),
-        state: bitcoinContract.state,
-        acceptorCollateral: bitcoinContract.acceptorCollateral,
-        txId: bitcoinContract.txId,
-      };
-    });
-  }
-
   async function sumBitcoinContractCollateralAmounts(): Promise<Money> {
     let bitcoinContractsCollateralSum = 0;
     const bitcoinContracts = await getAllSignedBitcoinContracts();
@@ -361,7 +347,6 @@ export function useBitcoinContracts() {
     handleAccept,
     handleReject,
     getAllSignedBitcoinContracts,
-    formatBitcoinContracts,
     sumBitcoinContractCollateralAmounts,
     sendRpcResponse,
   };

diff --git a/src/app/pages/bitcoin-contract-list/bitcoin-contract-list.tsx b/src/app/pages/bitcoin-contract-list/bitcoin-contract-list.tsx
@@ -1,30 +1,29 @@
 import { useState } from 'react';
 
-import { Flex, Text } from '@stacks/ui';
+import { truncateMiddle } from '@stacks/ui-utils';
+import { Flex } from 'leather-styles/jsx';
 
-import {
-  BitcoinContractListItem,
-  useBitcoinContracts,
-} from '@app/common/hooks/use-bitcoin-contracts';
+import { useBitcoinContracts } from '@app/common/hooks/use-bitcoin-contracts';
+import { BitcoinContractListItem } from '@app/common/hooks/use-bitcoin-contracts';
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
+import { Text } from '@app/components/typography';
 
 import { BitcoinContractListItemLayout } from './components/bitcoin-contract-list-item-layout';
 import { BitcoinContractListLayout } from './components/bitcoin-contract-list-layout';
 
 export function BitcoinContractList() {
-  const { getAllSignedBitcoinContracts, formatBitcoinContracts } = useBitcoinContracts();
+  const { getAllSignedBitcoinContracts } = useBitcoinContracts();
   const [bitcoinContracts, setBitcoinContracts] = useState<BitcoinContractListItem[]>([]);
   const [isLoading, setLoading] = useState(true);
 
   useOnMount(() => {
     const fetchAndFormatBitcoinContracts = async () => {
       const fetchedBitcoinContracts = await getAllSignedBitcoinContracts();
-      const formattedBitcoinContracts = formatBitcoinContracts(fetchedBitcoinContracts);
-      setBitcoinContracts(formattedBitcoinContracts);
+      setBitcoinContracts(fetchedBitcoinContracts);
       setLoading(false);
     };
-    fetchAndFormatBitcoinContracts();
+    void fetchAndFormatBitcoinContracts();
   });
 
   if (isLoading) return <FullPageLoadingSpinner />;
@@ -40,7 +39,7 @@ export function BitcoinContractList() {
           return (
             <BitcoinContractListItemLayout
               key={bitcoinContract.id}
-              id={bitcoinContract.id}
+              id={truncateMiddle(bitcoinContract.id)}
               collateralAmount={bitcoinContract.acceptorCollateral}
               txId={bitcoinContract.txId}
               state={bitcoinContract.state}

diff --git a/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-item-layout.tsx b/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-item-layout.tsx
@@ -40,6 +40,7 @@ export function BitcoinContractListItemLayout({
   return (
     <Flex
       as={'button'}
+      marginBottom="15px"
       onClick={() =>
         handleOpenTxLink({
           blockchain: 'bitcoin',

diff --git a/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx b/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Stack } from '@stacks/ui';
+import { Stack } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -15,7 +15,7 @@ export function BitcoinContractListLayout({ children }: BitcoinContractListProps
   const navigate = useNavigate();
   useRouteHeader(<Header title="Bitcoin Contracts" onClose={() => navigate(RouteUrls.Home)} />);
   return (
-    <Stack padding="base" spacing="loose" width="100%" overflow={'scroll'}>
+    <Stack padding="base" width="100%" overflow={'scroll'}>
       {children}
     </Stack>
   );