[edit] NFT 联调

src/assets/svg/icon-telegram.svg

@@ -1,3 +1,3 @@
 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M32.2165 13.8207L28.5516 30.7927C28.2752 31.9905 27.5541 32.2887 26.5295 31.7244L20.9454 27.6837L18.251 30.2284C17.9528 30.5212 17.7034 30.7661 17.1288 30.7661L17.5299 25.1815L27.8794 15.9981C28.3294 15.6042 27.7818 15.3859 27.18 15.7799L14.3855 23.6909L8.87738 21.998C7.67925 21.6306 7.65757 20.8214 9.12677 20.2571L30.6714 12.1065C31.669 11.7392 32.5418 12.3248 32.2165 13.8207V13.8207Z" fill="#259EDA"/>
+<path d="M32.2165 13.8207L28.5516 30.7927C28.2752 31.9905 27.5541 32.2887 26.5295 31.7244L20.9454 27.6837L18.251 30.2284C17.9528 30.5212 17.7034 30.7661 17.1288 30.7661L17.5299 25.1815L27.8794 15.9981C28.3294 15.6042 27.7818 15.3859 27.18 15.7799L14.3855 23.6909L8.87738 21.998C7.67925 21.6306 7.65757 20.8214 9.12677 20.2571L30.6714 12.1065C31.669 11.7392 32.5418 12.3248 32.2165 13.8207Z" fill="#1D9BF0"/>
 </svg>

src/view/components/popup-transactions.vue

@@ -58,7 +58,7 @@
                         <!-- 支出-买盲盒 -->
                         <template v-else-if="item.bizType == -3">
                             <img style="margin-left:-4px" :src="
-                                        require('@/assets/svg/icon-big-give.svg')
+                                        require('@/assets/svg/icon-wallter-list-blind-box.svg')
                             " />
                         </template>
                     </div>
@@ -84,14 +84,13 @@
                                     Giveaways
                                 </template>
                                 <template v-else-if="item.bizType == -3">
-                                    Mystery box*1  Sold
+                                    Mystery box*{{item.bizData.nftItemCount}}  Sold
                                 </template>
                             </div>
                             <div class="time">{{ moment(item.createTimestamp).format('MM-DD HH:mm:ss') }}</div>
                         </div>
                         <div class="right">
                             <div class="msg">
-                                <!-- 支出- -->
                                 <template v-if="item.bizType == -1">
                                     <!-- 提现支出-状态（0：已申请，1：支付中，2：提现成功，3：提现失败） -->
                                     <template v-if="item.bizData.withdrawStatus == 0 || item.bizData.withdrawStatus == 1">
@@ -146,7 +145,6 @@
                                             </div>
                                         </div>
                                     </template>
-                                    <!-- 非提现支出 -->
                                     <template v-else>
                                         <div class="balance"
                                             :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
@@ -162,16 +160,25 @@
                                         </div>
                                     </template>
                                 </template>
-                                <!-- 收入 -->
+
                                 <template v-else>
                                     <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">
+
+                                        <!--支出—— -2：零钱余额支付 、-3： NFT盲盒余额支付 -->
+                                        <span class="amount" v-if="item.bizType == -2 || item.bizType == -3">
+                                            -
+                                            <a-tooltip :title="'-' + item.trxAmountValue">
                                                 {{ getBit(item.trxAmountValue) || 0 }}
                                             </a-tooltip>
                                         </span>
+                                        <!-- 收入—— bizType：1、2、3、4 -->
+                                        <span class="amount" v-else>
+                                            <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="">
@@ -207,7 +214,7 @@ let listContent = ref(null);
 let listReqParams = {
     params: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 20,
     },
     loadMore: false,
 };

src/view/popup/currency-detail.vue

@@ -10,8 +10,8 @@
         class="icon-currency"
         :src="currencyInfo.iconPath"/>
       <div class="amount">
-        {{currencyInfo.totalBalance}} {{currencyInfo.currencyName}}
-        <div class="final">${{currencyInfo.totalUsdEstimateBalance}}</div>
+        {{currencyInfo.balance}} {{currencyInfo.currencyName}}
+        <div class="final">${{currencyInfo.usdEstimateBalance}}</div>
       </div>
     </div>
     <div class="bottom">
@@ -29,7 +29,7 @@
                 @selectCurrency="selectCurrency">
             </currency-select>
         </div>
-        <div class="selectBg" @click="showCurrencySelect = false"></div>
+        <div class="selectBg"></div>
     </template>
   </div>
 </template>
