devop: merge with develop

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enkryptcom/extension",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": true,
   "type": "module",
   "scripts": {

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
+

packages/extension/src/libs/recently-sent-addresses/types.ts

@@ -0,0 +1,3 @@
+export type IState = {
+  addresses: string[]
+}

packages/extension/src/libs/utils/networks.ts

@@ -75,12 +75,13 @@ const DEFAULT_SOLANA_NETWORK = Solana;
 const POPULAR_NAMES = [
   NetworkNames.Bitcoin,
   NetworkNames.Ethereum,
+  NetworkNames.Solana,
   NetworkNames.Matic,
   NetworkNames.Polkadot,
   NetworkNames.Binance,
   NetworkNames.Rootstock,
   NetworkNames.Optimism,
-  NetworkNames.Kadena,
+  NetworkNames.Arbitrum,
 ];
 export {
   getAllNetworks,

packages/extension/src/providers/bitcoin/ui/send-transaction/components/send-alert.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="send-alert">
     <alert-icon />
-    <p v-if="belowDust">Minimum amount: {{ dust }}</p>
+    <p v-if="isBalanceZero">Not enough balance.</p>
+    <p v-else-if="belowDust">Minimum amount: {{ dust }}</p>
     <p v-else-if="notEnough">
       Not enough funds. You are<br />~{{
         $filters.formatFloatingPointValue(nativeValue).value
@@ -24,6 +25,7 @@ interface IProps {
   price?: string;
   notEnough: boolean;
   belowDust: boolean;
+  isBalanceZero: boolean;
   dust: string;
 }
 

packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue

@@ -96,6 +96,7 @@
         "
         :native-symbol="network.name"
         :price="selectedAsset.price || '0'"
+        :is-balance-zero="UTXOBalance.isZero()"
         :native-value="
           fromBase(
             nativeBalanceAfterTransaction.abs().toString(),
@@ -168,6 +169,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 +315,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 +429,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(

packages/extension/src/providers/common/libs/new-features.ts

@@ -1,6 +1,6 @@
 import { NetworkNames } from '@enkryptcom/types';
 
 const newNetworks = [NetworkNames.Bitrock, NetworkNames.Fraxtal];
-const newSwaps: NetworkNames[] = [NetworkNames.Dogecoin];
+const newSwaps: NetworkNames[] = [];
 
 export { newNetworks, newSwaps };

packages/extension/src/providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue

@@ -1,22 +1,14 @@
 <template>
   <a class="nft-select-list__token" @click="$emit('selectNft', item)">
     <div class="nft-select-list__token-info">
-      <img :src="item.image" />
+      <img :src="item.image" @error="imageLoadError" />
 
       <div class="nft-select-list__token-info-name">
         <h4>
-          {{
-            item.name.length > 40
-              ? item.name.substring(0, 40) + '...'
-              : item.name
-          }}
+          {{ $filters.truncate(item.name, 25) }}
         </h4>
         <p>
-          {{
-            item.collectionName.length > 50
-              ? item.collectionName.substring(0, 50) + '...'
-              : item.collectionName
-          }}
+          {{ $filters.truncate(item.collectionName, 50) }}
         </p>
       </div>
     </div>
@@ -26,6 +18,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue';
 import { NFTItemWithCollectionName } from '@/types/nft';
+import { imageLoadError } from '@/ui/action/utils/misc';
 
 defineEmits<{
   (e: 'selectNft', data: NFTItemWithCollectionName): void;

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 {};
     },

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,15 +23,43 @@
               <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"
               :key="index"
               :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,15 +70,18 @@
             </a>
             <h4>My accounts</h4>
           </div>
-
           <div class="send-contacts-list__list">
             <send-address-item
               v-for="(account, index) in accountInfo.activeAccounts"
               :key="index"
               :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);
 };

packages/extension/src/providers/common/ui/send-transaction/send-nft-select.vue

@@ -2,22 +2,14 @@
   <div class="send-nft-select__wrap">
     <a class="send-nft-select" @click="$emit('toggleSelect', item.id !== '')">
       <div class="send-nft-select__image">
-        <img v-if="item.image !== ''" :src="item.image" alt="" />
+        <img :src="item.image" alt="" @error="imageLoadError" />
       </div>
       <div class="send-nft-select__info">
         <h5>
-          {{
-            item.name.length > 25
-              ? item.name.substring(0, 25) + '...'
-              : item.name
-          }}
+          {{ $filters.truncate(item.name, 25) }}
         </h5>
         <p>
-          {{
-            item.collectionName.length > 50
-              ? item.collectionName.substring(0, 50) + '...'
-              : item.collectionName
-          }}
+          {{ $filters.truncate(item.collectionName, 50) }}
         </p>
       </div>
 
@@ -43,6 +35,7 @@
 import { PropType } from 'vue';
 import SwitchArrow from '@action/icons/header/switch_arrow.vue';
 import { NFTItemWithCollectionName } from '@/types/nft';
+import { imageLoadError } from '@/ui/action/utils/misc';
 
 defineEmits<{
   (e: 'toggleSelect', val: boolean): void;

packages/extension/src/providers/ethereum/libs/api.ts

@@ -76,6 +76,7 @@ class API implements ProviderAPIInterface {
         name: 'Unknown',
         symbol: 'UNKNWN',
         decimals: 18,
+        icon: undefined,
       };
     }
   };