wip: modify swap ui

package.json

@@ -49,7 +49,7 @@
     "concurrently": "^8.2.2",
     "d3": "^7.9.0",
     "decimal.js": "^10.4.3",
-    "dlc-btc-lib": "2.5.1",
+    "dlc-btc-lib": "file:../dlc-btc-lib",
     "dotenv": "^16.3.1",
     "ethers": "6.8.0",
     "formik": "^2.4.5",

src/app/app.tsx

@@ -2,7 +2,7 @@ import { Route } from 'react-router-dom';
 
 import { AppLayout } from '@components/app.layout';
 import { MerchantDetails } from '@components/proof-of-reserve/components/merchant-details/merchant-details';
-import { Swap } from '@components/swap/swap';
+import { SwapPage } from '@components/swap/pages/swap-page';
 import { getWagmiConfiguration } from '@functions/configuration.functions';
 import { GardenProvider, environment } from '@gardenfi/react-hooks';
 import { AttestorDetailsPage } from '@pages/attestor-details/attestor-details-page';
@@ -64,7 +64,7 @@ export function App(): React.JSX.Element {
                                   element={<MerchantDetails />}
                                 />
                                 <Route path="/mint-withdraw" element={<Dashboard />} />
-                                <Route path="/swap" element={<Swap />} />
+                                <Route path="/swap" element={<SwapPage />} />
                               </AppLayout>
                             </ProofOfReserveContextProvider>
                           </BalanceContextProvider>

src/app/components/swap/components/swap-amount-card.tsx

@@ -1,28 +1,40 @@
 import { HStack, Text, VStack } from '@chakra-ui/react';
+import { Asset } from '@gardenfi/orderbook';
 
 import { SwapTokenButton } from './swap-token-button';
 import { SwapTokenLabel } from './swap-token-label';
 
 interface SwapAmountCardProps {
   direction: string;
+  asset: Asset;
   amount: number;
-  token: string;
-  inUSD: number;
-  balance: number;
-  gasFee?: number;
+  amountInUSD?: string;
+  balance?: number;
+  transactionGasFee?: number;
 }
 
+const assetDetails = {
+  iBTC: {
+    assetColor: 'purple.01',
+    assetSymbol: 'iBTC',
+    assetLogo: '/images/logos/ibtc-logo.svg',
+  },
+  BTC: {
+    assetColor: 'orange.01',
+    assetSymbol: 'BTC',
+    assetLogo: '/images/logos/bitcoin-logo.svg',
+  },
+};
+
 export function SwapAmountCard({
   direction,
   amount,
-  token,
-  inUSD,
+  asset,
+  amountInUSD,
   balance,
 }: SwapAmountCardProps): React.JSX.Element | null {
-  const isBTC = token === 'BTC';
-  const borderColor = isBTC ? 'white.01' : 'rgb(188, 143, 249)';
-  const tokenDisplay = isBTC ? 'BTC' : 'dlcBTC';
-  const tokenImage = isBTC ? '/images/logos/bitcoin-logo.svg' : '/images/logos/dlc-btc-logo.svg';
+  const isBTC = asset.symbol === 'btc';
+  const { assetColor, assetSymbol, assetLogo } = assetDetails[isBTC ? 'BTC' : 'iBTC'];
 
   return (
     <VStack
@@ -32,7 +44,7 @@ export function SwapAmountCard({
       borderRadius={'md'}
       border={'1px solid'}
       spacing={'15px'}
-      borderColor={borderColor}
+      borderColor={assetColor}
       alignItems={'flex-start'}
       boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
     >
@@ -60,18 +72,14 @@ export function SwapAmountCard({
             {amount}
           </Text>
           {isBTC ? (
-            <SwapTokenButton
-              tokenImage={tokenImage}
-              tokenDisplay={tokenDisplay}
-              onClick={() => {}}
-            />
+            <SwapTokenButton tokenImage={assetLogo} tokenDisplay={assetSymbol} onClick={() => {}} />
           ) : (
-            <SwapTokenLabel tokenImage={tokenImage} tokenDisplay={tokenDisplay} />
+            <SwapTokenLabel tokenImage={assetLogo} tokenDisplay={assetSymbol} />
           )}
         </HStack>
         <HStack justifyContent={'space-between'} width={'100%'}>
           <Text color={'white.03'} fontSize={'sm'}>
-            {inUSD}
+            {amount}
           </Text>
           <Text color={'white.03'} fontSize={'sm'}>
             Bal. {balance}

src/app/components/swap/swap.tsx

@@ -1,11 +1,35 @@
 import { VStack } from '@chakra-ui/react';
+import { useSwap } from '@hooks/use-swap';
+import Decimal from 'decimal.js';
+
+import { BITCOIN_NETWORK_MAP } from '@shared/constants/bitcoin.constants';
 
 import { SwapAmountCard } from './components/swap-amount-card';
 import { SwapButton } from './components/swap-button';
 import { SwapExtraDetailsCard } from './components/swap-extra-details-card';
 import { SwapHeader } from './components/swap-header';
 
+const assetValueInUSD = (assetAmount: number, currentBitcoinPrice: number): string => {
+  try {
+    return new Decimal(assetAmount).mul(currentBitcoinPrice).toNumber().toLocaleString('en-US');
+  } catch (error) {
+    return '0';
+  }
+};
+
 export function Swap(): React.JSX.Element {
+  const {
+    inputToken,
+    setInputToken,
+    inputAmount,
+    setInputAmount,
+    outputToken,
+    setOutputToken,
+    outputAmount,
+    setOutputAmount,
+    handleSwap,
+  } = useSwap(BITCOIN_NETWORK_MAP[appConfiguration.bitcoinNetwork]);
+
   return (
     <VStack
       alignItems={'flex-start'}
@@ -21,21 +45,19 @@ export function Swap(): React.JSX.Element {
       <SwapHeader />
       <SwapAmountCard
         direction={'From'}
-        amount={120}
-        token={'BTC'}
-        inUSD={8245023.6}
+        amount={inputAmount}
+        asset={inputToken}
+        amountInUSD={assetValueInUSD(inputAmount, 8245023.6)}
         balance={500}
       />
       <SwapAmountCard
         direction={'To'}
-        amount={120}
-        token={'dlcBTC'}
-        inUSD={8245023.6}
-        balance={0}
-        gasFee={670}
+        amount={outputAmount}
+        asset={outputToken}
+        amountInUSD={assetValueInUSD(outputAmount, 8245023.6)}
       />
       <SwapExtraDetailsCard gasFee={670} />
-      <SwapButton onClick={() => {}} />
+      <SwapButton onClick={() => handleSwap()} />
     </VStack>
   );
 }

src/app/hooks/use-swap.ts

@@ -3,6 +3,8 @@ import { useState } from 'react';
 import { SwapParams } from '@gardenfi/core';
 import { Asset, SupportedAssets } from '@gardenfi/orderbook';
 import { useGarden } from '@gardenfi/react-hooks';
+import { isBitcoinAddress } from 'dlc-btc-lib/bitcoin-functions';
+import { Network } from 'dlc-btc-lib/models';
 import { shiftValue } from 'dlc-btc-lib/utilities';
 
 interface QuoteParams {
@@ -32,21 +34,33 @@ const SUPPORTED_ASSETS_IBTC_MAP = {
 };
 
 interface UseSwapReturnType {
-  handleSwap: (inputAmount: number, bitcoinAddress: string) => void;
+  handleSwap: () => void;
+  inputToken: Asset;
   setInputToken: (token: Asset) => void;
+  inputAmount: number;
+  setInputAmount: (amount: number) => void;
+  outputToken: Asset;
   setOutputToken: (token: Asset) => void;
+  outputAmount: number;
+  setOutputAmount: (amount: number) => void;
+  bitcoinAddress: string;
+  setBitcoinAddress: (address: string) => void;
 }
 
-export function useSwap(): UseSwapReturnType {
+export function useSwap(bitcoinNetwork: Network): UseSwapReturnType {
   const { initializeSecretManager, swapAndInitiate, getQuote } = useGarden();
 
   const [inputToken, setInputToken] = useState<Asset>(
     SUPPORTED_ASSETS_IBTC_MAP[SupportedEVMNetworks.ArbitrumSepolia]
   );
+  const [inputAmount, setInputAmount] = useState<number>(0.01);
 
   const [outputToken, setOutputToken] = useState<Asset>(
     SUPPORTED_ASSETS_BTC_MAP[appConfiguration.appEnvironment]
   );
+  const [outputAmount, setOutputAmount] = useState<number>(0.01);
+
+  const [bitcoinAddress, setBitcoinAddress] = useState<string>('');
 
   const initializeSecret = async () => {
     if (!initializeSecretManager) {
@@ -92,7 +106,10 @@ export function useSwap(): UseSwapReturnType {
     return response;
   };
 
-  const handleSwap = async (inputAmount: number, bitcoinAddress: string) => {
+  const handleSwap = async () => {
+    if (!isBitcoinAddress(bitcoinAddress, bitcoinNetwork))
+      throw new Error('Invalid Bitcoin Address');
+
     await initializeSecret();
 
     const sendAmount = shiftValue(inputAmount);
@@ -118,6 +135,14 @@ export function useSwap(): UseSwapReturnType {
   return {
     handleSwap,
     setInputToken,
+    inputToken,
+    inputAmount,
+    setInputAmount,
     setOutputToken,
+    outputToken,
+    outputAmount,
+    setOutputAmount,
+    bitcoinAddress,
+    setBitcoinAddress,
   };
 }

yarn.lock

@@ -1163,10 +1163,6 @@
     eventemitter3 "^5.0.1"
     preact "^10.24.2"
 
-"@ecies/ciphers@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@ecies/ciphers/-/ciphers-0.2.1.tgz#a3119516fb55d27ed2d21c497b1c4988f0b4ca02"
-  integrity sha512-ezMihhjW24VNK/2qQR7lH8xCQY24nk0XHF/kwJ1OuiiY5iEwQXOcKVSy47fSoHPRG8gVGXcK5SgtONDk5xMwtQ==
 "@dfns/sdk-browser@^0.5.9":
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/@dfns/sdk-browser/-/sdk-browser-0.5.9.tgz#073bdc2fabb6b53eafd114a31ebf355be9d66062"
@@ -1185,6 +1181,11 @@
     cross-fetch "3.1.6"
     uuid "9.0.0"
 
+"@ecies/ciphers@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@ecies/ciphers/-/ciphers-0.2.1.tgz#a3119516fb55d27ed2d21c497b1c4988f0b4ca02"
+  integrity sha512-ezMihhjW24VNK/2qQR7lH8xCQY24nk0XHF/kwJ1OuiiY5iEwQXOcKVSy47fSoHPRG8gVGXcK5SgtONDk5xMwtQ==
+
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz"
@@ -5649,10 +5650,8 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dlc-btc-lib@2.5.1:
+"dlc-btc-lib@file:../dlc-btc-lib":
   version "2.5.1"
-  resolved "https://registry.yarnpkg.com/dlc-btc-lib/-/dlc-btc-lib-2.5.1.tgz#b1eb33c0a56a244fcb109da4704854cf8a585c15"
-  integrity sha512-YRfIsfsgzmUcepowZYaLjY/1E2MJbN5zIhEhS1NgiJsDBjNVAiZTHLY7RiX3eNValgFSnsY3IpUyF6piPap72A==
   dependencies:
     "@dfns/sdk" "^0.5.9"
     "@dfns/sdk-browser" "^0.5.9"