Feat/collapse networks menu

packages/extension/src/libs/menu-state/index.ts

@@ -0,0 +1,39 @@
+import BrowserStorage from '../common/browser-storage';
+import { InternalStorageNamespace } from '@/types/provider';
+import { IState, StorageKeys } from './types';
+
+class MenuState {
+  private storage: BrowserStorage;
+
+  constructor() {
+    this.storage = new BrowserStorage(InternalStorageNamespace.menuState);
+  }
+
+  async setState(state: IState): Promise<void> {
+    return this.storage.set(StorageKeys.menuState, state);
+  }
+
+  async getState(): Promise<IState> {
+    const state = this.storage.get(StorageKeys.menuState);
+    if (!state) {
+      const newState: IState = {
+        isExpanded: true
+      }
+      return newState
+    }
+    return state;
+  }
+
+  async getIsExpanded(): Promise<IState['isExpanded']> {
+    const state: IState = await this.getState();
+    return state?.isExpanded ?? true;
+  }
+  async setIsExpanded(isExpanded: boolean): Promise<void> {
+    const state: IState = await this.getState();
+    const newState: IState = { ...state, isExpanded }
+    await this.setState(newState);
+  }
+
+}
+
+export default MenuState;

packages/extension/src/libs/menu-state/types.ts

@@ -0,0 +1,7 @@
+export enum StorageKeys {
+  menuState = 'menu-state-info',
+}
+
+export interface IState {
+  isExpanded: boolean;
+}

packages/extension/src/providers/bitcoin/networks/bitcoin-testnet.ts

