Feat/xrpl

config.devnet.json

@@ -1,6 +1,6 @@
 {
   "appEnvironment": "devnet",
-  "coordinatorURL": "https://devnet.dlc.link/attestor-1",
+  "coordinatorURL": "https://devnet-ripple.dlc.link/attestor-1",
   "enabledEthereumNetworkIDs": ["421614", "84532", "11155111"],
   "bitcoinNetwork": "regtest",
   "bitcoinNetworkIndex": 1,

netlify/functions/fetch-attestor-group-public-key.ts

@@ -0,0 +1,38 @@
+import { Handler } from '@netlify/functions';
+import { Event, ethers } from 'ethers';
+
+import { DetailedEvent } from '../../src/shared/models/ethereum-models';
+
+const handler: Handler = async event => {
+  try {
+    const getAttestorGroupPublicKeyEndpoint = `https://devnet-ripple.dlc.link/attestor-1/tss/get-extended-group-publickey`;
+    const response = await fetch(getAttestorGroupPublicKeyEndpoint, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
+    });
+
+    if (!response.ok) {
+      return {
+        statusCode: 500,
+        body: JSON.stringify({
+          message: `Failed to get Attestor Group Public Key`,
+        }),
+      };
+    }
+    const responseData = await response.text();
+
+    return {
+      statusCode: 200,
+      body: responseData,
+    };
+  } catch (error: any) {
+    return {
+      statusCode: 500,
+      body: JSON.stringify({
+        message: `Failed to get Attestor Group Public Key: ${error.message}`,
+      }),
+    };
+  }
+};
+
+export { handler };

netlify/functions/setup-xrpl-vault.ts

@@ -0,0 +1,57 @@
+import { Handler } from '@netlify/functions';
+
+const handler: Handler = async event => {
+  try {
+    if (!event.queryStringParameters) {
+      return {
+        statusCode: 400,
+        body: JSON.stringify({
+          message: 'No Parameters were provided',
+        }),
+      };
+    }
+
+    if (!event.queryStringParameters.userXRPLAddress) {
+      return {
+        statusCode: 400,
+        body: JSON.stringify({
+          message: 'User Address was not provided',
+        }),
+      };
+    }
+    const requestBody = JSON.stringify({
+      user_xrpl_address: event.queryStringParameters.userXRPLAddress,
+    });
+
+    const setupXRPLVaultEndpoint = `https://devnet-ripple.dlc.link/attestor-1/app/setup-xrpl-vault`;
+    const response = await fetch(setupXRPLVaultEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
+      body: requestBody,
+    });
+
+    if (!response.ok) {
+      return {
+        statusCode: 500,
+        body: JSON.stringify({
+          message: `Failed to setup vault`,
+        }),
+      };
+    }
+    const responseData = await response.json();
+
+    return {
+      statusCode: 200,
+      body: responseData.uuid,
+    };
+  } catch (error: any) {
+    return {
+      statusCode: 500,
+      body: JSON.stringify({
+        message: `Failed to get Attestor Group Public Key: ${error.message}`,
+      }),
+    };
+  }
+};
+
+export { handler };

package.json

@@ -44,7 +44,7 @@
     "concurrently": "^8.2.2",
     "d3": "^7.9.0",
     "decimal.js": "^10.4.3",
-    "dlc-btc-lib": "2.2.7",
+    "dlc-btc-lib": "2.3.0",
     "dotenv": "^16.3.1",
     "ethers": "5.7.2",
     "formik": "^2.4.5",
@@ -64,7 +64,8 @@
     "redux-persist-expire": "^1.1.1",
     "viem": "2.x",
     "vite-plugin-toml": "^0.7.0",
