feat(wallet): Allow ledger address verification (#4151)

* feat(wallet): Allow ledger address verification * feat(wallet): Improve ledger address verification following suggestions * feat(wallet): Improve ledger address verification following suggestions (fix accidentaly removed var)
iotaledger · Nov 25, 2024 · 28692bf · 28692bf
1 parent 2349377
commit 28692bf
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/ReceiveTokensDialog.tsx b/apps/wallet/src/ui/app/pages/home/tokens/ReceiveTokensDialog.tsx
@@ -1,9 +1,17 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { useCallback } from 'react';
 import { Button, Address, Dialog, DialogContent, DialogBody, Header } from '@iota/apps-ui-kit';
 import { useCopyToClipboard } from '_hooks';
 import { QR } from '@iota/core';
+import { toast } from 'react-hot-toast';
+import { useIotaLedgerClient } from '_src/ui/app/components';
+import {
+    isLedgerAccountSerializedUI,
+    type LedgerAccountSerializedUI,
+} from '_src/background/accounts/LedgerAccount';
+import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
 
 interface ReceiveTokensDialogProps {
     address: string;
@@ -12,10 +20,38 @@ interface ReceiveTokensDialogProps {
 }
 
 export function ReceiveTokensDialog({ address, open, setOpen }: ReceiveTokensDialogProps) {
+    const activeAccount = useActiveAccount();
+    const { connectToLedger, iotaLedgerClient } = useIotaLedgerClient();
+
     const onCopy = useCopyToClipboard(address, {
         copySuccessMessage: 'Address copied',
     });
 
+    const isLedger = isLedgerAccountSerializedUI(activeAccount as LedgerAccountSerializedUI);
+
+    const onVerifyAddress = useCallback(async () => {
+        if (!isLedger || !activeAccount) {
+            return;
+        }
+
+        if (!isLedgerAccountSerializedUI(activeAccount)) {
+            return;
+        }
+
+        try {
+            let ledgerClient = iotaLedgerClient;
+            if (!ledgerClient) {
+                ledgerClient = await connectToLedger(true);
+            }
+
+            toast.success('Please, confirm the address on your Ledger device.');
+            await ledgerClient.getPublicKey(activeAccount.derivationPath, true);
+            toast.success('Address verification successful!');
+        } catch {
+            toast.error('Address verification failed!');
+        }
+    }, [isLedger, activeAccount, iotaLedgerClient, connectToLedger]);
+
     return (
         <div className="relative">
             <Dialog open={open} onOpenChange={setOpen}>
@@ -32,6 +68,11 @@ export function ReceiveTokensDialog({ address, open, setOpen }: ReceiveTokensDia
                     <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
                         <Button onClick={onCopy} fullWidth text="Copy Address" />
                     </div>
+                    {isLedger && (
+                        <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
+                            <Button onClick={onVerifyAddress} fullWidth text="Verify Address" />
+                        </div>
+                    )}
                 </DialogContent>
             </Dialog>
         </div>