Merge branch 'feature_220602_popup_nft' into dev_1.1.0

src/assets/svg/icon-nft-back-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303L8.24264 17.3033C8.53553 17.5962 9.01041 17.5962 9.3033 17.3033C9.59619 17.0104 9.59619 16.5355 9.3033 16.2426L5.06066 12L9.3033 7.75736C9.59619 7.46447 9.59619 6.98959 9.3033 6.6967C9.01041 6.40381 8.53553 6.40381 8.24264 6.6967L3.46967 11.4697ZM20 11.25L4 11.25L4 12.75L20 12.75L20 11.25Z" fill="black"/>
+</svg>

src/assets/svg/icon-tab-message-active.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 24.8203C13.8506 24.8203 12.7405 24.6728 11.6932 24.3981C11.0133 24.2198 9.14472 24.8397 6.0875 26.2578C6.90527 23.6109 7.09915 22.0898 6.66917 21.6945C4.70537 19.8894 3.5 17.4468 3.5 14.7578C3.5 9.20044 8.64872 4.69531 15 4.69531C21.3513 4.69531 26.5 9.20044 26.5 14.7578C26.5 20.3152 21.3513 24.8203 15 24.8203ZM10.4288 16.0803C11.1432 16.0803 11.7225 15.5011 11.7225 14.7866C11.7225 14.0721 11.1432 13.4928 10.4288 13.4928C9.71426 13.4928 9.135 14.0721 9.135 14.7866C9.135 15.5011 9.71426 16.0803 10.4288 16.0803ZM15.0288 16.0803C15.7432 16.0803 16.3225 15.5011 16.3225 14.7866C16.3225 14.0721 15.7432 13.4928 15.0288 13.4928C14.3143 13.4928 13.735 14.0721 13.735 14.7866C13.735 15.5011 14.3143 16.0803 15.0288 16.0803ZM19.6287 16.0803C20.3432 16.0803 20.9225 15.5011 20.9225 14.7866C20.9225 14.0721 20.3432 13.4928 19.6287 13.4928C18.9143 13.4928 18.335 14.0721 18.335 14.7866C18.335 15.5011 18.9143 16.0803 19.6287 16.0803Z" fill="#1D9BF0"/>
+</svg>

src/assets/svg/icon-tab-message.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 24.8203C13.8506 24.8203 12.7405 24.6728 11.6932 24.3981C11.0133 24.2198 9.14472 24.8397 6.0875 26.2578C6.90527 23.6109 7.09915 22.0898 6.66917 21.6945C4.70537 19.8894 3.5 17.4468 3.5 14.7578C3.5 9.20044 8.64872 4.69531 15 4.69531C21.3513 4.69531 26.5 9.20044 26.5 14.7578C26.5 20.3152 21.3513 24.8203 15 24.8203ZM10.4288 16.0803C11.1432 16.0803 11.7225 15.5011 11.7225 14.7866C11.7225 14.0721 11.1432 13.4928 10.4288 13.4928C9.71426 13.4928 9.135 14.0721 9.135 14.7866C9.135 15.5011 9.71426 16.0803 10.4288 16.0803ZM15.0288 16.0803C15.7432 16.0803 16.3225 15.5011 16.3225 14.7866C16.3225 14.0721 15.7432 13.4928 15.0288 13.4928C14.3143 13.4928 13.735 14.0721 13.735 14.7866C13.735 15.5011 14.3143 16.0803 15.0288 16.0803ZM19.6287 16.0803C20.3432 16.0803 20.9225 15.5011 20.9225 14.7866C20.9225 14.0721 20.3432 13.4928 19.6287 13.4928C18.9143 13.4928 18.335 14.0721 18.335 14.7866C18.335 15.5011 18.9143 16.0803 19.6287 16.0803Z" fill="#C0C0C0"/>
+</svg>

src/assets/svg/icon-tab-more-active.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.465 12.034C14.465 13.3735 13.379 14.4595 12.0396 14.4595H7.43108C6.09162 14.4595 5.00559 13.3734 5.00559 12.034V7.4255C5.00559 6.08604 6.09162 5 7.43108 5H12.0395C13.379 5 14.465 6.08604 14.465 7.4255V12.034ZM25.0056 22.5744C25.0056 23.914 23.9196 25 22.58 25H17.9717C16.6322 25 15.5461 23.914 15.5461 22.5744V17.9661C15.5461 16.6266 16.6322 15.5405 17.9717 15.5405H22.58C23.9196 15.5405 25.0056 16.6266 25.0056 17.9661V22.5744ZM14.4595 22.5744C14.4595 23.914 13.3734 25 12.034 25H7.4255C6.08595 25 5 23.914 5 22.5744V17.9661C5 16.6266 6.08604 15.5405 7.4255 15.5405H12.0339C13.3734 15.5405 14.4594 16.6266 14.4594 17.9661V22.5744H14.4595ZM22.3336 7.10775C22.4817 7.10791 22.6237 7.16681 22.7284 7.27152C22.8331 7.37624 22.8921 7.51821 22.8923 7.66631V11.7932C22.8923 12.1011 22.6416 12.3517 22.3336 12.3517H18.2068C18.0588 12.3515 17.9168 12.2926 17.812 12.1879C17.7073 12.0832 17.6484 11.9412 17.6482 11.7932V7.66631C17.6482 7.35838 17.8988 7.10775 18.2068 7.10775H22.3336ZM22.5744 5H17.9661C16.6266 5 15.5405 6.08604 15.5405 7.42559V12.0339C15.5405 13.3734 16.6266 14.4595 17.9661 14.4595H22.5744C23.914 14.4595 25 13.3734 25 12.0339V7.42559C25 6.08604 23.914 5 22.5744 5Z" fill="#1D9BF0"/>
+</svg>

src/assets/svg/icon-tab-more.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.465 12.034C14.465 13.3735 13.379 14.4595 12.0396 14.4595H7.43108C6.09162 14.4595 5.00559 13.3734 5.00559 12.034V7.4255C5.00559 6.08604 6.09162 5 7.43108 5H12.0395C13.379 5 14.465 6.08604 14.465 7.4255V12.034ZM25.0056 22.5744C25.0056 23.914 23.9196 25 22.58 25H17.9717C16.6322 25 15.5461 23.914 15.5461 22.5744V17.9661C15.5461 16.6266 16.6322 15.5405 17.9717 15.5405H22.58C23.9196 15.5405 25.0056 16.6266 25.0056 17.9661V22.5744ZM14.4595 22.5744C14.4595 23.914 13.3734 25 12.034 25H7.4255C6.08595 25 5 23.914 5 22.5744V17.9661C5 16.6266 6.08604 15.5405 7.4255 15.5405H12.0339C13.3734 15.5405 14.4594 16.6266 14.4594 17.9661V22.5744H14.4595ZM22.3336 7.10775C22.4817 7.10791 22.6237 7.16681 22.7284 7.27152C22.8331 7.37624 22.8921 7.51821 22.8923 7.66631V11.7932C22.8923 12.1011 22.6416 12.3517 22.3336 12.3517H18.2068C18.0588 12.3515 17.9168 12.2926 17.812 12.1879C17.7073 12.0832 17.6484 11.9412 17.6482 11.7932V7.66631C17.6482 7.35838 17.8988 7.10775 18.2068 7.10775H22.3336ZM22.5744 5H17.9661C16.6266 5 15.5405 6.08604 15.5405 7.42559V12.0339C15.5405 13.3734 16.6266 14.4595 17.9661 14.4595H22.5744C23.914 14.4595 25 13.3734 25 12.0339V7.42559C25 6.08604 23.914 5 22.5744 5Z" fill="#C0C0C0"/>
+</svg>

src/assets/svg/icon-tab-wallet-active.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.9981 6H23.0044C24.6547 6 26 7.34533 26 8.9981V11.738H18.3117C16.4179 11.738 14.8684 13.2874 14.8684 15.1812V16.0617C14.8684 17.9555 16.4179 19.505 18.3117 19.505H26V22.2448C26 23.9 24.6547 25.2429 23.0019 25.2429H6.9981C5.34287 25.2429 4 23.8976 4 22.2448V8.9981C4 7.34287 5.34533 6 6.9981 6ZM16.0967 15.1806C16.0967 14.5928 16.3279 14.0394 16.7485 13.6188C17.1666 13.1983 17.7224 12.9671 18.3103 12.9671H25.9986V18.2746H18.3103C17.7224 18.2746 17.1691 18.0434 16.7485 17.6229C16.3279 17.2023 16.0967 16.6489 16.0967 16.0611V15.1806ZM20.1991 15.6208C20.1991 15.0773 19.7589 14.6371 19.2153 14.6371C18.6718 14.6371 18.2316 15.0773 18.2316 15.6208C18.2316 16.1644 18.6718 16.6046 19.2153 16.6046C19.7589 16.6046 20.1991 16.1644 20.1991 15.6208Z" fill="#1D9BF0"/>
+</svg>

src/assets/svg/icon-tab-wallet.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.9981 6H23.0044C24.6547 6 26 7.34533 26 8.9981V11.738H18.3117C16.4179 11.738 14.8684 13.2874 14.8684 15.1812V16.0617C14.8684 17.9555 16.4179 19.505 18.3117 19.505H26V22.2448C26 23.9 24.6547 25.2429 23.0019 25.2429H6.9981C5.34287 25.2429 4 23.8976 4 22.2448V8.9981C4 7.34287 5.34533 6 6.9981 6ZM16.0967 15.1806C16.0967 14.5928 16.3279 14.0394 16.7485 13.6188C17.1666 13.1983 17.7224 12.9671 18.3103 12.9671H25.9986V18.2746H18.3103C17.7224 18.2746 17.1691 18.0434 16.7485 17.6229C16.3279 17.2023 16.0967 16.6489 16.0967 16.0611V15.1806ZM20.1991 15.6208C20.1991 15.0773 19.7589 14.6371 19.2153 14.6371C18.6718 14.6371 18.2316 15.0773 18.2316 15.6208C18.2316 16.1644 18.6718 16.6046 19.2153 16.6046C19.7589 16.6046 20.1991 16.1644 20.1991 15.6208Z" fill="#C0C0C0"/>
+</svg>

src/router/popup.js

@@ -1,6 +1,13 @@
 /* eslint-disable */
 import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
-import Home from '@/view/popup/popup.vue'
+import Tabcontent from '@/view/popup/tabbar-page/index.vue'
+import Home from '@/view/popup/tabbar-page/wallter/popup.vue'
+import NFT  from '@/view/popup/tabbar-page/nft/index.vue'
+import Message from '@/view/popup/tabbar-page/message/index.vue'
+import More from '@/view/popup/tabbar-page/more/index.vue'
+
+import NFTDetail  from '@/view/popup/tabbar-page/nft/detail.vue'
+
 import Withdraw from '@/view/popup/withdraw/index.vue'
 import WithdrawInfo from '@/view/popup/withdraw/info.vue'
 import WithdrawConfirm from '@/view/popup/withdraw/confirm.vue'
@@ -14,12 +21,36 @@ import TopUp from '@/view/popup/top-up/index.vue'
 import TopUpInfo from '@/view/popup/top-up/info.vue'
 import TopUpHome from '@/view/popup/top-up/home.vue'
 