-    "wagmi": "^2.12.2"
+    "wagmi": "^2.12.2",
+    "xrpl": "^4.0.0"
   },
   "devDependencies": {
     "@ls-lint/ls-lint": "^2.2.2",

src/app/app.tsx

@@ -14,6 +14,7 @@ import { BitcoinWalletContextProvider } from '@providers/bitcoin-wallet-context-
 import { EthereumNetworkConfigurationContextProvider } from '@providers/ethereum-network-configuration.provider';
 import { EthereumObserverProvider } from '@providers/ethereum-observer-provider';
 import { ProofOfReserveContextProvider } from '@providers/proof-of-reserve-context-provider';
+import { RippleWalletContextProvider } from '@providers/ripple-user-wallet-context-provider';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
 
@@ -29,31 +30,33 @@ export function App(): React.JSX.Element {
     <WagmiProvider config={wagmiConfiguration}>
       <QueryClientProvider client={queryClient}>
         <EthereumNetworkConfigurationContextProvider>
-          <BitcoinWalletContextProvider>
-            <VaultContextProvider>
-              <EthereumObserverProvider>
-                <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>
-              </EthereumObserverProvider>
-            </VaultContextProvider>
-          </BitcoinWalletContextProvider>
+          <RippleWalletContextProvider>
+            <BitcoinWalletContextProvider>
+              <VaultContextProvider>
+                <EthereumObserverProvider>
+                  <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>
+                </EthereumObserverProvider>
+              </VaultContextProvider>
+            </BitcoinWalletContextProvider>
+          </RippleWalletContextProvider>
         </EthereumNetworkConfigurationContextProvider>
       </QueryClientProvider>
     </WagmiProvider>

src/app/components/account/account.tsx

@@ -1,32 +1,37 @@
+import { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button, HStack } from '@chakra-ui/react';
 import { AccountMenu } from '@components/account/components/account-menu';
+import { RippleWalletContext } from '@providers/ripple-user-wallet-context-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { modalActions } from '@store/slices/modal/modal.actions';
-import { useAccount, useDisconnect } from 'wagmi';
+
+// import { modalActions } from '@store/slices/modal/modal.actions';
+// import { useAccount, useDisconnect } from 'wagmi';
 
 export function Account(): React.JSX.Element {
   const dispatch = useDispatch();
 
-  const { address, connector, isConnected } = useAccount();
-  const { disconnect } = useDisconnect();
+  // const { address, connector } = useAccount();
+  // const { disconnect } = useDisconnect();
+  const { isRippleWalletInitialized, resetRippleWallet } = useContext(RippleWalletContext);
 
   function onConnectWalletClick(): void {
     dispatch(modalActions.toggleSelectWalletModalVisibility());
   }
 
   function onDisconnectWalletClick(): void {
-    disconnect();
+    resetRippleWallet();
     dispatch(mintUnmintActions.resetMintUnmintState());
   }
 
   return (
     <HStack w={'275px'}>
-      {isConnected ? (
+      {isRippleWalletInitialized ? (
         <AccountMenu
-          address={address}
-          wagmiConnector={connector}
+          // address={address}
+          // wagmiConnector={connector}
           handleDisconnectWallet={() => onDisconnectWalletClick()}
         />
       ) : (

src/app/components/account/components/account-menu.tsx

@@ -1,35 +1,32 @@
+import { useContext } from 'react';
+
 import { ChevronDownIcon } from '@chakra-ui/icons';
-import { HStack, Image, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import { HStack, Image, Menu, MenuButton, MenuItem, MenuList, Stack, Text } from '@chakra-ui/react';
+import { RippleWalletContext } from '@providers/ripple-user-wallet-context-provider';
 import { truncateAddress } from 'dlc-btc-lib/utilities';
-import { Connector } from 'wagmi';
+
+// import { Connector } from 'wagmi';
 
 interface AccountMenuProps {
-  address?: string;
-  wagmiConnector?: Connector;
+  // address?: string;
+  // wagmiConnector?: Connector;
   handleDisconnectWallet: () => void;
 }
 
 export function AccountMenu({
-  address,
-  wagmiConnector,
+  // address,
+  // wagmiConnector,
   handleDisconnectWallet,
 }: AccountMenuProps): React.JSX.Element | false {
-  if (!address || !wagmiConnector) return false;
+  const { rippleWallet } = useContext(RippleWalletContext);
   return (
     <Menu variant={'account'}>
       <MenuButton>
         <HStack justifyContent={'space-evenly'}>
-          <Image
-            p={'2.5px'}
-            src={
-              wagmiConnector.name === 'WalletConnect'
-                ? './images/logos/walletconnect.svg'
-                : wagmiConnector.icon
-            }
-            alt={wagmiConnector.name}
-            boxSize={'35px'}
-          />
-          <Text>{truncateAddress(address)}</Text>
+          <Stack bg={'white.01'} borderRadius={'full'} p={'5px'}>
+            <Image p={'2.5px'} src={'./images/logos/xpr-logo.svg'} alt={'xrpl'} boxSize={'25px'} />
+          </Stack>
+          <Text>{truncateAddress(rippleWallet?.classicAddress!)}</Text>
           <ChevronDownIcon boxSize={'35px'} color={'white'} />
         </HStack>
       </MenuButton>

src/app/components/header/header.tsx

@@ -48,7 +48,9 @@ export function Header(): React.JSX.Element {
           <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
         </HStack>
         <HStack>
-          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          {(0 + 1 === 2) === true && (
+            <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          )}
           <Account />
         </HStack>
       </HeaderLayout>