@@ -1,4 +1,4 @@
-import icon from './icons/tbtc.svg';
+import icon from './icons/tbtc.webp';
 import { NetworkNames } from '@enkryptcom/types';
 import {
   BitcoinNetwork,

packages/extension/src/providers/bitcoin/networks/bitcoin.ts

@@ -1,4 +1,4 @@
-import icon from './icons/btc.svg';
+import icon from './icons/btc.webp';
 import { NetworkNames } from '@enkryptcom/types';
 import {
   BitcoinNetwork,

packages/extension/src/providers/bitcoin/networks/dogecoin.ts

@@ -1,4 +1,4 @@
-import icon from './icons/doge.svg';
+import icon from './icons/doge.webp';
 import { NetworkNames } from '@enkryptcom/types';
 import {
   BitcoinNetwork,

packages/extension/src/providers/bitcoin/networks/litecoin.ts

@@ -1,4 +1,4 @@
-import icon from './icons/ltc.svg';
+import icon from './icons/ltc.webp';
 import { NetworkNames } from '@enkryptcom/types';
 import {
   BitcoinNetwork,

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

@@ -56,11 +56,11 @@
       />
 
       <nft-select-list
-        v-show="isOpenSelectNft"
+        v-if="!isSendToken"
+        v-model="isOpenSelectNft"
         :address="addressFrom"
         :network="network"
         :selected-nft="paramNFTData"
-        @close="toggleSelectNft"
         @select-nft="selectNFT"
       />
 
@@ -80,11 +80,10 @@
       />
 
       <transaction-fee-view
+        v-model="isOpenSelectFee"
         :fees="gasCostValues"
-        :show-fees="isOpenSelectFee"
         :selected="selectedFee"
         :is-header="true"
-        @close-popup="toggleSelectFee"
         @gas-type-changed="selectFee"
       />
 

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

@@ -61,6 +61,7 @@
 
     <send-process
       v-if="isProcessing"
+      v-model="isProcessing"
       :is-nft="isNft"
       :to-address="txData.toAddress"
       :network="network"

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

@@ -1,12 +1,19 @@
 <template>
   <div class="nft-select-list-search">
     <search-icon />
-    <input type="text" placeholder="Search NFT" autocomplete="off" />
+    <input
+      v-model="model"
+      type="text"
+      placeholder="Search NFT"
+      autocomplete="off"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import SearchIcon from '@action/icons/common/search.vue';
+
+const model = defineModel<string>();
 </script>
 
 <style lang="less" scoped>

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

@@ -1,30 +1,28 @@
 <template>
-  <div class="nft-select-list">
-    <div class="nft-select-list__header">
-      <h3>Select NFT to send</h3>
-      <a class="nft-select-list__close" @click="emit('close', false)">
-        <close-icon />
-      </a>
-    </div>
+  <app-dialog v-model="model">
+    <div class="nft-select-list">
+      <div class="nft-select-list__header">
+        <h3>Select NFT to send</h3>
+      </div>
 
-    <nft-select-list-search />
+      <nft-select-list-search v-model="searchNFT" />
 
-    <custom-scrollbar
-      class="nft-select-list__scroll-area"
-      :settings="scrollSettings({ suppressScrollX: true })"
-    >
-      <nft-select-list-item
-        v-for="(item, index) in nftList"
-        :key="index"
-        :item="item"
-        @select-nft="emit('selectNft', $event)"
-      />
-    </custom-scrollbar>
-  </div>
+      <custom-scrollbar
+        class="nft-select-list__scroll-area"
+        :settings="scrollSettings({ suppressScrollX: true })"
+      >
+        <nft-select-list-item
+          v-for="(item, index) in nftList"
+          :key="index"
+          :item="item"
+          @select-nft="emit('selectNft', $event)"
+        />
+      </custom-scrollbar>
+    </div>
+  </app-dialog>
 </template>
 
 <script setup lang="ts">
-import CloseIcon from '@action/icons/common/close-icon.vue';
 import NftSelectListItem from './components/nft-select-list-item.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import NftSelectListSearch from './components/nft-select-list-search.vue';
@@ -39,7 +37,9 @@ import {
 } from '@/types/nft';
 import { BitcoinNetwork } from '@/providers/bitcoin/types/bitcoin-network';
 import { SolanaNetwork } from '@/providers/solana/types/sol-network';
+import AppDialog from '@action/components/app-dialog/index.vue';
 
+const model = defineModel<boolean>();
 const props = defineProps({
   network: {
     type: Object as PropType<EvmNetwork | BitcoinNetwork | SolanaNetwork>,
@@ -57,9 +57,10 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (e: 'selectNft', data: NFTItemWithCollectionName): void;
-  (e: 'close', val: boolean): void;
 }>();
 
+const searchNFT = ref<string>('');
+
 const nftCollections = ref<NFTCollection[]>([]);
 const nftList = computed(() => {
   const allItems: NFTItemWithCollectionName[] = [];
@@ -68,6 +69,16 @@ const nftList = computed(() => {
       allItems.push({ ...item, ...{ collectionName: col.name } });
     });
   });
+  if (searchNFT.value && searchNFT.value !== '') {
+    return allItems.filter(item => {
+      return (
+        item.name.toLowerCase().includes(searchNFT.value.toLowerCase()) ||
+        item.collectionName
+          .toLowerCase()
+          .includes(searchNFT.value.toLowerCase())
+      );
+    });
+  }
   return allItems;
 });
 const updateNFTList = () => {
@@ -114,18 +125,7 @@ onMounted(() => {
 @import '@action/styles/custom-scroll.less';
 
 .nft-select-list {
-  width: 100%;
-  background: #ffffff;
-  position: fixed;
-  box-shadow:
-    0px 3px 6px rgba(0, 0, 0, 0.039),
-    0px 7px 24px rgba(0, 0, 0, 0.19);
-  border-radius: 12px;
-  width: 428px;
   height: 568px;
-  left: 356px;
-  top: 16px;
-  z-index: 12;
 
   &__header {
     position: relative;
@@ -141,19 +141,6 @@ onMounted(() => {
     }
   }
 
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 0;
-
-    &:hover {
-      background: @black007;
-    }
-  }
-
   &__scroll-area {
     position: relative;
     margin: auto;

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

@@ -7,9 +7,7 @@
     <div class="send-fee-select__value">
       <p class="send-fee-select__value-fiat">
         Fee:
-        {{
-          $filters.parseCurrency($filters.formatFiatValue(fee.fiatValue).value)
-        }}
+        {{ $filters.parseCurrency(fee.fiatValue) }}
       </p>
       <p class="send-fee-select__value-crypto">
         {{ $filters.formatFloatingPointValue(fee.nativeValue).value }}

packages/extension/src/providers/common/ui/send-transaction/send-input-amount.vue

@@ -13,9 +13,7 @@
 
     <div class="send-input-amount__fiat">
       <switch-arrow-icon />
-      <span>{{
-        $filters.parseCurrency($filters.formatFiatValue(fiatEquivalent).value)
-      }}</span>
+      <span>{{ $filters.parseCurrency(fiatEquivalent) }}</span>
     </div>
 
     <a

packages/extension/src/providers/common/ui/verify-transaction/verify-transaction-fee.vue

@@ -2,9 +2,7 @@
   <div class="verify-transaction-fee">
     <p class="verify-transaction-fee__fiat">
       Network fee:
-      {{
-        $filters.parseCurrency($filters.formatFiatValue(fee.fiatValue).value)
-      }}
+      {{ $filters.parseCurrency(fee.fiatValue) }}
     </p>
     <p class="verify-transaction-fee__crypto">
       {{ $filters.formatFloatingPointValue(fee.nativeValue).value }}

packages/extension/src/providers/common/ui/verify-transaction/verify-transaction-network.vue

@@ -41,6 +41,7 @@ defineProps({
     width: 32px;
     height: 32px;
     margin-right: 12px;
+    object-fit: contain;
   }
 
   &__name {

packages/extension/src/providers/ethereum/libs/activity-handlers/providers/etherscan/configs.ts

@@ -70,7 +70,6 @@ const NetworkEndpoints: Record<string, string> = {
   [NetworkNames.ProofOfPlayApex]: 'https://explorer.apex.proofofplay.com/',
   [NetworkNames.Scroll]: 'https://api.scrollscan.com/',
   [NetworkNames.Fraxtal]: 'https://api.fraxscan.com/',
-  [NetworkNames.Ink]: 'https://explorer.inkonchain.com/',
   [NetworkNames.Coti]: 'https://mainnet.cotiscan.io/',
 };
 

packages/extension/src/providers/ethereum/libs/assets-handlers/assetinfo-mew.ts

@@ -206,8 +206,8 @@ const supportedNetworks: Record<SupportedNetworkNames, SupportedNetwork> = {
     cgPlatform: CoingeckoPlatform.Story,
   },
   [NetworkNames.Ink]: {
+    tbName: 'ink',
     cgPlatform: CoingeckoPlatform.Ink,
-    bsEndpoint: true,
   },
   [NetworkNames.Bera]: {
     tbName: 'bera',

packages/extension/src/providers/ethereum/networks/5ire.ts

@@ -1,4 +1,4 @@
-import icon from './icons/5ire.svg';
+import icon from './icons/5ire.webp';
 import wrapActivityHandler from '@/libs/activity-state/wrap-activity-handler';
 import { NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';

packages/extension/src/providers/ethereum/networks/aa.ts

@@ -1,4 +1,4 @@
-import icon from './icons/aa.svg';
+import icon from './icons/aa.webp';
 import { NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import { EtherscanActivity } from '../libs/activity-handlers';

packages/extension/src/providers/ethereum/networks/aat.ts

@@ -1,4 +1,4 @@
-import icon from './icons/aa.svg';
+import icon from './icons/aa.webp';
 import { NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import { EtherscanActivity } from '../libs/activity-handlers';

packages/extension/src/providers/ethereum/networks/arb-nova.ts

@@ -1,4 +1,4 @@
-import icon from './icons/arbitrum-nova.png';
+import icon from './icons/arbitrum-nova.webp';
 import { CoingeckoPlatform, NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import assetsInfoHandler from '@/providers/ethereum/libs/assets-handlers/assetinfo-mew';

packages/extension/src/providers/ethereum/networks/arb.ts

@@ -1,4 +1,4 @@
-import icon from './icons/arbitrum.svg';
+import icon from './icons/arbitrum.webp';
 import { CoingeckoPlatform, NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import { EtherscanActivity } from '../libs/activity-handlers';

packages/extension/src/providers/ethereum/networks/astr.ts

@@ -1,4 +1,4 @@
-import icon from './icons/astr.png';
+import icon from './icons/astr.webp';
 import { CoingeckoPlatform, NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import { EtherscanActivity } from '../libs/activity-handlers';

packages/extension/src/providers/ethereum/networks/aurora.ts

@@ -1,4 +1,4 @@
-import icon from './icons/aurora.png';
+import icon from './icons/aurora.webp';
 import { CoingeckoPlatform, NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import wrapActivityHandler from '@/libs/activity-state/wrap-activity-handler';

packages/extension/src/providers/ethereum/networks/avax.ts

@@ -1,4 +1,4 @@
-import icon from './icons/avax.svg';
+import icon from './icons/avax.webp';
 import { CoingeckoPlatform, NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import { EtherscanActivity } from '../libs/activity-handlers';

packages/extension/src/providers/ethereum/networks/base.ts

@@ -1,4 +1,4 @@
-import icon from './icons/base.svg';
+import icon from './icons/base.webp';
 import { CoingeckoPlatform, NetworkNames } from '@enkryptcom/types';
 import { EvmNetwork, EvmNetworkOptions } from '../types/evm-network';
 import shNFTHandler from '@/libs/nft-handlers/simplehash';