Feat/swap UI

package.json

@@ -30,6 +30,9 @@
     "@fontsource/inter": "^5.0.18",
     "@fontsource/onest": "^5.0.3",
     "@fontsource/poppins": "^5.0.8",
+    "@gardenfi/core": "^0.2.0-beta.85",
+    "@gardenfi/orderbook": "^0.2.0-beta.24",
+    "@gardenfi/react-hooks": "0.0.1-beta.111",
     "@gemwallet/api": "^3.8.0",
     "@ledgerhq/hw-app-xrp": "^6.29.4",
     "@ledgerhq/hw-transport-webusb": "^6.28.6",
@@ -46,9 +49,9 @@
     "concurrently": "^8.2.2",
     "d3": "^7.9.0",
     "decimal.js": "^10.4.3",
-    "dlc-btc-lib": "2.4.17",
+    "dlc-btc-lib": "file:../dlc-btc-lib",
     "dotenv": "^16.3.1",
-    "ethers": "5.7.2",
+    "ethers": "6.8.0",
     "formik": "^2.4.5",
     "framer-motion": "^11.2.10",
     "ledger-bitcoin": "^0.2.3",
@@ -64,7 +67,7 @@
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "redux-persist-expire": "^1.1.1",
-    "viem": "2.x",
+    "viem": "^2.20.1",
     "vite-plugin-toml": "^0.7.0",
     "wagmi": "^2.12.2",
     "xrpl": "^4.0.0"

src/app/app.tsx

@@ -2,7 +2,9 @@ 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 { getWagmiConfiguration } from '@functions/configuration.functions';
+import { GardenProvider, environment } from '@gardenfi/react-hooks';
 import { AttestorDetailsPage } from '@pages/attestor-details/attestor-details-page';
 import { AttestorDetailsSelectPage } from '@pages/attestor-details/attestor-details-select-page';
 import { MyVaults } from '@pages/my-vaults/my-vaults';
