Feat/add asset action

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

@@ -77,7 +77,7 @@
         v-model="isOpenSelectNft"
         :address="addressFrom"
         :network="network"
-        :selected-nft="paramNFTData"
+        :selected-nft="tokenParamData"
         @select-nft="selectNFT"
       />
 
@@ -127,7 +127,7 @@
 <script setup lang="ts">
 import { ref, onMounted, PropType, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { debounce } from 'lodash';
+import { debounce, has } from 'lodash';
 import SendHeader from '@/providers/common/ui/send-transaction/send-header.vue';
 import SendAddressInput from './components/send-address-input.vue';
 import SendFromContactsList from '@/providers/common/ui/send-transaction/send-from-contacts-list.vue';
@@ -203,7 +203,7 @@ const router = useRouter();
 const nameResolver = new GenericNameResolver();
 const addressInputTo = ref();
 const selected: string = route.params.id as string;
-const paramNFTData: NFTItem = JSON.parse(
+const tokenParamData: NFTItem = JSON.parse(
   route.params.tokenData ? (route.params.tokenData as string) : '{}',
 ) as NFTItem;
 const isSendToken = ref<boolean>(JSON.parse(route.params.isToken as string));
@@ -545,7 +545,18 @@ const fetchAssets = () => {
   isLoadingAssets.value = true;
   return props.network.getAllTokens(addressFrom.value).then(allAssets => {
     accountAssets.value = allAssets as Erc20Token[];
-    selectedAsset.value = allAssets[0] as Erc20Token;
+    const hasParamData =
+      isSendToken.value && tokenParamData && tokenParamData.contract;
+    if (hasParamData) {
+      const selectedToken = allAssets.find(
+        asset => asset.contract === tokenParamData.contract,
+      );
+      if (selectedToken) {
+        selectedAsset.value = selectedToken as Erc20Token;
+      } else {
+        selectedAsset.value = allAssets[0] as Erc20Token;
+      }
+    }
 
     isLoadingAssets.value = false;
   });

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

@@ -72,7 +72,7 @@
         v-model="isOpenSelectNft"
         :address="addressFrom"
         :network="network"
-        :selected-nft="paramNFTData"
+        :selected-nft="tokenParamData"
         @select-nft="selectNFT"
       />
 
@@ -203,7 +203,7 @@ const solConnection = ref<SolanaAPI>();
 const nameResolver = new GenericNameResolver();
 const addressInputTo = ref();
 const selected: string = route.params.id as string;
-const paramNFTData: NFTItem = JSON.parse(
+const tokenParamData: NFTItem = JSON.parse(
   route.params.tokenData ? (route.params.tokenData as string) : '{}',
 ) as NFTItem;
 const isSendToken = ref<boolean>(JSON.parse(route.params.isToken as string));
@@ -448,6 +448,18 @@ const fetchAssets = () => {
   return props.network.getAllTokens(addressFrom.value).then(allAssets => {
     accountAssets.value = allAssets as SOLToken[];
     selectedAsset.value = allAssets[0] as SOLToken;
+    const hasParamData =
+      isSendToken.value && tokenParamData && tokenParamData.contract;
+    if (hasParamData) {
+      const selectedToken = allAssets.find(
+        asset => asset.contract === tokenParamData.contract,
+      );
+      if (selectedToken) {
+        selectedAsset.value = selectedToken as SOLToken;
+      } else {
+        selectedAsset.value = allAssets[0] as SOLToken;
+      }
+    }
     isLoadingAssets.value = false;
   });
 };

packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="asset-detail__action">
+    <div class="asset-detail__action-wrap">
+      <button
+        class="asset-detail__action-item"
+        @click="$emit('open:buyAction')"
+      >
+        <Buy />Buy/Sell
+      </button>
+      <router-link
+        :to="{
+          name: 'send-transaction',
+          params: {
+            id: route.params.id,
+            isToken: 'true',
+            tokenData: JSON.stringify(token),
+          },
+        }"
+        class="asset-detail__action-item"
+      >
+        <Send />Send
+      </router-link>
+      <router-link
+        class="asset-detail__action-item"
+        :to="{
+          name: 'swap',
+          params: { id: route.params.id },
+        }"
+      >
+        <Swap />Swap
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Buy from '@action/icons/actions/buy.vue';
+import Send from '@action/icons/actions/send.vue';
+import Swap from '@action/icons/actions/swap.vue';
+
+import type { AssetsType } from '@/types/provider';
+import { useRoute } from 'vue-router';
+import { PropType } from 'vue';
+const route = useRoute();
+
+defineEmits<{
+  (e: 'toggle:deposit'): void;
+  (e: 'open:buyAction'): void;
+}>();
+
+defineProps({
+  token: {
+    type: Object as PropType<AssetsType>,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+
+.asset-detail {
+  &__action {
+    box-sizing: border-box;
+
+    &-wrap {
+      width: 100%;
+      height: 72px;
+      left: 12px;
+      top: 0px;
+      border-radius: 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+      button {
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+        outline: inherit;
+        border: inherit;
+      }
+    }
+    &-item {
+      background: @primary007;
+      display: block;
+      text-align: center;
+      text-decoration: none;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+      letter-spacing: 0.5px;
+      color: @primaryLabel;
+      cursor: pointer;
+      height: 72px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      flex: 1;
+      min-width: 100px;
+      max-width: 100%;
+      transition: background 300ms ease-in-out;
+      border-radius: 12px;
+
+      &:hover {
+        background: @black004;
+      }
+
+      svg {
+        margin-bottom: 0;
+        margin-bottom: 2px;
+      }
+      &:focus {
+        outline: -webkit-focus-ring-color auto 1px !important;
+        outline-offset: 2px !important;
+      }
+    }
+    &-divider {
+      height: 48px;
+      width: 1px;
+      background: @darkBg;
+      margin: 0 4px 0 4px;
+    }
+  }
+}
+</style>

packages/extension/src/ui/action/views/asset-detail-view/index.vue

@@ -41,13 +41,18 @@
 
       <div class="asset-detail-view__token-divider" />
 
-      <div class="asset-detail-view__token-balance">
+      <div class="asset-detail-view__token-balance" v-if="!isCustomToken">
         <h6>Balance</h6>
         <h4>
           {{ token.balancef }} <span>{{ token.symbol.toLowerCase() }}</span>
         </h4>
         <p>${{ token.balanceUSDf }}</p>
       </div>
+      <asset-detail-action
+        @open:buy-action="openBuySell"
+        :token="token"
+        v-if="!isCustomToken"
+      />
       <div class="asset-detail-view__token-divider" v-if="isCustomToken" />
       <div class="asset-detail-view__action" v-if="isCustomToken">
         <base-button
@@ -76,6 +81,7 @@ import { LineChart } from 'echarts/charts';
 import { TooltipComponent, GridComponent } from 'echarts/components';
 import VChart from 'vue-echarts';
 import AppDialog from '@action/components/app-dialog/index.vue';
+import AssetDetailAction from './components/asset-detail-action.vue';
 
 const props = defineProps({
   token: {
@@ -136,7 +142,14 @@ const option = ref({
 
 const emit = defineEmits<{
   (e: 'close:popup'): void;
+  (e: 'open:buy-action', token: AssetsType): void;
 }>();
+
+const openBuySell = () => {
+  emit('open:buy-action', props.token);
+  emit('close:popup');
+};
+
 const close = () => {
   emit('close:popup');
 };

packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue

@@ -55,6 +55,7 @@
       :token="token"
       :is-custom-token="isCustomToken"
       :remove-token="removeToken"
+      @open:buy-action="openBuySell"
     />
   </div>
 </template>
@@ -160,8 +161,13 @@ const isCustomToken = computed(() => {
 
 const emit = defineEmits<{
   (e: 'update:tokens'): void;
+  (e: 'open:buy-action', token: AssetsType): void;
 }>();
 
+const openBuySell = () => {
+  emit('open:buy-action', props.token);
+};
+
 const removeToken = () => {
   if (props.token.contract) {
     tokenState

packages/extension/src/ui/action/views/network-assets/index.vue

@@ -25,6 +25,7 @@
             :token="item"
             :network="network"
             @update:tokens="updateAssets"
+            v-bind="$attrs"
           />
           <div
             v-show="network.customTokens && assets.length !== 0"