feat: add working ledger wallet for xrpl

config.testnet.json

@@ -1,6 +1,6 @@
 {
   "appEnvironment": "testnet",
-  "coordinatorURL": "https://testnet-ripple.dlc.link/attestor-1",
+  "coordinatorURL": "http://localhost:8811",
   "enabledEthereumNetworkIDs": ["421614", "84532", "11155111"],
   "enabledRippleNetworkIDs": ["1"],
   "bitcoinNetwork": "testnet",

netlify/functions/submit-xrpl-vault-request.ts

@@ -34,16 +34,12 @@ const handler: Handler = async (event: HandlerEvent) => {
     const coordinatorURL = event.queryStringParameters.coordinatorURL;
     const userXRPLAddress = event.queryStringParameters.userXRPLAddress;
 
-    console.log('coordinatorURL', coordinatorURL);
-    console.log('userXRPLAddress', userXRPLAddress);
-
     await submitSetupXRPLVaultRequest(coordinatorURL, userXRPLAddress);
 
     return {
       statusCode: 200,
     };
   } catch (error: any) {
-    console.log('IDE NEEEEEEZZZZZZZZ', error);
     return {
       statusCode: 500,
       body: JSON.stringify({

src/app/app.tsx

@@ -15,6 +15,7 @@ import { EthereumNetworkConfigurationContextProvider } from '@providers/ethereum
 import { NetworkConfigurationContextProvider } from '@providers/network-configuration.provider';
 import { ProofOfReserveContextProvider } from '@providers/proof-of-reserve-context-provider';
 import { RippleNetworkConfigurationContextProvider } from '@providers/ripple-network-configuration.provider';
+import { XRPWalletContextProvider } from '@providers/xrp-wallet-context-provider';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
 
@@ -32,31 +33,31 @@ export function App(): React.JSX.Element {
         <NetworkConfigurationContextProvider>
           <RippleNetworkConfigurationContextProvider>
             <EthereumNetworkConfigurationContextProvider>
-              {/* <XRPWalletContextProvider> */}
-              <BitcoinWalletContextProvider>
-                <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>
-              </BitcoinWalletContextProvider>
-              {/* </XRPWalletContextProvider> */}
+              <XRPWalletContextProvider>
+                <BitcoinWalletContextProvider>
+                  <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>
+                </BitcoinWalletContextProvider>
+              </XRPWalletContextProvider>
             </EthereumNetworkConfigurationContextProvider>
           </RippleNetworkConfigurationContextProvider>
         </NetworkConfigurationContextProvider>

src/app/components/account/account.tsx

@@ -3,10 +3,10 @@ import { useDispatch } from 'react-redux';
 
 import { Button, HStack } from '@chakra-ui/react';
 import { AccountMenu } from '@components/account/components/account-menu';
-import { RippleWallet } from '@components/modals/select-wallet-modal/select-wallet-modal';
 import { useNetworkConnection } from '@hooks/use-connected';
+import { XRPWallet, xrpWallets } from '@models/wallet';
 import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
-import { RippleNetworkConfigurationContext } from '@providers/ripple-network-configuration.provider';
+import { XRPWalletContext } from '@providers/xrp-wallet-context-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { modalActions } from '@store/slices/modal/modal.actions';
 import { Connector, useAccount, useDisconnect } from 'wagmi';
@@ -19,18 +19,23 @@ export function Account(): React.JSX.Element {
 
   const { address: ethereumUserAddress, connector: ethereumWallet } = useAccount();
   const { disconnect: disconnectEthereumWallet } = useDisconnect();
-  const { rippleUserAddress, rippleWallet } = useContext(RippleNetworkConfigurationContext);
+  const {
+    userAddress: rippleUserAddress,
+    xrpWalletType,
+    resetXRPWalletContext,
+  } = useContext(XRPWalletContext);
 
-  function getWalletInformation():
-    | { address: string; wallet: RippleWallet | Connector }
-    | undefined {
+  function getWalletInformation(): { address: string; wallet: XRPWallet | Connector } | undefined {
     switch (networkType) {
       case 'evm':
         if (!ethereumUserAddress || !ethereumWallet) return undefined;
         return { address: ethereumUserAddress, wallet: ethereumWallet };
       case 'xrpl':
         if (!rippleUserAddress) return undefined;
-        return { address: rippleUserAddress, wallet: rippleWallet! };
+        return {
+          address: rippleUserAddress,
+          wallet: xrpWallets.find(xrpWallet => xrpWallet.id === xrpWalletType)!,
+        };
       default:
         throw new Error('Invalid Network Type');
     }
@@ -41,17 +46,17 @@ export function Account(): React.JSX.Element {
   }
 
   function onDisconnectWalletClick(): void {
-    // switch (networkType) {
-    //   case 'evm':
-    //     disconnectEthereumWallet();
-    //     break;
-    //   case 'xrpl':
-    //     setIsRippleWalletConnected(false);
-    //     break;
-    //   default:
-    //     break;
-    // }
-    // dispatch(mintUnmintActions.resetMintUnmintState());
+    switch (networkType) {
+      case 'evm':
+        disconnectEthereumWallet();
+        break;
+      case 'xrpl':
+        resetXRPWalletContext();
+        break;
+      default:
+        break;
+    }
+    dispatch(mintUnmintActions.resetMintUnmintState());
   }
 
   return (

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

@@ -9,13 +9,13 @@ import {
   Text,
   useBreakpointValue,
 } from '@chakra-ui/react';
-import { RippleWallet } from '@components/modals/select-wallet-modal/select-wallet-modal';
+import { XRPWallet } from '@models/wallet';
 import { truncateAddress } from 'dlc-btc-lib/utilities';
 import { Connector } from 'wagmi';
 
 interface AccountMenuProps {
   address?: string;
-  wallet?: Connector | RippleWallet;
+  wallet?: Connector | XRPWallet;
   handleDisconnectWallet: () => void;
 }
 

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

@@ -5,22 +5,18 @@ import { VStack, useToast } from '@chakra-ui/react';
 import { VaultTransactionForm } from '@components/transaction-screen/transaction-screen.transaction-form/components/transaction-screen.transaction-form/transaction-screen.transaction-form';
 import { Vault } from '@components/vault/vault';
 import { useEthersSigner } from '@functions/configuration.functions';
+import { useXRPLLedger } from '@hooks/use-xrpl-ledger';
 import { BitcoinWalletContext } from '@providers/bitcoin-wallet-context-provider';
 import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
 import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
-import { RippleNetworkConfigurationContext } from '@providers/ripple-network-configuration.provider';
+import { XRPWalletContext } from '@providers/xrp-wallet-context-provider';
+// import { XRPWalletContext } from '@providers/xrp-wallet-context-provider';
 import { RootState } from '@store/index';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { withdraw } from 'dlc-btc-lib/ethereum-functions';
-import {
-  connectRippleClient,
-  createCheck,
-  getRippleClient,
-  getRippleWallet,
-} from 'dlc-btc-lib/ripple-functions';
+import { getRippleClient, getRippleVault } from 'dlc-btc-lib/ripple-functions';
 import { shiftValue } from 'dlc-btc-lib/utilities';
-import { decode } from 'ripple-binary-codec';
 
 interface BurnTokenTransactionFormProps {
   isBitcoinWalletLoading: [boolean, string];
@@ -40,9 +36,8 @@ export function BurnTokenTransactionForm({
 
   const { networkType } = useContext(NetworkConfigurationContext);
   const { bitcoinWalletContextState } = useContext(BitcoinWalletContext);
-  const { rippleUserAddress, rippleClient, signTransaction } = useContext(
-    RippleNetworkConfigurationContext
-  );
+  const { xrpHandler } = useContext(XRPWalletContext);
+  const { handleCreateCheck, connectLedgerWallet, isLoading } = useXRPLLedger();
 
   const { bitcoinPrice, depositLimit } = useContext(ProofOfReserveContext);
 
@@ -60,21 +55,16 @@ export function BurnTokenTransactionForm({
       if (!currentVault) return;
       setIsSubmitting(true);
       if (networkType === 'xrpl') {
-        await connectRippleClient(rippleClient);
-        const formattedWithdrawAmount = BigInt(shiftValue(withdrawAmount));
-
-        const check = await createCheck(
+        const rippleClient = getRippleClient(appConfiguration.xrplWebsocket);
+        const vault = await getRippleVault(
           rippleClient,
-          rippleUserAddress!,
           appConfiguration.rippleIssuerAddress,
-          undefined,
-          formattedWithdrawAmount.toString(),
-          currentVault.uuid.slice(2)
+          currentVault.uuid
         );
-        const signedCheck = await signTransaction(check);
-        console.log('signedCheck', signedCheck);
-        const submitResponse = await rippleClient.submitAndWait(signedCheck);
-        console.log('Check submitted', submitResponse);
+        await connectLedgerWallet("44'/144'/0'/0/0");
+
+        if (!xrpHandler) throw new Error('No XRP Handler');
+        await handleCreateCheck(xrpHandler, vault, withdrawAmount);
       } else if (networkType === 'evm') {
         const currentRisk = await fetchUserEthereumAddressRiskLevel();
         if (currentRisk === 'High') throw new Error('Risk Level is too high');
@@ -115,7 +105,11 @@ export function BurnTokenTransactionForm({
         handleButtonClick={handleButtonClick}
         depositLimit={depositLimit}
         bitcoinWalletContextState={bitcoinWalletContextState}
-        isBitcoinWalletLoading={isBitcoinWalletLoading}
+        isBitcoinWalletLoading={
+          currentVault?.valueLocked === currentVault?.valueMinted
+            ? isLoading
+            : isBitcoinWalletLoading
+        }
         userEthereumAddressRiskLevel={userEthereumAddressRiskLevel}
         isUserEthereumAddressRiskLevelLoading={isUserEthereumAddressRiskLevelLoading}
         handleCancelButtonClick={handleCancel}

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

@@ -1,20 +1,23 @@
 import { useContext, useState } from 'react';
 
 import { Button, VStack, useToast } from '@chakra-ui/react';
+import { TransactionScreenWalletInformation } from '@components/transaction-screen/transaction-screen.transaction-form/components/transaction-screen.transaction-form/components/transaction-screen.transaction-form.wallet-information';
 import { submitSetupXRPLVaultRequest } from '@functions/attestor-request.functions';
 import { useEthersSigner } from '@functions/configuration.functions';
+import { useXRPLLedger } from '@hooks/use-xrpl-ledger';
 import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
 import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
-import { RippleNetworkConfigurationContext } from '@providers/ripple-network-configuration.provider';
+import { XRPWalletContext } from '@providers/xrp-wallet-context-provider';
 import { setupVault } from 'dlc-btc-lib/ethereum-functions';
-import { getRippleWallet } from 'dlc-btc-lib/ripple-functions';
 
 import { SetupVaultScreenVaultGraphics } from './components/setup-vault-screen.vault-graphics';
 
 export function SetupVaultScreen(): React.JSX.Element {
   const toast = useToast();
   const { networkType } = useContext(NetworkConfigurationContext);
-  const { rippleUserAddress } = useContext(RippleNetworkConfigurationContext);
+  const { userAddress: rippleUserAddress } = useContext(XRPWalletContext);
+  const { xrpHandler } = useContext(XRPWalletContext);
+  const { handleSetTrustLine, connectLedgerWallet, isLoading } = useXRPLLedger();
 
   const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
 
@@ -26,6 +29,8 @@ export function SetupVaultScreen(): React.JSX.Element {
     try {
       setIsSubmitting(true);
       if (networkType === 'xrpl') {
+        await connectLedgerWallet("44'/144'/0'/0/1");
+        await handleSetTrustLine(xrpHandler!);
         await submitSetupXRPLVaultRequest(rippleUserAddress!);
       } else if (networkType === 'evm') {
         await setupVault(ethereumNetworkConfiguration.dlcManagerContract.connect(signer!));
@@ -55,6 +60,7 @@ export function SetupVaultScreen(): React.JSX.Element {
       >
         Create Vault
       </Button>
+      <TransactionScreenWalletInformation isBitcoinWalletLoading={isLoading} />
     </VStack>
   );
 }

src/app/components/modals/components/modal-container.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { SelectWalletModal } from '@components/modals/select-wallet-modal/select-wallet-modal';
@@ -28,10 +27,6 @@ export function ModalContainer(): React.JSX.Element {
     dispatch(actionCreator());
   };
 
-  useEffect(() => {
-    console.log(isSuccesfulFlowModalOpen);
-  }, [isSuccesfulFlowModalOpen]);
-
   return (
     <>
       <SelectWalletModal

src/app/components/modals/select-wallet-modal/components/select-ripple-wallet-menu.tsx

@@ -1,9 +1,8 @@
 import { Box, Button, HStack, Image, Text } from '@chakra-ui/react';
-
-import { RippleWallet } from '../select-wallet-modal';
+import { XRPWallet } from '@models/wallet';
 
 interface SelectRippleWalletMenuProps {
-  rippleWallet: RippleWallet;
+  rippleWallet: XRPWallet;
   handleConnectWallet: (id: string) => void;
 }