From 584562d6327d32ada0e7c5f190478cf1e8d4b60d Mon Sep 17 00:00:00 2001
From: nickkelly1 <nick.kelly314+github@gmail.com>
Date: Thu, 2 Jan 2025 16:43:05 -0600
Subject: [PATCH] feat: recent addresses

---
 .../src/libs/recently-sent-addresses/index.ts | 41 ++++++++++
 .../src/libs/recently-sent-addresses/types.ts |  3 +
 .../bitcoin/ui/send-transaction/index.vue     | 12 ++-
 .../ui/send-transaction/send-address-item.vue |  8 +-
 .../send-transaction/send-contacts-list.vue   | 79 +++++++++++++++++--
 .../ethereum/ui/send-transaction/index.vue    |  8 ++
 .../kadena/ui/send-transaction/index.vue      |  8 ++
 .../polkadot/ui/send-transaction/index.vue    |  8 ++
 .../src/providers/solana/networks/solana.ts   |  4 +-
 .../solana/ui/send-transaction/index.vue      |  9 ++-
 packages/extension/src/types/provider.ts      |  3 +-
 .../swap/src/providers/rango/supported.ts     |  3 +-
 packages/swap/tests/changelly.test.ts         |  4 +-
 13 files changed, 170 insertions(+), 20 deletions(-)
 create mode 100644 packages/extension/src/libs/recently-sent-addresses/index.ts
 create mode 100644 packages/extension/src/libs/recently-sent-addresses/types.ts

diff --git a/packages/extension/src/libs/recently-sent-addresses/index.ts b/packages/extension/src/libs/recently-sent-addresses/index.ts
new file mode 100644
index 000000000..73f9a56ed
--- /dev/null
+++ b/packages/extension/src/libs/recently-sent-addresses/index.ts
@@ -0,0 +1,41 @@
+import { InternalStorageNamespace } from "@/types/provider";
+import BrowserStorage from "../common/browser-storage";
+import { IState, } from "./types";
+import { NetworkNames } from "@enkryptcom/types";
+import { BaseNetwork } from "@/types/base-network";
+
+class RecentlySentAddressesState {
+  #storage: BrowserStorage
+
+  constructor() {
+    this.#storage = new BrowserStorage(
+      InternalStorageNamespace.recentlySentAddresses,
+    );
+  }
+
+  async addRecentlySentAddress(
+    network: Pick<BaseNetwork, 'name' | 'displayAddress'>,
+    address: string,
+  ): Promise<void> {
+    const key = network.name
+    const state: IState | undefined = await this.#storage.get(key)
+    const newState: IState = {
+      ...state,
+      addresses: Array.from(new Set([
+        network.displayAddress(address),
+        ...(state?.addresses ?? []),
+      ])).slice(0, 5),
+    }
+    await this.#storage.set(key, newState)
+  }
+
+  async getRecentlySentAddresses(networkName: NetworkNames): Promise<string[]> {
+    const key = networkName
+    const out: IState | undefined = await this.#storage.get(key)
+    if (!out) return []
+    return out.addresses
+  }
+}
+
+export default RecentlySentAddressesState
+
diff --git a/packages/extension/src/libs/recently-sent-addresses/types.ts b/packages/extension/src/libs/recently-sent-addresses/types.ts
new file mode 100644
index 000000000..44976940a
--- /dev/null
+++ b/packages/extension/src/libs/recently-sent-addresses/types.ts
@@ -0,0 +1,3 @@
+export type IState = {
+  addresses: string[]
+}
diff --git a/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue b/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
index 66138e361..2b53e7d7c 100644
--- a/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
@@ -168,6 +168,7 @@ import { getTxInfo as getBTCTxInfo } from '@/providers/bitcoin/libs/utils';
 import { NFTItem, NFTItemWithCollectionName, NFTType } from '@/types/nft';
 import { trackSendEvents } from '@/libs/metrics';
 import { SendEventType } from '@/libs/metrics/types';
