feat: add gem wallet as xrp wallet option

DLC-link · Oct 16, 2024 · ca81126 · ca81126
1 parent 07215b7
commit ca81126
Show file tree

Hide file tree

Showing 25 changed files with 395 additions and 151 deletions.
diff --git a/config.testnet.json b/config.testnet.json
@@ -1,6 +1,6 @@
 {
   "appEnvironment": "testnet",
-  "coordinatorURL": "http://localhost:8811",
+  "coordinatorURL": "https://testnet-ripple.dlc.link/attestor-1",
   "enabledEthereumNetworkIDs": ["421614", "84532", "11155111"],
   "enabledRippleNetworkIDs": ["1"],
   "bitcoinNetwork": "testnet",
@@ -10,7 +10,7 @@
   "bitcoinBlockchainExplorerURL": "https://mempool.space/testnet",
   "bitcoinBlockchainFeeEstimateURL": "https://mempool.space/testnet/api/v1/fees/recommended",
   "rippleIssuerAddress": "ra9epzthPkNXykgfadCwu8D7mtajj8DVCP",
-  "xrplWebsocket": "wss://s.altnet.rippletest.net:51233",
+  "xrplWebsocket": "wss://testnet.xrpl-labs.com/",
   "ledgerApp": "Bitcoin Test",
   "merchants": [
     {

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@fontsource/inter": "^5.0.18",
     "@fontsource/onest": "^5.0.3",
     "@fontsource/poppins": "^5.0.8",
+    "@gemwallet/api": "^3.8.0",
     "@ledgerhq/hw-app-xrp": "^6.29.4",
     "@ledgerhq/hw-transport-webusb": "^6.28.6",
     "@netlify/functions": "^2.8.1",
@@ -45,7 +46,7 @@
     "concurrently": "^8.2.2",
     "d3": "^7.9.0",
     "decimal.js": "^10.4.3",
-    "dlc-btc-lib": "file:../dlc-btc-lib",
+    "dlc-btc-lib": "^2.4.0",
     "dotenv": "^16.3.1",
     "ethers": "5.7.2",
     "formik": "^2.4.5",

diff --git a/public/images/logos/gem-wallet-logo.svg b/public/images/logos/gem-wallet-logo.svg
diff --git a/public/images/logos/xpr-logo.svg → public/images/logos/xrp-logo.svg b/public/images/logos/xpr-logo.svg → public/images/logos/xrp-logo.svg
diff --git a/...app/components/mint-unmint/components/burn-transaction-screen/burn-transaction-screen.tsx b/...app/components/mint-unmint/components/burn-transaction-screen/burn-transaction-screen.tsx
@@ -5,17 +5,14 @@ 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 { useXRPWallet } from '@hooks/use-xrp-wallet';
 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 { 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 { getRippleClient, getRippleVault } from 'dlc-btc-lib/ripple-functions';
 import { shiftValue } from 'dlc-btc-lib/utilities';
 
 interface BurnTokenTransactionFormProps {
@@ -36,8 +33,7 @@ export function BurnTokenTransactionForm({
 
   const { networkType } = useContext(NetworkConfigurationContext);
   const { bitcoinWalletContextState } = useContext(BitcoinWalletContext);
-  const { xrpHandler } = useContext(XRPWalletContext);
-  const { handleCreateCheck, connectLedgerWallet, isLoading } = useXRPLLedger();
+  const { handleCreateCheck, isLoading } = useXRPWallet();
 
   const { bitcoinPrice, depositLimit } = useContext(ProofOfReserveContext);
 
@@ -55,16 +51,7 @@ export function BurnTokenTransactionForm({
       if (!currentVault) return;
       setIsSubmitting(true);
       if (networkType === 'xrpl') {
-        const rippleClient = getRippleClient(appConfiguration.xrplWebsocket);
-        const vault = await getRippleVault(
-          rippleClient,
-          appConfiguration.rippleIssuerAddress,
-          currentVault.uuid
-        );
-        await connectLedgerWallet("44'/144'/0'/0/0");
-
-        if (!xrpHandler) throw new Error('No XRP Handler');
-        await handleCreateCheck(xrpHandler, vault, withdrawAmount);
+        await handleCreateCheck(currentVault.uuid, withdrawAmount);
       } else if (networkType === 'evm') {
         const currentRisk = await fetchUserEthereumAddressRiskLevel();
         if (currentRisk === 'High') throw new Error('Risk Level is too high');

diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx
@@ -1,8 +1,10 @@
+import { useContext } from 'react';
 import { useSelector } from 'react-redux';
 
 import { HStack } from '@chakra-ui/react';
 import { usePSBT } from '@hooks/use-psbt';
 import { useRisk } from '@hooks/use-risk';
+import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
 import { RootState } from '@store/index';
 
 import { DepositTransactionScreen } from '../deposit-transaction-screen/deposit-transaction-screen';
@@ -13,6 +15,7 @@ import { MintLayout } from './components/mint.layout';
 
 export function Mint(): React.JSX.Element {
   const { handleSignFundingTransaction, isLoading: isBitcoinWalletLoading } = usePSBT();
+  const { networkType } = useContext(NetworkConfigurationContext);
 
   const { mintStep } = useSelector((state: RootState) => state.mintunmint);
   const { risk, fetchUserAddressRisk, isLoading } = useRisk();
@@ -21,7 +24,7 @@ export function Mint(): React.JSX.Element {
     <MintLayout>
       <ProgressTimeline variant={'mint'} currentStep={mintStep[0]} />
       <HStack w={'100%'} alignItems={'start'} justifyContent={'space-between'}>
-        <Walkthrough flow={'mint'} currentStep={mintStep[0]} />
+        <Walkthrough flow={'mint'} currentStep={mintStep[0]} networkType={networkType} />
         {[0].includes(mintStep[0]) && <SetupVaultScreen />}
         {[1, 2].includes(mintStep[0]) && (
           <DepositTransactionScreen

diff --git a/src/app/components/mint-unmint/components/setup-vault-screen/setup-vault-screen.tsx b/src/app/components/mint-unmint/components/setup-vault-screen/setup-vault-screen.tsx
@@ -4,7 +4,7 @@ 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 { useXRPWallet } from '@hooks/use-xrp-wallet';
 import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
 import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
 import { XRPWalletContext } from '@providers/xrp-wallet-context-provider';
@@ -16,8 +16,7 @@ export function SetupVaultScreen(): React.JSX.Element {
   const toast = useToast();
   const { networkType } = useContext(NetworkConfigurationContext);
   const { userAddress: rippleUserAddress } = useContext(XRPWalletContext);
-  const { xrpHandler } = useContext(XRPWalletContext);
-  const { handleSetTrustLine, connectLedgerWallet, isLoading } = useXRPLLedger();
+  const { handleSetTrustLine, isLoading } = useXRPWallet();
 
   const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
 
@@ -29,8 +28,7 @@ export function SetupVaultScreen(): React.JSX.Element {
     try {
       setIsSubmitting(true);
       if (networkType === 'xrpl') {
-        await connectLedgerWallet("44'/144'/0'/0/1");
-        await handleSetTrustLine(xrpHandler!);
+        await handleSetTrustLine();
         await submitSetupXRPLVaultRequest(rippleUserAddress!);
       } else if (networkType === 'evm') {
         await setupVault(ethereumNetworkConfiguration.dlcManagerContract.connect(signer!));

diff --git a/src/app/components/mint-unmint/components/unmint/unmint.tsx b/src/app/components/mint-unmint/components/unmint/unmint.tsx
@@ -1,8 +1,10 @@
+import { useContext } from 'react';
 import { useSelector } from 'react-redux';
 
 import { HStack } from '@chakra-ui/react';
 import { usePSBT } from '@hooks/use-psbt';
 import { useRisk } from '@hooks/use-risk';
+import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
 import { RootState } from '@store/index';
 
 import { ProgressTimeline } from '../progress-timeline/progress-timeline';
@@ -13,6 +15,7 @@ import { WithdrawScreen } from './components/withdraw-screen';
 
 export function Unmint(): React.JSX.Element {
   const { handleSignWithdrawTransaction, isLoading: isBitcoinWalletLoading } = usePSBT();
+  const { networkType } = useContext(NetworkConfigurationContext);
 
   const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
   const { risk, fetchUserAddressRisk, isLoading } = useRisk();
@@ -21,7 +24,7 @@ export function Unmint(): React.JSX.Element {
     <UnmintLayout>
       <ProgressTimeline variant={'unmint'} currentStep={unmintStep[0]} />
       <HStack w={'100%'} alignItems={'start'} justifyContent={'space-between'}>
-        <Walkthrough flow={'unmint'} currentStep={unmintStep[0]} />
+        <Walkthrough flow={'unmint'} currentStep={unmintStep[0]} networkType={networkType} />
         {[0].includes(unmintStep[0]) && (
           <UnmintVaultSelector
             userEthereumAddressRiskLevel={risk!}

diff --git a/...p/components/mint-unmint/components/walkthrough/components/walkthrough-blockchain-tag.tsx b/...p/components/mint-unmint/components/walkthrough/components/walkthrough-blockchain-tag.tsx
@@ -1,18 +1,22 @@
 import { HStack, Image, Text } from '@chakra-ui/react';
 
 const blockchainTagPropertyMap = {
-  ethereum: {
+  evm: {
     logo: '/images/logos/ethereum-logo.svg',
     text: 'ON ETHEREUM',
   },
   bitcoin: {
     logo: '/images/logos/bitcoin-logo.svg',
     text: 'ON BITCOIN',
   },
+  xrpl: {
+    logo: '/images/logos/xrp-logo.svg',
+    text: 'ON XRP',
+  },
 };
 
 interface WalkthroughBlockchainTagProps {
-  blockchain: 'ethereum' | 'bitcoin';
+  blockchain: 'evm' | 'bitcoin' | 'xrpl';
 }
 
 export function WalkthroughBlockchainTag({

diff --git a/src/app/components/mint-unmint/components/walkthrough/components/walkthrough-header.tsx b/src/app/components/mint-unmint/components/walkthrough/components/walkthrough-header.tsx
@@ -3,7 +3,7 @@ import { HStack, Text, VStack } from '@chakra-ui/react';
 import { WalkthroughBlockchainTag } from './walkthrough-blockchain-tag';
 
 interface WalkthroughHeaderProps {
-  blockchain: 'ethereum' | 'bitcoin';
+  blockchain: 'evm' | 'bitcoin' | 'xrpl';
   currentStep?: number;
   title: string;
 }

diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
@@ -8,9 +8,14 @@ import { WalkthroughLayout } from './components/walkthrough.layout';
 interface WalkthroughProps {
   flow: 'mint' | 'unmint';
   currentStep: number;
+  networkType: 'evm' | 'xrpl';
 }
 
-export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.Element {
+export function Walkthrough({
+  flow,
+  currentStep,
+  networkType,
+}: WalkthroughProps): React.JSX.Element {
   const addToken = useAddToken();
 
   switch (flow) {
@@ -22,20 +27,28 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
               <WalkthroughHeader
                 currentStep={currentStep}
                 title={'Create Vault'}
-                blockchain={'ethereum'}
+                blockchain={networkType}
               />
-              <Text color={'white.01'} fontSize={'md'}>
-                Initiate a Vault on the blockchain and confirm it in your{' '}
-                <Link
-                  color={'accent.lightBlue.01'}
-                  href="https://metamask.io/"
-                  isExternal
-                  textDecoration={'underline'}
-                >
-                  Ethereum Wallet
-                </Link>
-                .
-              </Text>
+              {networkType === 'evm' ? (
+                <Text color={'white.01'} fontSize={'md'}>
+                  Initiate a Vault on the blockchain and confirm it in your{' '}
+                  <Link
+                    color={'accent.lightBlue.01'}
+                    href="https://metamask.io/"
+                    isExternal
+                    textDecoration={'underline'}
+                  >
+                    Ethereum Wallet
+                  </Link>
+                  .
+                </Text>
+              ) : (
+                <Text color={'white.01'} fontSize={'md'}>
+                  Initiate a Setup Vault request. If the TrustLine is not yet established, sign the
+                  Set TrustLine Transaction in your wallet. Then, wait for the Attestors to confirm
+                  your request and set up the Vault on the blockchain.
+                </Text>
+              )}
               <TutorialVideo />
             </WalkthroughLayout>
           );
@@ -49,16 +62,8 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
               />
               <Text color={'white.01'} fontSize={'md'}>
                 Enter the Bitcoin amount you wish to deposit into the vault, then verify the
-                transaction through your{' '}
-                <Link
-                  color={'accent.lightBlue.01'}
-                  href="https://leather.io/"
-                  isExternal
-                  textDecoration={'underline'}
-                >
-                  Bitcoin Wallet{' '}
-                </Link>
-                which will lock your Bitcoin on-chain. You will receive equivalent amount of dlcBTC.
+                transaction through your Bitcoin Wallet which will lock your Bitcoin on-chain. You
+                will receive equivalent amount of dlcBTC.
               </Text>
             </WalkthroughLayout>
           );
@@ -68,32 +73,33 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
               <WalkthroughHeader
                 currentStep={currentStep}
                 title={'Mint dlcBTC'}
-                blockchain={'ethereum'}
+                blockchain={networkType}
               />
               <Text color={'white.01'} fontSize={'sm'}>
-                Wait for Bitcoin to get locked on chain{' '}
-                <Link
-                  color={'accent.lightBlue.01'}
-                  href="https://ethereum.org/"
-                  isExternal
-                  textDecoration={'underline'}
-                >
-                  (~1 hour)
-                </Link>
-                . After 6 confirmations, dlcBTC tokens will appear in your Ethereum Wallet.
-              </Text>
-              <Text color={'white.01'} fontSize={'sm'}>
-                To ensure your <span style={{ fontWeight: 800 }}>dlcBTC tokens </span>
-                are <span style={{ fontWeight: 800 }}>visible </span>
-                simply <span style={{ fontWeight: 800 }}>add them </span>
-                to your Ethereum Wallet.
+                Wait for Bitcoin to get locked on chain (~1 hour). After 6 confirmations, dlcBTC
+                tokens will appear in your Wallet.
               </Text>
-              <Button variant={'vault'} onClick={async () => await addToken()}>
-                <HStack>
-                  <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC'} boxSize={'25px'} />
-                  <Text> Add Token to Wallet</Text>
-                </HStack>
-              </Button>
+              {networkType === 'evm' && (
+                <>
+                  <Text color={'white.01'} fontSize={'sm'}>
+                    To ensure your <span style={{ fontWeight: 800 }}>dlcBTC tokens </span>
+                    are <span style={{ fontWeight: 800 }}>visible </span>
+                    simply <span style={{ fontWeight: 800 }}>add them </span>
+                    to your Ethereum Wallet.
+                  </Text>
+
+                  <Button variant={'vault'} onClick={async () => await addToken()}>
+                    <HStack>
+                      <Image
+                        src={'/images/logos/dlc-btc-logo.svg'}
+                        alt={'dlcBTC'}
+                        boxSize={'25px'}
+                      />
+                      <Text> Add Token to Wallet</Text>
+                    </HStack>
+                  </Button>
+                </>
+              )}
             </WalkthroughLayout>
           );
         default:
@@ -102,7 +108,7 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
               <WalkthroughHeader
                 currentStep={undefined}
                 title={'Minted dlcBTC'}
-                blockchain={'ethereum'}
+                blockchain={networkType}
               />
             </WalkthroughLayout>
           );
@@ -115,12 +121,19 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
               <WalkthroughHeader
                 currentStep={currentStep}
                 title={'Burn dlcBTC'}
-                blockchain={'ethereum'}
+                blockchain={networkType}
               />
-              <Text color={'white.01'} fontSize={'md'}>
-                Select the dlcBTC vault you would like to withdraw from. Burn the desired amount of
-                dlcBTC to receive the equivalent amount of BTC.
-              </Text>
+              {networkType === 'evm' ? (
+                <Text color={'white.01'} fontSize={'md'}>
+                  Select the dlcBTC vault you would like to withdraw from. Burn the desired amount
+                  of dlcBTC to receive the equivalent amount of BTC.
+                </Text>
+              ) : (
+                <Text color={'white.01'} fontSize={'md'}>
+                  Select the dlcBTC vault you would like to withdraw from. Sign a check with the
+                  desired amount of dlcBTC to receive the equivalent amount of BTC.
+                </Text>
+              )}
             </WalkthroughLayout>
           );
         case 1:
@@ -161,7 +174,7 @@ export function Walkthrough({ flow, currentStep }: WalkthroughProps): React.JSX.
               <WalkthroughHeader
                 currentStep={undefined}
                 title={'Withdrawn dlcBTC'}
-                blockchain={'ethereum'}
+                blockchain={networkType}
               />
             </WalkthroughLayout>
           );

diff --git a/src/app/components/modals/select-wallet-modal/components/select-ripple-wallet-menu.tsx b/src/app/components/modals/select-wallet-modal/components/select-ripple-wallet-menu.tsx
@@ -1,9 +1,9 @@
 import { Box, Button, HStack, Image, Text } from '@chakra-ui/react';
-import { XRPWallet } from '@models/wallet';
+import { XRPWallet, XRPWalletType } from '@models/wallet';
 
 interface SelectRippleWalletMenuProps {
   rippleWallet: XRPWallet;
-  handleConnectWallet: (id: string) => void;
+  handleConnectWallet: (xrpWalletType: XRPWalletType) => void;
 }
 
 export function SelectRippleWalletMenu({