@@ -31,39 +33,50 @@ export function App(): React.JSX.Element {
   return (
     <WagmiProvider config={wagmiConfiguration}>
       <QueryClientProvider client={queryClient}>
-        <NetworkConfigurationContextProvider>
-          <RippleNetworkConfigurationContextProvider>
-            <EthereumNetworkConfigurationContextProvider>
-              <XRPWalletContextProvider>
-                <BitcoinWalletContextProvider>
-                  <NetworkConnectionContextProvider>
-                    <VaultContextProvider>
-                      <BitcoinTransactionConfirmationsProvider>
-                        <BalanceContextProvider>
-                          <ProofOfReserveContextProvider>
-                            <AppLayout>
-                              <Route path="/" element={<PointsPage />} />
-                              <Route path="/my-vaults" element={<MyVaults />} />
-                              {/* <Route path="/how-it-works" element={<About />} /> */}
-                              <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
-                              <Route path="/attestor-details" element={<AttestorDetailsPage />} />
-                              <Route
-                                path="/attestor-details-select"
-                                element={<AttestorDetailsSelectPage />}
-                              />
-                              <Route path="/merchant-details/:name" element={<MerchantDetails />} />
-                              <Route path="/mint-withdraw" element={<Dashboard />} />
-                            </AppLayout>
-                          </ProofOfReserveContextProvider>
-                        </BalanceContextProvider>
-                      </BitcoinTransactionConfirmationsProvider>
-                    </VaultContextProvider>
-                  </NetworkConnectionContextProvider>
-                </BitcoinWalletContextProvider>
-              </XRPWalletContextProvider>
-            </EthereumNetworkConfigurationContextProvider>
-          </RippleNetworkConfigurationContextProvider>
-        </NetworkConfigurationContextProvider>
+        <GardenProvider
+          config={{
+            store: localStorage,
+            environment: environment.testnet,
+          }}
+        >
+          <NetworkConfigurationContextProvider>
+            <RippleNetworkConfigurationContextProvider>
+              <EthereumNetworkConfigurationContextProvider>
+                <XRPWalletContextProvider>
+                  <BitcoinWalletContextProvider>
+                    <NetworkConnectionContextProvider>
+                      <VaultContextProvider>
+                        <BitcoinTransactionConfirmationsProvider>
+                          <BalanceContextProvider>
+                            <ProofOfReserveContextProvider>
+                              <AppLayout>
+                                <Route path="/" element={<PointsPage />} />
+                                <Route path="/my-vaults" element={<MyVaults />} />
+                                {/* <Route path="/how-it-works" element={<About />} /> */}
+                                <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
+                                <Route path="/attestor-details" element={<AttestorDetailsPage />} />
+                                <Route
+                                  path="/attestor-details-select"
+                                  element={<AttestorDetailsSelectPage />}
+                                />
+                                <Route
+                                  path="/merchant-details/:name"
+                                  element={<MerchantDetails />}
+                                />
+                                <Route path="/mint-withdraw" element={<Dashboard />} />
+                                <Route path="/swap" element={<Swap />} />
+                              </AppLayout>
+                            </ProofOfReserveContextProvider>
+                          </BalanceContextProvider>
+                        </BitcoinTransactionConfirmationsProvider>
+                      </VaultContextProvider>
+                    </NetworkConnectionContextProvider>
+                  </BitcoinWalletContextProvider>
+                </XRPWalletContextProvider>
+              </EthereumNetworkConfigurationContextProvider>
+            </RippleNetworkConfigurationContextProvider>
+          </NetworkConfigurationContextProvider>
+        </GardenProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

src/app/components/mint-unmint/components/burn-transaction-screen/burn-transaction-screen.tsx

@@ -42,7 +42,7 @@ export function BurnTokenTransactionForm({
 
   const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
 
-  const signer = useEthersSigner();
+  const { getEthersSigner } = useEthersSigner();
 
   const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -60,8 +60,11 @@ export function BurnTokenTransactionForm({
         if (currentRisk === 'High') throw new Error('Risk Level is too high');
         const formattedWithdrawAmount = BigInt(shiftValue(withdrawAmount));
 
+        const signer = await getEthersSigner();
+        if (!signer) throw new Error('No signer available');
+
         await withdraw(
-          ethereumNetworkConfiguration.dlcManagerContract.connect(signer!),
+          ethereumNetworkConfiguration.dlcManagerContract.connect(signer),
           currentVault.uuid,
           formattedWithdrawAmount
         );

src/app/components/mint-unmint/components/setup-vault-screen/setup-vault-screen.tsx

@@ -24,7 +24,7 @@ export function SetupVaultScreen(): React.JSX.Element {
   const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
   const { rippleNetworkConfiguration } = useContext(RippleNetworkConfigurationContext);
 
-  const signer = useEthersSigner();
+  const { getEthersSigner } = useEthersSigner();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -40,7 +40,7 @@ export function SetupVaultScreen(): React.JSX.Element {
           );
           break;
         case NetworkType.EVM:
-          await setupVault(ethereumNetworkConfiguration.dlcManagerContract.connect(signer!));
+          await setupVault(ethereumNetworkConfiguration.dlcManagerContract.connect());
           break;
         default:
           throw new Error('Unsupported Network Type');

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

@@ -0,0 +1,83 @@
+import { HStack, Text, VStack } from '@chakra-ui/react';
+
+import { SwapTokenButton } from './swap-token-button';
+import { SwapTokenLabel } from './swap-token-label';
+
+interface SwapAmountCardProps {
+  direction: string;
+  amount: number;
+  token: string;
+  inUSD: number;
+  balance: number;
+  gasFee?: number;
+}
+
+export function SwapAmountCard({
+  direction,
+  amount,
+  token,
+  inUSD,
+  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';
+
+  return (
+    <VStack
+      p={'15px'}
+      w={'100%'}
+      bg={'background.container.02'}
+      borderRadius={'md'}
+      border={'1px solid'}
+      spacing={'15px'}
+      borderColor={borderColor}
+      alignItems={'flex-start'}
+      boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+    >
+      <Text color={'white'} fontWeight={'600'}>
+        {direction}
+      </Text>
+      <VStack
+        p={'15px'}
+        w={'100%'}
+        bg={'background.content.02'}
+        borderRadius={'md'}
+        border={'1px solid'}
+        spacing={'15px'}
+        borderColor={'white.03'}
+        alignItems={'flex-start'}
+        boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+      >
+        <HStack w={'100%'} justifyContent={'space-between'}>
+          <Text
+            color={'white'}
+            fontWeight={'800'}
+            fontSize={'x-large'}
+            textShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+          >
+            {amount}
+          </Text>
+          {isBTC ? (
+            <SwapTokenButton
+              tokenImage={tokenImage}
+              tokenDisplay={tokenDisplay}
+              onClick={() => {}}
+            />
+          ) : (
+            <SwapTokenLabel tokenImage={tokenImage} tokenDisplay={tokenDisplay} />
+          )}
+        </HStack>
+        <HStack justifyContent={'space-between'} width={'100%'}>
+          <Text color={'white.03'} fontSize={'sm'}>
+            {inUSD}
+          </Text>
+          <Text color={'white.03'} fontSize={'sm'}>
+            Bal. {balance}
+          </Text>
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+}

src/app/components/swap/components/swap-button.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Button } from '@chakra-ui/react';
+
+interface SwapButtonProps {
+  onClick: () => void;
+}
+
+export function SwapButton({ onClick }: SwapButtonProps): React.JSX.Element {
+  return (
+    <Button onClick={onClick} w={'100%'} boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}>
+      Swap
+    </Button>
+  );
+}

src/app/components/swap/components/swap-extra-details-card.tsx

@@ -0,0 +1,45 @@
+import { HStack, Text, VStack } from '@chakra-ui/react';
+
+interface SwapExtraDetailsCardProps {
+  gasFee: number;
+}
+
+export function SwapExtraDetailsCard({ gasFee }: SwapExtraDetailsCardProps): React.JSX.Element {
+  return (
+    <VStack
+      p={'15px'}
+      w={'100%'}
+      bg={'background.container.02'}
+      borderRadius={'md'}
+      border={'1px dashed'}
+      spacing={'15px'}
+      borderColor={'white.02'}
+      alignItems={'flex-start'}
+    >
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <Text color={'white.02'} fontSize={'sm'}>
+          Gas Fee
+        </Text>
+        <Text color={'white.02'} fontSize={'sm'} fontWeight={600}>
+          {gasFee}
+        </Text>
+      </HStack>
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <Text color={'white.02'} fontSize={'sm'}>
+          Rate
+        </Text>
+        <Text color={'white.02'} fontSize={'sm'} fontWeight={600}>
+          1 BTC = 1 dlcBTC
+        </Text>
+      </HStack>
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <Text color={'white.02'} fontSize={'sm'}>
+          Slippage Tolerance
+        </Text>
+        <Text color={'white.02'} fontSize={'sm'} fontWeight={600}>
+          Auto
+        </Text>
+      </HStack>
+    </VStack>
+  );
+}

src/app/components/swap/components/swap-header.tsx

@@ -0,0 +1,18 @@
+import { HStack, Text } from '@chakra-ui/react';
+
+import { SwapNetworksMenu } from './swap-networks-menu';
+import { SwapSettingsMenu } from './swap-settings-menu';
+
+export function SwapHeader(): React.JSX.Element {
+  return (
+    <HStack w={'100%'} justifyContent={'space-between'}>
+      <Text color={'white'} fontSize={'xx-large'} fontWeight={'600'}>
+        Swap
+      </Text>
+      <HStack>
+        <SwapNetworksMenu isMenuOpen={false} setIsMenuOpen={() => {}} />
+        <SwapSettingsMenu isMenuOpen={false} setIsMenuOpen={() => {}} />
+      </HStack>
+    </HStack>
+  );
+}