+import RecentlySentAddressesState from '@/libs/recently-sent-addresses';
 
 const props = defineProps({
   network: {
@@ -313,8 +314,8 @@ const isInputsValid = computed<boolean>(() => {
   )
     return false;
 
-  const sendAmountBigNumber = new BigNumber(sendAmount.value)
-  if (sendAmountBigNumber.isNaN()) return false
+  const sendAmountBigNumber = new BigNumber(sendAmount.value);
+  if (sendAmountBigNumber.isNaN()) return false;
   if (sendAmountBigNumber.gt(assetMaxValue.value)) return false;
   return true;
 });
@@ -427,7 +428,14 @@ const selectNFT = (item: NFTItemWithCollectionName) => {
   isOpenSelectNft.value = false;
 };
 
+const recentlySentAddresses = new RecentlySentAddressesState();
+
 const sendAction = async () => {
+  await recentlySentAddresses.addRecentlySentAddress(
+    props.network,
+    addressTo.value,
+  );
+
   const keyring = new PublicKeyRing();
   const fromAccountInfo = await keyring.getAccount(addressFrom.value);
   const currentFee = toBN(
diff --git a/packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue b/packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue
index cb940ce1e..8c845e78c 100644
--- a/packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue
+++ b/packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue
@@ -7,7 +7,7 @@
       <img :src="network.identicon(network.displayAddress(account.address))" />
 
       <div class="send-address-item__name">
-        <h4>{{ account.name }}</h4>
+        <h4 v-if="account.name != null">{{ account.name }}</h4>
         <p>
           {{
             $filters.replaceWithEllipsis(
@@ -32,13 +32,17 @@ import { EnkryptAccount } from '@enkryptcom/types';
 const emit = defineEmits<{
   (e: 'selected:account', address: string): void;
 }>();
+
 defineProps({
   network: {
     type: Object as PropType<BaseNetwork>,
     default: () => ({}),
   },
   account: {
-    type: Object as PropType<EnkryptAccount>,
+    type: Object as PropType<{
+      name?: string;
+      address: string;
+    }>,
     default: () => {
       return {};
     },
diff --git a/packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue b/packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue
index b44d3f578..9826bf675 100644
--- a/packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue
+++ b/packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue
@@ -9,7 +9,10 @@
         class="send-contacts-list__scroll-area"
         :settings="scrollSettings({ suppressScrollX: true })"
       >
-        <div v-if="!isMyAddress" class="send-contacts-list__block">
+        <div
+          v-if="recentlySentAddresses && !isMyAddress"
+          class="send-contacts-list__block"
+        >
           <div class="send-contacts-list__buttons">
             <base-button title="Send to my address" :click="sendToMyAddress" />
 
@@ -20,7 +23,31 @@
               <paste-icon /> Paste
             </a>
           </div>
-          <h3>Recent</h3>
+          <template v-if="recentlySentAddresses.length">
+            <h3>Recent</h3>
+            <div class="send-contacts-list__list">
+              <send-address-item
+                v-for="(recentAddress, index) in recentlySentAddresses"
+                :key="index"
+                :account="{
+                  address: recentAddress,
+                  name: accountInfo.activeAccounts.find(
+                    account =>
+                      network.displayAddress(account.address) ===
+                      network.displayAddress(recentAddress),
+                  )?.name,
+                }"
+                :network="network"
+                v-bind="$attrs"
+                :is-checked="
+                  !!address &&
+                  network.displayAddress(address) ===
+                    network.displayAddress(recentAddress)
+                "
+              />
+            </div>
+          </template>
+          <h3>My accounts</h3>
           <div class="send-contacts-list__list">
             <send-address-item
               v-for="(account, index) in accountInfo.activeAccounts"
@@ -28,7 +55,11 @@
               :account="account"
               :network="network"
               v-bind="$attrs"
-              :is-checked="address == account.address"
+              :is-checked="
+                !!address &&
+                network.displayAddress(address) ===
+                  network.displayAddress(account.address)
+              "
             />
           </div>
         </div>
@@ -39,7 +70,6 @@
             </a>
             <h4>My accounts</h4>
           </div>
-
           <div class="send-contacts-list__list">
             <send-address-item
               v-for="(account, index) in accountInfo.activeAccounts"
@@ -47,7 +77,11 @@
               :account="account"
               :network="network"
               v-bind="$attrs"
-              :is-checked="address == account.address"
+              :is-checked="
+                !!address &&
+                network.displayAddress(address) ===
+                  network.displayAddress(account.address)
+              "
             />
           </div>
         </div>
@@ -57,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref } from 'vue';
+import { onMounted, PropType, ref } from 'vue';
 import SendAddressItem from './send-address-item.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import BaseButton from '@action/components/base-button/index.vue';
@@ -66,6 +100,7 @@ import scrollSettings from '@/libs/utils/scroll-settings';
 import { BaseNetwork } from '@/types/base-network';
 import PasteIcon from '@action/icons/actions/paste.vue';
 import ArrowBack from '@action/icons/common/arrow-back.vue';
+import RecentlySentAddressesState from '@/libs/recently-sent-addresses';
 
 const emit = defineEmits<{
   (e: 'update:pasteFromClipboard'): void;
@@ -74,7 +109,7 @@ const emit = defineEmits<{
 
 const isMyAddress = ref(false);
 
-defineProps({
+const props = defineProps({
   showAccounts: Boolean,
   accountInfo: {
     type: Object as PropType<AccountsHeaderData>,
@@ -90,6 +125,36 @@ defineProps({
   },
 });
 
+const recentlySentAddressesState = new RecentlySentAddressesState();
+
+const recentlySentAddresses = ref<null | string[]>(null);
+
+onMounted(async function () {
+  let timedOut = false;
+  const timeout = setTimeout(function () {
+    console.error('Timed out getting recently sent addresses');
+    recentlySentAddresses.value = [];
+    timedOut = true;
+  }, 500);
+  try {
+    const addresses = await recentlySentAddressesState.getRecentlySentAddresses(
+      props.network.name,
+    );
+    if (!timedOut) {
+      recentlySentAddresses.value = Array.from(
+        new Set(
+          addresses.map(address => props.network.displayAddress(address)),
+        ),
+      );
+    }
+  } catch (err) {
+    console.error('Error getting recently sent addresses', err);
+    recentlySentAddresses.value = [];
+  } finally {
+    clearTimeout(timeout);
+  }
+});
+
 const close = () => {
   emit('close', false);
 };
diff --git a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
index 4fd40a1f8..8a16ad5e9 100644
--- a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
@@ -171,6 +171,7 @@ import { GenericNameResolver, CoinType } from '@/libs/name-resolver';
 import { NetworkNames } from '@enkryptcom/types';
 import { trackSendEvents } from '@/libs/metrics';
 import { SendEventType } from '@/libs/metrics/types';
+import RecentlySentAddressesState from '@/libs/recently-sent-addresses';
 
 const props = defineProps({
   network: {
@@ -710,7 +711,14 @@ const selectFee = (type: GasPriceTypes) => {
     updateTransactionFees(Tx.value);
 };
 
+const recentlySentAddresses = new RecentlySentAddressesState();
+
 const sendAction = async () => {
+  await recentlySentAddresses.addRecentlySentAddress(
+    props.network,
+    addressTo.value,
+  );
+
   const keyring = new PublicKeyRing();
   const fromAccountInfo = await keyring.getAccount(
     addressFrom.value.toLowerCase(),
diff --git a/packages/extension/src/providers/kadena/ui/send-transaction/index.vue b/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
index e1bd7305c..bf19bfee4 100644
--- a/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
@@ -127,6 +127,7 @@ import getUiPath from '@/libs/utils/get-ui-path';
 import { ProviderName } from '@/types/provider';
 import Browser from 'webextension-polyfill';
 import { ICommandResult } from '@kadena/client';
+import RecentlySentAddressesState from '@/libs/recently-sent-addresses';
 
 const props = defineProps({
   network: {
@@ -466,7 +467,14 @@ const isDisabled = computed(() => {
   );
 });
 
+const recentlySentAddresses = new RecentlySentAddressesState();
+
 const sendAction = async () => {
+  await recentlySentAddresses.addRecentlySentAddress(
+    props.network,
+    addressTo.value,
+  );
+
   const keyring = new PublicKeyRing();
   const fromAccount = await keyring.getAccount(addressFrom.value);
   const networkApi = (await props.network.api()) as KadenaAPI;
diff --git a/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue b/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
index bae45e7bc..38e6b6320 100644
--- a/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
@@ -141,6 +141,7 @@ import { GenericNameResolver, CoinType } from '@/libs/name-resolver';
 import { trackSendEvents } from '@/libs/metrics';
 import { SendEventType } from '@/libs/metrics/types';
 import { BNType } from '@/providers/common/types';
+import RecentlySentAddressesState from '@/libs/recently-sent-addresses';
 
 const props = defineProps({
   network: {
@@ -497,7 +498,14 @@ const isDisabled = computed(() => {
   return isDisabled;
 });
 
+const recentlySentAddresses = new RecentlySentAddressesState();
+
 const sendAction = async () => {
+  await recentlySentAddresses.addRecentlySentAddress(
+    props.network,
+    addressTo.value,
+  );
+
   const sendAmount = toBase(amount.value!, selectedAsset.value.decimals!);
 
   const sendOptions: SendOptions | undefined = sendMax.value
diff --git a/packages/extension/src/providers/solana/networks/solana.ts b/packages/extension/src/providers/solana/networks/solana.ts
index b11e8c760..e34d3fe9e 100644
--- a/packages/extension/src/providers/solana/networks/solana.ts
+++ b/packages/extension/src/providers/solana/networks/solana.ts
@@ -25,6 +25,6 @@ const solanaOptions: SolanaNetworkOptions = {
   coingeckoPlatform: CoingeckoPlatform.Solana,
 };
 
-const bitcoin = new SolanaNetwork(solanaOptions);
+const solana = new SolanaNetwork(solanaOptions);
 
-export default bitcoin;
+export default solana;
diff --git a/packages/extension/src/providers/solana/ui/send-transaction/index.vue b/packages/extension/src/providers/solana/ui/send-transaction/index.vue
index 0ecf92072..c8dd87332 100644
--- a/packages/extension/src/providers/solana/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/solana/ui/send-transaction/index.vue
@@ -173,7 +173,7 @@ import {
 import getPriorityFees from '../libs/get-priority-fees';
 import bs58 from 'bs58';
 import SolanaAPI from '@/providers/solana/libs/api';
-import { ComputedRefSymbol } from '@vue/reactivity';
+import RecentlySentAddressesState from '@/libs/recently-sent-addresses';
 
 const props = defineProps({
   network: {
@@ -718,7 +718,14 @@ const inputAmount = (inputAmount: string) => {
   }
 };
 
+const recentlySentAddresses = new RecentlySentAddressesState();
+
 const sendAction = async () => {
+  await recentlySentAddresses.addRecentlySentAddress(
+    props.network,
+    addressTo.value,
+  );
+
   const keyring = new PublicKeyRing();
   const fromAccountInfo = await keyring.getAccount(
     addressFrom.value.toLowerCase(),
diff --git a/packages/extension/src/types/provider.ts b/packages/extension/src/types/provider.ts
index a50480a27..4d9adafb4 100644
--- a/packages/extension/src/types/provider.ts
+++ b/packages/extension/src/types/provider.ts
@@ -51,6 +51,7 @@ export enum InternalStorageNamespace {
   tokensState = 'TokensState',
   customNetworksState = 'CustomNetworksState',
   rateState = 'RateState',
+  recentlySentAddresses = 'RecentlySentAddresses',
 }
 export enum EnkryptProviderEventMethods {
   persistentEvents = 'PersistentEvents',
@@ -128,7 +129,7 @@ export abstract class BackgroundProviderInterface extends EventEmitter {
 export abstract class ProviderAPIInterface {
   abstract node: string;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(node: string, options?: unknown) {}
+  constructor(node: string, options?: unknown) { }
   abstract init(): Promise<void>;
   abstract getBalance(address: string): Promise<string>;
   abstract getTransactionStatus(
diff --git a/packages/swap/src/providers/rango/supported.ts b/packages/swap/src/providers/rango/supported.ts
index 0b4f5fb10..272300fd6 100644
--- a/packages/swap/src/providers/rango/supported.ts
+++ b/packages/swap/src/providers/rango/supported.ts
@@ -1,4 +1,4 @@
-import { SupportedNetworkName, } from '../../types'
+import { SupportedNetworkName } from "../../types";
 
 export type SupportedNetworkInfo = {
   /** Standard base10 chain ID, can be obtained from `https://chainlist.org` */
@@ -179,4 +179,3 @@ export const supportedNetworkByRangoBlockchain = new Map<
     },
   ]),
 );
-
diff --git a/packages/swap/tests/changelly.test.ts b/packages/swap/tests/changelly.test.ts
index 3f9708c42..b1f9ade80 100644
--- a/packages/swap/tests/changelly.test.ts
+++ b/packages/swap/tests/changelly.test.ts
@@ -51,9 +51,7 @@ describe("Changelly Provider", () => {
       (swap?.transactions[0] as EVMTransaction).data.startsWith("0xa9059cbb"),
     ).to.be.eq(true);
     const status = await changelly.getStatus(
-      (
-        await swap!.getStatusObject({ transactions: [] })
-      ).options,
+      (await swap!.getStatusObject({ transactions: [] })).options,
     );
     expect(status).to.be.eq("pending");
   });