@@ -40,6 +40,8 @@ import router from "@/router/popup.js";
 import Report from "@/log-center/log";
 import { getStorage } from "@/uilts/help";
 
+import { syncChainTokenRechargeRecord } from "@/http/publishApi";
+
 import VHead from '@/view/popup/components/head.vue'
 import currencySelect from "@/view/components/currency-select.vue";
 
@@ -48,20 +50,17 @@ 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);
+
+    currencyInfo.value = {
+      ...params,
+      totalBalance: currencyInfo.value.totalBalance,
+      totalUsdEstimateBalance: currencyInfo.value.totalUsdEstimateBalance
     }
+    console.log(currencyInfo.value)
 }
 
-let withdraw_info = inject('withdraw_info')
 // 点击提现
 const clickWithdraw = () => {
     Report.reportLog({
@@ -69,15 +68,10 @@ const clickWithdraw = () => {
         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]);
-    }
+    withdrawHandle(currencyInfo.value);
 }
 
+let withdraw_info = inject('withdraw_info')
 const withdrawHandle = (_params) => {
   withdraw_info.chainInfo = _params.chainInfo;
   if (_params.currencyCode == 'USD') {
@@ -97,10 +91,6 @@ const withdrawHandle = (_params) => {
   }
 }
 
-
-
-let top_up_info = inject('top_up_info');
-
 const clickDeposit = () => {
     Report.reportLog({
         pageSource: Report.pageSource.denetHomePage,
@@ -108,14 +98,10 @@ const clickDeposit = () => {
         objectType: Report.objectType.topupButton
     });
 
-    if(currenciesData.value.length > 1) {
-      showCurrencySelect.value = true;
-      currencyOpertionType = "DEPOSIT";
-    } else if(currenciesData.value.length == 1){
-      depositHandle(currenciesData.value[0]);
-    }
+    depositHandle(currencyInfo.value);
 }
 
+let top_up_info = inject('top_up_info');
 const depositHandle = (_params) => {
   top_up_info.token = _params.currencyName || ''
   top_up_info.token_chain = _params.tokenChain 
@@ -131,9 +117,28 @@ const depositHandle = (_params) => {
 };
 
 const onRefresh = () => {
-
+  // 刷新余额接口
+  asyncTokenRechRecord(currencyInfo.value, (res) => {
+    if(res.code == 0 && res.data && res.data.length) {
+        let currencyData = res.data[0];
+        if(currencyData.currencyCode == currencyInfo.value.currencyCode) {
+          currencyInfo.value.balance = currencyData.balance;
+          currencyInfo.value.usdEstimateBalance = currencyData.usdEstimateBalance;
+        }
+    }
+  })
 };
 
+const asyncTokenRechRecord = (_params, cb) => {
+    syncChainTokenRechargeRecord({
+        params: {
+            currencyCode: _params.currencyCode
+        }
+    }).then(res => {
+        cb && cb(res)
+    })
+}
+
 onMounted(() => {
     let {params = '{}'} = router.currentRoute.value.query;
 
@@ -148,6 +153,10 @@ onMounted(() => {
         totalUsdEstimateBalance
       };
     }
+
+    if(currenciesData.value.length > 1) {
+      showCurrencySelect.value = true;
+    }
 })
 </script>
 

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

@@ -2,7 +2,7 @@
   <div class="tabbar-page-wrapper">
     <global-tip :type="'3'"></global-tip>
     <!-- login -->
-    <popup-login v-if="!userInfo.accessToken" @loginAction="loginAction" />
+    <popup-login v-if="!loginStatus" @loginAction="loginAction" />
     <template v-else>
       <top-bar  :userInfo="userInfo" 
                 :bgColor="bgColor"
@@ -32,11 +32,15 @@ let bgColor = ref('#1b92e2');
 let color =  ref('#fff');
 let boxShadow = ref('none');
 
+let loginStatus = ref('default'); 
+
 const getUserInfo = (cb) => {
   getChromeStorage("userInfo", (res) => {
     if (res && res.accessToken) {
       userInfo.value = res;
+      loginStatus.value = res;
     } else {
+      loginStatus.value = '';
       userInfo.value = {};
     }
     cb && cb(res);

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

@@ -30,7 +30,7 @@ import { ref } from "vue";
 let moreTabList = ref([
   {
     icon: require("@/assets/svg/icon-website.svg"),
-    label: "Website",
+    label: "Official Website",
     href: "https://denet.me",
   },
   {
@@ -43,11 +43,11 @@ let moreTabList = ref([
     label: "Discord",
     href: "https://discord.gg/wZSz9p8ddG",
   },
-  // , {
-  //     icon: require("@/assets/svg/icon-telegram.svg"),
-  //     label: "Telegram",
-  //     href: 'https://t.me/denetpro'
-  // }
+  {
+      icon: require("@/assets/svg/icon-telegram.svg"),
+      label: "Telegram",
+      href: 'https://t.me/denetpro'
+  }
 ]);
 
 const moreItemHandle = (params) => {

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

@@ -16,68 +16,84 @@
                     @click="clickNFTImg"
                 />
             </div>
-            <div v-for="(item, index) in listData" :key="index">
-                <div class="desc item" v-if="item.filedName == 'Description'">
-                    <div class="title">{{item.filedName}}</div>
-                    <div class="desc-content" v-html="item.filedValue"></div>
-                </div>
-                <div class="prop item" v-if="item.filedName == 'Properties'">
-                    <div class="title">{{item.filedName}}</div>
-                    <div class="prop-content">
-                        <div
-                            class="prop-item"
-                            v-for="(filedValueItem, filedValueIndex) in item.filedValue"
-                            :key="filedValueIndex"
-                        >
-                            {{ filedValueItem.name }}
-                            <div class="prop-name">
-                                {{ filedValueItem.value }}
-                            </div>
-                            {{ filedValueItem.description }}
+            <div class="desc item" v-if="nftMetaData.description">
+                <div class="title">Description</div>
+                <div class="desc-content" v-html="nftMetaData.description"></div>
+            </div>
+            <div class="prop item" v-if="nftMetaData.properties && nftMetaData.properties.length">
+                <div class="title">Properties</div>
+                <div class="prop-content">
+                    <div
+                        class="prop-item"
+                        v-for="(filedValueItem, filedValueIndex) in nftMetaData.properties"
+                        :key="filedValueIndex"
+                    >
+                        {{ filedValueItem.name }}
+                        <div class="prop-name">
+                            {{ filedValueItem.value }}
                         </div>
+                        {{ filedValueItem.description }}
                     </div>
                 </div>
+            </div>
 
-                <div class="about item" v-if="item.filedName == 'About'">
-                    <div class="title">{{item.filedName}}</div>
-                    <div class="about-content" v-html="item.filedValue"></div>
-                </div>
-
-                <div class="detail item"  v-if="item.filedName == 'Details'">
-                    <div class="title">{{item.filedName}}</div>
+            <div class="about item" v-if="nftMetaData.about">
+                <div class="title">About</div>
+                <div class="about-content" v-html="nftMetaData.about"></div>
+            </div>
+            <div class="detail item"  v-if="nftDetailData.details">
+                    <div class="title">Details</div>
                     <div class="detail-content">
-                        <div
-                            class="detail-item"
-                            v-for="(filedValueItem, filedValueIndex) in item.filedValue"
-                            :key="filedValueIndex"
-                        >
-                            <div class="left">{{ filedValueItem.name }}</div>
-                            <div class="right" :class="{'address': filedValueItem.name == 'Contract Address'}"  
-                                v-if="filedValueItem.name != 'Token ID'"
-                                @click="clickAddress(filedValueItem)">
-                                <template v-if="filedValueItem.name != 'Contract Address'">
-                                    {{ filedValueItem.value }}
-                                </template>
-                                <template v-else>
-                                    <span>{{filedValueItem.value}}</span>
-                                    <span>{{filedValueItem.value}}</span>
-                                </template>
+                        <div class="detail-item">
+                            <div class="left">Contract Address</div>
+                            <div class="right address"  
+                                @click="clickAddress">
+                                    <span>{{nftDetailData.details.contractAddress}}</span>
+                                    <span>{{nftDetailData.details.contractAddress}}</span>
+                            </div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="left">Token ID</div>
+                            <div class="right token"
+                                @click="clickToken">
+                                {{nftDetailData.details.tokenId}}
+                            </div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="left">Token Standard</div>
+                            <div class="right" >
+                                {{nftDetailData.details.tokenStandard}}
+                            </div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="left">Blockchain</div>
+                            <div class="right" >
+                                {{nftDetailData.details.blockChain}}
+                            </div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="left">Creator Fees</div>
+                            <div class="right" >
+                                {{nftDetailData.details.creatorFees}}
+                            </div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="left">Transaction Royalties</div>
+                            <div class="right" >
+                                {{nftDetailData.details.transactionRoyalties}}
                             </div>
-                            <div v-else v-html='filedValueItem.value'></div>
                         </div>
                     </div>
                 </div>
-
-                <div class="date item"  v-if="item.filedName == 'Date of possession'">
-                    <div class="title">{{item.filedName}}</div>
-                    <div class="date-content">{{item.filedValue}}</div>
+                <div class="date item"  v-if="nftDetailData.dateOfPossession">
+                    <div class="title">Date of possession</div>
+                    <div class="date-content">{{nftDetailData.dateOfPossession}}</div>
                 </div>
 
-                <div class="price item"  v-if="item.filedName == 'Purchase price'">
-                    <div class="title">{{item.filedName}}</div>
-                    <div class="price-content">{{item.filedValue}}</div>
+                <div class="price item"  v-if="nftDetailData.purchasePrice">
+                    <div class="title">Purchase price</div>
+                    <div class="price-content">{{nftDetailData.purchasePrice}}</div>
                 </div>
-            </div>
         </div>
         <div class="bottom-bar">
             <div class="default">NFT Sale function, coming soon</div>
@@ -107,7 +123,8 @@ import router from "@/router/popup.js";
 
 import {getNFTDetail} from "@/http/nft.js";
 
-let listData = ref([{"filedName":"Description","filedValue":"Created by <font color=\"#1D9BF0\">Azuki<font>"},{"filedName":"Properties","filedValue":[{"description":"5% have this trait","name":"BACKGROUND","value":"Cool Blue"},{"description":"1% have this trait","name":"CLOTHING","value":"Hoodie"},{"description":"16% have this trait","name":"EAR","value":"Pearl"},{"description":"0.35% have this trait","name":"EYES","value":"Closed"},{"description":"4% have this trait","name":"MOUTH","value":"Lipstick"},{"description":"90% have this trait","name":"TYPE","value":"Human"}]},{"filedName":"About","filedValue":"<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 <a style=\"text-decoration:none;color: #1D9BF0;\" href=\"https://www.azuki.com\" target=\"_blank\">azuki.com</a> for more details.</div><div class=\"section\" style=\"margin-bottom: 20px\">We rise together. We build together. We grow together. </div>"},{"filedName":"Details","filedValue":[{"name":"Contract Address","url":"https://bscscan.com/token/0x2Fb9376cFf6fb7f5fe99665aE1Ec2FdDD5099134","value":"0xECa41281c24451168a37211F0bc2b8645AF45092"},{"name":"Token ID","value":"2752"},{"name":"Token Standard","value":"Ethereum"},{"name":"Blockchain","value":"Ethereum"},{"name":"Creator Fees","value":"4%"},{"name":"Transaction Royalties","value":"9%"}]},{"filedName":"Date of possession","filedValue":"2022-05-27"},{"filedName":"Purchase price","filedValue":"100 USDT"}]);
+let nftMetaData = ref({});
+let nftDetailData = ref({});
 
 let NFTInfo = ref({
     imagePath: '',
@@ -118,8 +135,18 @@ const back = () => {
     router.back();
 };
 
-const clickAddress = (params) => {
-    window.open(params.url);
+const clickAddress = () => {
+    let {contractAddressUrl = ''} = nftDetailData.value.details;
+    if(contractAddressUrl) {
+        window.open(contractAddressUrl);
+    }
+}
+
+const clickToken = () => {
+    let {tokenIdUrl = ''} = nftDetailData.value.details;
+    if(tokenIdUrl) {
+        window.open(tokenIdUrl);
+    }
 }
 
 const clickNFTImg = () => {
@@ -133,7 +160,10 @@ const getDetail = () => {
         }
     }).then(res => {
         if(res.code == 0) {
-
+            console.log(res)
+            let { metadata = '{}'} = res.data || {};
+            nftDetailData.value = res.data;
+            nftMetaData.value = JSON.parse(metadata);
         }
     }).catch((err)=>{
 
@@ -282,6 +312,11 @@ onMounted(() => {
                     color: #929292;
                 }
 
+                .token {
+                    color: #1d9bf0 !important;
+                    cursor: pointer;
+                }
+
                 .address {
                     width: 100px;
                     white-space: nowrap;

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

@@ -20,17 +20,12 @@ import router from "@/router/popup.js";
 
 import {nftListMine} from "@/http/nft.js";
 
-let listData = ref([
-  {
-    imagePath: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-    nftItemName: 'test Name'
-  },
-])
+let listData = ref([]);
 
 let NFTReqParams = {
   params: {
     pageNum: 1,
-    pageSize: 20,
+    pageSize: 30,
   },
   loadMore: false,
 };
@@ -81,7 +76,7 @@ const pageScroll = (e) => {
 };
 
 onMounted(() => {
-  // getNFTListMine();
+  getNFTListMine();
 })
 </script>