From 10480721d1cff89037ac9170d24f90c04a865a37 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 23 Apr 2025 11:12:02 -0700
Subject: [PATCH 1/3] feat: add buy button for assets

---
 .../components/asset-detail-action.vue        | 116 ++++++++++++++++++
 .../action/views/asset-detail-view/index.vue  |  11 +-
 .../components/network-assets-item.vue        |   6 +
 .../ui/action/views/network-assets/index.vue  |   1 +
 4 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue

diff --git a/packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue b/packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue
new file mode 100644
index 000000000..9cadfb145
--- /dev/null
+++ b/packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue
@@ -0,0 +1,116 @@
+<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' },
+        }"
+        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 { useRoute } from 'vue-router';
+const route = useRoute();
+
+defineEmits<{
+  (e: 'toggle:deposit'): void;
+  (e: 'open:buyAction'): void;
+}>();
+</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>
diff --git a/packages/extension/src/ui/action/views/asset-detail-view/index.vue b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
index cf5a2f8d4..2a7282e3d 100644
--- a/packages/extension/src/ui/action/views/asset-detail-view/index.vue
+++ b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
@@ -41,13 +41,14 @@
 
       <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" />
       <div class="asset-detail-view__token-divider" v-if="isCustomToken" />
       <div class="asset-detail-view__action" v-if="isCustomToken">
         <base-button
@@ -76,6 +77,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 +138,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');
 };
diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
index 4a9037b1a..ea4efb730 100644
--- a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
+++ b/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
diff --git a/packages/extension/src/ui/action/views/network-assets/index.vue b/packages/extension/src/ui/action/views/network-assets/index.vue
index 69a6dd694..af1f4988a 100644
--- a/packages/extension/src/ui/action/views/network-assets/index.vue
+++ b/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"

From e66ef35ff001a1d56944350d21096606437bd885 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 23 Apr 2025 11:58:43 -0700
Subject: [PATCH 2/3] fix: update send to allow using token param

---
 .../ethereum/ui/send-transaction/index.vue     | 18 ++++++++++++++----
 .../components/asset-detail-action.vue         | 16 +++++++++++++++-
 .../action/views/asset-detail-view/index.vue   |  6 +++++-
 3 files changed, 34 insertions(+), 6 deletions(-)

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 7154f38c3..0b2eed943 100644
--- a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
+++ b/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';
@@ -204,7 +204,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,17 @@ 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 = 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;
   });
diff --git a/packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue b/packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue
index 9cadfb145..c04ade82e 100644
--- a/packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue
+++ b/packages/extension/src/ui/action/views/asset-detail-view/components/asset-detail-action.vue
@@ -10,7 +10,11 @@
       <router-link
         :to="{
           name: 'send-transaction',
-          params: { id: route.params.id, isToken: 'true' },
+          params: {
+            id: route.params.id,
+            isToken: 'true',
+            tokenData: JSON.stringify(token),
+          },
         }"
         class="asset-detail__action-item"
       >
@@ -33,13 +37,23 @@
 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">
diff --git a/packages/extension/src/ui/action/views/asset-detail-view/index.vue b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
index 2a7282e3d..3ccd0ca5f 100644
--- a/packages/extension/src/ui/action/views/asset-detail-view/index.vue
+++ b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
@@ -48,7 +48,11 @@
         </h4>
         <p>${{ token.balanceUSDf }}</p>
       </div>
-      <asset-detail-action @open:buy-action="openBuySell" />
+      <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

From 9e3395a95448d4c25b3e5aaf48b05c5474165026 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 23 Apr 2025 12:04:16 -0700
Subject: [PATCH 3/3] feat: implement send redirect on solana as well

---
 .../ethereum/ui/send-transaction/index.vue       |  3 ++-
 .../solana/ui/send-transaction/index.vue         | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

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 0b2eed943..37b17f660 100644
--- a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
@@ -545,7 +545,8 @@ const fetchAssets = () => {
   isLoadingAssets.value = true;
   return props.network.getAllTokens(addressFrom.value).then(allAssets => {
     accountAssets.value = allAssets as Erc20Token[];
-    const hasParamData = tokenParamData && tokenParamData.contract;
+    const hasParamData =
+      isSendToken.value && tokenParamData && tokenParamData.contract;
     if (hasParamData) {
       const selectedToken = allAssets.find(
         asset => asset.contract === tokenParamData.contract,
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 a947cbc51..e0d753d82 100644
--- a/packages/extension/src/providers/solana/ui/send-transaction/index.vue
+++ b/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;
   });
 };