From 27e9aedea3ce59c9cbec709a6fa640cb2fdb7b78 Mon Sep 17 00:00:00 2001
From: Julian Jelfs <julian.jelfs@gmail.com>
Date: Thu, 5 Oct 2023 17:16:13 +0100
Subject: [PATCH] Save crypto addresses (#4491)

Co-authored-by: Hamish Peebles <hamishpeebles@gmail.com>
---
 frontend/app/src/components/Menu.svelte       |   2 +
 frontend/app/src/components/MenuItem.svelte   |  16 ++-
 .../home/profile/AccountSelector.svelte       | 102 ++++++++++++++++++
 .../home/profile/ManageCryptoAccount.svelte   |  49 +++++++--
 .../home/profile/SaveAccount.svelte           |  47 ++++++++
 .../components/home/profile/SendCrypto.svelte |  98 +++++++++++------
 frontend/app/src/i18n/cn.json                 |   8 +-
 frontend/app/src/i18n/de.json                 |   8 +-
 frontend/app/src/i18n/en.json                 |   8 +-
 frontend/app/src/i18n/es.json                 |   8 +-
 frontend/app/src/i18n/fr.json                 |   8 +-
 frontend/app/src/i18n/it.json                 |   8 +-
 frontend/app/src/i18n/iw.json                 |   8 +-
 frontend/app/src/i18n/jp.json                 |  10 +-
 frontend/app/src/i18n/ru.json                 |   8 +-
 frontend/app/src/i18n/vi.json                 |   8 +-
 .../src/services/user/candid/idl.d.ts         |  10 +-
 .../src/services/user/mappers.ts              |  26 +++++
 .../src/services/user/user.client.ts          |  21 ++++
 frontend/openchat-client/src/openchat.ts      |  15 +++
 .../openchat-shared/src/domain/user/user.ts   |  10 +-
 frontend/openchat-shared/src/domain/worker.ts |  19 ++++
 frontend/openchat-worker/src/worker.ts        |  16 +++
 23 files changed, 457 insertions(+), 56 deletions(-)
 create mode 100644 frontend/app/src/components/home/profile/AccountSelector.svelte
 create mode 100644 frontend/app/src/components/home/profile/SaveAccount.svelte

diff --git a/frontend/app/src/components/Menu.svelte b/frontend/app/src/components/Menu.svelte
index 6edf5cb1a3..f952e084aa 100644
--- a/frontend/app/src/components/Menu.svelte
+++ b/frontend/app/src/components/Menu.svelte
@@ -21,6 +21,8 @@
         box-shadow: var(--menu-sh);
         border-radius: $sp2;
         border: 1px solid var(--menu-bd);
+        max-height: 80vh;
+        overflow-y: auto;
 
         @include mobile() {
             &.centered {
diff --git a/frontend/app/src/components/MenuItem.svelte b/frontend/app/src/components/MenuItem.svelte
index 1734724274..62bacab308 100644
--- a/frontend/app/src/components/MenuItem.svelte
+++ b/frontend/app/src/components/MenuItem.svelte
@@ -3,10 +3,11 @@
     export let selected: boolean = false;
     export let warning: boolean = false;
     export let separator: boolean = false;
+    export let unpadded: boolean = false;
 </script>
 
 {#if disabled}
-    <div class:disabled class="menu-item" role="menuitem">
+    <div class:unpadded class:disabled class="menu-item" role="menuitem">
         <span class="icon">
             <slot name="icon" />
         </span>
@@ -15,7 +16,14 @@
 {:else if separator}
     <hr class="separator" />
 {:else}
-    <div tabindex="0" class="menu-item" on:click role="menuitem" class:selected class:warning>
+    <div
+        class:unpadded
+        tabindex="0"
+        class="menu-item"
+        on:click
+        role="menuitem"
+        class:selected
+        class:warning>
         <span class="icon">
             <slot name="icon" />
         </span>
@@ -33,6 +41,10 @@
         padding: 10px;
         gap: 10px;
 
+        &.unpadded {
+            padding: 0;
+        }
+
         &:last-child {
             border-bottom: none;
         }
diff --git a/frontend/app/src/components/home/profile/AccountSelector.svelte b/frontend/app/src/components/home/profile/AccountSelector.svelte
new file mode 100644
index 0000000000..74ea2467e1
--- /dev/null
+++ b/frontend/app/src/components/home/profile/AccountSelector.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { _ } from "svelte-i18n";
+    import type { NamedAccount } from "openchat-client";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import { iconSize } from "../../../stores/iconSize";
+    import MenuIcon from "../../MenuIcon.svelte";
+    import Menu from "../../Menu.svelte";
+    import MenuItem from "../../MenuItem.svelte";
+    import { mobileWidth } from "../../../stores/screenDimensions";
+
+    export let accounts: NamedAccount[];
+    export let targetAccount: string;
+
+    let selectedName: string | undefined = undefined;
+    let menuIcon: MenuIcon;
+
+    $: {
+        selectedName = accounts.find((a) => {
+            return a.account.toLowerCase() === targetAccount.toLowerCase();
+        })?.name;
+    }
+
+    function collapseAccount(account: string) {
+        if (account.length > 23) {
+            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
+        }
+        return account;
+    }
+
+    function selectAccount(namedAccount: NamedAccount) {
+        targetAccount = namedAccount.account;
+    }
+
+    function showMenu() {
+        menuIcon.showMenu();
+    }
+</script>
+
+<div role="combobox" tabindex="0" class="selected" on:click|stopPropagation={showMenu}>
+    <div class="name">
+        {selectedName ?? $_("tokenTransfer.chooseAddress")}
+    </div>
+    <div class="icon">
+        <MenuIcon bind:this={menuIcon} position={$mobileWidth ? "top" : "bottom"} align={"end"}>
+            <div slot="icon">
+                <ChevronDown viewBox={"0 -3 24 24"} size={$iconSize} color={"var(--icon-txt)"} />
+            </div>
+            <div slot="menu">
+                <Menu>
+                    {#each accounts as namedAccount}
+                        <MenuItem unpadded on:click={() => selectAccount(namedAccount)}>
+                            <div slot="text" class="named-account">
+                                <div class="name">
+                                    {namedAccount.name}
+                                </div>
+                                <div class="account">
+                                    {collapseAccount(namedAccount.account)}
+                                </div>
+                            </div>
+                        </MenuItem>
+                    {/each}
+                </Menu>
+            </div>
+        </MenuIcon>
+    </div>
+</div>
+
+<style lang="scss">
+    .selected {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        cursor: pointer;
+        @include font(book, normal, fs-80);
+
+        .name {
+            color: var(--primary);
+        }
+
+        .icon {
+            transition: transform 250ms ease-in-out;
+            transform-origin: 50%;
+        }
+    }
+
+    .named-account {
+        padding: $sp3;
+        display: flex;
+        flex-direction: column;
+        @include font(book, normal, fs-80);
+        font-family: "Roboto", sans-serif;
+
+        .name {
+            color: var(--primary);
+        }
+
+        .account {
+            @include font(light, normal, fs-70);
+            color: var(--menu-disabled-txt);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/ManageCryptoAccount.svelte b/frontend/app/src/components/home/profile/ManageCryptoAccount.svelte
index bcdbaeabc2..5fb67fde98 100644
--- a/frontend/app/src/components/home/profile/ManageCryptoAccount.svelte
+++ b/frontend/app/src/components/home/profile/ManageCryptoAccount.svelte
@@ -23,7 +23,8 @@
     let error: string | undefined = undefined;
     let amountToSend = BigInt(0);
     let balanceWithRefresh: BalanceWithRefresh;
-    let sending = false;
+    let busy = false;
+    let capturingAccount = false;
     let valid = false;
 
     $: cryptoLookup = client.cryptoLookup;
@@ -49,6 +50,24 @@
     function onBalanceRefreshError(ev: CustomEvent<string>) {
         error = ev.detail;
     }
+
+    function saveAccount() {
+        if (sendCrypto) {
+            busy = true;
+            sendCrypto
+                .saveAccount()
+                .then((resp) => {
+                    if (resp.kind === "success") {
+                        dispatch("close");
+                    } else if (resp.kind === "name_taken") {
+                        error = "tokenTransfer.accountNameTaken";
+                    } else {
+                        error = "tokenTransfer.failedToSaveAccount";
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
 </script>
 
 <Overlay on:close dismissible>
@@ -76,8 +95,10 @@
             {#if mode === "send"}
                 <SendCrypto
                     bind:this={sendCrypto}
-                    bind:sending
+                    bind:busy
+                    bind:capturingAccount
                     bind:valid
+                    on:close
                     on:error={(ev) => (error = ev.detail)}
                     on:refreshBalance={() => balanceWithRefresh.refresh()}
                     {ledger}
@@ -90,13 +111,23 @@
         <span slot="footer">
             <ButtonGroup>
                 {#if mode === "send"}
-                    <Button secondary tiny={$mobileWidth} on:click={() => dispatch("close")}
-                        >{$_("cancel")}</Button>
-                    <Button
-                        disabled={sending || !valid}
-                        loading={sending}
-                        tiny={$mobileWidth}
-                        on:click={() => sendCrypto?.send()}>{$_("tokenTransfer.send")}</Button>
+                    {#if capturingAccount}
+                        <Button secondary tiny={$mobileWidth} on:click={() => dispatch("close")}
+                            >{$_("noThanks")}</Button>
+                        <Button
+                            disabled={busy || !valid}
+                            loading={busy}
+                            tiny={$mobileWidth}
+                            on:click={saveAccount}>{$_("tokenTransfer.saveAccount")}</Button>
+                    {:else}
+                        <Button secondary tiny={$mobileWidth} on:click={() => dispatch("close")}
+                            >{$_("cancel")}</Button>
+                        <Button
+                            disabled={busy || !valid}
+                            loading={busy}
+                            tiny={$mobileWidth}
+                            on:click={() => sendCrypto?.send()}>{$_("tokenTransfer.send")}</Button>
+                    {/if}
                 {:else}
                     <Button tiny={$mobileWidth} on:click={() => dispatch("close")}
                         >{$_("close")}</Button>
diff --git a/frontend/app/src/components/home/profile/SaveAccount.svelte b/frontend/app/src/components/home/profile/SaveAccount.svelte
new file mode 100644
index 0000000000..1cd72e38d2
--- /dev/null
+++ b/frontend/app/src/components/home/profile/SaveAccount.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import type { NamedAccount, OpenChat } from "openchat-client";
+    import Input from "../../Input.svelte";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Legend from "../../Legend.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    export let account: string;
+    export let accounts: NamedAccount[];
+    export let valid = false;
+
+    let name = "";
+    $: trimmedName = name.trim();
+
+    $: {
+        valid =
+            trimmedName.length > 0 &&
+            accounts.find((a) => a.name.toLowerCase() === trimmedName.toLowerCase()) === undefined;
+    }
+
+    export function saveAccount() {
+        return client.saveCryptoAccount({
+            account,
+            name: trimmedName,
+        });
+    }
+</script>
+
+<Legend label={$_("tokenTransfer.saveAccountMessage")} />
+
+<p class="account">{account}</p>
+
+<Input
+    bind:value={name}
+    autofocus
+    countdown={false}
+    maxlength={100}
+    placeholder={$_("tokenTransfer.enterAccountName")} />
+
+<style lang="scss">
+    .account {
+        @include input();
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/SendCrypto.svelte b/frontend/app/src/components/home/profile/SendCrypto.svelte
index 1426bbdc8d..9508d6aa01 100644
--- a/frontend/app/src/components/home/profile/SendCrypto.svelte
+++ b/frontend/app/src/components/home/profile/SendCrypto.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { createEventDispatcher, getContext } from "svelte";
+    import { createEventDispatcher, getContext, onMount } from "svelte";
     import TokenInput from "../TokenInput.svelte";
-    import type { OpenChat } from "openchat-client";
+    import type { NamedAccount, OpenChat } from "openchat-client";
     import { ICP_SYMBOL } from "openchat-client";
     import Input from "../../Input.svelte";
     import { _ } from "svelte-i18n";
@@ -9,11 +9,15 @@
     import { toastStore } from "../../../stores/toast";
     import { iconSize } from "../../../stores/iconSize";
     import Scanner from "./Scanner.svelte";
+    import SaveAccount from "./SaveAccount.svelte";
+    import AccountSelector from "./AccountSelector.svelte";
 
     export let ledger: string;
     export let amountToSend: bigint;
-    export let sending = false;
+    export let busy = false;
     export let valid = false;
+    export let validAccountName = false;
+    export let capturingAccount = false;
 
     const client = getContext<OpenChat>("client");
     const user = client.user;
@@ -22,6 +26,8 @@
     let validAmount = false;
     let targetAccount: string = "";
     let scanner: Scanner;
+    let accounts: NamedAccount[] = [];
+    let saveAccountElement: SaveAccount;
 
     $: cryptoBalanceStore = client.cryptoBalance;
     $: cryptoBalance = $cryptoBalanceStore[ledger] ?? BigInt(0);
@@ -30,22 +36,35 @@
     $: account = tokenDetails.symbol === ICP_SYMBOL ? user.cryptoAccount : user.userId;
     $: transferFees = tokenDetails.transferFee;
     $: symbol = tokenDetails.symbol;
+    $: validSend =
+        validAmount &&
+        amountToSend > BigInt(0) &&
+        targetAccount !== "" &&
+        targetAccount !== account;
     $: {
-        valid =
-            validAmount &&
-            amountToSend > BigInt(0) &&
-            targetAccount !== "" &&
-            targetAccount !== account;
+        valid = capturingAccount ? validAccountName : validSend;
+    }
+
+    onMount(async () => {
+        accounts = await client.loadSavedCryptoAccounts();
+    });
+
+    export function saveAccount() {
+        return saveAccountElement?.saveAccount();
     }
 
     export function scan() {
         scanner?.scan();
     }
 
+    function unknownAccount(account: string): boolean {
+        return accounts.find((a) => a.account === account) === undefined;
+    }
+
     export function send() {
         if (!valid) return;
 
-        sending = true;
+        busy = true;
         dispatch("error", undefined);
         client
             .withdrawCryptocurrency({
@@ -60,11 +79,16 @@
             .then((resp) => {
                 if (resp.kind === "completed") {
                     amountToSend = BigInt(0);
-                    targetAccount = "";
                     dispatch("refreshBalance");
                     toastStore.showSuccessToast("cryptoAccount.sendSucceeded", {
                         values: { symbol },
                     });
+                    if (unknownAccount(targetAccount)) {
+                        capturingAccount = true;
+                    } else {
+                        dispatch("close");
+                        targetAccount = "";
+                    }
                 } else {
                     dispatch("error", "cryptoAccount.sendFailed");
                     client.logMessage(`Unable to withdraw ${symbol}`, resp);
@@ -76,31 +100,43 @@
                 client.logError(`Unable to withdraw ${symbol}`, err);
                 toastStore.showFailureToast("cryptoAccount.sendFailed", { values: { symbol } });
             })
-            .finally(() => (sending = false));
+            .finally(() => (busy = false));
     }
 </script>
 
-<Scanner on:data={(ev) => (targetAccount = ev.detail)} bind:this={scanner} />
-
-<div class="token-input">
-    <TokenInput
-        {ledger}
-        {transferFees}
-        maxAmount={BigInt(Math.max(0, Number(cryptoBalance - transferFees)))}
-        bind:valid={validAmount}
-        bind:amount={amountToSend} />
-</div>
-<div class="target">
-    <Input
-        bind:value={targetAccount}
-        countdown={false}
-        maxlength={100}
-        placeholder={$_("cryptoAccount.sendTarget")} />
-
-    <div class="qr" on:click={scan}>
-        <QrcodeScan size={$iconSize} color={"var(--icon-selected)"} />
+{#if capturingAccount}
+    <SaveAccount
+        bind:this={saveAccountElement}
+        bind:valid={validAccountName}
+        account={targetAccount}
+        {accounts} />
+{:else}
+    <Scanner on:data={(ev) => (targetAccount = ev.detail)} bind:this={scanner} />
+
+    <div class="token-input">
+        <TokenInput
+            {ledger}
+            {transferFees}
+            maxAmount={BigInt(Math.max(0, Number(cryptoBalance - transferFees)))}
+            bind:valid={validAmount}
+            bind:amount={amountToSend} />
+    </div>
+    <div class="target">
+        <Input
+            bind:value={targetAccount}
+            countdown={false}
+            maxlength={100}
+            placeholder={$_("cryptoAccount.sendTarget")} />
+
+        <div class="qr" on:click={scan}>
+            <QrcodeScan size={$iconSize} color={"var(--icon-selected)"} />
+        </div>
+    </div>
+
+    <div class="accounts">
+        <AccountSelector bind:targetAccount {accounts} />
     </div>
-</div>
+{/if}
 
 <style lang="scss">
     :global(.target .input-wrapper input) {
diff --git a/frontend/app/src/i18n/cn.json b/frontend/app/src/i18n/cn.json
index 34ca4f0a87..fdd6fc5e68 100644
--- a/frontend/app/src/i18n/cn.json
+++ b/frontend/app/src/i18n/cn.json
@@ -448,7 +448,13 @@
         "chooseReceiver": "输入接收者的用户名",
         "max": "最大余额",
         "viewTransaction": "[交易]({url})",
-        "fee": "将添加 {fee} {token} 的费用"
+        "fee": "将添加 {fee} {token} 的费用",
+        "saveAccount": "节省",
+        "saveAccountMessage": "您想保存此帐户以便下次访问吗？",
+        "enterAccountName": "输入此帐户的名称",
+        "failedToSaveAccount": "抱歉，我们无法保存您的帐户",
+        "accountNameTaken": "您已有一个同名帐户",
+        "chooseAddress": "选择您保存的地址之一"
     },
     "cryptoAccount": {
         "manage": "管理",
diff --git a/frontend/app/src/i18n/de.json b/frontend/app/src/i18n/de.json
index 9eccc182de..8b96a24195 100644
--- a/frontend/app/src/i18n/de.json
+++ b/frontend/app/src/i18n/de.json
@@ -451,7 +451,13 @@
         "chooseReceiver": "Geben Sie den Benutzernamen des Empfängers ein",
         "max": "max",
         "viewTransaction": "[Transaktion]({url})",
-        "fee": "Es fallen Gebühren in Höhe von {fee} {token} an"
+        "fee": "Es fallen Gebühren in Höhe von {fee} {token} an",
+        "saveAccount": "Speichern",
+        "saveAccountMessage": "Möchten Sie dieses Konto speichern, um beim nächsten Mal leichter darauf zugreifen zu können?",
+        "enterAccountName": "Geben Sie einen Namen für dieses Konto ein",
+        "failedToSaveAccount": "Leider konnten wir Ihr Konto nicht speichern",
+        "accountNameTaken": "Sie haben bereits ein Konto mit diesem Namen",
+        "chooseAddress": "Wählen Sie eine Ihrer gespeicherten Adressen"
     },
     "cryptoAccount": {
         "manage": "Verwalten",
diff --git a/frontend/app/src/i18n/en.json b/frontend/app/src/i18n/en.json
index 45fd59704e..a263a9816b 100644
--- a/frontend/app/src/i18n/en.json
+++ b/frontend/app/src/i18n/en.json
@@ -548,7 +548,13 @@
         "receiver": "Recipient",
         "chooseReceiver": "enter the recipient's user name",
         "done": "refresh and continue",
-        "max": "Max"
+        "max": "Max",
+        "saveAccount": "Save",
+        "saveAccountMessage": "Would you like to save this account for easier access next time?",
+        "enterAccountName": "Enter a name for this account",
+        "failedToSaveAccount": "Sorry, we were unable to save your account",
+        "accountNameTaken": "You already have an account with that name",
+        "chooseAddress": "Choose one of your saved addresses"
     },
     "cryptoAccount": {
         "shortBalanceLabel": "Balance",
diff --git a/frontend/app/src/i18n/es.json b/frontend/app/src/i18n/es.json
index 557caf1906..a7a58d99e6 100644
--- a/frontend/app/src/i18n/es.json
+++ b/frontend/app/src/i18n/es.json
@@ -450,7 +450,13 @@
         "chooseReceiver": "ingrese el nombre de usuario del destinatario",
         "max": "máx.",
         "viewTransaction": "[Transacción]({url})",
-        "fee": "Se agregarán tarifas de {fee} {token}"
+        "fee": "Se agregarán tarifas de {fee} {token}",
+        "saveAccount": "Ahorrar",
+        "saveAccountMessage": "¿Le gustaría guardar esta cuenta para acceder más fácilmente la próxima vez?",
+        "enterAccountName": "Introduzca un nombre para esta cuenta",
+        "failedToSaveAccount": "Lo sentimos, no pudimos guardar su cuenta.",
+        "accountNameTaken": "Ya tienes una cuenta con ese nombre.",
+        "chooseAddress": "Elija una de sus direcciones guardadas"
     },
     "cryptoAccount": {
         "manage": "Administrar",
diff --git a/frontend/app/src/i18n/fr.json b/frontend/app/src/i18n/fr.json
index 629dd5ce92..b03c7c42c8 100644
--- a/frontend/app/src/i18n/fr.json
+++ b/frontend/app/src/i18n/fr.json
@@ -449,7 +449,13 @@
         "chooseReceiver": "entrer le nom d'utilisateur du destinataire",
         "max": "Max",
         "viewTransaction": "[Transaction]({url})",
-        "fee": "Des frais de {fee} {token} seront ajoutés"
+        "fee": "Des frais de {fee} {token} seront ajoutés",
+        "saveAccount": "Sauvegarder",
+        "saveAccountMessage": "Souhaitez-vous enregistrer ce compte pour y accéder plus facilement la prochaine fois ?",
+        "enterAccountName": "Entrez un nom pour ce compte",
+        "failedToSaveAccount": "Désolé, nous n'avons pas pu enregistrer votre compte",
+        "accountNameTaken": "Vous avez déjà un compte avec ce nom",
+        "chooseAddress": "Choisissez une de vos adresses enregistrées"
     },
     "cryptoAccount": {
         "manage": "Faire en sorte",
diff --git a/frontend/app/src/i18n/it.json b/frontend/app/src/i18n/it.json
index dde289ac0b..90af07b97e 100644
--- a/frontend/app/src/i18n/it.json
+++ b/frontend/app/src/i18n/it.json
@@ -449,7 +449,13 @@
         "chooseReceiver": "inserire il nome utente del destinatario",
         "max": "Massimo",
         "viewTransaction": "[Transazione]({url})",
-        "fee": "Verranno aggiunte commissioni di {fee} {token}"
+        "fee": "Verranno aggiunte commissioni di {fee} {token}",
+        "saveAccount": "Salva",
+        "saveAccountMessage": "Vuoi salvare questo account per accedervi più facilmente la prossima volta?",
+        "enterAccountName": "Inserisci un nome per questo account",
+        "failedToSaveAccount": "Siamo spiacenti, non siamo riusciti a salvare il tuo account",
+        "accountNameTaken": "Hai già un account con quel nome",
+        "chooseAddress": "Scegli uno dei tuoi indirizzi salvati"
     },
     "cryptoAccount": {
         "manage": "Gestire",
diff --git a/frontend/app/src/i18n/iw.json b/frontend/app/src/i18n/iw.json
index 0ad8a344a0..0b873868b8 100644
--- a/frontend/app/src/i18n/iw.json
+++ b/frontend/app/src/i18n/iw.json
@@ -449,7 +449,13 @@
         "chooseReceiver": "הזן את שם המשתמש של הנמען",
         "max": "מקסימום",
         "viewTransaction": "[עסקה]({url})",
-        "fee": "עמלות של {fee} {token} יתווספו"
+        "fee": "עמלות של {fee} {token} יתווספו",
+        "saveAccount": "להציל",
+        "saveAccountMessage": "האם תרצה לשמור חשבון זה לגישה קלה יותר בפעם הבאה?",
+        "enterAccountName": "הזן שם עבור חשבון זה",
+        "failedToSaveAccount": "מצטערים, לא הצלחנו לשמור את חשבונך",
+        "accountNameTaken": "כבר יש לך חשבון בשם זה",
+        "chooseAddress": "בחר אחת מהכתובות השמורות שלך"
     },
     "cryptoAccount": {
         "shortBalanceLabel": "איזון",
diff --git a/frontend/app/src/i18n/jp.json b/frontend/app/src/i18n/jp.json
index 4481ccb12d..7c6aca31fa 100644
--- a/frontend/app/src/i18n/jp.json
+++ b/frontend/app/src/i18n/jp.json
@@ -449,7 +449,13 @@
         "chooseReceiver": "受信者のユーザー名を入力します",
         "max": "最大",
         "viewTransaction": "[取引]({url})",
-        "fee": "{fee} {token}の料金が追加されます"
+        "fee": "{fee} {token}の料金が追加されます",
+        "saveAccount": "保存",
+        "saveAccountMessage": "次回簡単にアクセスできるように、このアカウントを保存しますか?",
+        "enterAccountName": "このアカウントの名前を入力してください",
+        "failedToSaveAccount": "申し訳ありませんが、アカウントを保存できませんでした",
+        "accountNameTaken": "その名前のアカウントはすでにお持ちです",
+        "chooseAddress": "保存したアドレスのいずれかを選択してください"
     },
     "cryptoAccount": {
         "manage": "管理",
@@ -1037,4 +1043,4 @@
     "unfollowThreadFailed": "スレッドのフォローを解除できませんでした",
     "doubleClickReply": "メッセージをダブルクリックして返信/編集します",
     "doubleTapReply": "メッセージをダブルタップして返信/編集します"
-}
+}
\ No newline at end of file
diff --git a/frontend/app/src/i18n/ru.json b/frontend/app/src/i18n/ru.json
index 85db289811..df9aa746e8 100644
--- a/frontend/app/src/i18n/ru.json
+++ b/frontend/app/src/i18n/ru.json
@@ -449,7 +449,13 @@
         "chooseReceiver": "введите имя пользователя получателя",
         "max": "Максимум",
         "viewTransaction": "[Транзакция]({url})",
-        "fee": "Будет добавлена комиссия в размере {fee} {token}."
+        "fee": "Будет добавлена комиссия в размере {fee} {token}.",
+        "saveAccount": "Сохранять",
+        "saveAccountMessage": "Хотите сохранить эту учетную запись для облегчения доступа в следующий раз?",
+        "enterAccountName": "Введите имя для этой учетной записи",
+        "failedToSaveAccount": "К сожалению, нам не удалось сохранить ваш аккаунт",
+        "accountNameTaken": "У вас уже есть аккаунт с таким именем",
+        "chooseAddress": "Выберите один из сохраненных адресов"
     },
     "cryptoAccount": {
         "manage": "Управлять",
diff --git a/frontend/app/src/i18n/vi.json b/frontend/app/src/i18n/vi.json
index 2a176b4d04..1a61aa3015 100644
--- a/frontend/app/src/i18n/vi.json
+++ b/frontend/app/src/i18n/vi.json
@@ -450,7 +450,13 @@
         "chooseReceiver": "nhập tên người dùng của người nhận",
         "max": "tối đa",
         "viewTransaction": "[Giao dịch]({url})",
-        "fee": "Phí {fee} {token} sẽ được thêm vào"
+        "fee": "Phí {fee} {token} sẽ được thêm vào",
+        "saveAccount": "Cứu",
+        "saveAccountMessage": "Bạn có muốn lưu tài khoản này để truy cập dễ dàng hơn vào lần sau không?",
+        "enterAccountName": "Nhập tên cho tài khoản này",
+        "failedToSaveAccount": "Rất tiếc, chúng tôi không thể lưu tài khoản của bạn",
+        "accountNameTaken": "Bạn đã có tài khoản với tên đó",
+        "chooseAddress": "Chọn một trong những địa chỉ đã lưu của bạn"
     },
     "cryptoAccount": {
         "manage": "Quản lý",
diff --git a/frontend/openchat-agent/src/services/user/candid/idl.d.ts b/frontend/openchat-agent/src/services/user/candid/idl.d.ts
index 6ec7a69517..fabd1f76c8 100644
--- a/frontend/openchat-agent/src/services/user/candid/idl.d.ts
+++ b/frontend/openchat-agent/src/services/user/candid/idl.d.ts
@@ -135,7 +135,10 @@ import {
     DeleteCommunityResponse,
     ArchiveUnarchiveChatsResponse,
     SetCommunityIndexesResponse,
-    TipMessageResponse
+    TipMessageResponse,
+    SavedCryptoAccountsResponse,
+    SaveCryptoAccountResponse,
+    NamedAccount
 } from "./types";
 export {
     _SERVICE as UserService,
@@ -273,7 +276,10 @@ export {
     DeleteCommunityResponse as ApiDeleteCommunityResponse,
     ArchiveUnarchiveChatsResponse as ApiArchiveUnarchiveChatsResponse,
     SetCommunityIndexesResponse as ApiSetCommunityIndexesResponse,
-    TipMessageResponse as ApiTipMessageResponse
+    TipMessageResponse as ApiTipMessageResponse,
+    SavedCryptoAccountsResponse as ApiSavedCryptoAccountsResponse,
+    SaveCryptoAccountResponse as ApiSaveCryptoAccountResponse,
+    NamedAccount as ApiNamedAccount
 };
 
 export const idlFactory: IDL.InterfaceFactory;
diff --git a/frontend/openchat-agent/src/services/user/mappers.ts b/frontend/openchat-agent/src/services/user/mappers.ts
index b527a72f8b..76fcaa5697 100644
--- a/frontend/openchat-agent/src/services/user/mappers.ts
+++ b/frontend/openchat-agent/src/services/user/mappers.ts
@@ -58,6 +58,8 @@ import type {
     ApiArchiveUnarchiveChatsResponse,
     ApiSendMessageWithTransferToChannelResponse,
     ApiTipMessageResponse,
+    ApiSavedCryptoAccountsResponse,
+    ApiSaveCryptoAccountResponse,
 } from "./candid/idl";
 import type {
     EventsResponse,
@@ -114,6 +116,8 @@ import type {
     LeaveCommunityResponse,
     DeleteCommunityResponse,
     TipMessageResponse,
+    NamedAccount,
+    SaveCryptoAccountResponse,
 } from "openchat-shared";
 import { nullMembership, CommonResponses, UnsupportedValueError } from "openchat-shared";
 import {
@@ -136,6 +140,28 @@ import { ensureReplicaIsUpToDate } from "../common/replicaUpToDateChecker";
 import { ReplicaNotUpToDateError } from "../error";
 import type { Principal } from "@dfinity/principal";
 
+export function saveCryptoAccountResponse(
+    candid: ApiSaveCryptoAccountResponse,
+): SaveCryptoAccountResponse {
+    if ("Success" in candid) {
+        return CommonResponses.success();
+    } else if ("NameTaken" in candid) {
+        return { kind: "name_taken" };
+    } else {
+        console.warn("saveCryptoAccountResponse failed with: ", candid);
+        return CommonResponses.failure();
+    }
+}
+
+export function savedCryptoAccountsResponse(
+    candid: ApiSavedCryptoAccountsResponse,
+): NamedAccount[] {
+    if ("Success" in candid) {
+        return candid.Success;
+    }
+    return [];
+}
+
 export function tipMessageResponse(candid: ApiTipMessageResponse): TipMessageResponse {
     if ("Success" in candid || "Retrying" in candid) {
         return CommonResponses.success();
diff --git a/frontend/openchat-agent/src/services/user/user.client.ts b/frontend/openchat-agent/src/services/user/user.client.ts
index 5fc348f766..1b6e82f7b8 100644
--- a/frontend/openchat-agent/src/services/user/user.client.ts
+++ b/frontend/openchat-agent/src/services/user/user.client.ts
@@ -62,6 +62,8 @@ import type {
     ChannelIdentifier,
     Rules,
     TipMessageResponse,
+    NamedAccount,
+    SaveCryptoAccountResponse,
 } from "openchat-shared";
 import { CandidService } from "../candidService";
 import {
@@ -92,6 +94,8 @@ import {
     leaveCommunityResponse,
     deleteCommunityResponse,
     tipMessageResponse,
+    savedCryptoAccountsResponse,
+    saveCryptoAccountResponse,
 } from "./mappers";
 import { MAX_EVENTS, MAX_MESSAGES, MAX_MISSING } from "../../constants";
 import {
@@ -622,6 +626,23 @@ export class UserClient extends CandidService {
         ).then((resp) => [resp, event.event]);
     }
 
+    loadSavedCryptoAccounts(): Promise<NamedAccount[]> {
+        return this.handleQueryResponse(
+            () => this.userService.saved_crypto_accounts({}),
+            savedCryptoAccountsResponse,
+        );
+    }
+
+    saveCryptoAccount({ name, account }: NamedAccount): Promise<SaveCryptoAccountResponse> {
+        return this.handleResponse(
+            this.userService.save_crypto_account({
+                name,
+                account,
+            }),
+            saveCryptoAccountResponse,
+        );
+    }
+
     sendMessageWithTransferToChannel(
         id: ChannelIdentifier,
         recipientId: string,
diff --git a/frontend/openchat-client/src/openchat.ts b/frontend/openchat-client/src/openchat.ts
index be18284ad7..f57d4076c1 100644
--- a/frontend/openchat-client/src/openchat.ts
+++ b/frontend/openchat-client/src/openchat.ts
@@ -327,6 +327,8 @@ import type {
     UpdatedRules,
     PendingCryptocurrencyTransfer,
     TipMessageResponse,
+    NamedAccount,
+    SaveCryptoAccountResponse,
 } from "openchat-shared";
 import {
     AuthProvider,
@@ -4888,6 +4890,19 @@ export class OpenChat extends OpenChatAgentWorker {
             });
     }
 
+    loadSavedCryptoAccounts(): Promise<NamedAccount[]> {
+        return this.sendRequest({
+            kind: "loadSavedCryptoAccounts",
+        });
+    }
+
+    saveCryptoAccount(namedAccount: NamedAccount): Promise<SaveCryptoAccountResponse> {
+        return this.sendRequest({
+            kind: "saveCryptoAccount",
+            namedAccount,
+        });
+    }
+
     private async updateRegistry() {
         const registry = await this.sendRequest({
             kind: "updateRegistry",
diff --git a/frontend/openchat-shared/src/domain/user/user.ts b/frontend/openchat-shared/src/domain/user/user.ts
index 3b72a4c797..0ae75270e7 100644
--- a/frontend/openchat-shared/src/domain/user/user.ts
+++ b/frontend/openchat-shared/src/domain/user/user.ts
@@ -1,4 +1,5 @@
 import type { DataContent } from "../data/data";
+import type { Failure, Success } from "../response";
 
 export type UserOrUserGroup = UserSummary | UserGroupSummary | MentionEveryone;
 
@@ -21,7 +22,7 @@ export type UserGroupSummary = {
 
 export type MentionEveryone = {
     kind: "everyone";
-}
+};
 
 export type UserGroupDetails = {
     kind: "user_group";
@@ -256,3 +257,10 @@ export const ModerationFlags = {
     Adult: 2 as ModerationFlag,
     UnderReview: 4 as ModerationFlag,
 };
+
+export type NamedAccount = {
+    name: string;
+    account: string;
+};
+
+export type SaveCryptoAccountResponse = { kind: "name_taken" } | Success | Failure;
diff --git a/frontend/openchat-shared/src/domain/worker.ts b/frontend/openchat-shared/src/domain/worker.ts
index e5a7639ef4..88f6776654 100644
--- a/frontend/openchat-shared/src/domain/worker.ts
+++ b/frontend/openchat-shared/src/domain/worker.ts
@@ -96,6 +96,8 @@ import type {
     SetUserUpgradeConcurrencyResponse,
     ManageFavouritesResponse,
     SetDisplayNameResponse,
+    NamedAccount,
+    SaveCryptoAccountResponse,
 } from "./user";
 import type {
     SearchDirectChatResponse,
@@ -285,8 +287,19 @@ export type WorkerRequest =
     | GetCachePrimerTimestamps
     | SetCachePrimerTimestamp
     | FollowThread
+    | LoadSavedCryptoAccounts
+    | SaveCryptoAccount
     | TipMessage;
 
+type LoadSavedCryptoAccounts = {
+    kind: "loadSavedCryptoAccounts";
+};
+
+type SaveCryptoAccount = {
+    kind: "saveCryptoAccount";
+    namedAccount: NamedAccount;
+};
+
 type TipMessage = {
     kind: "tipMessage";
     messageContext: MessageContext;
@@ -1074,6 +1087,8 @@ export type WorkerResponseInner =
     | UpdateUserGroupResponse
     | DeleteUserGroupsResponse
     | TipMessageResponse
+    | NamedAccount[]
+    | SaveCryptoAccountResponse
     | Record<string, bigint>;
 
 export type WorkerResponse = Response<WorkerResponseInner>;
@@ -1307,6 +1322,10 @@ type FollowThread = {
 
 export type WorkerResult<T> = T extends PinMessage
     ? PinMessageResponse
+    : T extends LoadSavedCryptoAccounts
+    ? NamedAccount[]
+    : T extends SaveCryptoAccount
+    ? SaveCryptoAccountResponse
     : T extends TipMessage
     ? TipMessageResponse
     : T extends UnpinMessage
diff --git a/frontend/openchat-worker/src/worker.ts b/frontend/openchat-worker/src/worker.ts
index 4bce8b2641..1d5a9841bf 100644
--- a/frontend/openchat-worker/src/worker.ts
+++ b/frontend/openchat-worker/src/worker.ts
@@ -1286,6 +1286,22 @@ self.addEventListener("message", (msg: MessageEvent<CorrelatedWorkerRequest>) =>
                 );
                 break;
 
+            case "loadSavedCryptoAccounts":
+                executeThenReply(
+                    payload,
+                    correlationId,
+                    agent.userClient.loadSavedCryptoAccounts(),
+                );
+                break;
+
+            case "saveCryptoAccount":
+                executeThenReply(
+                    payload,
+                    correlationId,
+                    agent.userClient.saveCryptoAccount(payload.namedAccount),
+                );
+                break;
+
             default:
                 logger?.debug("WORKER: unknown message kind received: ", kind);
         }