+import CurrencyDetail from '@/view/popup/currency-detail.vue'
+
 // 2. 定义路由配置
 const routes = [
     {
-        path: "/",
-        name: 'home',
-        component: Home
+        path: '/',
+        name: 'tabcontent',
+        component: Tabcontent,
+        children: [
+            {
+                path: "",
+                name: 'home',
+                component: Home
+            },
+            {
+                path: "NFT",
+                name: 'NFT',
+                component: NFT
+            },
+            {
+                path: "message",
+                name: 'message',
+                component: Message
+            },
+            {
+                path: "more",
+                name: 'more',
+                component: More
+            },
+        ]
     },
     {
         path: '/withdraw',
@@ -81,8 +112,17 @@ const routes = [
         path: '/transactions',
         name: 'Transactions',
         component: Transactions
+    },
+    {
+        path: '/NFTDetail',
+        name: 'NFTDetail',
+        component: NFTDetail
+    },
+    {
+        path: '/currencyDetail',
+        name: 'currencyDetail',
+        component: CurrencyDetail
     }
-
 ]
 
 

src/view/components/currency-list.vue

@@ -2,14 +2,23 @@
 <template>
     <div class="currency-list-wrapper">
         <div class="search-input-wrapper">
-            <input class="input" v-model="keywords" @input="onInput" placeholder="Search name" />
+            <input class="input" 
+                :style="{width: !showRefresh ? '100%' : '88%'}"
+                v-model="keywords" 
+                placeholder="Search name"
+                @input="onInput" />
+
             <img :src="require('../../assets/svg/icon-form-refresh.svg')" 
+                v-if="showRefresh"
                 class="icon"
                 :class="{ 'icon-refresh-rotate': refreshRotate }"
                 @click="refresh">
-            <img :src="require('../../assets/svg/icon-clear-search.svg')" class="icon-clear"
-            v-if="keywords"
-            @click="clearIpt" >
+
+            <img :src="require('../../assets/svg/icon-clear-search.svg')" 
+                class="icon-clear"
+                v-if="keywords"
+                :style="{right: !showRefresh ? '6%' : '16%'}"
+                @click="clearIpt" >
         </div>
         <div class="list-wrapper" ref="listWrapperDom" @scroll="listScroll">
             <div class="page-list" ref="listContentDom" v-if="!showSearch">
@@ -22,7 +31,7 @@
                             {{ item.type == 1 ? 'Cash' : 'Crypto' }}
                         </div>
                         <div class="item-detail" v-for="(data, idx) in item.data" :key="idx"
-                            @click="selectCurrency(data.currencies)">
+                            @click="selectCurrency(data)">
                             <div class="left">
                                 <img class="icon-currency" :src="data.currencies[0].iconPath" />
                                 <div class="currency-info">
@@ -53,7 +62,7 @@
             </div>
             <!-- 显示搜索结果列表 -->
             <div class="search-list" v-else>
-                <div class="item-detail" v-for="(data, idx) in searchList" :key="idx" @click="selectCurrency(data.currencies)">
+                <div class="item-detail" v-for="(data, idx) in searchList" :key="idx" @click="selectCurrency(data)">
                     <div class="left">
                         <img class="icon-currency" :src="data.currencies[0].iconPath" />
                         <div class="currency-info">
@@ -96,6 +105,10 @@ const props = defineProps({
     filterEmptyBalance: {
         type: Boolean,
         default: false
+    },
+    showRefresh: {
+        type: Boolean,
+        default: true
     }
 })
 let keywords = ref('');

src/view/components/popup-transactions.vue

@@ -87,14 +87,17 @@
                                     <!-- 提现状态（0：已申请，1：支付中，2：提现成功，3：提现失败） -->
                                     <template v-if="item.bizData.withdrawStatus == 0 || item.bizData.withdrawStatus == 1">
                                         <div>
-                                            <div class="balance">
+                                            <div class="balance"
+                                                :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
                                                 <span class="amount">
                                                     <a-tooltip :title="'-'+item.trxAmountValue">
                                                         -{{ getBit(item.trxAmountValue) || 0 }}
                                                     </a-tooltip>
                                                 </span>
-                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                <div class="trx-amount-currency-info">
+                                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                </div>
                                             </div>
                                             <div class="desc">
                                                 in progress
@@ -102,26 +105,32 @@
                                         </div>
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 2">
-                                        <div class="balance">
+                                        <div class="balance"
+                                            :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
                                             <span class="amount">
                                                 <a-tooltip :title="'-'+item.trxAmountValue">
                                                     -{{ getBit(item.trxAmountValue) || 0 }}
                                                 </a-tooltip>
                                             </span>
-                                            <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                            <div class="trx-amount-currency-info">
+                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                            </div>
                                         </div>
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 3">
                                         <div>
-                                            <div class="balance">
+                                            <div class="balance"
+                                                :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
                                                 <span class="amount"> 
                                                     <a-tooltip :title="'-'+item.trxAmountValue">
                                                         -{{ getBit(item.trxAmountValue) || 0 }}
                                                     </a-tooltip>
                                                 </span>
-                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                <div class="trx-amount-currency-info">
+                                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                </div>
                                             </div>
                                             <div class="desc">
                                                 Withdrawal failed
@@ -129,25 +138,35 @@
                                         </div>
                                     </template>
                                     <template v-else>
-                                        <span class="amount">
-                                            <a-tooltip :title="'-'+item.trxAmountValue">
-                                                -{{ getBit(item.trxAmountValue) || 0 }}
-                                            </a-tooltip>
-                                        </span>
-                                        <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                        <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                        <div class="balance"
+                                            :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
+                                            <span class="amount">
+                                                <a-tooltip :title="'-'+item.trxAmountValue">
+                                                    -{{ getBit(item.trxAmountValue) || 0 }}
+                                                </a-tooltip>
+                                            </span>
+                                            <div class="trx-amount-currency-info">
+                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                            </div>
+                                        </div>
                                     </template>
                                 </template>
                                 <!-- 收入 -->
                                 <template v-else>
-                                    <span class="amount">
-                                        <template v-if="item.bizType == -2">-</template>
-                                        <a-tooltip :title="item.bizType == -2 ? '-' + item.trxAmountValue : item.trxAmountValue">
-                                            {{ getBit(item.trxAmountValue) || 0 }}
-                                        </a-tooltip>
-                                    </span>
-                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                    <div class="balance"
+                                        :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
+                                        <span class="amount">
+                                            <template v-if="item.bizType == -2">-</template>
+                                            <a-tooltip :title="item.bizType == -2 ? '-' + item.trxAmountValue : item.trxAmountValue">
+                                                {{ getBit(item.trxAmountValue) || 0 }}
+                                            </a-tooltip>
+                                        </span>
+                                        <div class="trx-amount-currency-info">
+                                            <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                        </div>
+                                    </div>
                                 </template>
                             </div>
                         </div>
@@ -160,7 +179,7 @@
 
 <script setup>
 /* eslint-disable */
-import { onMounted, ref, defineProps, defineEmits, onBeforeUnmount } from "vue";
+import { onMounted, ref, defineProps, defineEmits } from "vue";
 
 import redDot from "@/view/components/red-dot.vue";
 
@@ -212,13 +231,6 @@ const getTransactionsList = () => {
 
 onMounted(() => {
     chrome.runtime.connect({ name: "popup_transactions" });
-    readAllMsgByType({
-        params: {
-            msgType: 1
-        }
-    }).then(res => {
-        setMessageCount();
-    });
     setTimeout(() => {
         isReadMsg.value = false;
         readAllMsgByType({
@@ -391,9 +403,18 @@ const listScroll = (e) => {
 
                         .balance {
                             text-align: right;
-                            margin-bottom: 4px;
                             display: flex;
                             align-items: center;
+
+                            .trx-amount-currency-info {
+                                display: flex;
+                                align-items: center;
+                            }
+                        }
+
+                        .balance-direction {
+                            flex-direction: column;
+                            align-items: flex-end;
                         }
 
                         .desc {
@@ -401,6 +422,7 @@ const listScroll = (e) => {
                             font-weight: 400;
                             font-size: 12px;
                             color: #797979;
+                            margin-top: 4px;
                         }
                     }
 

src/view/iframe/home/home.vue

@@ -39,6 +39,7 @@ onMounted(() => {
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
         border-radius: 15px;
         position: relative;
+        overflow-y: auto;
     }
 }
 /deep/ .page-wrapper {

src/view/iframe/publish/components/follow-input.vue

@@ -310,7 +310,7 @@ const onUserMouseLeave = (params, index) => {
                 max-height: 430px;
                 position: absolute;
                 box-shadow: 0px 4px 20px 0px #0000004D;
-                overflow-y: scroll;
+                overflow-y: auto;
                 background-color: #fff; 
                 top: 30px;
                 left: -150px;

src/view/iframe/publish/give-dialog.vue

@@ -776,13 +776,14 @@ const confirm = () => {
  * 货币列表-选中货币
  */
 const selectCurrency = (params) => {
-    tempCurrentCurrencyList.value = params;
+    let { currencies } = params;
+    tempCurrentCurrencyList.value = currencies;
     depositGuide.value = false;
-    if (params.length > 1) {
+    if (currencies.length > 1) {
         showCurrencyPop.value = false;
         showCurrencySelect.value = true;
     } else {
-        selectCurrencyAfter(params[0])
+        selectCurrencyAfter(currencies[0])
     }
 };
 
@@ -1658,7 +1659,7 @@ onMounted(() => {
                 box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                 background-color: #fff;
                 border-radius: 20px;
-                overflow-y: scroll;
+                overflow-y: auto;
             }
             
             .currency-pop-select {
@@ -1712,7 +1713,7 @@ onMounted(() => {
                 .form-wrapper {
                     padding: 0px 18px 18px 18px;
                     height: calc(100% - 80px);
-                    overflow-y: scroll;
+                    overflow-y: auto;
                     overflow-x: hidden;
                     box-sizing: border-box;
 

src/view/popup/components/head.vue

@@ -12,6 +12,10 @@
         <template v-else>
             <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back" @click="clickBack">
             <div class="title">{{ props.title }}</div>
+            <img :src="require('@/assets/svg/icon-back-head-list.svg')"
+                v-if="show_list" 
+                class="list" 
+                @click="clickList" />
             <img :src="require('@/assets/svg/icon-refresh.svg')" alt="" class="refresh" v-if="show_refresh"
                 @click="clickRefresh" :class="{ transform_rotate: state.rotate }">
             <img :src="require('@/assets/svg/icon-withdraw-help.svg')" alt="" class="help" v-if="props.show_help"
@@ -43,7 +47,8 @@ let props = defineProps({
     show_more: Boolean,
     show_help: Boolean,
     back_url: String,
-    user_info: Object
+    user_info: Object,
+    show_list: Boolean
 })
 
 let state = reactive({
@@ -81,6 +86,12 @@ function clickHelp() {
     window.open(`https://aboard-cattle-610.notion.site/How-to-withdraw-assets-from-DeNet-to-MetaMask-01c679bb9ff441429e31e8f7c1f67411`)
 }
 
+function clickList() {
+    router.push({
+        path: '/transactions'
+    })
+}
+
 </script>
 <style lang="scss" scoped>
 .border {
@@ -185,11 +196,16 @@ function clickHelp() {
         height: 24px;
     }
 
+    .list {
+        margin-right: 12px;
+    }
+
     .refresh {
-        margin-right: 20px;
+        
     }
 
     .help {
+        margin-left: 20px;
         margin-right: 12px;
     }
 

src/view/popup/components/tabbar.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="tab-bar-wrappeer">
+        <div class="tab-bar-item"
+            v-for="(item,index) in tabbarData" 
+            :key="index"
+            @click="tabbarHandler(item, index)">
+            <img :src="index == currentTab.index ? item.iconActive : item.iconInActive">
+            <div class="text"  :class="{'active-tab': index == currentTab.index}">
+                {{item.name}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, defineEmits, nextTick } from "vue";
+
+import router from "@/router/popup.js";
+
+let currentTab = ref({
+    index: 0
+})
+
+let tabbarData = ref([
+    {
+        name:  'Wallet',
+        path: '/',
+        iconActive: require('@/assets/svg/icon-tab-wallet-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-wallet.svg')
+    },
+    {
+        name:  'NFTs',
+        path: '/NFT',
+        iconActive: require('@/assets/svg/icon-tab-NFT-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-NFT.svg')
+    },
+    {
+        name:  'Message',
+        path: '/message',
+        iconActive: require('@/assets/svg/icon-tab-message-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-message.svg')
+    },
+    {
+        name:  'More',
+        path: '/more',
+        iconActive: require('@/assets/svg/icon-tab-more-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-more.svg')
+    }
+])
+
+const emits = defineEmits(['tabbarClick']);
+
+
+const tabbarHandler  = (params, index)  => {
+    currentTab.value.index = index;
+    router.push(params.path);
+    emits("tabbarClick", params);
+}
+
+const setActiveTab = (path) => {
+    let list = tabbarData.value;
+    for(let i = 0; i < list.length; i++) {
+        if(path == list[i].path) {
+            currentTab.value.index = i;
+            break;
+        }
+    }
+}
+
+onMounted(() => {
+    let path = router.currentRoute.value.path;
+    setActiveTab(path);
+})
+
+</script>
+
+
+<style scoped lang="scss">
+.tab-bar-wrappeer {
+    background: #FFFFFF;
+    box-shadow: inset 0px 1px 0px #ECECEC;
+    width: 100%;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: absolute;
+    z-index: 1000;
+    bottom: 0px;
+
+    cursor: pointer;
+
+    .tab-bar-item {
+        flex: 1;    
+        text-align: center;
+
+        .text {
+            font-weight: 500;
+            font-size: 12px;
+            color: #C0C0C0;
+        }
+
+        .active-tab {
+            color: #1D9BF0 !important;
+        }
+    }
+}
+</style>

src/view/popup/components/top-bar.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="top-bar-wrapper" :style="{background: bgColor, boxShadow: boxShadow}">
+        <div class="left">
+            <img :src="userInfo.avatarUrl" class="icon-avatar">
+            <span class="nick-name" :style="{color: color}">{{userInfo.nickName}}</span>
+        </div>
+        <div>
+            <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+
+defineProps({
+    userInfo: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    },
+    bgColor: {
+        type: String,
+        default: '#fff'
+    },
+    boxShadow: {
+        type: String,
+        default: 'none'
+    },
+    color: {
+        type: String,
+        default: '#fff'
+    }
+})
+</script>
+
+<style scoped lang='scss'>
+.top-bar-wrapper {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    box-sizing: border-box;
+
+    .left {
+        display: flex;
+        align-items: center;
+        .icon-avatar {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            border-radius: 50%;
+        }
+        .nick-name {
+            font-weight: 500;
+            font-size: 14px;
+        }
+    }
+}
+</style>

src/view/popup/currency-detail.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="currency-detail-page">
+    <v-head :title="currencyInfo.currencyName" 
+            :show_more="false"
+            :show_refresh="true"
+            :show_list="true"
+            @on-refresh="onRefresh" />
+    <div class="top">
+      <img
+        class="icon-currency"
+        :src="currencyInfo.iconPath"/>
+      <div class="amount">
+        {{currencyInfo.totalBalance}} {{currencyInfo.currencyName}}
+        <div class="final">${{currencyInfo.totalUsdEstimateBalance}}</div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="btn deposit-btn"
+          v-if="currencyInfo.currencyCode != 'USD'"
+          @click="clickDeposit">Deposit</div>
+      <div class="btn withdrawal-btn" @click="clickWithdraw">Withdrawal</div>
+    </div>
+
+    <template v-if="showCurrencySelect">
+        <div class="selectDiv">
+            <currency-select 
+                ref="currencySelectDom"
+                :list="currenciesData"
+                @selectCurrency="selectCurrency">
+            </currency-select>
+        </div>
+        <div class="selectBg" @click="showCurrencySelect = false"></div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject, reactive } from "vue";
+import router from "@/router/popup.js";
+import Report from "@/log-center/log";
+import { getStorage } from "@/uilts/help";
+
+import VHead from '@/view/popup/components/head.vue'
+import currencySelect from "@/view/components/currency-select.vue";
+
+
+let currenciesData = ref([]);
+let currencyInfo = ref({});
+let showCurrencySelect = ref(false);
+
+let currencyOpertionType = '';
+
+
+
+const selectCurrency = (params) => {
+    showCurrencySelect.value = false;
+    if(currencyOpertionType == 'WITHDRAW') {
+      withdrawHandle(params);
+    } else if(currencyOpertionType == 'DEPOSIT') {
+      depositHandle(params);
+    }
+}
+
+let withdraw_info = inject('withdraw_info')
+// 点击提现
+const clickWithdraw = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetHomePage,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.withdrawButton
+    });
+
+    if(currenciesData.value.length > 1) {
+      showCurrencySelect.value = true;
+      currencyOpertionType = "WITHDRAW";
+    } else if(currenciesData.value.length == 1){
+      withdrawHandle(currenciesData.value[0]);
+    }
+}
+
+const withdrawHandle = (_params) => {
+  withdraw_info.chainInfo = _params.chainInfo;
+  if (_params.currencyCode == 'USD') {
+      withdraw_info.currency_code = _params.currencyCode
+      router.push('/withdraw/paypal')
+  } else {
+      withdraw_info.source = 'home'
+      withdraw_info.balance = _params.balance
+      withdraw_info.token_symbol = _params.tokenSymbol || ''
+      withdraw_info.currency_name = _params.currencyName || ''
+      withdraw_info.token_chain = _params.tokenChain || 'BNB Chain'
+      withdraw_info.currency_code = _params.currencyCode
+      withdraw_info.icon_token = _params.iconPath || ''
+      withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')
+      console.log(withdraw_info.chainInfo.iconPath)
+      router.push('/withdraw/info')
+  }
+}
+
+
+
+let top_up_info = inject('top_up_info');
+
+const clickDeposit = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetHomePage,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.topupButton
+    });
+
+    if(currenciesData.value.length > 1) {
+      showCurrencySelect.value = true;
+      currencyOpertionType = "DEPOSIT";
+    } else if(currenciesData.value.length == 1){
+      depositHandle(currenciesData.value[0]);
+    }
+}
+
+const depositHandle = (_params) => {
+  top_up_info.token = _params.currencyName || ''
+  top_up_info.token_chain = _params.tokenChain 
+  top_up_info.token_symbol = _params.tokenSymbol || ''
+  top_up_info.currency_code = _params.currencyCode
+  top_up_info.icon_token = _params.iconPath || ''
+  top_up_info.icon_net = require('@/assets/svg/icon-BNB.svg')
+  top_up_info.chainInfo = {
+    ..._params.chainInfo
+  };
+  
+  router.push('/top-up/info');
+};
+
+const onRefresh = () => {
+
+};
+
+onMounted(() => {
+    let {params = '{}'} = router.currentRoute.value.query;
+
+    let {currencies = [], totalBalance = 0, totalUsdEstimateBalance = 0} =  JSON.parse(params);
+
+    currenciesData.value = currencies;
+
+    if(currencies.length) {
+      currencyInfo.value = {
+        ...currencies[0],
+        totalBalance,
+        totalUsdEstimateBalance
+      };
+    }
+})
+</script>
+
+
+<style lang='scss' scoped>
+.currency-detail-page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .top {
+    height: calc(100% - 212px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .icon-currency {
+      width: 100px;
+      margin-bottom: 30px;
+    }
+
+    .amount {
+      font-weight: 700;
+      font-size: 28px;
+      .final {
+        margin-top: 9px;
+        font-weight: 500;
+        font-size: 22px;
+        color: #a2a2a2;
+        text-align: center;
+      }
+    }
+  }
+  .bottom {
+    height: 162px;
+    padding: 0 20px;
+    box-sizing: border-box;
+
+    .btn {
+      width: 100%;
+      height: 57px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      font-size: 17px;
+      border-radius: 100px;
+      cursor: pointer;
+    }
+
+    .deposit-btn {
+      margin-bottom: 18px;
+      background: #1d9bf0;
+      color: #fff;
+    }
+
+    .withdrawal-btn {
+      background: rgba(244, 244, 244, 0.01);
+      border: 1px solid #d7e8f4;
+      box-sizing: border-box;
+      color: #1d9bf0;
+    }
+  }
+
+
+  .selectDiv {
+      position: absolute;
+      z-index: 1000;
+      width: 100%;
+      max-height: 480px;
+      padding-bottom: 30px;
+      left: 0;
+      bottom: 0;
+      background-color: #fff;
+      border-radius: 20px 20px 0 0;
+      overflow-y: scroll;
+  }
+  .selectBg {
+      position: absolute;
+      z-index: 999;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba($color: #000000, $alpha: 0.6);
+  }
+}
+</style>

src/view/popup/index.vue

@@ -15,6 +15,14 @@ watch(withdraw_info, (newVal) => {
 
 provide('withdraw_info', withdraw_info)
 
+let top_up_info = reactive(getStorage("top_up_info") || {});
+
+watch(top_up_info, (newVal) => {
+  setStorage("top_up_info", newVal);
+});
+
+provide("top_up_info", top_up_info);
+
 let state = reactive({
   popup: true
 })

src/view/popup/popup.vue

@@ -1,1028 +0,0 @@
-<template>
-    <global-tip :type="'3'"></global-tip>
-    <div class="page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
-        <template v-if="isLogin && homeVisibility">
-            <v-head :show_more="true" :show_state="'home'" :user_info="userInfo"></v-head>
-            <div class="content">
-                <div class="balance">
-                    <div class="wallet">
-                        <img :src="require('@/assets/svg/icon-home-wallet.svg')" />
-                        <font>Balance Valuation</font>
-                    </div>
-                    <div class="bill" @click="showTransactions">
-                        <red-dot class="red-dot" v-if="unReadCountWallet > 0"></red-dot>
-                        <img :src="require('@/assets/svg/icon-home-bill.svg')" />
-                    </div>
-                </div>
-                <div class="amount">
-                    <a-tooltip :title="'$'+canWithdrawBalance">
-                        ${{ getBit(canWithdrawBalance) }}
-                    </a-tooltip>
-                </div>
-                <div class="area-btn">
-                    <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
-                    <div class="top-up-btn" @click="clickTopUp">Deposit</div>
-                </div>
-            </div>
-
-            <div class="tab-bar">
-                <div class="tab-item" 
-                    :class="{ active: currentTabIndex == index }" 
-                    v-for="(item, index) in tabList"
-                    :key="index" 
-                    @click="clickTab(item, index)">
-                    <img :src="item.icon" class="icon" />
-                    {{ item.label }}
-                </div>
-            </div>
-            <div class="list-wrapper" ref="pageGiveListDom">
-                <div class="give-list" v-if="currentTabIndex == 0">
-                    <template v-if="giveList.length">
-                        <div class="cell" 
-                            :class="{'cell-center': item.type == 1}"
-                            v-for="(item, index) in giveList" 
-                            :key="index"
-                            @click="clickListItem(item, index)">
-
-                            <red-dot class="red-dots"
-                                v-if="item.unReadMsgCount > 0 && isReadMsg"></red-dot>
-
-                            <div class="img-wrapper">
-                                <!-- 收到红包 -->
-                                <template v-if="item.type == 1">
-                                    <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
-                                    <img class="icon-give" :src="
-                                        require('@/assets/svg/icon-giveaways.svg')
-                                    " />
-                                </template>
-                                <!-- 发出去红包 -->
-                                <template v-else-if="2">
-                                    <img 
-                                        class="icon-big-give"
-                                        :src="
-                                        require('@/assets/svg/icon-list-big-give.svg')
-                                    " />
-                                </template>
-                            </div>
-                            <div class="info-wrapper"
-                                :class="{'info-center': item.type == 1}">
-                                <div class="left">
-                                    <div class="nickname">
-                                        {{
-                                                item.type == 1
-                                                    ? item.userInfo.nickName
-                                                    : "Giveaways"
-                                        }}
-                                    </div>
-                                    <div class="time">
-                                        {{
-                                                moment(item.timestamp).format(
-                                                    "MM-DD HH:mm:ss"
-                                                )
-                                        }}
-                                    </div>
-                                </div>
-                                <div class="right">
-                                    <div class="msg">
-                                        <div class="bold" 
-                                            :class="{'align-content': (item.type == 2 || (item.type == 1 && item.status == 1)) && 
-                                                                        item.amount.length + item.currencySymbol.length > 12 }">
-                                            <!-- 收到的 -->
-                                            <template v-if="item.type == 1">
-                                                <!-- 进行中-->
-                                                <template v-if="item.status == 0">
-                                                    in progress
-                                                </template>
-                                                <!-- 已完成 -->
-                                                <template v-else-if="item.status == 1">
-                                                    <span class="blance">
-                                                        <a-tooltip :title="item.amount">
-                                                            {{ getBit(item.amount) }}</a-tooltip>
-                                                    </span>
-                                                    <div class="coin-type-wrapper">
-                                                        <span class="coin-type">{{ item.currencySymbol || '' }}</span>
-                                                        <img :src="item.currencyIconPath" alt="">
-                                                    </div>
-                                                </template>
-                                                <!-- 已过期 -->
-                                                <template v-else-if="item.status == 2">
-                                                    Timeout
-                                                </template>
-                                            </template>
-                                            <!-- 发出去的 -->
-                                            <template v-else-if="item.type == 2">
-                                                <span class="blance">
-                                                    <a-tooltip :title="'-' + item.amount">
-                                                        -{{ getBit(item.amount) }}
-                                                    </a-tooltip>
-                                                </span>
-                                                <div class="coin-type-wrapper">
-                                                    <span class="coin-type">{{ item.currencySymbol || '' }}</span>
-                                                    <img :src="item.currencyIconPath" alt="">   
-                                                </div>
-                                            </template>
-                                        </div>
-                                        <!-- 发出的红包显示 -->
-                                        <div class="desc" v-if="item.type == 2">
-                                            <!-- 未发送-->
-                                            <template v-if="item.postTaskLuckdrop.reSendAvailable">
-                                                Unpublished
-                                            </template>
-                                            <!-- 进行中 -->
-                                            <template v-else-if="item.status == 1">
-                                                {{item.postTaskLuckdrop.receivedCount}}/{{item.postTaskLuckdrop.totalCount}}
-                                            </template>
-                                            <!-- 2:已结束; 3:提前终止-->
-                                            <template v-else-if="item.status == 2 || item.status == 3">
-                                                ({{item.status == 2 ? 'Time expired' : 'Termination'}})
-                                                {{
-                                                        item.postTaskLuckdrop
-                                                            .receivedCount
-                                                }}/{{
-                                                        item.postTaskLuckdrop
-                                                            .totalCount
-                                                }}
-                                            </template>
-                                            <!-- 红包提前终止/退款（进行中）显示-->
-                                            <template v-if="item.status == 4">
-                                                Terminating
-                                            </template>
-
-                                            <!-- 进行中或者未发送成功时显示 
-                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
-                                            <div  class="desc-bottom-bar">
-                                                <!-- 没有终止红包时显示 -->
-                                                <div v-if="item.postTaskLuckdrop.terminatedAvailable"
-                                                    class="btn"
-                                                    @click.stop="terminaHandler(item, index)">
-                                                    Termination
-                                                </div>
-                                                
-                                                <!-- 红包未发出显示 -->
-                                                <div class="btn send-btn"
-                                                    v-if="item.postTaskLuckdrop.reSendAvailable"       
-                                                    @click.stop="sendTwitter(item)">
-                                                    Send
-                                                </div>
-                                                <div v-else-if="item.srcContentId"
-                                                    class="btn detail-btn"
-                                                    @click.stop="clickListItem(item, index)">details</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <!-- 发红包—— 未发出、进行中 隐藏 -->
-                                    <img v-if="item.type != 2" 
-                                        class="icon" 
-                                        :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
-                    </template>
-                </div>
-                <div class="more-list" v-else>
-                    <div class="cell" 
-                    v-for="(item, index) in moreTabList" 
-                    :key="index"
-                    @click="moreItemHandle(item)">
-                        <img class="icon" :src="item.icon" />
-                        <div class="info-wrapper">
-                            <div class="left">
-                                {{ item.label }}
-                            </div>
-                            <div class="right">
-                                <img class="icon" :src="
-                                    require('@/assets/svg/icon-cell-arrow-right.svg')
-                                " />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <!-- login -->
-        <popup-login v-if="!isLogin" @loginAction="loginAction" />
-        <template v-if="isLogin && !homeVisibility">
-            <!-- 交易列表 -->
-            <popup-transactions v-if="transactionsVisibility" @back="transactionsBack" />
-            <!-- 提现页 -->
-            <popup-withdraw :amountValue="canWithdrawBalance" :walletWithdrawConfig="walletWithdrawConfig"
-                v-if="withdrawVisibility" @back="withdrawBack" />
-        </template>
-        <modal :visible="modalVisible"   
-            title="Early termination of Giveaway?"
-            content="The remaining amount will be returned to your wallet within 1 day."
-            cancelText="Termination"
-            confirmText="Cancel"
-            @cancel="modalCancel"
-            @confirm="modalConfirm" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-import popupLogin from "@/view/popup/components/login.vue";
-import popupTransactions from "@/view/components/popup-transactions";
-import popupWithdraw from "@/view/components/popup-withdraw.vue";
-import redDot from "@/view/components/red-dot.vue";
-import modal from "@/view/popup/components/modal.vue";
-
-import {
-    getChromeStorage,
-} from "@/uilts/chromeExtension";
-import { getBalance, getMineLuckdropRecords } from "@/http/account";
-import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
-import { terminatedLuckdrop } from "@/http/redPacket";
-import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
-import Report from "@/log-center/log";
-import router from "@/router/popup.js";
-import { getBit } from "@/uilts/help";
-import  GlobalTip  from '@/view/components/global-tip.vue'
-
-import VHead from '@/view/popup/components/head.vue';
-
-
-let withdraw_info = inject('withdraw_info')
-withdraw_info.paypal = {}
-
-var moment = require("moment");
-
-let pageWrapperDom = ref(null);
-let pageGiveListDom = ref(null);
-
-let isLogin = ref(false);
-let homeVisibility = ref(false);
-let transactionsVisibility = ref(false);
-let withdrawVisibility = ref(false);
-let modalVisible = ref(false);
-
-let terminaTask = {};
-
-let userInfo = ref({});
-let canWithdrawBalance = ref(0);
-withdraw_info.paypal.amount_value = canWithdrawBalance
-withdraw_info.balance = 0
-
-let isRequestWithdrawBalance = ref(false);
-
-let currentTabIndex = ref(0);
-let giveList = ref([]);
-
-// 钱包未读数
-let unReadCountWallet = ref(0);
-let isReadMsg = ref(true);
-
-let giveReqParams = {
-    params: {
-        pageNum: 1,
-        pageSize: 10,
-    },
-    loadMore: false,
-};
-
-
-let walletWithdrawConfig = ref({
-    withdrawUSDPaypalFee: 0,
-    withdrawUSDPreMinAmount: 100,
-    withdrawUSDSwitch: "",
-    withdrawUSDPaypalFeeDesc: ''
-});
-withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
-
-
-let moreTabList = ref([
-    {
-        icon: require("@/assets/svg/icon-website.svg"),
-        label: "Website",
-        href: 'https://denet.me'
-    },
-    {
-        icon: require("@/assets/svg/icon-twitter.svg"),
-        label: "Twitter",
-        href: 'https://twitter.com/denet2022'
-    },
-    {
-        icon: require("@/assets/svg/icon-discord.svg"),
-        label: "Discord",
-        href: 'https://discord.gg/wZSz9p8ddG'
-    }
-    // , {
-    //     icon: require("@/assets/svg/icon-telegram.svg"),
-    //     label: "Telegram",
-    //     href: 'https://t.me/denetpro'
-    // }
-]);
-
-let tabList = ref([
-    {
-        icon: require("@/assets/svg/icon-giveaways.svg"),
-        label: "Giveaways",
-    },
-    {
-        icon: require("@/assets/svg/icon-more.svg"),
-        label: "More",
-    },
-]);
-
-onMounted(() => {
-    checkLoginState(() => {
-        if (isLogin.value) {
-            getAccountBalance();
-            getLuckdropRecordsList();
-            chrome.runtime.connect({ name: "popup" });
-            Report.reportLog({
-                pageSource: Report.pageSource.denetHomePage,
-                businessType: Report.businessType.pageView,
-            },{
-                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
-            });
-            setMessageCount();
-            setTimeout(() => {
-                isReadMsg.value = false;
-                readAllMsg({msgType: 1}, () => {
-                    setMessageCount();
-                });
-            }, 2000);
-        } else {
-            Report.reportLog({
-                pageSource: Report.pageSource.denetLogin,
-                businessType: Report.businessType.pageView,
-            });
-        }
-    });
-});
-
-const readAllMsg = ({msgType}, cb) => {
-    readAllMsgByType({
-        params: {
-            msgType
-        }
-    }).then(res => {
-        cb && cb();
-    })
-};
-
-const setMessageCount = () => {
-    getAllMessageInfo({params: {
-    }}).then(res => {
-        if(res.code == 0) {
-            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
-            unReadCountWallet.value = unReadCountWalletDetail;
-            if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
-                setBadgeInfo({data: {text}});
-            } else {
-                hideBadge();
-            }
-        }
-    });
-}
-
-const moreItemHandle = (params) => {
-    window.open(params.href);
-}
-
-
-/**
- * 获取账户余额
- */
-const getAccountBalance = () => {
-    isRequestWithdrawBalance.value = false;
-    getBalance({}).then((res) => {
-        isRequestWithdrawBalance.value = true;
-        if (res.code == 0) {
-            if (res.data) {
-                canWithdrawBalance.value = res.data.allAssetValuationUSD;
-                withdraw_info.balance = res.data.allAssetValuationUSD || 0
-            }
-        }
-    });
-};
-
-const getUserInfo = (cb) => {
-    getChromeStorage("userInfo", (res) => {
-        cb && cb(res);
-    });
-};
-
-/**
- * 检查登录状态
- */
-const checkLoginState = (cb) => {
-    getUserInfo((res) => {
-        if (res && res.accessToken) {
-            userInfo.value = res;
-            isLogin.value = true;
-            homeVisibility.value = true;
-        } else {
-            userInfo.value = {};
-            isLogin.value = false;
-        }
-        cb && cb();
-    });
-};
-
-const pageScroll = (e) => {
-    let wrapperHeight = pageWrapperDom.value.offsetHeight;
-    let pageGiveListHeight = pageGiveListDom.value.offsetHeight;
-    let scrollTop = e.target.scrollTop || 0;
-    if (currentTabIndex.value != 0) {
-        return;
-    }
-    if (
-        giveReqParams.loadMore === false &&
-        wrapperHeight + scrollTop >= pageGiveListHeight
-    ) {
-        giveReqParams.loadMore = true;
-        giveReqParams.params.pageNum++;
-        getLuckdropRecordsList();
-    }
-};
-
-/**
- * 获取红包列表
- */
-const getLuckdropRecordsList = () => {
-    getMineLuckdropRecords({
-        params: giveReqParams.params,
-    }).then((res) => {
-        if (res.data && res.data.length) {
-            if (giveReqParams.params.pageNum < 2) {
-                giveList.value = res.data;
-            } else {
-                let data = giveList.value;
-                data = data.concat(res.data);
-                giveList.value = data;
-            }
-            giveReqParams.loadMore = false;
-        }
-    });
-};
-
-const clickTab = (params, index) => {
-    currentTabIndex.value = index;
-    console.log(params, index);
-};
-
-/**
- * 点击列表跳转到推文
- */
-const clickListItem = (params) => {
-    if (!params.srcContentId) {
-        return;
-    }
-    let twitterUrl = "https://twitter.com/";
-    let nickName = "";
-    if (params.type == 1) {
-        nickName = params.userInfo.nickName;
-    } else if (params.type == 2) {
-        nickName = userInfo.value.nickName;
-    }
-    let url = twitterUrl + nickName + "/status/" + params.srcContentId;
-
-    chrome.tabs.create({
-        url,
-    });
-};
-
-/**
- * 交易列表返回
- */
-const transactionsBack = () => {
-    if (!homeVisibility.value) {
-        if (transactionsVisibility.value) {
-            transactionsVisibility.value = false;
-        }
-        homeVisibility.value = true;
-    }
-};
-
-/**
- * 提现返回
- */
-const withdrawBack = () => {
-    if (!homeVisibility.value) {
-        if (withdrawVisibility.value) {
-            withdrawVisibility.value = false;
-        }
-        homeVisibility.value = true;
-        getAccountBalance();
-        giveReqParams.params.pageNum = 1;
-        getLuckdropRecordsList();
-    }
-};
-
-
-const showTransactions = () => {
-//     // homeVisibility.value = false;
-//     // transactionsVisibility.value = true;
-
-    readAllMsg({msgType: 1});
-    router.push('/transactions')
-};
-
-// const clickWithdraw = () => {
-//     if (isRequestWithdrawBalance.value) {
-//         homeVisibility.value = false;
-//         withdrawVisibility.value = true;
-//     }
-// };
-
-const loginAction = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetLogin,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.loginButton
-    });
-    login();
-};
-
-const login = () => {
-    callEventPageMethod("POPUP_LOGIN", "", function (response) {
-        console.log("res", response);
-    });
-};
-
-/**
- * sendMessage
- */
-const callEventPageMethod = (actionType, data, callback) => {
-    chrome.runtime.sendMessage(
-        { 
-            actionType: actionType, 
-            data: data 
-        },
-        function (response) {
-            if (typeof callback === "function") callback(response);
-        }
-    );
-};
-
-/**
- * 点击发送，去发推
- */
-const sendTwitter = (params) => {
-    console.log(params)
-    callEventPageMethod(
-        "POPUP_PUBLISH_TWITTER_RED_PACK",
-        { 
-            srcContent: params.postTaskLuckdrop.srcContent, 
-            postId: params.postTaskLuckdrop.postId 
-        },
-        function (response) {
-            console.log("res", response);
-        }
-    );
-};
-// 点击提现
-const clickWithdraw = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetHomePage,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.withdrawButton
-    });
-    router.push('/withdraw/home');
-}
-const clickTopUp = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetHomePage,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.topupButton
-    });
-    router.push('/top-up/home');
-}
-
-const terminaHandler = (params, index) => {
-    terminaTask = params;
-    terminaTask.index = index;
-    modalVisible.value = true;
-}
-
-const modalCancel = () => {
-    //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭 
-    modalVisible.value = false;
-    let index = terminaTask.index;
-    terminatedLuckdrop({
-        params: {
-            luckdropId: terminaTask.id
-        }
-    }).then(res => {
-        if(res.code == 0) {
-            giveList.value[index]['status'] = res.data.status;
-            giveList.value[index]['postTaskLuckdrop']['reSendAvailable'] = false;
-            giveList.value[index]['postTaskLuckdrop']['terminatedAvailable'] = false;
-        }
-    });
-    terminaTask = {};
-}
-
-const modalConfirm = () => {
-    modalVisible.value = false;
-    terminaTask = {};
-}
-
-</script>
-
-<style lang="scss" scoped>
-html,
-body {
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.page-wrapper {
-    width: 375px;
-    height: 600px;
-    box-sizing: border-box;
-    overflow-y: scroll;
-
-    .nav-bar {
-        padding: 14px;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .item {
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-            cursor: pointer;
-
-            img {
-                width: 16px;
-                height: 16px;
-                margin-right: 4px;
-            }
-        }
-
-        .left {
-            font-weight: 500;
-        }
-
-        .right {
-            color: #b6b6b6;
-        }
-    }
-
-    .content {
-        padding: 20px;
-        background-color: #F0F8FE;
-
-        .icon-money {
-            width: 70px;
-            height: 70px;
-        }
-
-        .balance {
-            display: flex;
-            justify-content: space-between;
-            .wallet {
-                img {
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 6px;
-                    vertical-align: middle;
-                }
-                font {
-                    color: #000;
-                    font-size: 14px;
-                    font-weight: bold;
-                }
-            }
-            .bill {
-                position: relative;
-                img {
-                    width: 24px;
-                    height: 24px;
-                    cursor: pointer;
-                }
-                .red-dot {
-                    position: absolute;
-                    right: 0px;
-                    top: -1px;
-                }
-            }
-        }
-
-        .amount {
-            margin-top: 20px;
-            margin-bottom: 20px;
-            font-weight: 700;
-            font-size: 36px;
-            line-height: 43px;
-        }
-
-        .area-btn {
-            display: flex;
-            justify-content: space-between;
-            font-weight: 600;
-            font-size: 15px;
-
-            .top-up-btn {
-                cursor: pointer;
-                border: 1px solid #1D9BF0;
-                color: #fff;
-                background: #1D9BF0;
-                border-radius: 100px;
-                width: 165px;
-                height: 38px;
-                text-align: center;
-                margin-left: 8px;
-                line-height: 36px;
-            }
-
-            .withdraw-btn {
-                background: rgba(56, 154, 255, 0.01);
-                border: 1px solid #1D9BF0;
-                box-sizing: border-box;
-                width: 165px;
-                font-size: 15px;
-                height: 38px;
-                text-align: center;
-                line-height: 36px;
-                border-radius: 100px;
-                color: #1D9BF0;
-                display: inline-block;
-                cursor: pointer;
-            }
-        }
-
-        .msg {
-            margin-top: 10px;
-            font-size: 13px;
-            color: #b6b6b6;
-        }
-    }
-
-    .tab-bar {
-        display: flex;
-        align-items: center;
-        position: sticky;
-        position: -webkit-sticky;
-        top: 0px;
-        z-index: 1000;
-        background-color: #fff;
-
-        .tab-item {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 17px 0;
-            box-sizing: border-box;
-            border-bottom: 1px solid #ECECEC;
-            cursor: pointer;
-
-            .icon {
-                width: 16px;
-                height: 16px;
-                margin-right: 5px;
-                font-weight: 500;
-                font-size: 16px;
-            }
-        }
-
-        .active {
-            border-bottom: 2px solid #000;
-        }
-    }
-
-    .list-wrapper {
-        min-height: 202px;
-
-        .give-list {
-            min-height: 202px;
-            position: relative;
-
-            .cell {
-                display: flex;
-                justify-content: space-between;
-                min-height: 66px;
-                box-sizing: border-box;
-                padding-left: 14px;
-                position: relative;
-                cursor: pointer;
-
-                .red-dots {
-                    position: absolute; 
-                    right: 4px; 
-                    top: 4px;
-                }
-
-                .img-wrapper {
-                    position: relative;
-                    margin-right: 16px;
-                    box-sizing: border-box;
-
-                    .icon-avatar {
-                        width: 34px;
-                        height: 34px;
-                        border-radius: 50%;
-                    }
-
-                    .icon-give {
-                        position: absolute;
-                        right: -4px;
-                        bottom: 2px;
-                    }
-
-                    .icon-big-give {
-                        margin-top: 14px;
-                    }
-                }
-
-                .info-wrapper {
-                    flex: 1;
-                    height: 100%;
-                    display: flex;
-                    justify-content: space-between;
-                    border-bottom: 1px solid #ECECEC;
-                    box-sizing: border-box;
-                    padding: 10px 14px 10px 0;
-
-                    .left {
-                        .nickname {
-                            font-weight: 500;
-                            font-size: 14px;
-                            margin-bottom: 5px;
-                            max-width: 132px;
-                            word-break: break-all;
-                        }
-
-                        .time {
-                            font-size: 12px;
-                            color: #B0B0B0;
-                        }
-                    }
-
-                    .right {
-                        display: flex;
-                        align-items: center;
-                        cursor: pointer;
-
-                        .msg {
-                            .bold {
-                                font-weight: 500;
-                                font-size: 14px;
-                                text-align: right;
-                                display: flex;
-                                justify-content: flex-end;
-                                align-items: center;
-
-                                .blance {
-                                    margin-left: 3px;
-                                    display: inline-block;
-                                    max-width: 80px;
-                                    word-break: break-all;
-                                    line-height: 18px;
-                                    color: #E29A2E;
-                                }
-
-                                .coin-type-wrapper {
-                                    display: flex;
-                                    align-items: center;
-                                }
-
-                                .coin-type {
-                                    margin-left: 3px;
-                                }
-
-                                img {
-                                    margin-left: 4px;
-                                    width: 14px;
-                                    height: 14px;
-                                }
-                            }
-
-                            .align-content {
-                                flex-direction: column;
-                                align-items: flex-end;
-
-                                .blance {
-                                    max-width: 130px;
-                                }
-                            }
-
-                            .desc {
-                                font-size: 12px;
-                                color: #b6b6b6;
-                                margin-top: 5px;
-                                text-align: right;
-
-                                .desc-bottom-bar {
-                                    display: flex;
-                                    align-items: center;
-                                    justify-content: end;
-                                    margin-top: 10px;
-
-                                    .btn {
-                                        min-width: 80px;
-                                        height: 29px;
-                                        padding: 0 8px;
-                                        box-sizing: border-box;
-                                        font-weight: 400;
-                                        font-size: 14px;
-                                        cursor: pointer;
-                                        text-align: center;
-                                        border-radius: 100px;
-                                        color: #5E5E5E;
-                                        border: 1px solid #DFDFDF;
-                                        display: flex;
-                                        align-items: center;
-                                        justify-content: center;
-                                    }
-
-                                    .send-btn {
-                                        border: 1px solid #1D9BF0;
-                                        color: #1D9BF0;
-                                    }
-
-                                    .detail-btn, .send-btn {
-                                        margin-left: 8px;
-                                    }
-                                }
-                            }
-                        }
-
-                        .icon {
-                            width: 18px;
-                            height: 24px;
-                            margin-left: 4px;
-                            margin-right: -5px;
-                        }
-                    }
-                }
-                .info-center {
-                    align-items: center;
-                }
-            }
-            .cell-center {
-                align-items: center;
-            }
-
-            .icon-empty {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-            }
-        }
-
-        .more-list {
-            .cell {
-                cursor: pointer;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                height: 66px;
-                box-sizing: border-box;
-                padding-left: 20px;
-
-                .icon {
-                    width: 42px;
-                    height: 42px;
-                    border-radius: 50%;
-                }
-
-                .info-wrapper {
-                    flex: 1;
-                    height: 100%;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    border-bottom: 1px solid #ECECEC;
-                    box-sizing: border-box;
-                    padding-right: 16px;
-
-                    .left {
-                        font-weight: 500;
-                        font-size: 16px;
-                        .time {
-                            color: #B0B0B0;
-                        }
-                    }
-
-                    .right {
-                        display: flex;
-                        align-items: center;
-                        cursor: pointer;
-
-                        .icon {
-                            width: 18px;
-                            height: 24px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.page-wrapper::-webkit-scrollbar {
-    display: none;
-}
-</style>

src/view/popup/tabbar-page/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="tabbar-page-wrapper">
+    <global-tip :type="'3'"></global-tip>
+    <!-- login -->
+    <popup-login v-if="!userInfo.accessToken" @loginAction="loginAction" />
+    <template v-else>
+      <top-bar  :userInfo="userInfo" 
+                :bgColor="bgColor"
+                :color="color"
+                :boxShadow="boxShadow"></top-bar>
+      <div class="tabbar-content">
+        <router-view></router-view>
+      </div>
+      <tabbar @tabbarClick = "onTabbarHandler"></tabbar>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { getChromeStorage } from "@/uilts/chromeExtension";
+import { setStorage, getStorage } from "@/uilts/help";
+import Report from "@/log-center/log";
+
+import TopBar from "@/view/popup/components/top-bar.vue";
+import Tabbar from "@/view/popup/components/tabbar.vue";
+import  GlobalTip  from '@/view/components/global-tip.vue';
+import popupLogin from "@/view/popup/components/login.vue";
+
+let userInfo = ref({});
+let bgColor = ref('#1b92e2');
+let color =  ref('#fff');
+let boxShadow = ref('none');
+
+const getUserInfo = (cb) => {
+  getChromeStorage("userInfo", (res) => {
+    if (res && res.accessToken) {
+      userInfo.value = res;
+    } else {
+      userInfo.value = {};
+    }
+    cb && cb(res);
+  });
+};
+
+const onTabbarHandler = (params) => {
+  if(params.path == '/') {
+    bgColor.value = '#1b92e2';
+    boxShadow.value = 'none';
+    color.value = '#fff'
+  } else {
+    bgColor.value = '#fff';
+    boxShadow.value = '0px 0.5px 0px 0px #D1D9DD';
+    color.value = '#000'
+  }
+}
+
+const loginAction = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetLogin,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.loginButton
+    });
+    login();
+};
+
+const login = () => {
+    callEventPageMethod("POPUP_LOGIN", "", function (response) {
+        console.log("res", response);
+    });
+}
+
+
+/**
+ * sendMessage
+ */
+const callEventPageMethod = (actionType, data, callback) => {
+    chrome.runtime.sendMessage(
+        { 
+            actionType: actionType, 
+            data: data 
+        },
+        function (response) {
+            if (typeof callback === "function") callback(response);
+        }
+    );
+};
+
+onMounted(() => {
+  getUserInfo();
+});
+</script>
+
+
+<style lang='scss'>
+.tabbar-page-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .tabbar-content {
+    width: 100%;
+    height: calc(100% - 120px);
+  }
+}
+</style>

src/view/popup/tabbar-page/message/index.vue

@@ -0,0 +1,624 @@
+<template>
+  <div class="message-wrapper">
+    <!-- <div class="tab-bar">
+      <div
+        class="tab-item"
+        :class="{ active: currentTabIndex == index }"
+        v-for="(item, index) in tabList"
+        :key="index"
+        @click="clickTab(item, index)"
+      >
+        {{ item.label }}
+      </div>
+    </div> -->
+    <div class="tab-content" ref="pageWrapperDom" @scroll="pageScroll">
+      <div class="list-wrapper" ref="pageGiveListDom">
+        <div class="give-list" v-if="currentTabIndex == 0">
+          <template v-if="giveList.length">
+            <div
+              class="cell"
+              :class="{ 'cell-center': item.type == 1 }"
+              v-for="(item, index) in giveList"
+              :key="index"
+              @click="clickListItem(item, index)"
+            >
+              <red-dot
+                class="red-dots"
+                v-if="item.unReadMsgCount > 0 && isReadMsg"
+              ></red-dot>
+
+              <div class="img-wrapper">
+                <!-- 收到红包 -->
+                <template v-if="item.type == 1">
+                  <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
+                  <img
+                    class="icon-give"
+                    :src="require('@/assets/svg/icon-get-giveaways-s.svg')"
+                  />
+                </template>
+                <!-- 发出去红包 -->
+                <template v-else-if="2">
+                  <img
+                    class="icon-big-give"
+                    :src="require('@/assets/svg/icon-send-giveaways-s.svg')"
+                  />
+                </template>
+              </div>
+              <div
+                class="info-wrapper"
+                :class="{ 'info-center': item.type == 1 }"
+              >
+                <div class="left">
+                  <div class="nickname">
+                    {{ item.type == 1 ? "Get Giveaway" : "Send Giveaways" }}
+                  </div>
+                  <div class="time">
+                    {{ moment(item.timestamp).format("MM-DD HH:mm:ss") }}
+                  </div>
+                </div>
+                <div class="right">
+                  <div class="msg">
+                    <div
+                      class="bold"
+                      :class="{
+                        'align-content':
+                          (item.type == 2 ||
+                            (item.type == 1 && item.status == 1)) &&
+                          item.amount.length + item.currencySymbol.length > 12,
+                      }"
+                    >
+                      <!-- 收到的 -->
+                      <template v-if="item.type == 1">
+                        <!-- 进行中-->
+                        <template v-if="item.status == 0">
+                          in progress
+                        </template>
+                        <!-- 已完成 -->
+                        <template v-else-if="item.status == 1">
+                          <span class="blance">
+                            <a-tooltip :title="item.amount">
+                              {{ getBit(item.amount) }}</a-tooltip
+                            >
+                          </span>
+                          <div class="coin-type-wrapper">
+                            <span class="coin-type">{{
+                              item.currencySymbol || ""
+                            }}</span>
+                            <img :src="item.currencyIconPath" alt="" />
+                          </div>
+                        </template>
+                        <!-- 已过期 -->
+                        <template v-else-if="item.status == 2">
+                          Timeout
+                        </template>
+                      </template>
+                      <!-- 发出去的 -->
+                      <template v-else-if="item.type == 2">
+                        <span class="blance">
+                          <a-tooltip :title="'-' + item.amount">
+                            -{{ getBit(item.amount) }}
+                          </a-tooltip>
+                        </span>
+                        <div class="coin-type-wrapper">
+                          <span class="coin-type">{{
+                            item.currencySymbol || ""
+                          }}</span>
+                          <img :src="item.currencyIconPath" alt="" />
+                        </div>
+                      </template>
+                    </div>
+                    <!-- 发出的红包显示 -->
+                    <div class="desc" v-if="item.type == 2">
+                      <!-- 未发送-->
+                      <template v-if="item.postTaskLuckdrop.reSendAvailable">
+                        Unpublished
+                      </template>
+                      <!-- 进行中 -->
+                      <template v-else-if="item.status == 1">
+                        {{ item.postTaskLuckdrop.receivedCount }}/{{
+                          item.postTaskLuckdrop.totalCount
+                        }}
+                      </template>
+                      <!-- 2:已结束; 3:提前终止-->
+                      <template
+                        v-else-if="item.status == 2 || item.status == 3"
+                      >
+                        ({{
+                          item.status == 2 ? "Time expired" : "Termination"
+                        }}) {{ item.postTaskLuckdrop.receivedCount }}/{{
+                          item.postTaskLuckdrop.totalCount
+                        }}
+                      </template>
+                      <!-- 红包提前终止/退款（进行中）显示-->
+                      <template v-if="item.status == 4"> Terminating </template>
+
+                      <!-- 进行中或者未发送成功时显示 
+                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
+                      <div class="desc-bottom-bar">
+                        <!-- 没有终止红包时显示 -->
+                        <div
+                          v-if="item.postTaskLuckdrop.terminatedAvailable"
+                          class="btn"
+                          @click.stop="terminaHandler(item, index)"
+                        >
+                          Termination
+                        </div>
+
+                        <!-- 红包未发出显示 -->
+                        <div
+                          class="btn send-btn"
+                          v-if="item.postTaskLuckdrop.reSendAvailable"
+                          @click.stop="sendTwitter(item)"
+                        >
+                          Send
+                        </div>
+                        <div
+                          v-else-if="item.srcContentId"
+                          class="btn detail-btn"
+                          @click.stop="clickListItem(item, index)"
+                        >
+                          details
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- 发红包—— 未发出、进行中 隐藏 -->
+                  <img
+                    v-if="item.type != 2"
+                    class="icon"
+                    :src="require('@/assets/svg/icon-cell-arrow-right.svg')"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <img
+              class="icon-empty"
+              :src="require('@/assets/svg/icon-empty-list.svg')"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+    <modal
+      :visible="modalVisible"
+      title="Early termination of Giveaway?"
+      content="The remaining amount will be returned to your wallet within 1 day."
+      cancelText="Termination"
+      confirmText="Cancel"
+      @cancel="modalCancel"
+      @confirm="modalConfirm"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+import modal from "@/view/popup/components/modal.vue";
+import redDot from "@/view/components/red-dot.vue";
+
+import { getBit } from "@/uilts/help";
+import { getMineLuckdropRecords } from "@/http/account";
+import { terminatedLuckdrop } from "@/http/redPacket";
+import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
+import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
+
+var moment = require("moment");
+
+let currentTabIndex = ref(0);
+
+let tabList = ref([
+  {
+    label: "ALL",
+  },
+  {
+    label: "Giveaway",
+  },
+  {
+    label: "NFT",
+  },
+]);
+
+let pageWrapperDom = ref(null);
+let pageGiveListDom = ref(null);
+
+let modalVisible = ref(false);
+let terminaTask = {};
+
+let giveList = ref([]);
+let giveReqParams = {
+  params: {
+    pageNum: 1,
+    pageSize: 20,
+  },
+  loadMore: false,
+};
+
+// 钱包未读数
+let unReadCountWallet = ref(0);
+let isReadMsg = ref(true);
+
+const clickTab = (params, index) => {
+  currentTabIndex.value = index;
+};
+
+/**
+ * 获取红包列表
+ */
+const getLuckdropRecordsList = () => {
+  getMineLuckdropRecords({
+    params: giveReqParams.params,
+  }).then((res) => {
+    chrome.runtime.connect({ name: "popup" });
+    if (res.data && res.data.length) {
+      if (giveReqParams.params.pageNum < 2) {
+        giveList.value = res.data;
+      } else {
+        let data = giveList.value;
+        data = data.concat(res.data);
+        giveList.value = data;
+      }
+      giveReqParams.loadMore = false;
+    }
+  });
+};
+
+/**
+ * 点击列表跳转到推文
+ */
+const clickListItem = (params) => {
+  if (!params.srcContentId) {
+    return;
+  }
+  let twitterUrl = "https://twitter.com/";
+  let nickName = "";
+  if (params.type == 1) {
+    nickName = params.userInfo.nickName;
+  } else if (params.type == 2) {
+    nickName = userInfo.value.nickName;
+  }
+  let url = twitterUrl + nickName + "/status/" + params.srcContentId;
+
+  chrome.tabs.create({
+    url,
+  });
+};
+
+const pageScroll = (e) => {
+  let wrapperHeight = pageWrapperDom.value.offsetHeight;
+  let pageGiveListHeight = pageGiveListDom.value.offsetHeight;
+  let scrollTop = e.target.scrollTop || 0;
+  if (currentTabIndex.value != 0) {
+    return;
+  }
+  if (
+    giveReqParams.loadMore === false &&
+    wrapperHeight + scrollTop >= pageGiveListHeight - 60
+  ) {
+    giveReqParams.loadMore = true;
+    giveReqParams.params.pageNum++;
+    getLuckdropRecordsList();
+  }
+};
+
+/**
+ * 点击发送，去发推
+ */
+const sendTwitter = (params) => {
+  console.log(params);
+  callEventPageMethod(
+    "POPUP_PUBLISH_TWITTER_RED_PACK",
+    {
+      srcContent: params.postTaskLuckdrop.srcContent,
+      postId: params.postTaskLuckdrop.postId,
+    },
+    function (response) {
+      console.log("res", response);
+    }
+  );
+};
+
+/**
+ * sendMessage
+ */
+const callEventPageMethod = (actionType, data, callback) => {
+  chrome.runtime.sendMessage(
+    {
+      actionType: actionType,
+      data: data,
+    },
+    function (response) {
+      if (typeof callback === "function") callback(response);
+    }
+  );
+};
+
+const terminaHandler = (params, index) => {
+  terminaTask = params;
+  terminaTask.index = index;
+  modalVisible.value = true;
+};
+
+const modalCancel = () => {
+  //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭
+  modalVisible.value = false;
+  let index = terminaTask.index;
+  terminatedLuckdrop({
+    params: {
+      luckdropId: terminaTask.id,
+    },
+  }).then((res) => {
+    if (res.code == 0) {
+      giveList.value[index]["status"] = res.data.status;
+      giveList.value[index]["postTaskLuckdrop"]["reSendAvailable"] = false;
+      giveList.value[index]["postTaskLuckdrop"]["terminatedAvailable"] = false;
+    }
+  });
+  terminaTask = {};
+};
+
+const modalConfirm = () => {
+  modalVisible.value = false;
+  terminaTask = {};
+};
+
+const readAllMsg = ({msgType}, cb) => {
+    readAllMsgByType({
+        params: {
+            msgType
+        }
+    }).then(res => {
+        cb && cb();
+    })
+};
+
+const setMessageCount = () => {
+    getAllMessageInfo({params: {
+    }}).then(res => {
+        if(res.code == 0) {
+            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+            unReadCountWallet.value = unReadCountWalletDetail;
+            if(unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
+                setBadgeInfo({data: {text}});
+            } else {
+                hideBadge();
+            }
+        }
+    });
+}
+
+onMounted(() => {
+  getLuckdropRecordsList();
+
+  setMessageCount();
+  setTimeout(() => {
+      isReadMsg.value = false;
+      readAllMsg({msgType: 1}, () => {
+          setMessageCount();
+      });
+  }, 2000);
+});
+</script>
+
+
+<style scoped lang="scss">
+.message-wrapper {
+  width: 100%;
+  height: 100%;
+  margin-top: 1px;
+  .tab-bar {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    box-shadow: 0px 0.5px 0px #d1d9dd;
+
+    .tab-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px 0px;
+      box-sizing: border-box;
+      border-bottom: 2px solid #fff;
+      margin: 0 12px;
+      font-size: 14px;
+      color: #949494;
+      cursor: pointer;
+    }
+
+    .active {
+      border-bottom: 2px solid #1d9bf0;
+      font-weight: 500;
+      color: #000;
+    }
+  }
+
+  .tab-content {
+    height: 100%;
+    overflow-y: auto;
+    .list-wrapper {
+      min-height: 202px;
+
+      .give-list {
+        min-height: 202px;
+        position: relative;
+
+        .cell {
+          display: flex;
+          justify-content: space-between;
+          min-height: 76px;
+          box-sizing: border-box;
+          padding-left: 14px;
+          position: relative;
+          cursor: pointer;
+
+          .red-dots {
+            position: absolute;
+            right: 4px;
+            top: 4px;
+          }
+
+          .img-wrapper {
+            position: relative;
+            margin-right: 16px;
+            box-sizing: border-box;
+
+            .icon-avatar {
+              width: 34px;
+              height: 34px;
+              border-radius: 50%;
+            }
+
+            .icon-give {
+              position: absolute;
+              right: -4px;
+              bottom: 2px;
+            }
+
+            .icon-big-give {
+              margin-top: 14px;
+            }
+          }
+
+          .info-wrapper {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
+            box-sizing: border-box;
+            padding: 10px 14px 10px 0;
+
+            .left {
+              .nickname {
+                font-weight: 500;
+                font-size: 13px;
+                margin-bottom: 5px;
+                max-width: 132px;
+                word-break: break-all;
+              }
+
+              .time {
+                font-size: 12px;
+                color: #b0b0b0;
+              }
+            }
+
+            .right {
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+
+              .msg {
+                .bold {
+                  font-weight: 500;
+                  font-size: 14px;
+                  text-align: right;
+                  display: flex;
+                  justify-content: flex-end;
+                  align-items: center;
+
+                  .blance {
+                    margin-left: 3px;
+                    display: inline-block;
+                    max-width: 80px;
+                    word-break: break-all;
+                    line-height: 18px;
+                    color: #e29a2e;
+                  }
+
+                  .coin-type-wrapper {
+                    display: flex;
+                    align-items: center;
+                  }
+
+                  .coin-type {
+                    margin-left: 3px;
+                  }
+
+                  img {
+                    margin-left: 4px;
+                    width: 14px;
+                    height: 14px;
+                  }
+                }
+
+                .align-content {
+                  flex-direction: column;
+                  align-items: flex-end;
+
+                  .blance {
+                    max-width: 130px;
+                  }
+                }
+
+                .desc {
+                  font-size: 12px;
+                  color: #b6b6b6;
+                  margin-top: 5px;
+                  text-align: right;
+
+                  .desc-bottom-bar {
+                    display: flex;
+                    align-items: center;
+                    justify-content: end;
+                    margin-top: 10px;
+
+                    .btn {
+                      min-width: 80px;
+                      height: 29px;
+                      padding: 0 8px;
+                      box-sizing: border-box;
+                      font-weight: 400;
+                      font-size: 14px;
+                      cursor: pointer;
+                      text-align: center;
+                      border-radius: 100px;
+                      color: #5e5e5e;
+                      border: 1px solid #dfdfdf;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+
+                    .send-btn {
+                      border: 1px solid #1d9bf0;
+                      color: #1d9bf0;
+                    }
+
+                    .detail-btn,
+                    .send-btn {
+                      margin-left: 8px;
+                    }
+                  }
+                }
+              }
+
+              .icon {
+                width: 18px;
+                height: 24px;
+                margin-left: 4px;
+                margin-right: -5px;
+              }
+            }
+          }
+          .info-center {
+            align-items: center;
+          }
+        }
+        .cell-center {
+          align-items: center;
+        }
+
+        .icon-empty {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
+}
+</style>

src/view/popup/tabbar-page/more/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="more-page">
+    <div class="more-list">
+      <div
+        class="cell"
+        v-for="(item, index) in moreTabList"
+        :key="index"
+        @click="moreItemHandle(item)"
+      >
+        <img class="icon" :src="item.icon" />
+        <div class="info-wrapper">
+          <div class="left">
+            {{ item.label }}
+          </div>
+          <div class="right">
+            <img
+              class="icon"
+              :src="require('@/assets/svg/icon-cell-arrow-right.svg')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+let moreTabList = ref([
+  {
+    icon: require("@/assets/svg/icon-website.svg"),
+    label: "Website",
+    href: "https://denet.me",
+  },
+  {
+    icon: require("@/assets/svg/icon-twitter.svg"),
+    label: "Twitter",
+    href: "https://twitter.com/denet2022",
+  },
+  {
+    icon: require("@/assets/svg/icon-discord.svg"),
+    label: "Discord",
+    href: "https://discord.gg/wZSz9p8ddG",
+  },
+  // , {
+  //     icon: require("@/assets/svg/icon-telegram.svg"),
+  //     label: "Telegram",
+  //     href: 'https://t.me/denetpro'
+  // }
+]);
+
+const moreItemHandle = (params) => {
+  window.open(params.href);
+};
+</script>
+
+<style scoped lang="scss">
+.more-page {
+  background: #e7e7e7;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  margin-top: 1px;
+
+  .more-list {
+    background: #fff;
+    height: calc(100% - 10px);
+    margin-top: 10px;
+
+    .cell {
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 56px;
+      box-sizing: border-box;
+      padding: 0 16px;
+
+      .icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+      }
+
+      .info-wrapper {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        margin-left: 13px;
+
+        .left {
+          font-weight: 500;
+          font-size: 16px;
+          .time {
+            color: #b0b0b0;
+          }
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+
+          .icon {
+            width: 18px;
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/view/popup/tabbar-page/nft/detail.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="nft-detail-wrapper">
+    <div class="back-bar">
+        <img :src="require('@/assets/svg/icon-nft-back-arrow.svg')" 
+            class="icon-arrow"
+            @click="back"
+            >
+        Azuki #6436
+    </div>
+    <div class="content">
+      <div class="nft-img">
+        <img
+          class="img"
+          src="https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
+          @click="clickNFTImg"
+        />
+      </div>
+
+      <div class="desc item">
+        <div class="title">Description</div>
+        <div class="desc-content" v-html="''"></div>
+      </div>
+
+      <div class="prop item">
+        <div class="title">Properties</div>
+        <div class="prop-content">
+            <div class="prop-item" v-for="(item, index) in propList" :key="index">
+                {{item.a}}
+                <div class="prop-name">
+                    {{item.b}}
+                </div>
+                {{item.c}}
+            </div>
+        </div>
+      </div>
+
+      <div class="about item">
+        <div class="title">About</div>
+
+        <div class="about-content" v-html="testHtml">
+        </div>
+      </div>
+
+      <div class="detail item">
+        <div class="title">Details</div>
+        <div class="detail-content">
+            <div class="detail-item" v-for="(item, index) in detailList" :key="index">
+                <div class="left">{{item.label}}</div>
+                <div class="right address" :class="{'blue': index < 2}">
+                    {{item.value}}
+                    <!-- <template>
+                        <span>{{item.value}}</span>
+                        <span>{{item.value}}</span>
+                    </template> -->
+                </div>
+            </div>
+        </div>
+      </div>
+
+      <div class="date item">
+        <div class="title">Date of possession</div>
+        <div class="date-content">
+            2022-05-27
+        </div>
+      </div>
+
+      <div class="price item">
+        <div class="title">Purchase price</div>
+        <div class="price-content">
+            100 USDT
+        </div>
+      </div>
+    </div>
+    <div class="bottom-bar">
+        <div class="default">
+            NFT Sale function, coming soon
+        </div> 
+        <!-- <div class="sell">
+            <div class="sell-btn">
+                Sell
+            </div>
+        </div> 
+        <div class="cancel-sale">
+            <div class="left">
+                233 USDT
+                <div class="final">
+                    （Final 203.5 USDT）
+                </div>
+            </div>
+            <div class="cancel-btn">
+                Cancel sale
+            </div>
+        </div> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import router from "@/router/popup.js";
+
+let propList = ref([
+    {
+        a: 'BACKGROUND',
+        b: 'Cool Blue',
+        c: '5% have this trait'
+    },
+    {
+        a: 'BACKGROUND',
+        b: 'Cool Blue',
+        c: '5% have this trait'
+    }
+]);
+
+let a = ''
+let testHtml = ref('<div class="section" style="margin-bottom: 20px">Take the red bean to join the garden. View the collection at <a style="text-decoration:none;color: #1D9BF0;" href="https://azuki.com/gallery" target="_blank">azuki.com/gallery</a></div><div class="section" style="margin-bottom: 20px">Azuki starts with a collection of 10,000 avatars that give you membership access to The Garden: a corner of the internet where artists, builders, and web3 enthusiasts meet to create a decentralized future. Azuki holders receive access to exclusive drops, experiences, and more. Visit azuki.com for more details.</div><div class="section" style="margin-bottom: 20px">We rise together. We build together. We grow together. </div>')
+
+let detailList = ref([
+    {
+        label: 'Contract Address',
+        value: '0xed5a889898989c5442752'
+    },
+    {
+        label: 'Contract Address',
+        value: '0xed5a...c5442752'
+    },
+        {
+        label: 'Contract Address',
+        value: '0xed5a...c5442752'
+    }
+])
+
+const back = () => {
+    router.back();
+}
+
+const clickNFTImg = () => {
+
+
+}
+</script>
+
+
+<style scoped lang="scss">
+.nft-detail-wrapper {
+  width: 100%;
+  height: 100%;
+
+  .back-bar {
+    height: 48px;
+    background: #ffffff;
+    box-shadow: 0px 0.5px 0px #d1d9dd;
+    box-sizing: border-box;
+    padding: 14px;
+    font-weight: 500;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+
+    .icon-arrow {
+        width: 24px;
+        margin-right: 12px;
+        cursor: pointer;
+    }
+  }
+
+  .content {
+    width: 100%;
+    height: calc(100% - 120px);
+    padding: 0 16px;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .nft-img {
+        margin-top: 23px;
+        margin-bottom: 20px;
+        text-align: center;
+        .img {
+            width: 280px;
+            border-radius: 26px;
+        }
+    }
+
+    .item {
+      border: 1px solid #e3e3e3;
+      border-radius: 10px;
+      padding: 14px;
+      box-sizing: border-box;
+      margin-bottom: 12px;
+
+      .title {
+        font-weight: 600;
+        font-size: 14px;
+      }
+    }
+
+    .desc {
+        margin-top: 10px;
+        .desc-content {
+            font-weight: 500;
+            font-size: 14px;
+            color: #929292;
+
+            span {
+                color: #1D9BF0;
+            }
+        }
+    }
+
+    .prop {
+        .prop-content {
+            display: flex;
+            flex-wrap: wrap;
+            margin-top: 12px;
+
+            .prop-item {
+                width: 48%;
+                height: 88px;
+                background: #F8F8F8;
+                border-radius: 10px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 8px;
+                box-sizing: border-box;
+                align-items: center;
+                font-weight: 500;
+                font-size: 12px;
+                color: #929292;
+
+                .prop-name {
+                    font-weight: 700;
+                    font-size: 17px;
+                    margin-top: 6px;
+                    margin-bottom: 8px;
+                    color: #000;
+                }
+            }
+            .prop-item:nth-child(odd) {
+                margin-right: 8px;
+            }
+        }
+    }
+
+    .about-content {
+        margin-top: 22px;
+  .section {
+            font-weight: 400;
+            font-size: 14px;
+            margin-bottom:  20px;
+        }
+      
+    }
+  .section {
+            font-weight: 400;
+            font-size: 14px;
+            margin-bottom:  10px;
+        }
+
+    .detail-content {
+        margin-top: 15px;
+
+        .detail-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 24px;
+            font-weight: 400;
+            font-size: 14px;
+
+            .right {
+                color: #929292;
+            }
+
+            .blue {
+                color: #1D9BF0 !important;
+            }
+
+            .address {
+                width: 100px;
+                white-space: nowrap;
+                > span {
+                    display: inline-block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 50%;
+                    + span {
+                        width: calc(50% + 10px);
+                        direction: rtl;
+                        margin-left: -13px;
+                    }
+                }
+            }
+        }
+    }
+
+    .date-content, .price-content {
+        margin-top: 10px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #929292;
+    }
+  }
+
+  .bottom-bar {
+    background: #ffffff;
+    box-shadow: inset 0px 1px 0px #ececec;
+    height: 70px;
+    padding: 15px 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .default {
+        font-weight: 500;
+        font-size: 16px;
+        color: #a8a8a8;
+        text-align: center;
+    }
+
+    .sell {
+        width: 100%;
+        height: 100%;
+
+        .sell-btn {
+            width: 120px;
+            height: 40px;
+            box-sizing: border-box;
+            border: 1px solid #E9E9E9;
+            border-radius: 100px;
+            font-weight: 500;
+            font-size: 16px;
+            color: #1D9BF0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            right: 16px;
+            cursor: pointer;
+        }
+    }
+
+    .cancel-sale {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .left {
+            font-weight: 500;
+            font-size: 15px;
+            .final {
+                font-weight: 500;
+                font-size: 12px;
+                color: #929292;
+                margin-top: 6px;
+            }
+        }
+
+        .cancel-btn {
+            width: 120px;
+            height: 40px;
+            box-sizing: border-box;
+            border: 1px solid #E9E9E9;
+            border-radius: 100px;
+            font-weight: 500;
+            font-size: 16px;
+            color: #FF0000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+    }
+  }
+}
+</style>

src/view/popup/tabbar-page/nft/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="nft-page-wrapper">
+    <div class="content">
+      <div class="item" v-for="(item, index) in listData" :key="index" @click="clickNFT(item)">
+        <img :src="item.src" class="img">
+        <div class="name">{{item.name}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import router from "@/router/popup.js";
+
+let listData = ref([
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+   {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+])
+
+const clickNFT = (params) => {
+  router.push({
+    path: '/NFTDetail'
+  })
+}
+</script>
+
+
+<style scoped lang="scss">
+    .nft-page-wrapper {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+
+      .content {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 5px 2px 0 16px;
+        box-sizing: border-box;
+
+        .item {
+          width: 33%;
+          box-sizing: border-box;
+          padding-right: 14px;
+          margin-top: 15px;
+          cursor: pointer;
+
+          .img {
+            width: 100%;
+            border-radius: 5px;
+            height: 104px;
+            object-fit: cover;
+          }
+
+          .name {
+            font-weight: 400;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+</style>

src/view/popup/tabbar-page/wallter/popup.vue

@@ -0,0 +1,317 @@
+<template>
+    <div class="page-wrapper" ref="pageWrapperDom">
+        <div class="content">
+            <div class="balance">
+                <div class="wallet">
+                    <font>Balance Valuation</font>
+                </div>
+            </div>
+            <div class="amount-wrapper">
+                <a-tooltip :title="'$'+canWithdrawBalance">
+                    ${{ getBit(canWithdrawBalance) }}
+                </a-tooltip>
+
+                <div class="right">
+                    <div class="bill" @click="showTransactions">
+                        <red-dot class="red-dot" v-if="unReadCountWallet > 0"></red-dot>
+                        <img :src="require('@/assets/svg/icon-home-list.svg')" />
+                    </div>
+
+                    <img :src="require('@/assets/svg/icon-home-refresh.svg')" 
+                        class="icon"
+                        @click="refreshList"  />
+                </div>
+            </div>
+        </div>
+
+        <currency-list 
+            style="height: calc(100% - 118px);"
+            ref="currencyListDom"
+            :showRefresh="false"
+            :page="'top-up'"
+            @selectCurrency="selectCurrency"></currency-list>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+import redDot from "@/view/components/red-dot.vue";
+import CurrencyList from "@/view/components/currency-list.vue";
+
+import {
+    getChromeStorage,
+} from "@/uilts/chromeExtension";
+import { getBalance } from "@/http/account";
+import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
+import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
+import Report from "@/log-center/log";
+import router from "@/router/popup.js";
+import { getBit } from "@/uilts/help";
+
+let withdraw_info = inject('withdraw_info')
+withdraw_info.paypal = {}
+
+var moment = require("moment");
+
+let userInfo = ref({});
+let canWithdrawBalance = ref(0);
+withdraw_info.paypal.amount_value = canWithdrawBalance
+withdraw_info.balance = 0
+
+let isRequestWithdrawBalance = ref(false);
+
+let currencyListDom = ref('');
+
+let walletWithdrawConfig = ref({
+    withdrawUSDPaypalFee: 0,
+    withdrawUSDPreMinAmount: 100,
+    withdrawUSDSwitch: "",
+    withdrawUSDPaypalFeeDesc: ''
+});
+withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
+
+
+function selectCurrency(_params) {
+    router.push({ 
+        path: 'currencyDetail',
+        query: {
+            params: JSON.stringify(_params)
+        }
+    });
+}
+
+onMounted(() => {
+    checkLoginState((res) => {
+        if (res) {
+            getAccountBalance();
+            Report.reportLog({
+                pageSource: Report.pageSource.denetHomePage,
+                businessType: Report.businessType.pageView,
+            },{
+                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
+            });
+            setMessageCount();
+        } else {
+            Report.reportLog({
+                pageSource: Report.pageSource.denetLogin,
+                businessType: Report.businessType.pageView,
+            });
+        }
+    });
+});
+
+const readAllMsg = ({msgType}, cb) => {
+    readAllMsgByType({
+        params: {
+            msgType
+        }
+    }).then(res => {
+        cb && cb();
+    })
+};
+
+const setMessageCount = () => {
+    getAllMessageInfo({params: {
+    }}).then(res => {
+        if(res.code == 0) {
+            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+            if(unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
+                setBadgeInfo({data: {text}});
+            } else {
+                hideBadge();
+            }
+        }
+    });
+}
+
+
+/**
+ * 获取账户余额
+ */
+const getAccountBalance = () => {
+    isRequestWithdrawBalance.value = false;
+    getBalance({}).then((res) => {
+        isRequestWithdrawBalance.value = true;
+        if (res.code == 0) {
+            if (res.data) {
+                canWithdrawBalance.value = res.data.allAssetValuationUSD;
+                withdraw_info.balance = res.data.allAssetValuationUSD || 0
+            }
+        }
+    });
+};
+
+const getUserInfo = (cb) => {
+    getChromeStorage("userInfo", (res) => {
+        cb && cb(res);
+    });
+};
+
+/**
+ * 检查登录状态
+ */
+const checkLoginState = (cb) => {
+    getUserInfo((res) => {
+        if (res && res.accessToken) {
+            userInfo.value = res;
+        } else {
+            userInfo.value = {};
+        }
+        cb && cb(res);
+    });
+};
+
+const showTransactions = () => {
+    router.push('/transactions')
+};
+
+// 点击提现
+const clickWithdraw = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetHomePage,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.withdrawButton
+    });
+    router.push('/withdraw/home');
+}
+
+const clickTopUp = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetHomePage,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.topupButton
+    });
+    router.push('/top-up/home');
+}
+
+const refreshList = () => {
+    if(currencyListDom.value) {
+        currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
+    }
+}
+
+</script>
+
+<style lang="scss" scoped>
+html,
+body {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.page-wrapper {
+    width: 375px;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .nav-bar {
+        padding: 14px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .item {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            cursor: pointer;
+
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 4px;
+            }
+        }
+
+        .left {
+            font-weight: 500;
+        }
+
+        .right {
+            color: #b6b6b6;
+        }
+    }
+
+    .content {
+        padding: 16px;
+        background: #1D9BF0;
+        box-sizing: border-box;
+
+        .icon-money {
+            width: 70px;
+            height: 70px;
+        }
+
+        .balance {
+            display: flex;
+            justify-content: space-between;
+            .wallet {
+                font {
+                    font-weight: 500;
+                    font-size: 13px;
+                    color: #fff;
+                    opacity: 0.7;
+                }
+            }
+        }
+
+        .amount-wrapper {
+            margin-top: 8px;
+            font-weight: 700;
+            font-size: 36px;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .right {
+                display: flex;
+                align-items: center;
+
+                .bill {
+                    height: 24px;
+                    width: 24px;
+                    position: relative;
+
+                    img {
+                        width: 24px;
+                        height: 24px;
+                        cursor: pointer;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
+
+                    .red-dot {
+                        position: absolute;
+                        right: 0px;
+                        top: -1px;
+                        z-index: 100;
+                    }
+                }
+
+                .icon {
+                    margin-left: 22px;
+                }
+            }
+        }
+
+        .msg {
+            margin-top: 10px;
+            font-size: 13px;
+            color: #b6b6b6;
+        }
+    }
+
+
+
+}
+
+.page-wrapper::-webkit-scrollbar {
+    display: none;
+}
+</style>

src/view/popup/top-up/home.vue

@@ -30,11 +30,12 @@ let showCurrencySelect = ref(false)
 let tempCurrentCurrencyList = ref([])
 
 function selectCurrency(params) {
-    tempCurrentCurrencyList.value = params;
-    if (params.length > 1) {
+    let { currencies } = params;
+    tempCurrentCurrencyList.value = currencies;
+    if (currencies.length > 1) {
         showCurrencySelect.value = true;
     } else {
-        selectCurrencyAfter(params[0])
+        selectCurrencyAfter(currencies[0])
     }
 }
 function selectCurrencyAfter(_params) {

src/view/popup/withdraw/home.vue

@@ -30,11 +30,12 @@ let showCurrencySelect = ref(false)
 let tempCurrentCurrencyList = ref([])
 
 function selectCurrency(params) {
-    tempCurrentCurrencyList.value = params;
-    if (params.length > 1) {
+    let { currencies } = params;
+    tempCurrentCurrencyList.value = currencies;
+    if (currencies.length > 1) {
         showCurrencySelect.value = true;
     } else {
-        selectCurrencyAfter(params[0])
+        selectCurrencyAfter(currencies[0])
     }
 }