Merge branch 'dev_1.1.5-1' into dev_v1.1.4_220720_optimization

# Conflicts:
#	src/logic/content/twitter.js

src/assets/svg/icon-iframe-close.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="-0.8" x2="16.7592" y2="-0.8" transform="matrix(-0.698077 0.716023 -0.698077 -0.716023 15.1914 4)" stroke="white" stroke-width="1.6"/>
+<line y1="-0.8" x2="16.7592" y2="-0.8" transform="matrix(0.698077 0.716022 0.698077 -0.716022 4.79297 4)" stroke="white" stroke-width="1.6"/>
+</svg>

src/assets/svg/icon-iframe-error.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58172 0 0 3.58172 0 8V42C0 46.4183 3.58172 50 8 50H42C46.4183 50 50 46.4183 50 42V8C50 3.58172 46.4183 0 42 0H8ZM18.9154 11.6654L14.6706 16.0193L10.4258 11.6654L8.33155 13.8134L12.5763 18.1673L9.16602 21.6653L11.2602 23.8134L14.6706 20.3154L18.0809 23.8134L20.1751 21.6653L16.7648 18.1673L21.0096 13.8134L18.9154 11.6654ZM40.7513 11.6654L36.5065 16.0193L32.2617 11.6654L30.1675 13.8134L34.4123 18.1673L31.002 21.6653L33.0962 23.8134L36.5065 20.3154L39.9168 23.8134L42.0111 21.6653L38.6007 18.1673L42.8455 13.8134L40.7513 11.6654ZM26.6553 33.6864C26.2576 33.1124 25.409 33.1124 25.0113 33.6864L20.4255 40.3055C19.966 40.9687 20.4407 41.875 21.2475 41.875H30.4192C31.226 41.875 31.7006 40.9687 31.2411 40.3055L26.6553 33.6864Z" fill="white"/>
+</svg>

src/assets/svg/icon-iframe-fixed.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.65" y="2.65" width="14.7" height="14.7" rx="1.35" fill="#D9D9D9" fill-opacity="0.01" stroke="white" stroke-width="1.3"/>
+<rect x="10" y="5" width="5" height="5" fill="white"/>
+</svg>

src/assets/svg/icon-iframe-full.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6833 4.47102H14.5578L11.2574 7.69281L11.2574 7.6928L11.2561 7.69408C11.1358 7.8144 11.0849 7.98424 11.0849 8.15018C11.0849 8.31752 11.136 8.495 11.2374 8.64706L11.254 8.67202L11.279 8.68867C11.431 8.79004 11.6085 8.84114 11.7759 8.84114C11.9418 8.84114 12.1116 8.79025 12.232 8.66992L15.455 5.44686V9.32757C15.455 9.50364 15.5415 9.66715 15.6581 9.78367C15.7746 9.90019 15.9381 9.98671 16.1142 9.98671C16.2902 9.98671 16.4537 9.90019 16.5703 9.78367C16.6868 9.66715 16.7733 9.50364 16.7733 9.32757V4.66781C16.8166 4.22056 16.7282 3.84424 16.5325 3.57515C16.3336 3.30166 16.0332 3.15273 15.6899 3.15273H10.6833C10.5073 3.15273 10.3437 3.23926 10.2272 3.35577C10.1107 3.47229 10.0242 3.63581 10.0242 3.81188C10.0242 3.98795 10.1107 4.15146 10.2272 4.26798C10.3437 4.38449 10.5073 4.47102 10.6833 4.47102ZM9.32562 15.5418H5.44491L8.66797 12.3188C8.78732 12.1994 8.83919 12.0303 8.83919 11.8733C8.83919 11.7209 8.79038 11.5572 8.67851 11.4386C8.56551 11.2772 8.3951 11.1929 8.21187 11.1929C8.02744 11.1929 7.84237 11.2775 7.69213 11.4278L4.46906 14.6508V10.4307C4.46906 10.2546 4.38254 10.0911 4.26602 9.97461C4.14951 9.85809 3.98599 9.77157 3.80992 9.77157C3.63385 9.77157 3.47034 9.85809 3.35382 9.97461C3.23731 10.0911 3.15078 10.2546 3.15078 10.4307V15.2675C3.15078 15.6409 3.28946 16.054 3.53082 16.3758C3.77294 16.6987 4.13141 16.945 4.57363 16.945H9.32562C9.50169 16.945 9.6652 16.8584 9.78172 16.7419C9.89823 16.6254 9.98476 16.4619 9.98476 16.2858C9.98476 15.8788 9.6775 15.5418 9.32562 15.5418Z" fill="white" stroke="white" stroke-width="0.3"/>
+</svg>

src/assets/svg/icon-iframe-loading.svg

@@ -0,0 +1,3 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.3298 53.6152L32.2445 47.4602C28.1911 48.174 24.0153 47.5343 20.3615 45.6397C16.7077 43.7451 13.7788 40.701 12.0265 36.9768C10.2743 33.2526 9.79616 29.0553 10.6658 25.0324C11.5355 21.0095 13.7047 17.3846 16.8388 14.7167C19.9729 12.0489 23.8977 10.4864 28.0078 10.2702C32.118 10.0541 36.185 11.1963 39.5816 13.5208C42.9782 15.8452 45.5157 19.2226 46.8025 23.1321C48.0893 27.0416 48.054 31.2659 46.7021 35.1533L52.6045 37.2064C54.4071 32.0231 54.4541 26.3906 52.7383 21.1779C51.0225 15.9652 47.6391 11.4619 43.1102 8.36273C38.5812 5.26354 33.1583 3.74066 27.6781 4.02902C22.1978 4.31739 16.9647 6.40096 12.786 9.95833C8.60732 13.5157 5.71524 18.3492 4.55593 23.7132C3.39661 29.0772 4.03448 34.6736 6.37113 39.6391C8.70777 44.6046 12.6134 48.6634 17.4854 51.1892C22.3574 53.7149 27.9252 54.5675 33.3298 53.6152Z" fill="white"/>
+</svg>

src/assets/svg/icon-iframe-pinned.svg

@@ -0,0 +1,7 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_22953_197808" fill="white">
+<rect x="4" y="8" width="72" height="64" rx="4"/>
+</mask>
+<rect x="4" y="8" width="72" height="64" rx="4" fill="#D9D9D9" fill-opacity="0.01" stroke="#8E8E8E" stroke-width="12" mask="url(#path-1-inside-1_22953_197808)"/>
+<rect x="36" y="20" width="28" height="20" fill="#8E8E8E"/>
+</svg>

src/entry/background.js

@@ -33,6 +33,10 @@ import {
     facebookShareSuccess
 } from "@/logic/background/facebook";
 
+import {
+    closeAchPayNoticeHandler
+} from "@/logic/background/denet";
+
 //加载bg.js 执行
 setMessageCount();
 
@@ -108,13 +112,6 @@ function thenInstalledMethod() {
             //開始後每一分鐘執行一次(該值不能小于1) 
             periodInMinutes: 1
         });
-        setTimeout(() => {
-            // 安装成功埋点
-            Report.reportLog({
-                objectType: Report.objectType.background_function_try,
-                funcName: 'onInstalledMethod'
-            });
-        }, 5000);
     } catch (error) {
         Report.reportLog({
             objectType: Report.objectType.background_function_catch,
@@ -141,7 +138,7 @@ function onInstalledMethod() {
 
 function onMessageMethod(req, sender, sendResponse) {
     try {
-        sendResponse('ok')
+
         if (req) {
             switch (req.actionType) {
                 case "POPUP_LOGIN":
@@ -201,12 +198,16 @@ function onMessageMethod(req, sender, sendResponse) {
                     httpContentToBack(req, sender)
                     break
                 case 'CONTENT_TWITTER_SHORT_LINK':
+                    sendResponse('ok')
                     req.arr_url.forEach(item => {
                         if (item) {
                             twitterShortUrl(sender, item)
                         }
                     });
                     break
+                case 'CONTENT_CLOSE_ACH_PAY_NOTICE':
+                    closeAchPayNoticeHandler();
+                    break;
             }
         }
     } catch (error) {

src/entry/content.js

@@ -30,7 +30,6 @@ import {
     setTabGroupIframeStyle,
     pageJumpHandler,
     getTweetProfileNavTop,
-    selectGroupTab,
     setGroupInfo,
     refreshTabGroup,
     groupTipsSelectGroupTab,
@@ -52,12 +51,18 @@ import {
 import {
     initFacebookContent
 } from "@/logic/content/facebook.js"
+import { toolBox, toolbox_fixed_tweetId } from '@/logic/content/ToolBox.js'
+
+import {
+    injectDenet
+} from "@/logic/content/denet.js";
 
 chrome.storage.onChanged.addListener(changes => {
     initExecuteScript(changes)
 })
 
 window.onload = () => {
+    injectDenet();
     init();
     initFacebookContent();
     chrome.runtime.sendMessage({
@@ -65,7 +70,6 @@ window.onload = () => {
         data: {}
     }, () => { });
 };
-
 window.onmessage = (res) => {
     if (res.data && res.data.actionType) {
         switch (res.data.actionType) {
@@ -108,7 +112,6 @@ window.onmessage = (res) => {
 
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
     switch (req.actionType) {
         case 'BG_SHOW_PIN_TIPS':
             showPinTips()
@@ -117,7 +120,6 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             showGiveDialogHandler();
             break
         case 'BACK_TWITTER_SHORT_URL':
-            console.log('BACK_TWITTER_SHORT_URL')
             changeQueueNum(1)
             break
         case 'IFRAME_TWITTER_API_DO_TASK':
@@ -154,38 +156,46 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP':
             getTweetProfileNavTop(req.data);
         case 'IFRAME_PAGE_JUMP':
+
             pageJumpHandler(req.data);
             break;
         case 'BG_LOGIN_SET_USERINFO_CB':
+
             loginSuccessHandle();
             break;
         case 'IFRAME_SHOW_JOIN_DIALOG':
-            console.log('IFRAME_SHOW_JOIN_DIALOG')
+
             showJoinDialog(req.data)
             break
         case 'IFRAME_SHOW_GROUP_TIP':
+
             showGroupTip()
             break
         case 'IFRAME_SHOW_POST_DIALOG':
-            console.log('IFRAME_SHOW_POST_DIALOG')
+
             showTwitterPost(req.data)
             break
         case 'BACK_TWITTER_NFT_POST_PRE':
             setTwitterTextarea(req.data)
             break
         case 'SWITCH_GROUP_STATUS':
+            sendResponse('ok')
             groupTipsSelectGroupTab(req.data);
             break
         case 'IFRAME_GROUP_BANNER_GROUP_INFO':
+
             setGroupInfo(req.data)
             break;
         case 'IFRAME_JOINED_GROUP_SET_STYLE':
+
             setJoinedGroupIframeStyle(req.data)
             break
         case 'BACK_NFT_PUBLISH_DONE':
+
             refreshTabGroup()
             break
         case 'IFRAME_API_GET_TWEET_USER_INFO_REQ':
+
             TwitterApiUserByScreenName(req.data)
             break;
         // 回掉参数
@@ -195,5 +205,11 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'BG_SHOW_DENET_PUBLISH_DIALOG':
             showPublishDialog();
             break;
+        case 'Get_ToolBox_Fixed_TweetId':
+            sendResponse(toolbox_fixed_tweetId)
+            break
+        case 'Set_ToolBox_Fixed':
+            toolBox.switchStatus(req)
+            break
     }
 })

src/entry/content_help.js

@@ -39,7 +39,7 @@ chrome.runtime.sendMessage({
 }, () => { });
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
+
     switch (req.actionType) {
         case 'BACK_PING':
             chrome.runtime.sendMessage({ actionType: "CONTENT_PONG", data: '1' }, (res) => { console.log(res) })

src/http/account.js

@@ -50,4 +50,21 @@ export function getFrontConfig(params) {
     method: 'post',
     data: params
   })
-}
+}
+
+export function usdRechargeRequestByAchpay(params) {
+  return service({
+    url: `/wallet/recharge/usdRechargeRequestByAchpay`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function calcRechargePayAmount(params) {
+  return service({
+    url: `/wallet/pay/calcRechargePayAmount`,
+    method: 'post',
+    data: params
+  })
+}
+

src/http/configAPI.js

@@ -1,4 +1,6 @@
-export const appVersionCode = 15
+let manifest = require('@/manifest.json')
+
+export const appVersionCode = Number(manifest.denet_app_version_code)
 
 const api = {
 	production: 'https://api.denetme.net',
@@ -22,8 +24,10 @@ export const baseAPIUrl = api[process.env.NODE_ENV] + '/denet'
 
 export const logAPIUrl = logApi[process.env.NODE_ENV] + '/log-center'
 
-export const pageUrl = page[process.env.NODE_ENV] 
+export const pageUrl = page[process.env.NODE_ENV]
 
 export const discordAuthRedirectUri = `${pageUrl}/auth/discordCallback`;
 
 export const faceShareRedirectUrl = `${pageUrl}/facebook/shareCallback`;
+
+export const payAchNoticeUrl = `${pageUrl}/ach_pay/pay_notice`;

src/http/help.js

@@ -0,0 +1,24 @@
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { srcPublishSuccess } from '@/http/publishApi'
+
+// 重新绑定推文id
+export const reSetBindTwtterId = ({
+    postId = '',
+    tweetId = ''
+}, callback) => {
+    getChromeStorage('userInfo', (_userInfo = {}) => {
+        // if (_userInfo && _userInfo.uid == _params.uid) {
+        if (_userInfo.uid) {
+            srcPublishSuccess({
+                params: {
+                    postId,
+                    srcContentId: tweetId
+                }
+            }).then((res) => {
+                if (res.code == 0 || res.code == 3003) {
+                    callback && callback()
+                }
+            })
+        }
+    })
+}

src/http/toolBoxApi.js

@@ -14,4 +14,20 @@ export function getAllPostEditorAppData(params) {
         method: 'post',
         data: params
     })
+}
+
+export function screenshotWebsite(params) {
+    return service({
+        url: `/post/editor/screenshotWebsite`,
+        method: 'post',
+        data: params
+    })
+}
+
+export function checkInputUrlInBlacklist(params) {
+    return service({
+        url: `/post/editor/checkInputUrlInBlacklist`,
+        method: 'post',
+        data: params
+    })
 }

src/iframe/ach-cashier.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/ach-pay/cashier.vue'
+
+const app = createApp(App);
+
+app.mount('#app');

src/iframe/tool-box-guide.js

@@ -1,7 +1,13 @@
 import { createApp } from 'vue'
 import App from '@/view/iframe/publish/tool-box/child/guide.vue'
 
+import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
+
+import {message} from "ant-design-vue";
+
 const app = createApp(App);
+
+app.use(message);
 app.mount('#app');
 
 window.onload= () => {

src/iframe/tool-box.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/tool-box/index.vue'
+
+const app = createApp(App);
+app.mount('#app');

src/logic/background/denet.js

@@ -0,0 +1,24 @@
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { payAchNoticeUrl } from '@/http/configAPI'
+
+export const closeAchPayNoticeHandler = async () => {
+    let res = await getCurrentTab();
+    if(res.url.startsWith(payAchNoticeUrl)) {
+        chrome.tabs.remove(
+            res.id, () => {
+                getChromeStorage('achPayInfo', (res) => {
+                    chrome.storage.local.remove("achPayInfo");
+                    if(res && res.tab) {
+                        chrome.tabs.highlight({ windowId: res.tab.windowId, tabs: res.tab.index })
+                    }
+                })
+            }
+        )
+    }
+}
+
+const getCurrentTab = async () => {
+    let queryOptions = { active: true, lastFocusedWindow: true };
+    let [tab] = await chrome.tabs.query(queryOptions);
+    return tab || {};
+}

src/logic/background/twitter.js

@@ -3,7 +3,7 @@ import { LANDING_PAGE, LANDING_PAGE_MID, setChromeStorage, setChromeCookie, getC
 import { guid } from '@/uilts/help.js'
 import { discordAuthRedirectUri } from '@/http/configAPI'
 import { setContentMessage } from '@/logic/background/help.js'
-
+import Report from "@/log-center/log"
 let authToken = ''
 let consumerKey = ''
 let tab_flag = true
@@ -250,7 +250,16 @@ function sendActivetabMessage(message = {}) {
  */
 
 export function onInstalledCreateTab() {
-    getChromeCookie(LANDING_PAGE_JUMP_INFO, (res) => {
+    getChromeCookie(LANDING_PAGE_JUMP_INFO, (res = {}) => {
+        setTimeout(() => {
+            // 安装成功埋点
+            Report.reportLog({
+                objectType: Report.objectType.chrome_extension_installed,
+                funcName: 'onInstalledCreateTab',
+                postId: res.postId || ''
+            })
+        }, 5000)
+
         // jump_info
         if (!res || !res.jump_type) {
             chrome.tabs.create({

src/logic/content/ParseCard.js

@@ -230,7 +230,24 @@ class ParseCard {
         }
         return _array
     }
-
+    createToolBoxIframe({ post_Id = '', tweet_Id = '' }, if_center = false) {
+        let _iframe = document.createElement('iframe')
+        let _iframe_url = ''
+        let tweet_str = ''
+        if (tweet_Id) {
+            tweet_str = `&tweetId=${tweet_Id}`
+        }
+        _iframe.id = post_Id
+        _iframe_url = chrome.runtime.getURL('/iframe/tool-box.html') + `?page_type=${'card'}&postId=${post_Id}&tweetId=${tweet_Id}`;
+        // debugger mode
+        if (window.location.href.includes('denet_debugger')) {
+            _iframe_url = _iframe_url + '&denet_debugger=1'
+        }
+        _iframe.src = _iframe_url
+        _iframe.scrolling = 'no'
+        _iframe.style.cssText = 'border:medium none; width:505px; height:545px; max-height:545px;     filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);'
+        return _iframe
+    }
     createIframe({ post_Id = '', tweet_Id = '', tweet_author = '', page_type = '' }, if_center = false) {
         let _iframe = document.createElement('iframe')
         let _iframe_url = ''
@@ -338,7 +355,7 @@ class ParseCard {
         div.id = 'denet-' + tweet_Id
         div.style.cssText = `
         width: 505px;
-        height: 544px;`
+        height: 545px;`
         div.dataset.tweetId = tweet_Id || ''
         div.dataset.postId = post_Id || ''
         parentElement.appendChild(div)
@@ -382,6 +399,43 @@ class ParseCard {
             this.addDomView({ tweet_Id, post_Id, element: ToolBox, parentElement: dom })
         }
     }
+
+    replaceIframeToolBox({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
+        }
+        let type
+        let dom = dom_card.querySelector('div[aria-labelledby]')
+        if (dom) {
+            type = 'card'
+            for (let i = 0; i < dom.childNodes.length; i++) {
+                if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
+                    dom.children[i].style.display = 'none'
+                }
+            }
+        } else {
+            type = 'txt'
+            dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
+        }
+
+        dom.style = 'min-height:545px'
+        if (dom) {
+            // debugger mode
+            if (window.location.href.includes('denet_debugger')) {
+                let div = document.createElement('div')
+                div.style.color = 'red'
+                div.innerText = `
+                tweet_Id:${tweet_Id} , 
+                post_Id:${post_Id}
+                获取dom时间:${time}
+                短链接：${short_url}
+                渲染时长:${(new Date().getTime() - time) / 1000}s
+                `
+                dom.parentElement.appendChild(div)
+            }
+            dom.appendChild(this.createToolBoxIframe({ post_Id, tweet_Id, page_type }))
+        }
+    }
     replaceDOMRedPacket({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {
         if (!dom_card || !dom_card.parentElement) {
             return

src/logic/content/ToolBox.js

@@ -1,26 +1,58 @@
-import ToolBoxFull from '@/view/content/tool-box/full.vue'
-import { createApp } from 'vue'
+import { $ } from "@/uilts/help";
+export let toolbox_fixed_tweetId = ''
 
-
-export class ToolBox {
+export const toolBox = new class ToolBox {
     constructor() {
 
     }
     // 加载组件
     initFull() {
-        const div = document.createElement('div')
-        div.id = 'denet-tool-box-fixed'
-        div.style.cssText = `
+        const iframe = document.createElement('iframe')
+        iframe.id = 'denet-tool-box-fixed'
+        iframe.style.cssText = `
             width: 505px;
-            height: 544px;
+            height: 545px;
             position: fixed;
             right: 10px;
             top: 10px;
-            display:none;`
-        document.body.appendChild(div)
-        createApp(ToolBoxFull).mount(`#${div.id}`)
+            display:none;
+            border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
+            `
+        iframe.src = chrome.runtime.getURL('/iframe/tool-box.html') + `?page_type=${'full'}`;
+        document.body.append(iframe)
     }
-}
-
+    // 切换状态
+    switchStatus(req) {
+        toolbox_fixed_tweetId = req.data.tweetId
+        let dom_fixed = $('#denet-tool-box-fixed')
+        switch (req.data.type) {
+            case '全屏':
+                dom_fixed.style.cssText = `
+                    display:block;
+                    width: 100%;
+                    height: 100%;
+                    position: fixed;
+                    left: 0;
+                    top: 0;
+                    border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
+                    `
+                break;
 
-export default new ToolBox()
+            case '固定右上角':
+                dom_fixed.style.cssText = `
+                    display:block;
+                    width: 505px;
+                    height: 545px;
+                    position: fixed;
+                    right: 10px;
+                    top: 10px;
+                    border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
+                    `
+                break
+            case '关闭':
+                dom_fixed.style.cssText = `display:none;`
+                toolbox_fixed_tweetId = ''
+                break
+        }
+    }
+}

src/logic/content/denet.js

@@ -0,0 +1,15 @@
+import { payAchNoticeUrl } from '@/http/configAPI'
+
+export const injectDenet = () => {
+    closeAchPayNotice();
+}
+
+
+const closeAchPayNotice = () => {
+    if (window.location.href.indexOf(payAchNoticeUrl) > -1) {
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_CLOSE_ACH_PAY_NOTICE",
+            data: {}
+        }, () => { });
+    }
+}

src/logic/content/twitter.js

@@ -4,14 +4,30 @@ import { discordAuthRedirectUri } from '@/http/configAPI'
 import { reportSrcPublishEvent } from '@/http/publishApi'
 import Report from "@/log-center/log"
 import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
-import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, addJoinedGroupList, setTabGroupIframeStyle, setGroupTabStatus, addGroupTab, groupBtnStyleChange, sendMessageToGroupBanner, setGroupTabSelfStyle } from '@/logic/content/nft';
 import { jumpTwitterDetailByAlert, showEditTweet } from '@/logic/content/help/twitter.js'
-import { clearPostContent, setGroupIconStatus, showNFTCard, initBuyNFT, showBuyNFTAction, hideBuyNFTAction, showNFTSaleAction } from '@/logic/content/nft.js'
 import { appendPopupPage, hidePopupPage } from '@/logic/content/popupPage.js'
 import { addPinedPop, hidePinTips, showPinTips } from '@/logic/content/pinTips.js'
-import ToolBox from '@/logic/content/ToolBox'
+import { toolBox } from '@/logic/content/ToolBox'
 import axios from 'axios';
 
+import { showNFTGroupIcon, 
+    hideNFTGroupList, 
+    checkUserJoinGroup, 
+    addJoinedGroupList, 
+    setTabGroupIframeStyle, 
+    setGroupTabStatus, 
+    addGroupTab, 
+    groupBtnStyleChange, 
+    sendMessageToGroupBanner, 
+    setGroupTabSelfStyle, 
+    clearPostContent, 
+    setGroupIconStatus, 
+    showNFTCard, 
+    initBuyNFT, 
+    showBuyNFTAction,
+    hideBuyNFTAction, 
+    showNFTSaleAction } from '@/logic/content/nft';
+
 let dom = {};
 
 export let systemInfo = {
@@ -104,9 +120,7 @@ export function showTwitterPublishDialogHandler(publishRes) {
 
     setChromeStorage({ publishData: JSON.stringify(publishRes) })
 
-    addPublishTipsIframe({
-        srcContent: publishRes.copyContent
-    })
+    addPublishTipsIframe()
     // _setPublishContent(publishRes.srcContent);
     setDialogPublishContent(publishRes.srcContent);
     _publishTweetEvent(publishRes, bindTwitterArtMethod);
@@ -223,7 +237,8 @@ function _addDeNetEditBtn(params = {}) {
             });
             let innerDeIcon = document.getElementById('de-btn1');
             if (!innerDeIcon) {
-                toolElem.firstChild.appendChild(createTweetToolbarDenet())
+                toolElem.firstChild.appendChild(createTweetToolbarDenet());
+                popupShowGiveawayDialog();
             }
 
             let innerToolBoxIcon = document.getElementById('de-tool-box-btn-01');
@@ -241,7 +256,8 @@ function _addDeNetEditBtn(params = {}) {
                     });
                     let innerDeIcon = document.getElementById('de-btn1');
                     if (!innerDeIcon) {
-                        toolElem.firstChild.appendChild(createTweetToolbarDenet())
+                        toolElem.firstChild.appendChild(createTweetToolbarDenet());
+                        popupShowGiveawayDialog();
                     }
         
                     let innerToolBoxIcon = document.getElementById('de-tool-box-btn-01');
@@ -254,6 +270,13 @@ function _addDeNetEditBtn(params = {}) {
     })
 }
 
+const popupShowGiveawayDialog = async () => {
+    let { show = false } = await getChromeStorage('showGiveawayData') || {};
+    if (show) {
+        chrome.storage.local.remove("showGiveawayData");
+        showPublishDialog()
+    }
+}
 
 /**
  * 获取左侧twitter按钮
@@ -547,7 +570,7 @@ function createTweetToolbarToolBox() {
 
     return deToolBoxBtn;
 }
-async function addSliderNavDeBtn(isSmall = false) {
+function addSliderNavDeBtn(isSmall = false) {
     try {
         if (!isSmall) {
             let bigDom = document.querySelector('a[href="/compose/tweet"]').parentNode.parentNode;
@@ -575,12 +598,6 @@ async function addSliderNavDeBtn(isSmall = false) {
     } catch (e) {
         console.log(e)
     }
-
-    let { show = false } = await getChromeStorage('showGiveawayData') || {};
-    if(show) {
-        chrome.storage.local.remove("showGiveawayData");
-        showPublishDialog()
-    }
 }
 
 function onWindowResize() {
@@ -730,7 +747,9 @@ function setIframeRedPacket(type = 'twitter') {
                     } else if (item && item.post_Id && item.post_Id.indexOf('toolbox/') >= 0) {
                         item.page_type = 'toolbox'
                         item.post_Id = item.post_Id.split('toolbox/')[1] || ''
-                        parseCard.replaceDomView(item)
+                        if (item.post_Id) {
+                            parseCard.replaceIframeToolBox(item)
+                        }
                     } else if (item && item.post_Id && !item.post_Id.includes('/')) {
                         item.page_type = '红包'
                         parseCard.replaceDOMRedPacket(item)
@@ -800,6 +819,7 @@ function initParseCard() {
                 if (queue_num <= 0) {
                     return
                 }
+                console.log('queue_num', queue_num)
                 initGroupTip()
                 setIframeRedPacket()
                 checkHasDeBtn()
@@ -859,7 +879,7 @@ export function init() {
         getSysTheme();
         addGroupTab();
         // 预加载全屏 toobbox
-        ToolBox.initFull()
+        toolBox.initFull()
     }
     // 渲染dom
     initParseCard()
@@ -1579,12 +1599,8 @@ export const loginSuccessHandle = () => {
 }
 
 export const showPublishDialog = () => {
-    let bigBtn = document.getElementById('de-btn');
-    let smallBtn = document.getElementById('de-btn3');
-
-    if(bigBtn) {
-        bigBtn.click();
-    } else if(smallBtn) {
+    let smallBtn = document.getElementById('de-btn1');
+    if(smallBtn) {
         smallBtn.click();
     }
 }

src/manifest.json

@@ -2,7 +2,8 @@
     "manifest_version": 3,
     "name": "DeNet",
     "description": "Growing more twitter followers with Denet",
-    "version": "1.1.5",
+    "version": "1.1.5.1",
+    "denet_app_version_code": "16",
     "background": {
         "service_worker": "/js/background.js"
     },
@@ -97,7 +98,9 @@
                 "/iframe/tab-group.html",
                 "/iframe/joined-group-list.html",
                 "/iframe/tool-box-guide.html",
-                "/iframe/test.html"
+                "/iframe/tool-box.html",
+                "/iframe/test.html",
+                "/iframe/ach-cashier.html"
             ],
             "matches": [
                 "<all_urls>"

src/types/global.js

@@ -21,3 +21,25 @@ export const RewardType = {
   money: 1,
   custom: 2,
 };
+
+/**
+ * 任务类型
+ */
+export const TaskType = {
+  twitterFollow: 1,
+  twitterLikeTweet: 2,
+  twitterRetweet: 3,
+  joinDiscord: 7,
+  repostToFacebook: 8,
+  twitterCommentAndTag: 9,
+};
+
+/**
+ * 帖子类型
+ */
+
+export const PostType = {
+  giveaway: 1,
+  nftGroup: 2,
+  postEditor: 3
+}

src/uilts/sentry.js

@@ -4,6 +4,9 @@ import { appVersionCode } from '@/http/configAPI.js'
 
 class CoutomSentry {
     initVue(app) {
+        if (process.env.NODE_ENV != 'production') {
+            return
+        }
         Sentry.init({
             app,
             dsn: "https://529fc1c357b248eda7473c119093f5db@sentry.piaoquantv.com/5",

src/view/components/currency-list.vue

@@ -20,7 +20,7 @@
                 :style="{right: !showRefresh ? '6%' : '16%'}"
                 @click="clearIpt" >
         </div>
-        <div class="list-wrapper" ref="listWrapperDom" @scroll="listScroll">
+        <div class="list-wrapper" :style="{'paddingBottom': showGeneralLottery ? '50px' : '0'}" ref="listWrapperDom" @scroll="listScroll">
             <div class="page-list" ref="listContentDom" v-if="!showSearch">
                 <div class="list-item" v-for="(item, index) in currencyInfoList" :key="index">
 
@@ -36,7 +36,7 @@
                                 <img class="icon-currency" :src="data.currencies[0].iconPath" />
                                 <div class="currency-info">
                                     <div class="name">{{ data.currencies[0].currencyCode == 'USD' ? 'USD' : data.currencies[0].tokenSymbol }}</div>
-                                    <div class="desc">{{ data.currencies[0].currencyCode == 'USD' ? 'Paypal' : data.currencies[0].currencyName }}
+                                    <div class="desc">{{ data.currencies[0].currencyName }}
                                     </div>
                                 </div>
                             </div>
@@ -133,6 +133,7 @@ let listReqParams = {
         pageSize: 100,
     },
     loadMore: false,
+    requestIng: false
 };
 let show_empty = ref(false);
 const emits = defineEmits(["selectCurrency", "setCurrencyList", "addGeneralLottery"]);
@@ -165,6 +166,7 @@ const refresh = () => {
             refreshRotate.value = false;
         }, 1000)
         asyncTokenRechRecord(() => {
+            listReqParams.params.pageNum = 1;
             getCurrencyInfoList();
         })
     }
@@ -200,7 +202,15 @@ const searchCurrency = debounce(function (searchWords) {
 /**
  * 获取货币列表
  */
-const getCurrencyInfoList = () => {
+const getCurrencyInfoList = (_params = {}) => {
+
+    if(listReqParams.requestIng) {
+        return;
+    }
+    listReqParams.requestIng = true;
+    if(_params.pageNum) {
+        listReqParams.params.pageNum = _params.pageNum;
+    }
     let params = {
         params: {
             pageNum: listReqParams.params.pageNum,
@@ -210,6 +220,7 @@ const getCurrencyInfoList = () => {
         }
     };
     getCurrencyInfo(params).then(res => {
+        listReqParams.requestIng = false;
         if (res.code == 0) {
             let resData = res.data;
             if (resData && resData.currencyCategories.length) {
@@ -222,14 +233,25 @@ const getCurrencyInfoList = () => {
                 } else {
                     let data = currencyInfoList.value;
                     let currencyCategories = resData.currencyCategories;
-                    data = data.concat(currencyCategories);
-                    currencyInfoList.value = data;
+
+                    if(currencyCategories.length) {
+                        let tokenData = currencyCategories.find(item => item.type == 2);
+                        if(tokenData && tokenData.data && tokenData.data.length) {
+                            let index = data.findIndex(item => item.type == 2);
+                            let tokenList = data[index]['data'];
+                            data[index]['data'] = tokenList.concat(tokenData.data);
+                            currencyInfoList.value = data;
+                        }
+                    }
+
                 }
                 listReqParams.loadMore = false;
             }else{
                 show_empty.value = true
             }
         }
+    }).catch(err => {
+        listReqParams.requestIng = false;
     })
 }
 
@@ -275,7 +297,8 @@ onMounted(() => {
 })
 
 defineExpose({
-    getCurrencyInfoList
+    getCurrencyInfoList,
+    refresh
 })
 
 </script>

src/view/components/custom-card-cover.vue

@@ -47,7 +47,10 @@
             }}</span>
         </div>
         <div class="money-area">
-            <div class="txt">{{data.currencyCode == 'USD' ? 'USD' : data.tokenSymbol}} GIVEAWAY</div>
+            <div class="txt">
+                <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
+                &nbsp;GIVEAWAY
+            </div>
             <div class="coin">
                 <img :src="data.currencyIconUrl || imgHeaderCover" />
                 <span id="preview-after-amount"
@@ -115,7 +118,8 @@ const props = defineProps({
             return {
                 totalCount: 0,
                 amountValue: 0,
-                tokenSymbol: "",
+                tokenSymbol: '',
+                currencyCode: '',
                 type: 1,
                 validityDuration: '',
                 countDown: '',
@@ -180,9 +184,15 @@ onMounted(() => {
         .txt {
             font-weight: 800;
             font-size: 16px;
-            text-align: center;
             letter-spacing: 0.3px;
             color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                color: #F9C545;
+            }
         }
 
         .coin {

src/view/components/custom-card-horizontal-cover.vue

@@ -25,7 +25,8 @@
             </div>
             <div class="content-text">
                 <div class="title">
-                    {{data.tokenSymbol}} GIVEAWAY
+                    <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
+                    &nbsp;GIVEAWAY
                 </div>
                 <div class="center"
                     :style="{
@@ -98,7 +99,8 @@ const props = defineProps({
             return {
                 totalCount: 0,
                 amountValue: 0,
-                tokenSymbol: "",
+                tokenSymbol: '',
+                currencyCode: '',
                 type: 1,
                 validityDuration: '',
                 customPosterUrl: '',
@@ -176,6 +178,10 @@ watch(() => props.data, () => {
             font-weight: 800;
             font-size: 16px;
             color: #ffffff;
+
+            span {
+                color: #F9C545;
+            }
         }
         .center {
             padding: 12px 0;

src/view/components/input-action-sheet.vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="input-action-sheet-wrapper" v-if="visible" :style="{position: position}">
+        <div class="input-action-sheet-content">
+            <div class="title">
+                {{title}}
+            </div>
+            <div class="input-wrapper">
+                <input class="input" 
+                    v-model="inputVal"
+                    placeholder="0"
+                    autofocus
+                    @input="onValueInput"
+                    @blur="onValueBlur">
+            </div>
+            <div class="desc">
+                {{desc}}
+            </div>
+            <div class="btn-wrapper">
+                <div class="btn cancel" @click="cancel">
+                    {{cancelText}}
+                </div>
+                <div class="btn confirm" @click="confirm">
+                    {{confirmText}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from "vue";
+
+let inputVal = ref('');
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    position: {
+        type: String,
+        default: 'fixed'
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    cancelText: {
+        type: String,
+        default: 'Cancel',
+    },
+    confirmText: {
+        type: String,
+        default: 'Continue',
+    },
+    desc: {
+        type: String,
+        defautl: ''
+    }
+});
+
+watch(() => props.visible, (newVal) => {
+    if(!newVal) {
+        inputVal.value = ''
+    }
+})
+
+const emits = defineEmits(["cancel", "confirm", "onInput"]);
+
+const onValueInput = () => {
+    let val = inputValHandler();
+    emits("onInput", { inputVal: val });
+    return val;
+}
+
+const onValueBlur = () => {
+    return inputValHandler();
+}
+
+
+const inputValHandler = () => {
+    let val = inputVal.value;
+    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
+
+    if(val == '00') {
+        val = '0'
+    }
+    if(val.indexOf('.') > -1){ //校验 例：00.12 => 0.12
+        let arr = val.split('.');
+        if(arr[0].startsWith('0')) {
+            let num = +arr[0];
+            val = num + '.' + arr[1];
+        }
+    }
+
+    inputVal.value = val;
+
+    return val;
+}
+
+const cancel = () => {
+    emits("cancel", { });
+}
+
+const confirm = () => {
+    if(inputVal.value > 0) {
+        emits("confirm", { inputVal: inputVal.value });
+    }
+}
+
+</script>
+
+<style scoped lang="scss">
+.input-action-sheet-wrapper {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    .input-action-sheet-content {
+        width: 335px;
+        min-height: 186px;
+        background: #fff;
+        border-radius: 20px;
+        padding: 20px 15px;
+        box-sizing: border-box;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 1000;
+        transform: translate(-50%, -50%);
+
+        .title {
+            font-weight: 600;
+            font-size: 16px;
+        }
+        
+        .input-wrapper {
+            width: 100%;
+            border: 1px solid #DFDFDF;
+            border-radius: 5px;
+            box-sizing: border-box;
+            height: 42px;
+            margin: 17px 0 10px 0;
+
+            .input {
+                width: 100%;
+                height: 100%;
+                outline: none;
+                border: none;
+                padding: 0 10px;
+                box-sizing: border-box;
+                border-radius: 5px;
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .input::placeholder {
+                color: #B3B3B3;
+            }
+        }
+        
+        .desc {
+            font-weight: 500;
+            font-size: 13px;
+            color: #888888;
+            min-height: 40px;
+        }
+        .btn-wrapper {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+
+            .btn {
+                width: 150px;
+                height: 47px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 500;
+                font-size: 16px;
+                box-sizing: border-box;
+                border-radius: 1000px;
+                cursor: pointer;
+            }
+
+            .cancel {
+                border: 1px solid #CFCFCF;
+            }
+
+            .confirm {
+                color: #fff;
+                background: #1D9BF0;
+            }
+        }
+    }
+}
+</style>

src/view/components/message-box.vue

@@ -2,18 +2,17 @@
 <template>
     <div class="msg-box-overlay" v-if="dialogVisible">
         <div class="content-wrapper">
-            <div class="title">{{title}}</div>
-            <div class="desc">{{content}}</div>
+            <div class="title" :class="{'fill': !content}">{{title}}</div>
+            <div class="desc" v-if="content">{{content}}</div>
             <div class="btn-wrapper">
-                <div class="btn cancel" @click="cancel">Not yet</div>
-                <div class="btn confirm" @click="confirm">Deposit</div>
+                <div class="btn cancel" @click="cancel">{{cancelTxt}}</div>
+                <div class="btn confirm" @click="confirm">{{confirmTxt}}</div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-/* eslint-disable */
 import { ref, defineEmits, defineProps } from "vue";
 const props = defineProps({
     dialogVisible: {
@@ -28,6 +27,14 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    cancelTxt: {
+        type: String,
+        default: 'Cancel',
+    },
+    confirmTxt: {
+        type: String,
+        default: 'Completed',
+    }
 });
 
 const emits = defineEmits(["cancel", "confirm"]);
@@ -60,7 +67,7 @@ const confirm = () => {
         left: 50%;
         top: 50%;
         width: 375px;
-        min-height: 220px;
+        // min-height: 220px;
         background: #FFFFFF;
         border-radius: 20px;
         padding: 20px;
@@ -72,7 +79,13 @@ const confirm = () => {
             font-weight: 600;
             font-size: 20px;
             margin-bottom: 13px;
+            box-sizing: border-box;
         }
+
+        .fill {
+            padding: 20px 0;
+        }
+
         .desc {
             height: 68px;
             font-weight: 400;

src/view/components/popup-transactions.vue

@@ -283,7 +283,7 @@ const setMessageCount = () => {
         if(res.code == 0) {
             let {unReadCountTotal = 0 } = res.data;
             if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : text+'';
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
                 setBadgeInfo({data: {text}});
             } else {
                 hideBadge();

src/view/components/popup-withdraw.vue

@@ -21,20 +21,17 @@
                     <div class="form-item">
                         <div class="label">PayPal account</div>
                         <div class="input-wrapper">
-                            <input type="text" 
-                                v-model="requestWithdrawParams.withdrawReceiveAccount" placeholder="Enter PayPal account"/>
+                            <input type="text" v-model="requestWithdrawParams.withdrawReceiveAccount"
+                                placeholder="Enter PayPal account" />
                         </div>
                     </div>
                     <div class="form-item">
-                        <div class="label">Withdrawal amount<span
-                                class="msg">（${{ walletWithdrawConfig.withdrawPerMinAmount }} minimum）</span></div>
+                        <div class="label">Withdrawal amount<span class="msg">（${{
+                                walletWithdrawConfig.withdrawPerMinAmount
+                        }} minimum）</span></div>
                         <div class="input-wrapper amount-wrapper">
-                            <input type="text" 
-                                v-model="requestWithdrawParams.amountValue" 
-                                placeholder="$0"
-                                style="width: 220px"
-                                @input="onAmountInput" 
-                                @blur="onAmountBlur" />
+                            <input type="text" v-model="requestWithdrawParams.amountValue" placeholder="$0"
+                                style="width: 220px" @input="onAmountInput" />
                             <div @click="withdrawalAll" class="withdrawal-all-btn">
                                 Withdrawal All
                             </div>
@@ -80,8 +77,9 @@
                 <div>
                     <div class="title">Submitted successfully</div>
                     <div class="desc">
-                        Please wait for a while,<br />
-                        then check the balance with paypal
+                        <!-- Please wait for a while,<br />
+                        then check the balance with paypal -->
+                        Estimate in 24 hours
                     </div>
                 </div>
             </div>
@@ -123,10 +121,10 @@ let isSubmit = ref(false);
 let withdrawIng = ref(false);
 
 let walletWithdrawConfig = ref({
-        withdrawPerMinAmount: 1,
-        withdrawUSDSwitch: "",
-        withdrawFeeDesc: ''
-    });
+    withdrawPerMinAmount: 1,
+    withdrawUSDSwitch: "",
+    withdrawFeeDesc: ''
+});
 
 let finalWithdrawalAmount = ref('');
 let calcReq = ref(false);
@@ -147,7 +145,7 @@ const queryWithdrawConfig = () => {
         if (res.code == 0) {
             walletWithdrawConfig.value = res.data;
         }
-        console.log('queryWithdrawConfig',walletWithdrawConfig.value);
+        console.log('queryWithdrawConfig', walletWithdrawConfig.value);
     });
 };
 
@@ -188,19 +186,21 @@ const withdrawCalcAmount = () => {
         if (res.code == 0) {
             finalWithdrawalAmount.value = res.data.finalAmountValue;
         }
+    }).catch(err => {
+        calcReq.value = false;
     })
 }
 
 const withdrawCalcAmountDebounce = debounce(function () {
     withdrawCalcAmount();
-}, 1000)
+}, 300)
 
 /**
  * 提现
  */
 const withdraw = () => {
     console.log("requestWithdrawParams.value", requestWithdrawParams.value);
-    if (withdrawIng.value) {
+    if (withdrawIng.value || calcReq.value || showWithdrawError.value || showWithdrawIptError.value) {
         return;
     }
 
@@ -212,7 +212,7 @@ const withdraw = () => {
     }
     params.withdrawReceiveAccount = params.withdrawReceiveAccount.replace(/\s*/g, "");
     params.amountValue = params.amountValue;
-    if (parseInt(params.amountValue) > parseInt(canWithdrawBalance.value)) {
+    if (+params.amountValue > +canWithdrawBalance.value) {
         return;
     }
     withdrawIng.value = true;
@@ -233,10 +233,9 @@ const withdraw = () => {
         } else {
             console.log(res);
         }
-    })
-        .catch((err) => {
-            console.log(err);
-        });
+    }).catch((err) => {
+        console.log(err);
+    });
 };
 
 const onAmountBlur = () => {
@@ -259,7 +258,7 @@ const onAmountInput = () => {
     setWithdrawIptStatus(value);
 
     // 输入金额大于可提现金额
-    if (parseInt(value) > parseInt(canWithdrawBalance.value)) {
+    if (+value > +canWithdrawBalance.value) {
         if (!showWithdrawError.value) {
             showWithdrawIptError.value = true;
         }
@@ -275,8 +274,8 @@ const onAmountInput = () => {
 const setWithdrawIptStatus = (amount) => {
     //显示tips
     if (
-        amount > 0 &&
-        amount < walletWithdrawConfig.value.withdrawPerMinAmount
+        +amount > 0 &&
+        +amount < +walletWithdrawConfig.value.withdrawPerMinAmount
     ) {
         showWithdrawError.value = true;
     } else {

src/view/content/tool-box/full.vue

@@ -19,7 +19,6 @@
 <script setup>
 import { onMounted, reactive, ref } from "vue";
 import { sendEventInfo } from "@/uilts/event";
-import { $ } from "@/uilts/help";
 import IconSvg from '@/view/components/icon-svg.vue'
 
 let state = reactive({
@@ -78,7 +77,7 @@ const changeFull = () => {
 const changeFixed = () => {
     dom_fixed.style.cssText = `
     width: 505px;
-    height: 544px;
+    height: 545px;
     position: fixed;
     right: 10px;
     top: 10px;`

src/view/content/tool-box/index.vue

@@ -57,7 +57,6 @@ import { getChromeStorage, setChromeStorage, httpContentToBack, defineProps } fr
 import { guid } from "@/uilts/help";
 import { sendEventInfo } from "@/uilts/event";
 import { onMounted, reactive, ref } from "vue";
-import { $ } from "@/uilts/help";
 import IconSvg from '@/view/components/icon-svg.vue'
 let dom_toolbox = ref(null)
 let dom_iframe = ref(null)
@@ -227,7 +226,7 @@ const handleFixed = () => {
     dom.fixed.style.cssText = `
         display:block;
         width: 505px;
-        height: 544px;
+        height: 545px;
         position: fixed;
         right: 10px;
         top: 10px;`

src/view/iframe/ach-pay/cashier.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="cashier-wrapper">
+        <form ref="formDom" :action="pageData.formData.actionUrl" method="post" id="submitForm">
+            <input type="hidden" name="callbackUrl" :value="pageData.formData.callbackUrl">
+            <input type="hidden" name="currency" :value="pageData.formData.currency">
+            <input type="hidden" name="merType" :value="pageData.formData.merType">
+            <input type="hidden" name="merchantNo" :value="pageData.formData.merchantNo">
+            <input type="hidden" name="merchantOrderNo" :value="pageData.formData.merchantOrderNo">
+            <input type="hidden" name="noticeUrl" :value="pageData.formData.noticeUrl">
+            <input type="hidden" name="orderAmount" :value="pageData.formData.orderAmount">
+            <input type="hidden" name="productDetail" :value="pageData.formData.productDetail">
+            <input type="hidden" name="sign" :value="pageData.formData.sign">
+            <input type="hidden" name="timeStamp" :value="pageData.formData.timeStamp">
+            <input type="hidden" name="version" :value="pageData.formData.version">
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, nextTick } from "vue";
+import {usdRechargeRequestByAchpay} from "@/http/account"
+import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
+
+let formDom = ref(null);
+
+let pageData = reactive({
+    formData: {
+        actionUrl: '',
+        callbackUrl: '',
+        currency: '',
+        merType: '',
+        merchantNo: '',
+        merchantOrderNo: '',
+        noticeUrl: '',
+        orderAmount: '',
+        productDetail: '',
+        sign: '',
+        timeStamp: '',
+        version: '',
+    }
+})
+
+const getLocalPayInfo = async () => {
+    let payInfo = await getChromeStorage('achPayInfo');
+
+    if(payInfo && payInfo.amountValue) {
+        let achPayInfo = {
+            amountValue: '',
+            tab: payInfo.tab
+        };
+        setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+
+        usdRechargeRequestByAchpay({
+            params: {
+                amountValue: payInfo.amountValue
+            }
+        }).then(res => {
+            if(res.code == 0) {
+                pageData.formData = res.data;
+                nextTick(() => {
+                    formDom.value && formDom.value.submit();
+                })
+            }
+        })
+    }
+}
+
+
+onMounted(() => {
+    getLocalPayInfo();
+}) 
+
+</script>
+
+<style scoped lang="scss">
+.cashier-wrapper {
+}
+</style>

src/view/iframe/group-card/card.vue

@@ -130,7 +130,6 @@ const init = (callback) => {
 }
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
     switch (req.actionType) {
         case 'FINISH_GROUP_BANNNER':
             init()

src/view/iframe/nft/group-card.vue

@@ -49,9 +49,11 @@ const jumpUserPage = () => {
                 }
             )
         } else {
-            setChromeStorage({ groupTabData: JSON.stringify({
-                deTabVal: 'deGroupTab'
-            })})
+            setChromeStorage({
+                groupTabData: JSON.stringify({
+                    deTabVal: 'deGroupTab'
+                })
+            })
             window.open(`https://twitter.com/${detail.value.defaultTwitterAccount}`)
         }
     })
@@ -105,7 +107,7 @@ onMounted(() => {
 
     // 登录回调
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok')
+
         switch (req.actionType) {
             case 'BG_LOGIN_SET_USERINFO_CB':
                 getDetail();

src/view/iframe/publish-tips/publish-tips.vue

@@ -7,8 +7,20 @@
                     Do not delete the
                 </div>
                 <div>
-                    <span>#DeNet </span>and<span> Giveaway link</span>
-                    otherwise the giveaway will not be available
+                    <span>#DeNet </span>and<span> 
+                    <template v-if="publishData.postType == PostType.giveaway">
+                        Giveaway
+                    </template>
+                    <template v-else-if="publishData.postType == PostType.postEditor">
+                        Tool Box
+                    </template> link</span>
+                    otherwise the 
+                    <template v-if="publishData.postType == PostType.giveaway">
+                        giveaway
+                    </template>
+                    <template v-else-if="publishData.postType == PostType.postEditor">
+                        Tool Box
+                    </template> will not be available
                 </div>
             </div>
             <div class="text-wrapper" v-show="type == 'NFT'">
@@ -26,16 +38,17 @@
 </template>
 
 <script setup>
-/* eslint-disable */
 import { onMounted, ref } from "vue";
 import { message } from 'ant-design-vue';
 import { getChromeStorage } from '@/uilts/chromeExtension.js'
 import { getQueryString } from '@/uilts/help.js';
+import { PostType } from '@/types';
 
 let ClipboardJS = require('clipboard');
 
 let strContent = ref('');
-let type = ref('Giveaway')
+let publishData = ref({});
+let type = ref('Giveaway');
 
 const copyToken = () => {
     var clipboard = new ClipboardJS('.copy-btn');
@@ -55,8 +68,9 @@ const copyToken = () => {
 }
 
 const setSrcContent = async () => {
-    let publishData = await getChromeStorage('publishData');
-    strContent.value = publishData.copyContent;
+    let data = await getChromeStorage('publishData');
+    strContent.value = data.copyContent;
+    publishData.value = data;
 }
 
 

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

@@ -57,7 +57,6 @@
 </template>
 
 <script setup>
-/* eslint-disable */
 import { reactive, ref, onMounted, defineEmits, defineProps, watch } from "vue";
 import {searchTwitterUser} from "@/http/publishApi";
 import {getChromeStorage} from "@/uilts/chromeExtension"
@@ -123,7 +122,6 @@ onMounted(() => {
 watch(
     () => props.atUserList,
     (newVal) => {
-        console.log(newVal, '222')
     },
     {
         deep: true

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

@@ -0,0 +1,170 @@
+<template>
+    <div class="head">
+        <div class="left">
+            <!-- 关闭按钮 -->
+            <div class="close-btn" @click="close">
+                <template v-if="publishType == 'TOOL_BOX'">
+                    <img  class="icon-close"
+                    :src="require('@/assets/svg/icon-close.svg')"
+                    v-if="toolBoxPageData.activePage == 'EDITOR'"/>
+                    <img class="icon-close"
+                        :src="require('@/assets/svg/icon-back.svg')"
+                        v-else/>
+                </template>
+                <template v-else>
+                    <img  class="icon-close"
+                    :src="require('@/assets/svg/icon-close.svg')"
+                    v-if="showComType == 'default'"/>
+                    <img class="icon-close"
+                        :src="require('@/assets/svg/icon-back.svg')"
+                        v-else/>
+                </template>
+            </div>
+            <!-- 标题 -->
+            <div class="title">
+                {{title}}
+            </div>
+        </div>
+        <div class="right">
+            <!-- 更多按钮 -->
+            <img :src="require('@/assets/svg/icon-more-l.svg')"
+                class="more"
+                @click="showMoreOption = true">
+            <div class="area-option" 
+                v-if="showMoreOption" 
+                @click="showMoreOption = false">
+                <div class="option">
+                    <div class="item" @click="goTransactionsList()">
+                        <img :src="require('@/assets/svg/icon-menu.svg')">
+                        <span>Transaction History</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps } from "vue";
+
+const props = defineProps({
+    publishType: {
+        type: String,
+        default: 'REDPACKET'
+    },
+    showComType: {
+        type: String,
+        default: 'default'
+    },
+    toolBoxPageData: {
+        type: Object,
+        default: () => {
+            return {
+                activePage: 'EDITOR' //PREVIEW
+            }
+        }
+    },
+    title: {
+        type: String,
+        default: 'DeNet'
+    },
+})
+
+const emits = defineEmits(["close"]);
+
+// 展示更多按钮下的选项
+let showMoreOption = ref(false);
+
+const goTransactionsList = () => {
+    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
+}
+
+const close = () => {
+    emits('close', {})
+}
+
+</script>
+
+<style lang="scss" scoped>
+.head {
+    border-bottom: 1px solid #ececec;
+    height: 48px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 14px;
+
+    .left {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .close-btn {
+            display: flex;
+            align-items: center;
+            width: max-content;
+            margin-right: 12px;
+            cursor: pointer;
+        }
+    }
+
+    .right {
+        .more {
+            cursor: pointer;
+        }
+
+        .area-option {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 111;
+
+            .option {
+                position: absolute;
+                top: 43px;
+                right: 15px;
+                background: #fff;
+                filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
+                width: 240px;
+                border-radius: 15px;
+                overflow: hidden;
+
+                .item {
+                    width: 100%;
+                    height: 50px;
+                    display: flex;
+                    align-items: center;
+                    cursor: pointer;
+                    border-top: 1px solid #E9E9E9;
+
+                    img {
+                        margin-left: 15px;
+                        width: 30px;
+                        height: 30px;
+                        margin-right: 6px;
+                    }
+
+                    span {
+                        font-weight: 500;
+                        font-size: 14px;
+                    }
+                }
+
+                .item:first-child {
+                    border-top: 0;
+                }
+
+                .item:hover {
+                        background: #F5F5F5;
+                }
+            }
+        }
+    }
+}
+</style>

src/view/iframe/publish/components/paypal-button.vue → src/view/iframe/publish/components/pay-button.vue

@@ -1,20 +1,24 @@
 <template>
-<!-- paypal 支付按钮 -->
+<!-- pay 支付按钮 -->
     <div class="pay-wrapper">
         <slot name="balance"></slot>
         <div class="pay-btn">
             <div class="iframe-pay"
-                v-show="currentCurrencyInfo.currencyCode == 'USD'"
-                @click="paypalPay">
-                <iframe
+                v-show="currentCurrencyInfo.currencyCode == 'USD'">
+                <div class="token-pay" 
+                    @click="clickPayUSD">
+                    Pay ${{finalAmountData.rechargeAmountValue > 0 && USDepositStatus != 'SUCCESS' ? finalAmountData.rechargeAmountValue : finalAmountData.orderAmountValue}}
+                </div>
+
+                <!-- <iframe
                     class="iframe-pay"
                     ref="iframe"
-                    :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&amount=${props.finalAmountData.finalAmountValue}`"></iframe>
+                    :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&amount=${props.finalAmountData.finalAmountValue}`"></iframe> -->
             </div>
             <div class="token-pay" 
                 :class="{ disabled: Number(currentCurrencyInfo.balance) < Number(payConfig.amount) }"
                 v-if="currentCurrencyInfo.currencyCode != 'USD'"
-                @click="tokenPay">
+                @click="balancePay">
                 Pay {{payConfig.amount || 0}} {{currentCurrencyInfo.tokenSymbol}}
             </div>
         </div>
@@ -22,20 +26,22 @@
 </template>
 
 <script setup>
-import { onMounted, ref, defineProps, defineEmits, watch } from "vue";
+import { onMounted, ref, defineProps, defineEmits, watch, defineExpose } from "vue";
 
 import {payTaskLuckdropWithBalance} from "@/http/publishApi"
 import Report from "@/log-center/log"
+import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
 
 const props = defineProps({
     finalAmountData: {
         type: Object,
         default: () => {
             return {
-                currencyCode: "",
+                balance: "",
                 feeAmountValue: 0,
-                finalAmountValue: 0,
-                requestAmountValue: 0
+                feeDesc: 0,
+                orderAmountValue: 0,
+                rechargeAmountValue: 0
             }
         },
     },
@@ -54,6 +60,10 @@ const props = defineProps({
 
         }
     },
+    USDepositStatus: {
+        type: String,
+        default: 'DEFAULT'
+    }
 });
 
 let iframe = ref(null);
@@ -62,30 +72,20 @@ let payIng = false;
 watch(
     () => props.finalAmountData.finalAmountValue,
     (newVal) => {
-        iframe.value.contentWindow.postMessage({ 
-            actionType: "setAmount", amount: newVal
-        },
-            "*"
-        );
+        // iframe.value.contentWindow.postMessage({ 
+        //     actionType: "setAmount", amount: newVal
+        // },
+        //     "*"
+        // );
     },
     {
         deep: true
     }
 );
 
-const emits = defineEmits(["payPalFinsh"]);
-
-const paypalPay = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.previewPage,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.confirmButton
-    }, {
-        type: 'paypal'
-    });  
-};
+const emits = defineEmits(["payFinish"]);
 
-const tokenPay = () => {  
+const balancePay = () => {  
     Report.reportLog({
         pageSource: Report.pageSource.previewPage,
         businessType: Report.businessType.buttonClick,
@@ -104,7 +104,7 @@ const tokenPay = () => {
         }
     }).then(res => {
         if(res.code == 0) {
-            emits("payPalFinsh", {...res.data, payNetwork: 'bsc'});
+            emits("payFinish", {...res.data});
         }
         payIng = false;
     }).catch(() => {
@@ -112,23 +112,50 @@ const tokenPay = () => {
     })
 }
 
+const clickPayUSD = () => {
+    if(props.finalAmountData.rechargeAmountValue > 0 && props.USDepositStatus != 'SUCCESS') {
+        setTimeout(() => {
+            emits("showDepositMask", {});
+        }, 1000)
+        chrome.tabs.getCurrent(tab =>{
+            let achPayInfo = {
+                amountValue: props.finalAmountData.rechargeAmountValue,
+                tab: tab
+            };
+            let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
+            setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+
+            chrome.tabs.create({
+                url: guideUrl
+            });
+        })
+
+    } else {
+        balancePay();
+    }
+}
+
 onMounted(() => {
-    window.addEventListener("message", function (event) {
-        if (event.data && event.data.actionType) {
-            switch (event.data.actionType) {
-                case "payCallBack":
-                    console.log(
-                        "payCallBack",
-                        event.data.orderData,
-                        event.data.transaction
-                    );
-                    emits("payPalFinsh", {...event.data, payNetwork: 'paypal'});
-                    break;
-            }
-        }
-    });
+    // window.addEventListener("message", function (event) {
+    //     if (event.data && event.data.actionType) {
+    //         switch (event.data.actionType) {
+    //             case "payCallBack":
+    //                 console.log(
+    //                     "payCallBack",
+    //                     event.data.orderData,
+    //                     event.data.transaction
+    //                 );
+    //                 emits("payFinish", {...event.data, payNetwork: 'pay'});
+    //                 break;
+    //         }
+    //     }
+    // });
 });
 
+defineExpose({
+    balancePay
+})
+
 </script>
 
 <style lang="scss" scoped>

src/view/iframe/publish/components/preview-card.vue

@@ -22,6 +22,7 @@
                             totalCount: baseFormData.totalCount,
                             amountValue: baseFormData.amountValue,
                             tokenSymbol: currentCurrencyInfo.tokenSymbol,
+                            currencyCode: currentCurrencyInfo.currencyCode,
                             currencyIconUrl: currentCurrencyInfo.iconPath,
                             type: baseFormData.type,
                             validityDuration: baseFormData.validityDuration,
@@ -62,6 +63,7 @@
                             totalCount: baseFormData.totalCount,
                             amountValue: baseFormData.amountValue,
                             tokenSymbol: currentCurrencyInfo.tokenSymbol,
+                            currencyCode: currentCurrencyInfo.currencyCode,
                             currencyIconUrl: currentCurrencyInfo.iconPath,
                             type: baseFormData.type,
                             validityDuration: baseFormData.validityDuration,

src/view/iframe/publish/components/preview-sheet.vue

@@ -0,0 +1,315 @@
+<template>
+    <div class="preview">
+        <div class="card" :class="{
+            center:
+                !isMoneyRewardCpd ||
+                Number(baseFormData.amountValue) <=
+                Number(currentCurrencyInfo.balance),
+        }">
+            <div class="card-title">
+                <img class="img" v-if="
+                    isMoneyRewardCpd &&
+                    Number(baseFormData.amountValue) >
+                    Number(currentCurrencyInfo.balance)
+                " :src="require('@/assets/subject/top-01.svg')" />
+                <div class="font">
+                    Preview: <span>{{ installStatus ? "After" : "Before" }}</span> DeNet
+                    Installed
+                </div>
+            </div>
+            <div class="flash">
+                <preview-card 
+                    :currentCurrencyInfo="currentCurrencyInfo" 
+                    :postData="publishRes"
+                    :baseFormData="baseFormData" 
+                    :amountFontSize="previewFontSize" 
+                    :customPosterInfo="customPosterData">
+                </preview-card>
+            </div>
+        </div>
+        <!-- 需充值 -->
+        <div class="card-content" v-if="
+            isMoneyRewardCpd &&
+            Number(baseFormData.amountValue) > Number(currentCurrencyInfo.balance)
+        ">
+            <template v-if="currentCurrencyInfo.currencyCode === 'USD'">
+                <div class="card-title">
+                    <img class="img" :src="require('@/assets/subject/top-02.svg')" />
+                    <div class="font">Deposit to Send Giveaway</div>
+                </div>
+                <div class="card-list">
+                    <div class="item">
+                        <div class="l">Giveaway Amount</div>
+                        <div class="r order-amount">
+                            ${{ finalAmountData.orderAmountValue }}
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div class="l">Balance</div>
+                        <div class="r txt">${{ finalAmountData.balance }}</div>
+                    </div>
+                    <div class="item">
+                        <div class="l">
+                            Paypal charges fee ({{ finalAmountData.feeDesc }})
+                        </div>
+                        <div class="r txt">${{ finalAmountData.feeAmountValue }}</div>
+                    </div>
+                    <div class="item">
+                        <div class="l">Deposit Amount</div>
+                        <div class="r deposit-amount">
+                            ${{ finalAmountData.rechargeAmountValue }}
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class="card-title">
+                    <img class="img" :src="require('@/assets/subject/top-02.svg')" />
+                    <div class="font">Deposit to Send Giveaway</div>
+                </div>
+                <top-up2 :currentCurrencyInfo="tempCurrentCurrencyInfo" 
+                        @topUpDone="topUpDone">
+                </top-up2>
+                <div class="card-title">
+                    <img class="img" :src="require('@/assets/subject/top-03.svg')" />
+                    <div class="font">Wait for the amount to arrive</div>
+                </div>
+                <div class="card-amount">
+                    <img class="icon" src="@/assets/subject/icon-balance.png" />
+                    <div class="con">
+                        <div class="desc">Balance</div>
+                        <div class="price">
+                            {{ currentCurrencyInfo.balance }}
+                            {{ currentCurrencyInfo.tokenSymbol }}
+                        </div>
+                    </div>
+                    <img class="refresh" 
+                        :class="{ 'icon-refresh-rotate': refreshRotate }" 
+                        @click="updateCurrencyBanlce"
+                        :src="require('@/assets/svg/icon-form-refresh-blue.svg')" />
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, provide, computed } from "vue";
+
+import previewCard from "@/view/iframe/publish/components/preview-card";
+import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
+
+import { RewardType } from '@/types';
+
+let installStatus = ref(false);
+provide('installStatus', installStatus)
+
+// 刷新按钮旋转
+let refreshRotate = ref(false);
+
+const props = defineProps({
+    baseFormData: {
+        type: Object,
+        default: () => {
+            return {
+                amountCurrencyCode: "",
+                amountValue: "",
+                totalCount: "",
+                validityDuration: "",
+                type: selectModeInfo.type,
+                rewardType: RewardType.money,
+                customizedReward: ""
+            }
+        },
+    },
+    currentCurrencyInfo: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    tempCurrentCurrencyInfo: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    publishRes: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    previewFontSize: {
+        type: [Number, String],
+        default: 56
+    },
+    customPosterData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    finalAmountData: {
+        type: Object,
+        default: () => {
+            return {
+                currencyCode: '',
+                feeAmountValue: 0,
+                finalAmountValue: 0,
+                requestAmountValue: 0,
+            }
+        }
+    }
+});
+
+let isMoneyRewardCpd =computed(() => props.baseFormData.rewardType === RewardType.money);
+
+const emits = defineEmits(["onTopUpDone", "onUpdateCurrencyBanlce"]);
+
+const topUpDone = () => {
+    emits("onTopUpDone", {});
+}
+
+const updateCurrencyBanlce = () => {
+    if(!refreshRotate.value) {
+        refreshRotate.value = true;
+        setTimeout(() => {
+            refreshRotate.value = false;
+        }, 1000)
+    }
+    emits("onUpdateCurrencyBanlce", {});
+}
+</script>
+
+<style scoped lang="scss">
+.preview {
+    padding: 30px 40px;
+    height: calc(100% - 80px);
+    overflow-y: auto;
+
+    .card {
+        float: left;
+        width: 480px;
+        position: relative;
+
+        .flash {
+            overflow: hidden;
+            height: 600px;
+            border-radius: 26px;
+            border: solid 1px #ececec;
+        }
+
+        &.center {
+            margin-left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    .card-title {
+        height: 32px;
+
+        .img {
+            float: left;
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+        }
+
+        .font {
+            float: left;
+            font-size: 17px;
+            font-weight: 500;
+
+            span {
+                color: #0091e9;
+            }
+        }
+    }
+
+    .card-content {
+        float: right;
+        width: 500px;
+    }
+
+    .card-amount {
+        overflow: hidden;
+        display: flex;
+        height: 80px;
+        align-items: center;
+        padding: 20px;
+        border-radius: 20px;
+        border: 1px solid #e6e6e6;
+
+        .icon {
+            width: 40px;
+            height: 40px;
+        }
+
+        .con {
+            flex: 1;
+            padding: 0 10px;
+
+            .desc {
+                color: rgba($color: #000000, $alpha: 0.5);
+                font-size: 12px;
+                margin-bottom: 4px;
+            }
+
+            .price {
+                font-size: 16px;
+                font-weight: bold;
+                word-break: break-all;
+            }
+        }
+
+        .refresh {
+            cursor: pointer;
+            width: 30px;
+            height: 30px;
+            margin-top: -5px;
+        }
+    }
+
+    .card-list {
+        padding: 10px 20px;
+        border-radius: 20px;
+        border: 1px solid #e6e6e6;
+
+        .item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 47px;
+            font-size: 14px;
+            font-weight: 500;
+            box-shadow: inset 0px -1px 0px #eaeaea;
+
+            .order-amount {
+                font-weight: 600;
+                font-size: 20px;
+            }
+
+            .txt {
+                font-weight: 500;
+                font-size: 16px;
+                color: #9a9a9a;
+            }
+
+            .deposit-amount {
+                font-weight: 600;
+                font-size: 20px;
+                color: #1d9bf0;
+            }
+        }
+
+        .item:last-child {
+            box-shadow: none;
+        }
+    }
+    .icon-refresh-rotate {
+        transform: rotate(360deg);
+        transition-duration: 1s;
+    }
+}
+</style>

src/view/iframe/publish/components/top-up.vue

@@ -76,7 +76,7 @@ const props = defineProps({
     },
 })
 
-const emits = defineEmits(['doneHandle']);
+const emits = defineEmits(['topUpDone']);
 
 const createQRCode = (str) => {
     var canvas = document.getElementById('canvas')

src/view/iframe/publish/components/top-up2.vue

@@ -69,7 +69,7 @@ const props = defineProps({
     },
 })
 
-const emits = defineEmits(['doneHandle', 'selectCurrency']);
+const emits = defineEmits(['topUpDone', 'selectCurrency']);
 
 const createQRCode = (str) => {
     var canvas = document.getElementById('canvas')

src/view/iframe/publish/tool-box/child/editor.vue

@@ -53,8 +53,8 @@
 import { ref, defineProps, defineEmits, onMounted } from "vue";
 import axios from 'axios';
 import { message } from "ant-design-vue";
-import { convertUrl, getAllPostEditorAppData } from "@/http/toolBoxApi";
-import { getChromeStorage } from "@/uilts/chromeExtension"
+import { convertUrl, getAllPostEditorAppData, checkInputUrlInBlacklist } from "@/http/toolBoxApi";
+import { setChromeStorage, getChromeStorage } from "@/uilts/chromeExtension"
 import { checkURL, debounce } from "@/uilts/help"
 
 const props = defineProps({
@@ -68,7 +68,6 @@ const props = defineProps({
 let siteUrl = ref('');
 
 let selectAppGuideData = {};
-let selectGuideApp = {};
 let openWindowList = [];
 
 let historyList = ref([])
@@ -99,11 +98,41 @@ const searchHandler = async (_params) => {
     message.error('Page loading failed');
   }, 1000 * 15);
 
+  if(!_params) {
+    let blackListRes = await checkInputUrlInBlacklist({
+      params: {
+        url: siteUrl.value
+      }
+    })
+
+    if(blackListRes.code == 0) {
+      if(blackListRes.data) {
+        loadingHide();
+        clearTimeout(timer);
+        message.info('This site is not supported');
+        return;
+      }
+    }
+  }
+
   let siteRes = await axios.get(siteUrl.value);
 
+  let currentApp = {
+    appId: '',
+    cateId: '',
+    createType: '',
+    defaultUrl: siteUrl.value,
+    guideData: '',
+    iconPath: '',
+    interactType: '',
+    linkImagePath: '',
+    name: '',
+  }
+
   if (siteRes) {
-    if (siteRes.headers['content-type'].indexOf('text/html') < 0 || siteRes.request.status > 399) {
-      // 提示
+    if (siteRes.headers['content-type'].indexOf('text/html') < 0 || siteRes.request.status > 403) {
+      loadingHide();
+      message.error('Page loading failed');
       return;
     }
     let urlObj = new URL(siteUrl.value);
@@ -111,29 +140,20 @@ const searchHandler = async (_params) => {
       siteTitle = getTitleByHtmlStr(siteRes.data);
       if (!siteTitle) {
         siteTitle = urlObj.hostname;
+        currentApp.defaultTit = siteTitle;
       }
-      console.log(siteTitle)
+      currentApp.name = siteTitle;
     }
     favicon = urlObj.origin + '/favicon.ico';
   }
+  currentApp.iconPath = favicon;
 
-  let currentApp = {
-    appId: '',
-    cateId: '',
-    createType: '',
-    defaultUrl: siteUrl.value,
-    guideData: '',
-    iconPath: favicon,
-    interactType: '',
-    linkImagePath: "",
-    name: siteTitle,
-  }
   if(_params) {
     currentApp = _params;
   }
-
+  
   let convertRes = await convertUrl({ params: { originUrl: siteUrl.value } });
-  let params = { convertUrl: siteUrl.value, originUrl: siteUrl.value, appId: '', currentApp };
+  let params = { convertUrl: siteUrl.value, originUrl: siteUrl.value, appId: currentApp.appId, linkImagePath: currentApp.linkImagePath, currentApp };
 
   loadingHide();
   clearTimeout(timer);
@@ -150,7 +170,7 @@ const getTitleByHtmlStr = (str = '') => {
   let tag_end = '</title>'
   let index1 = str.indexOf(tag_start) + tag_start.length;
   let index2 = str.indexOf(tag_end);
-  
+
   if (index1 < tag_start.length || index2 < 0) {
     return '';
   }
@@ -199,32 +219,30 @@ const openWindow = (params) => {
 const createGuideWindow = (params, isUpdate = false) => {
   openWindowList = [];
   selectAppGuideData = {};
-  selectGuideApp = {};
 
   let windowWith = window.screen.width - 500;
   let guideUrl = chrome.runtime.getURL('/iframe/tool-box-guide.html');
 
-  chrome.windows.create({
-    width: windowWith,
-    type: 'normal',
-    url: params.defaultUrl,
-    state: 'normal'
-  }, function (window) {
-    openWindowList.push(window);
-  })
-  chrome.windows.create({
-    width: 500,
-    type: 'popup',
-    url: guideUrl,
-    left: windowWith,
-    state: 'normal'
-  }, function (window) {
-    openWindowList.push(window);
-  })
-  selectGuideApp = params;
-  if (params.guideData) {
-    selectAppGuideData = JSON.parse(params.guideData);
-  }
+  setChromeStorage({ selectGuideApp : JSON.stringify(params)}, async () => {
+    let window1 = await chrome.windows.create({
+      width: windowWith,
+      type: 'normal',
+      url: params.defaultUrl,
+      state: 'normal'
+    })
+    openWindowList.push(window1);
+
+    let window2 = await chrome.windows.create({
+      width: 500,
+      type: 'popup',
+      url: guideUrl,
+      left: windowWith,
+      state: 'normal'
+    })
+    openWindowList.push(window2);
+
+    setChromeStorage({ guideAppWindowList: JSON.stringify({list: openWindowList})});
+  })  
 }
 
 const getAppList = () => {
@@ -238,18 +256,8 @@ const getAppList = () => {
 
 const onRuntimeMsg = () => {
   chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
+
     switch (req.actionType) {
-      case 'CONTENT_GET_GUIDE_DATA':
-        chrome.runtime.sendMessage({
-          actionType: "CONTENT_EDIT_SEND_GUIDE_DATA",
-          data: {
-            guideData: selectAppGuideData,
-            windowData: openWindowList,
-            selectGuideApp
-          }
-        }, (response) => { });
-        break;
       case 'CONTENT_GUIDE_APPLY_APP':
         siteUrl.value = req.data.siteUrl;
         searchHandler(req.data.selectGuideApp);

src/view/iframe/publish/tool-box/child/guide.vue

@@ -3,12 +3,9 @@
         <div class="top">
             <div class="title">Guided Tutorial</div>
             <div class="content">
-                <div class="img-list" 
-                    v-if="pageData.guideData.guideType == 'image'">
-                    <div class="img-item" 
-                        v-for="(item, index) in pageData.guideData.guideData"
-                        :key="index">
-                        <img class="img" :src="item" >
+                <div class="img-list" v-if="pageData.guideData.guideType == 'image'">
+                    <div class="img-item" v-for="(item, index) in pageData.guideData.guideData" :key="index">
+                        <img class="img" :src="item">
                     </div>
                 </div>
             </div>
@@ -30,75 +27,92 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue";
 import { checkURL } from "@/uilts/help"
+import { setChromeStorage, getChromeStorage } from "@/uilts/chromeExtension"
+import { message } from "ant-design-vue";
+
+import { checkInputUrlInBlacklist } from "@/http/toolBoxApi";
 
 let siteUrl = ref('');
 
 let pageData = reactive({
-    guideType: '',
     guideData: [],
     selectGuideApp: {}
 });
 
-const confirm = () => {
+const confirm = async () => {
     siteUrl.value = siteUrl.value.trim();
 
-    if(!checkURL(siteUrl.value)) {
+    if (!checkURL(siteUrl.value)) {
+        message.info('Incorrect URL entered');
         return;
-    } 
+    }
+
+    let blackListRes = await checkInputUrlInBlacklist({
+        params: {
+            url: siteUrl.value
+        }
+    })
+
+    if(blackListRes.code == 0) {
+        if(blackListRes.data) {
+            message.info('This site is not supported');
+            return;
+        }
+    }
+
+    let {list: windowList = []} = await getChromeStorage('guideAppWindowList') || {list: []};
 
-    chrome.runtime.sendMessage({ 
-        actionType: "CONTENT_GUIDE_APPLY_APP", 
+    chrome.runtime.sendMessage({
+        actionType: "CONTENT_GUIDE_APPLY_APP",
         data: {
             siteUrl: siteUrl.value,
             selectGuideApp: pageData.selectGuideApp
         }
-    },(response) => {});
+    }, (response) => { });
 
     setTimeout(() => {
-        for(let i = 0; i < pageData.windowData.length; i++) {
-            let item = pageData.windowData[i];
-            chrome.windows.remove(
-                item.id,
-                function() {}
-            )
-        };
+        if(windowList && windowList.length) {
+            for (let i = 0; i < windowList.length; i++) {
+                let item = windowList[i];
+                chrome.windows.remove(
+                    item.id,
+                    function () { }
+                )
+            };
+            chrome.storage.local.remove("selectGuideApp");
+            chrome.storage.local.remove("guideAppWindowList");
+        }
     }, 600)
 };
 
-const onRuntimeMsg = () => {
-    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok')
-        switch (req.actionType) {
-            case 'CONTENT_EDIT_SEND_GUIDE_DATA':
-                let {guideData, windowData, selectGuideApp} = req.data;
-                pageData.guideData = guideData;
-                pageData.windowData = windowData;
-                pageData.selectGuideApp = selectGuideApp;
-                break;
+const setPageData = async () => {
+    let selectGuideApp = await getChromeStorage('selectGuideApp') || {};
+    pageData.selectGuideApp = selectGuideApp;
+
+    if(selectGuideApp.guideData) {
+        if(typeof selectGuideApp.guideData == 'string') {
+            pageData.guideData = JSON.parse(selectGuideApp.guideData);
+        } else {
+            pageData.guideData = selectGuideApp.guideData
         }
-    })
+    };
 }
 
 onMounted(() => {
-    setTimeout(() => {
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_GET_GUIDE_DATA", 
-            data:{}
-        },(response) => {});
-    }, 600)
-
-    onRuntimeMsg();
+    setPageData();
 })
 
 </script>
 
 <style lang="scss">
-
-html, body, #app {
+html,
+body,
+#app {
     margin: 0 !important;
     width: 100%;
     height: 100%;
 }
+
 .guide-wrapper {
     width: 100%;
     height: 100%;

src/view/iframe/publish/tool-box/child/preview.vue

@@ -35,14 +35,22 @@
                         </div>
                     </div>
                     <div class="card-wrapper" :style="{ 'zoom': reviewCanvasParams.zoom }">
-                        <img class="cover" :src="previewData.linkImagePath || require('@/assets/svg/img-default-site-cover.svg')" />
-                        <!-- v-if="previewData.linkImagePath && previewData.appId" <iframe class="iframe" 
-                            :src="previewData.convertUrl"
-                            v-else></iframe>  -->
+                        <img class="cover" v-if="previewData.linkImagePath && previewData.appId"
+                            :src="previewData.linkImagePath" />
+                        <iframe class="iframe" :src="previewData.convertUrl" scrolling="no" v-else></iframe>
 
                         <div class="bottom-bar">
                             <div class="site-url">DeNet.me</div>
-                            <div class="desc">Install DeNet Plugin to Participate</div>
+                            <div class="desc">
+                                <template v-if="previewData.appId">
+                                    {{ previewData.currentApp.linkTitle }}
+                                </template>
+                                <template v-else>
+                                    {{ previewData.currentApp.defaultTit ? defaultLinkTitle :
+                                            previewData.currentApp.name
+                                    }}
+                                </template>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -58,10 +66,11 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, reactive, defineProps, onMounted, nextTick, onUnmounted } from "vue";
-import { postPublish } from "@/http/publishApi";
-import installCard from '@/view/content/tool-box/index.vue'
+import { ref, defineEmits, reactive, defineProps, onMounted, nextTick, onUnmounted, watch } from "vue";
+import { message } from "ant-design-vue";
 
+import installCard from '@/view/content/tool-box/index.vue'
+import { postPublish } from "@/http/publishApi";
 import { getChromeStorage, setChromeStorage } from "@/uilts/chromeExtension"
 import { getUser } from "@/http/publishApi"
 
@@ -76,17 +85,62 @@ let reviewCanvasParams = reactive({
 });
 let timer = ref(null);
 
+let loadingHide = null;
+
 const props = defineProps({
     previewData: {
         type: Object,
-        default: {
-            convertUrl: '',
-            originUrl: '',
-            appId: ''
+        default: () => {
+            return {
+                convertUrl: '',
+                originUrl: '',
+                appId: ''
+            }
+        }
+    },
+    screenshotWebsiteData: {
+        type: Object,
+        default: () => {
+            return {
+                url: '',
+                status: ''
+            }
         }
+    },
+    defaultLinkTitle: {
+        type: String,
+        default: ''
+    },
+    showCom: {
+        type: String,
+        default: 'EDITOR'
     }
 })
 
+watch(() => props.screenshotWebsiteData,
+    (newVal) => {
+        let { appId } = props.previewData;
+        if (loadingHide && !appId && (newVal.url || newVal.status)) {
+            loadingHide();
+            loadingHide = null;
+            submitPublish();
+        }
+    },
+    {
+        deep: true
+    })
+
+watch(() => props.showCom,
+    (newVal) => {
+        if (newVal == 'EDITOR' && loadingHide) {
+            loadingHide();
+            loadingHide = null;
+        }
+    },
+    {
+        deep: true
+    })
+
 const emits = defineEmits(["publishFinish"]);
 
 const getUserInfo = (cb) => {
@@ -139,17 +193,36 @@ const calcPreviewCanvasParams = () => {
 }
 
 const publishHandler = () => {
-    if(submitIng.value) {
+    let { appId } = props.previewData;
+    if (loadingHide) {
+        return;
+    }
+
+    if (!appId && !props.screenshotWebsiteData.url) {
+        loadingHide = message.loading('loading...', 0);
+        return;
+    }
+
+    submitPublish();
+}
+
+const submitPublish = () => {
+    let { convertUrl, originUrl, appId, currentApp } = props.previewData;
+
+    if (submitIng.value) {
         return;
     }
-    let {convertUrl, originUrl, appId, currentApp} = props.previewData;
 
     setHistoryData(currentApp);
 
+    let linkTitle = currentApp.defaultTit ? '' : currentApp.name;
+
     let postBizData = {
         convertUrl,
         originUrl,
-        appId
+        appId,
+        linkTitle: !appId ? linkTitle : '',
+        linkImagePath: props.screenshotWebsiteData.url
     };
     let data = {
         params: {
@@ -160,7 +233,7 @@ const publishHandler = () => {
     };
 
     submitIng.value = true;
-    
+
     postPublish(data).then((res) => {
         submitIng.value = false;
         if (res.code == 0) {
@@ -168,31 +241,34 @@ const publishHandler = () => {
             emits("publishFinish", { publishRes });
         } else {
         }
-    })
-    .catch((err) => {
+    }).catch((err) => {
         console.log(err);
     });
 }
 
 const setHistoryData = async (params) => {
     const maxLength = 9;
-    let {list = []} = await getChromeStorage('toolBoxAppHistoryData') || {};
-    if(list.length) {
+    let { list = [] } = await getChromeStorage('toolBoxAppHistoryData') || {};
+    if (list.length) {
         let hasSite = list.find(item => item.defaultUrl == params.defaultUrl);
-        if(hasSite) {
+        if (hasSite) {
             return;
         }
         list.unshift(params);
-        if(list.length > maxLength) {
+        if (list.length > maxLength) {
             list.length = maxLength;
         }
-        setChromeStorage({ toolBoxAppHistoryData : JSON.stringify({
-            list: list
-        })}) 
+        setChromeStorage({
+            toolBoxAppHistoryData: JSON.stringify({
+                list: list
+            })
+        })
     } else {
-        setChromeStorage({ toolBoxAppHistoryData : JSON.stringify({
-            list: [params]
-        })})    
+        setChromeStorage({
+            toolBoxAppHistoryData: JSON.stringify({
+                list: [params]
+            })
+        })
     }
 };
 
@@ -268,6 +344,7 @@ onUnmounted(() => {
                     .name {
                         font-size: 15px;
                     }
+
                     .name {
                         color: #566370;
                         margin-left: 7px;
@@ -323,7 +400,7 @@ onUnmounted(() => {
                     .iframe {
                         height: calc(100% - 73px);
                         width: 100%;
-                        border: none;    
+                        border: none;
                         pointer-events: none;
                         cursor: default;
                     }
@@ -339,11 +416,13 @@ onUnmounted(() => {
                         height: 73px;
                         padding: 10px 10px 0 13px;
                         border-top: 1px solid rgba(0, 0, 0, 0.3);
+
                         .site-url {
                             color: #566370;
                             font-size: 14px;
                             line-height: 20px;
                         }
+
                         .desc {
                             font-weight: 500;
                             font-size: 15px;
@@ -375,6 +454,7 @@ onUnmounted(() => {
         display: flex;
         align-items: center;
         justify-content: flex-end;
+
         .btn {
             width: 200px;
             height: 50px;

src/view/iframe/publish/tool-box/index.vue

@@ -1,14 +1,19 @@
 <template>
     <div class="page-wrapper">
         <editor v-show="showCom == 'EDITOR'" :linkInputDescImage="pageData.linkInputDescImage" @changeShowCom="changeShowCom" />  
-        <preview v-show="showCom == 'PREVIEW'" :previewData="previewData" 
-        @publishFinish="publishFinish" />
+        <preview v-show="showCom == 'PREVIEW'" 
+            :previewData="previewData" 
+            :screenshotWebsiteData="screenshotWebsiteData"
+            :showCom="showCom"
+            :defaultLinkTitle="pageData.defaultLinkTitle"
+            @publishFinish="publishFinish" />
     </div>
 </template>
 
 <script setup>
 import { ref, reactive, watch, defineProps, defineEmits } from "vue";
 
+import { screenshotWebsite } from "@/http/toolBoxApi";
 import editor from '@/view/iframe/publish/tool-box/child/editor.vue'
 import preview from '@/view/iframe/publish/tool-box/child/preview.vue'
 
@@ -16,7 +21,8 @@ const props = defineProps({
     pageData: {
         type: Object,
         default: {
-            linkInputDescImage: ''
+            linkInputDescImage: '',
+            defaultLinkTitle: ''
         }
     },
     activePage: {
@@ -45,6 +51,11 @@ let previewData = reactive({
     currentApp: {}
 })
 
+let screenshotWebsiteData = reactive({
+    url: '',
+    status: '',
+});
+
 const changeShowCom = (params) => {
     showCom.value = 'PREVIEW';
     previewData.convertUrl = params.convertUrl;
@@ -53,6 +64,31 @@ const changeShowCom = (params) => {
     previewData.linkImagePath = params.linkImagePath || '';
     previewData.currentApp = params.currentApp || {};
 
+    if(!params.appId) {
+        screenshotWebsiteData.url = '';
+        screenshotWebsiteData.status = '';
+        screenshotWebsite({
+            params: {
+                url: params.convertUrl
+            }
+        }).then(res => {
+            if(showCom.value != 'PREVIEW') {
+                return;
+            }
+            if(res.code == 0) {
+                screenshotWebsiteData.url = res.data;
+                screenshotWebsiteData.status = 1;
+            } else {
+                screenshotWebsiteData.status = 1;
+            }
+        }).catch(() => {
+            if(showCom.value != 'PREVIEW') {
+                return;
+            }
+            screenshotWebsiteData.status = 1;
+        })
+    }
+
     emits("onPageChange", {page: showCom.value});
 }
 

src/view/iframe/red-packet/luck-draw.vue

@@ -127,8 +127,7 @@
 
         <!-- success -->
         <div v-if="state.status == 'success'" class="success">
-            <div class="header"
-                v-if="state.detail.rewardType === RewardType.money"
+            <div class="header" v-if="state.detail.rewardType === RewardType.money"
                 :style="{ 'backgroundImage': `url(${require('@/assets/subject/002-back-head-top-180.svg')})` }">
                 <div class="success-title">
                     🎉 Awesome! You are Winner!
@@ -144,16 +143,15 @@
                     <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
                 </div>
             </div>
-            <div class="header header-custom-prize"
-                v-else
-                :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px'}">
+            <div class="header header-custom-prize" v-else
+                :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px' }">
                 <div class="success-title">
                     🎉 Awesome! You are the Winner!
                 </div>
                 <div class="custom-prize-show">
                     <component-zoom width="340" fontSize="22" class="custom-prise-name">
                         <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
-                        <span>{{state.detail.customizedReward}}</span>
+                        <span>{{ state.detail.customizedReward }}</span>
                     </component-zoom>
                     <!-- <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22"></font-zoom> -->
                 </div>
@@ -187,7 +185,7 @@
                         <div class="luck-title" v-else>Twitter User</div>
                         <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm') }}</div>
                     </div>
-                    <div class="luck-money"  v-if="state.detail.rewardType === RewardType.money">
+                    <div class="luck-money" v-if="state.detail.rewardType === RewardType.money">
                         <img :src="state.detail.currencyIconPath" alt />
                         <div class="luck-money-txt">
                             <a-tooltip :title="item.amountValue">
@@ -232,6 +230,7 @@
                         totalCount: state.detail.totalCount,
                         amountValue: state.detail.amountValue,
                         tokenSymbol: state.detail.currencySymbol,
+                        currencyCode: state.detail.amountCurrencyCode,
                         currencyIconUrl: state.detail.currencyIconPath,
                         type: PlayType.lottery,
                         validityDuration: state.count_down_time,
@@ -244,8 +243,7 @@
                         customizedReward: state.detail.customizedReward,
                         customPosterUrl: state.detail.customPosterInstalled
                     }"
-                    @clickOpenRedPacket = "clickOpenRedPacket"
-                ></custom-card-cover>
+                    @clickOpenRedPacket = "clickOpenRedPacket"></custom-card-cover>
             <!-- </template> -->
         </div>
 
@@ -285,7 +283,7 @@
                         <div class="luck-title" v-else>Twitter User</div>
                         <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
                     </div>
-                    <div class="luck-money"  v-if="state.detail.rewardType === RewardType.money">
+                    <div class="luck-money" v-if="state.detail.rewardType === RewardType.money">
                         <img :src="state.detail.currencyIconPath" alt />
                         <div class="luck-money-txt">
                             <a-tooltip :title="item.amountValue">
@@ -1262,7 +1260,7 @@ const handleStatusPage = () => {
 
     // -------- 华丽的分割线 --------
     // 如果 红包状态 = 未开始
-    
+
     if (state.detail.status == 0) {
         showNotOpenPage()
         return
@@ -1985,7 +1983,7 @@ function onPageVisbile() {
 
 function onRuntimeMsg() {
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok');
+        ;
         switch (req.actionType) {
             case 'BACK_DISCORD_LOGIN_SUCCESS':
                 discordLoginSuccess();
@@ -2530,7 +2528,7 @@ body {
             }
         }
 
-        
+
 
         .luck-list-title {
             /*      margin-top: 47px;*/
@@ -2842,6 +2840,7 @@ body {
 
         .header-custom-prize {
             align-items: flex-start;
+
             .success-title {
                 line-height: 21px;
                 margin-top: 23px;
@@ -3073,10 +3072,11 @@ body {
             width: 100%;
             min-height: 373px;
         }
+
         .customBottom {
             width: 100%;
             height: 125px;
-            background:#111214;
+            background: #111214;
             padding: 10px 16px;
             font-weight: 500;
             font-size: 12px;
@@ -3084,34 +3084,41 @@ body {
             letter-spacing: 0.3px;
             color: #838383;
             line-height: 20px;
+
             .theme {
                 display: flex;
                 height: 20px;
                 align-items: center;
                 justify-content: flex-start;
+
                 .icon {
                     width: 12px;
                 }
+
                 .time {
                     margin: 0 4px;
                     color: #1D9BF0;
                 }
             }
+
             .winner-info {
                 display: flex;
                 height: 20px;
                 align-items: center;
                 justify-content: flex-start;
                 margin-bottom: 13px;
-                .count{
+
+                .count {
                     color: #1D9BF0;
                     margin-right: 4px;
                 }
+
                 .prize-name {
                     color: #1D9BF0;
                     margin-left: 4px;
                 }
             }
+
             .open-red {
                 height: 45px;
                 background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
@@ -3125,6 +3132,7 @@ body {
                 color: #FFFFFF;
             }
         }
+
         .money-area {
             width: 100%;
             position: absolute;

src/view/iframe/red-packet/red-packet.vue

@@ -146,7 +146,8 @@
 
     <!-- success -->
     <div v-if="state.status == 'success'" class="success">
-      <div class="header" v-if="state.detail.rewardType === RewardType.money" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
+      <div class="header" v-if="state.detail.rewardType === RewardType.money"
+        :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
         <div class="money">
           <img :src="state.detail.currencyIconPath" alt />
           <font-amount :amount="state.receiveAmount" class="big" :fontSize="46"></font-amount>
@@ -158,13 +159,15 @@
           <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
         </div>
       </div>
-      <div class="header header-custom-prize" v-else :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px' }">
+      <div class="header header-custom-prize" v-else
+        :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px' }">
         <div class="success-title">
-            🎉 Awesome! You are the Winner!
+          🎉 Awesome! You are the Winner!
         </div>
         <div class="custom-prize-show">
-            <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
-            <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22"></font-zoom>
+          <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
+          <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22">
+          </font-zoom>
         </div>
       </div>
       <div class="luck-list-title">
@@ -235,6 +238,7 @@
               totalCount: state.detail.totalCount,
               amountValue: state.detail.amountValue,
               tokenSymbol: state.detail.currencySymbol,
+              currencyCode: state.detail.amountCurrencyCode,
               currencyIconUrl: state.detail.currencyIconPath,
               type: PlayType.common,
               validityDuration: state.detail.validityDuration,
@@ -246,8 +250,7 @@
               customizedReward: state.detail.customizedReward,
               customPosterUrl: state.detail.customPosterInstalled
           }"
-          @clickOpenRedPacket = "clickOpenRedPacket"
-      ></custom-card-cover>
+          @clickOpenRedPacket = "clickOpenRedPacket"></custom-card-cover>
       <!-- </template> -->
     </div>
 
@@ -292,7 +295,7 @@
             </div>
           </div>
           <div class="luck-custom-prize" v-else>winner</div>
-          <div class="luck-king" v-if="state.detail.rewardType === RewardType.money && item.maxAmount">     
+          <div class="luck-king" v-if="state.detail.rewardType === RewardType.money && item.maxAmount">
             <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
             <span>Luckiest Draw</span>
           </div>
@@ -466,14 +469,14 @@ let state = reactive({
 let fullName = '';
 
 let successTopBgCpd = computed(() => {
-    const { rewardType } = state.detail
-    switch (rewardType) {
-        case RewardType.custom:
-            return require('@/assets/subject/success-top-bg-2.svg');
-        default:
-            return require('@/assets/subject/002-back-head-top-180.svg');
-            break;
-    }
+  const { rewardType } = state.detail
+  switch (rewardType) {
+    case RewardType.custom:
+      return require('@/assets/subject/success-top-bg-2.svg');
+    default:
+      return require('@/assets/subject/002-back-head-top-180.svg');
+      break;
+  }
 });
 
 function clickRetry() {
@@ -1775,7 +1778,7 @@ function onPageVisbile() {
 
 function onRuntimeMsg() {
   chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok');
+    ;
     switch (req.actionType) {
       case 'BACK_DISCORD_LOGIN_SUCCESS':
         discordLoginSuccess();
@@ -2271,6 +2274,7 @@ body {
           color: #fff;
         }
       }
+
       .custom-prize-show {
         width: 100%;
         display: flex;
@@ -2280,12 +2284,12 @@ body {
         margin-top: 20px;
 
         img {
-            width: 24px;
-            height: 24px;
-            margin-right: 9px;
+          width: 24px;
+          height: 24px;
+          margin-right: 9px;
         }
+      }
     }
-}
 
     .luck-list-title {
       /*      margin-top: 47px;*/
@@ -2308,13 +2312,14 @@ body {
     }
 
     .header-custom-prize {
-        align-items: flex-start;
-        align-content: flex-start;
-        .success-title {
-            line-height: 21px;
-            margin-top: 23px;
-            font-size: 18px;
-        }
+      align-items: flex-start;
+      align-content: flex-start;
+
+      .success-title {
+        line-height: 21px;
+        margin-top: 23px;
+        font-size: 18px;
+      }
     }
 
     .luck-list {
@@ -2424,10 +2429,10 @@ body {
       }
 
       .luck-custom-prize {
-          font-weight: 500;
-          font-size: 14px;
-          letter-spacing: 0.3px;
-          color: #F5B945;
+        font-weight: 500;
+        font-size: 14px;
+        letter-spacing: 0.3px;
+        color: #F5B945;
       }
 
       .luck-item:last-child {
@@ -2439,14 +2444,15 @@ body {
   .success {
 
     .success-title {
-        color: #FFFFFF;
-        font-weight: 800;
-        font-size: 21px;
-        line-height: 27px;
-        margin-top: 28px;
-        text-align: center;
-        width: 100%;
+      color: #FFFFFF;
+      font-weight: 800;
+      font-size: 21px;
+      line-height: 27px;
+      margin-top: 28px;
+      text-align: center;
+      width: 100%;
     }
+
     .luck-list-title {
       margin-top: 17px;
       border-bottom: 1px solid #ECECEC;
@@ -2705,60 +2711,68 @@ body {
     border-radius: 11px;
 
     .customImg {
-        width: 100%;
-        min-height: 373px;
+      width: 100%;
+      min-height: 373px;
     }
+
     .customBottom {
-        width: 100%;
-        height: 125px;
-        background:#111214;
-        padding: 10px 16px;
-        font-weight: 500;
-        font-size: 12px;
-        line-height: 14px;
-        letter-spacing: 0.3px;
-        color: #838383;
-        line-height: 20px;
-        .theme {
-            display: flex;
-            height: 20px;
-            align-items: center;
-            justify-content: flex-start;
-            .icon {
-                width: 12px;
-            }
-            .time {
-                margin: 0 4px;
-                color: #1D9BF0;
-            }
+      width: 100%;
+      height: 125px;
+      background: #111214;
+      padding: 10px 16px;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 14px;
+      letter-spacing: 0.3px;
+      color: #838383;
+      line-height: 20px;
+
+      .theme {
+        display: flex;
+        height: 20px;
+        align-items: center;
+        justify-content: flex-start;
+
+        .icon {
+          width: 12px;
         }
-        .winner-info {
-            display: flex;
-            height: 20px;
-            align-items: center;
-            justify-content: flex-start;
-            margin-bottom: 13px;
-            .count{
-                color: #1D9BF0;
-                margin-right: 4px;
-            }
-            .prize-name {
-                color: #1D9BF0;
-                margin-left: 4px;
-            }
+
+        .time {
+          margin: 0 4px;
+          color: #1D9BF0;
         }
-        .open-red {
-            height: 45px;
-            background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
-            border: 1.5px solid rgba(255, 255, 255, 0.15);
-            border-radius: 52px;
-            line-height: 45px;
-            text-align: center;
-            cursor: pointer;
-            font-weight: 800;
-            font-size: 16px;
-            color: #FFFFFF;
+      }
+
+      .winner-info {
+        display: flex;
+        height: 20px;
+        align-items: center;
+        justify-content: flex-start;
+        margin-bottom: 13px;
+
+        .count {
+          color: #1D9BF0;
+          margin-right: 4px;
+        }
+
+        .prize-name {
+          color: #1D9BF0;
+          margin-left: 4px;
         }
+      }
+
+      .open-red {
+        height: 45px;
+        background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
+        border: 1.5px solid rgba(255, 255, 255, 0.15);
+        border-radius: 52px;
+        line-height: 45px;
+        text-align: center;
+        cursor: pointer;
+        font-weight: 800;
+        font-size: 16px;
+        color: #FFFFFF;
+      }
     }
 
     .money-area {

src/view/iframe/tab-group/tab-group.vue

@@ -1,70 +1,60 @@
 <template>
     <div class="tab-group-page" ref="pageWrapperDom" @scroll="pageScroll">
         <div class="list-wrapper" ref="listWrapperDom">
-            
+
             <template v-if="listData.length">
-                <div class="list-item" 
-                    v-for="(item, index) in listData" 
-                    :key="index"
-                    @click="clickItem(item, index)">
+                <div class="list-item" v-for="(item, index) in listData" :key="index" @click="clickItem(item, index)">
                     <div class="left">
                         <img :src="item.avatarUrl" class="icon-avatar">
                     </div>
                     <div class="right">
                         <div class="top">
                             <div class="icon-nft-wrapper">
-                                <el-popover
-                                    :width="340"
-                                    placement="right-start"
-                                    trigger="hover"
-                                    popper-style="background: #FFFFFF;
+                                <el-popover :width="340" placement="right-start" trigger="hover" popper-style="background: #FFFFFF;
                                         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
                                         border-radius: 20px;
                                         padding: 20px;
                                         box-sizing: border-box;
                                         margin-top: -1px">
                                     <template #reference>
-                                        <img v-if="item.nftItem" :src="item.nftItem.imagePath" class="icon-nft" @click.stop="">
+                                        <img v-if="item.nftItem" :src="item.nftItem.imagePath" class="icon-nft"
+                                            @click.stop="">
                                     </template>
                                     <template #default>
                                         <div class="preview-nft" v-if="item.nftItem">
                                             <img :src="item.nftItem.imagePath" class="icon-nft-big">
                                             <div class="content">
                                                 <div class="nft-name">
-                                                    {{item.nftItem.nftItemName}} 
+                                                    {{ item.nftItem.nftItemName }}
                                                 </div>
                                                 <div class="nft-desc">
-                                                    <div v-if="item.nftItem.metadata" v-html="item.nftItem.metadata.description"></div>
+                                                    <div v-if="item.nftItem.metadata"
+                                                        v-html="item.nftItem.metadata.description"></div>
                                                 </div>
                                             </div>
                                         </div>
                                     </template>
                                 </el-popover>
                             </div>
-                            <div class="nick-name"
-                                :style="{
-                                    color: eleThemeStyle.color
-                                }">
-                                {{item.nickName}}
+                            <div class="nick-name" :style="{
+                                color: eleThemeStyle.color
+                            }">
+                                {{ item.nickName }}
                             </div>
-                            <div class="screen-name"
-                                :style="{
-                                    color: eleThemeStyle.screenName
-                                }">
-                                @{{item.screenName}}
+                            <div class="screen-name" :style="{
+                                color: eleThemeStyle.screenName
+                            }">
+                                @{{ item.screenName }}
                             </div>
                         </div>
-                        <div class="post-content"
-                            :style="{
-                                color: eleThemeStyle.color
-                            }"
-                            v-html="item.textContent"></div>
+                        <div class="post-content" :style="{
+                            color: eleThemeStyle.color
+                        }" v-html="item.textContent"></div>
                     </div>
                 </div>
             </template>
-            <template v-if="loading && !listData.length" >
-                    <img :src="require('@/assets/svg/icon-tweet-loading.svg')" 
-                            class="icon-loading" >
+            <template v-if="loading && !listData.length">
+                <img :src="require('@/assets/svg/icon-tweet-loading.svg')" class="icon-loading">
             </template>
         </div>
     </div>
@@ -101,7 +91,7 @@ let listReqParams = {
 };
 
 const clickItem = (data, index) => {
-    if(data.srcContentId) {
+    if (data.srcContentId) {
         let url = `https://twitter.com/${data.screenName}/status/${data.srcContentId}`;
         sendMessageToContent({
             actionType: 'IFRAME_PAGE_JUMP',
@@ -114,7 +104,7 @@ const clickItem = (data, index) => {
 
 function onRuntimeMsg() {
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok')
+
         switch (req.actionType) {
             case 'CONTENT_REFRESH_TAB_GROUP_LIST':
                 listReqParams.params.preTimestamp = ''
@@ -134,10 +124,10 @@ function onRuntimeMsg() {
 }
 
 const nextPage = (params) => {
-    let {wrapperHeight, wrapperScrollTop, contentHeight} = params;
+    let { wrapperHeight, wrapperScrollTop, contentHeight } = params;
     if (wrapperHeight + wrapperScrollTop >= (contentHeight - 50)) {
         console.log('next---');
-        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
+        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
             pageWrapperDom.value.style.overflowY = 'auto'
         }
     }
@@ -153,12 +143,12 @@ const pageScroll = (e) => {
 }
 
 const styleHandler = (data) => {
-    if(data.top > 53) {
-        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'hidden') {
+    if (data.top > 53) {
+        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'hidden') {
             pageWrapperDom.value.style.overflowY = 'hidden'
         }
     } else {
-        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
+        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
             pageWrapperDom.value.style.overflowY = 'auto'
         }
         innerPageNext(data);
@@ -175,21 +165,21 @@ const innerPageNext = (data) => {
     ) {
         listReqParams.loadMore = true;
         let dataLength = listData.value.length;
-        if(dataLength) {
+        if (dataLength) {
             listReqParams.params.preTimestamp = listData.value[dataLength - 1]['createTimestamp'];
         }
-        if(listReqParams.params.preTimestamp) {
+        if (listReqParams.params.preTimestamp) {
             getListData();
         }
     }
 }
 
 const sendMessageToContent = (params) => {
-    let {actionType, data} = params || {};
+    let { actionType, data } = params || {};
     chrome.tabs.getCurrent((tab) => {
         chrome.tabs.sendMessage(tab.id, {
-        actionType,
-        data,
+            actionType,
+            data,
         }, (res) => { console.log(res) });
     })
 }
@@ -208,9 +198,9 @@ const getListData = () => {
             if (resData.length) {
                 for (let i = 0; i < resData.length; i++) {
                     let nftItem = resData[i]["nftItem"];
-                    if(nftItem) {
+                    if (nftItem) {
                         let matedata = nftItem['metadata'];
-                        if(matedata) {
+                        if (matedata) {
                             resData[i]["nftItem"]['metadata'] = JSON.parse(matedata);
                         }
                     }
@@ -230,20 +220,20 @@ const getListData = () => {
 }
 
 const initData = () => {
-    let {windowLocation} = JSON.parse(getQueryString('params'));
-    if(windowLocation.pathname) {
-        let arr =  windowLocation.pathname.split('/');
-        if(arr.length >= 2){
+    let { windowLocation } = JSON.parse(getQueryString('params'));
+    if (windowLocation.pathname) {
+        let arr = windowLocation.pathname.split('/');
+        if (arr.length >= 2) {
             twitterAccount = arr[1];
-            if(twitterAccount) {
+            if (twitterAccount) {
                 getTwitterNftGroupInfo({
                     params: {
                         twitterAccount
                     }
                 }).then(res => {
-                    if(res.code == 0) {
+                    if (res.code == 0) {
                         groupInfo = res.data || {};
-                        if(!groupInfo.nftGroupId) return;
+                        if (!groupInfo.nftGroupId) return;
                         loading.value = true;
                         getListData()
                     }
@@ -254,14 +244,14 @@ const initData = () => {
 }
 
 const setPageThemeStyle = (params) => {
-    let {twitterTheme, theme} = params;
+    let { twitterTheme, theme } = params;
 
-    if(twitterTheme == 'light') {
+    if (twitterTheme == 'light') {
         eleThemeStyle.color = '#000';
         eleThemeStyle.screenName = '#566370';
         eleThemeStyle.borderColor = '#F0F3F4';
         document.querySelector('body').style.backgroundColor = '#fff'
-    } else if (twitterTheme == 'dark'){
+    } else if (twitterTheme == 'dark') {
         eleThemeStyle.color = '#fff';
         eleThemeStyle.screenName = '#fff';
         eleThemeStyle.borderColor = '#000';
@@ -283,7 +273,9 @@ onMounted(() => {
 </script>
 
 <style  lang="scss">
-html, body, #app {
+html,
+body,
+#app {
     width: 100%;
     height: 100%;
     margin: 0;
@@ -336,18 +328,21 @@ html, body, #app {
 
     .content {
         margin-top: 19px;
+
         .nft-name {
             margin-bottom: 6px;
             font-weight: 500;
             font-size: 14px;
             color: #000;
         }
+
         .nft-desc {
             font-weight: 400;
             font-size: 14px;
             color: #787878;
             // margin-bottom: 18px;
         }
+
         .nft-date {
             font-weight: 500;
             font-size: 12px;
@@ -363,9 +358,11 @@ html, body, #app {
     &::-webkit-scrollbar {
         width: 2px;
     }
+
     &::-webkit-scrollbar-track {
         background: rgb(241, 241, 241);
     }
+
     &::-webkit-scrollbar-thumb {
         background: rgb(136, 136, 136);
         border-radius: 8px;
@@ -396,6 +393,7 @@ html, body, #app {
 
             .right {
                 flex: 1;
+
                 .top {
                     display: flex;
                     align-items: center;
@@ -405,6 +403,7 @@ html, body, #app {
                     .icon-nft-wrapper {
                         height: 24px;
                         margin-right: 8px;
+
                         .icon-nft {
                             width: 24px;
                             height: 24px;
@@ -413,12 +412,13 @@ html, body, #app {
                     }
 
                     .icon-nft-wrapper:hover {
-                        .preview-nft  {
+                        .preview-nft {
                             // display: block;
                         }
                     }
 
-                    .nick-name, .screen-name {
+                    .nick-name,
+                    .screen-name {
                         font-size: 15px;
                     }
 
@@ -448,7 +448,7 @@ html, body, #app {
 
     .icon-loading {
         width: 26px;
-        height: 26px;  
+        height: 26px;
         display: block;
         margin: 20px auto;
         animation: loading infinite 0.8s linear;
@@ -459,6 +459,7 @@ html, body, #app {
     0% {
         transform: rotate(0);
     }
+
     100% {
         transform: rotate(360deg);
     }

src/view/iframe/tool-box/card.vue

@@ -0,0 +1,469 @@
+<template>
+    <div class="denet-toolbox" :class="{ 'pre-view': pre_view }">
+        <div class="head">
+            <span></span>
+            <div v-show="state.show_btn && state.status == 'iframe'">
+                <img :src="require('@/assets/svg/icon-iframe-fixed.svg')" alt class="fixed" @click="clickFixed" />
+                <img :src="require('@/assets/svg/icon-iframe-full.svg')" alt class="full" @click="clickFull" />
+            </div>
+        </div>
+        <div class="content" v-if="pre_view">
+            <iframe :src="iframe_url" frameborder="0"></iframe>
+        </div>
+        <div class="content" v-else>
+            <iframe :src="state.iframe_url" v-show="state.status == 'iframe'" ref="dom_iframe" frameborder="0"
+                scrolling="yes" allow="camera *;microphone *"></iframe>
+            <!-- sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation allow-forms allow-modals allow-popups-to-escape-sandbox" -->
+            <!-- 网页错误 -->
+            <div class="state" v-show="state.status == '网页错误'">
+                <img :src="state.cover_url" alt="" class="cover" />
+                <div class="info">
+                    <img :src="require('@/assets/svg/icon-iframe-error.svg')" alt />
+                    <div>Oops, this link is invalid</div>
+                </div>
+            </div>
+
+            <!-- 加载 -->
+            <div class="state" v-show="state.status == '加载'">
+                <img :src="state.cover_url" alt="" class="cover" />
+                <div class="info">
+                    <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt class="icon-loading" />
+                </div>
+            </div>
+
+            <!-- 关闭 -->
+            <div class="state" v-show="state.status == '关闭'">
+
+            </div>
+            <!-- 固定右上角 -->
+            <div class="state" v-show="state.status == '固定右上角'">
+                <div class="info">
+                    <img :src="require('@/assets/svg/icon-iframe-pinned.svg')" alt />
+                    <div class="pinned">Pinned to the top right</div>
+                </div>
+            </div>
+        </div>
+        <!-- alert -->
+        <div class="alert" v-show="state.show_alert">
+            <div class="back" @click.stop="clickCancel"></div>
+            <div class="confirm">
+                <div class="check">
+                    <input :id="state.checkbox_id" type='checkbox' v-model="state.checkbox" />
+                    <label :for="state.checkbox_id">Don't remind</label>
+                </div>
+
+                <div class="title">Web Page Progress May Reset</div>
+                <div class="handle">
+                    <div class="cancel" @click.stop="clickCancel">Cancel</div>
+                    <div class="continue" @click.stop="clickContinue">Continue</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { getChromeStorage, setChromeStorage, defineProps, sendChromeTabMessage } from "@/uilts/chromeExtension";
+import { getPostDetail } from '@/http/redPacket.js'
+import { guid, getQueryString } from "@/uilts/help";
+import { onMounted, reactive, ref } from "vue";
+import { reSetBindTwtterId } from '@/http/help.js'
+let dom_iframe = ref(null)
+let state = reactive({
+    status: '', //
+    show_alert: false,
+    show_btn: false,
+    list: [],
+    checkbox: false,
+    checkbox_id: `denet-${guid()}`,
+    postId: '',
+    tweetId: '',
+    detail: {},
+    handle_type: '',
+    cover_url: require('@/assets/img/back-loading.png')
+})
+
+let dom = {}
+
+let props = defineProps({
+    pre_view: {
+        type: Boolean,
+        default: false,
+    },
+    iframe_url: {
+        type: String,
+        default: ''
+    }
+})
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    switch (req.actionType) {
+        // 事件传输
+        case 'Set_ToolBox_Fixed':
+            if (req.data.tweetId == state.tweetId && req.data.type == '关闭') {
+                state.show_btn = true
+                state.status = 'iframe'
+                state.iframe_url = req.data.iframe_url
+            }
+            break
+    }
+})
+
+
+const clickContinue = () => {
+    if (state.checkbox) {
+        setChromeStorage({ fullCheck: JSON.stringify({ fullCheck: 1 }) })
+    }
+    if (state.handle_type == '全屏') {
+        handleFull()
+    } else {
+        handleFixed()
+    }
+    state.show_alert = false
+}
+
+onMounted(() => {
+    if (props.pre_view) {
+        return
+    }
+    state.postId = getQueryString('postId')
+    state.tweetId = getQueryString('tweetId')
+
+    sendChromeTabMessage({
+        actionType: 'Get_ToolBox_Fixed_TweetId'
+    }, (res) => {
+        if (res == state.tweetId) {
+            state.status = '固定右上角'
+        } else {
+            state.status = '加载'
+            getDetail()
+        }
+    })
+
+})
+
+// detail函数
+const getDetail = () => {
+    let iframe = dom_iframe.value
+    iframe.onerror = () => {
+        state.status = '网页错误'
+    }
+    iframe.onload = () => {
+        if (state.status == '加载' || state.status == 'iframe') {
+            state.show_btn = true
+            state.status = 'iframe'
+        }
+    }
+
+    getPostDetail({
+        params: {
+            postId: state.postId
+        }
+    }).then((res) => {
+        if (res && res.code == 0) {
+            state.detail = JSON.parse(res.data.postBizData)
+            if (!res.data.srcContentId) {
+                reSetBindTwtterId({
+                    postId: state.postId,
+                    tweetId: state.tweetId
+                })
+            }
+            console.log('postBizData', state.detail)
+            // 加载iframe
+            if (state.detail.viewBgImagePath) {
+                state.cover_url = state.detail.viewBgImagePath
+            }
+            state.iframe_url = state.detail.convertUrl
+        } else {
+            state.status = '网页错误'
+        }
+    })
+}
+
+const clickCancel = () => {
+    state.show_alert = false
+}
+
+const clickFixed = () => {
+    state.handle_type = '固定右上角'
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 固定
+            handleFixed()
+        } else {
+            state.show_alert = true
+        }
+    })
+}
+
+// 固定
+const handleFull = () => {
+    if (state.status != 'iframe' || !state.iframe_url) {
+        return
+    }
+    // 切换状态
+    state.status = '固定右上角'
+    state.show_btn = false
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '全屏',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+    // 清除当前iframe src
+    state.iframe_url = ''
+}
+
+// 全屏
+const handleFixed = () => {
+    // 切换状态
+    state.show_btn = false
+    state.status = '固定右上角'
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '固定右上角',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId
+        }
+    })
+    // 清除当前iframe src
+    state.iframe_url = ''
+}
+
+const clickFull = () => {
+    state.handle_type = '全屏'
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 全屏
+            handleFull()
+        } else {
+            state.show_alert = true
+        }
+    })
+}
+
+</script>
+
+<style lang="scss" >
+.pre-view {
+    pointer-events: none;
+    cursor: default;
+}
+
+.denet-toolbox {
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+
+    .alert {
+        text-align: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .back {
+            background: #000000;
+            opacity: 0.8;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            cursor: auto;
+        }
+
+        .confirm {
+            position: absolute;
+            width: 355px;
+            height: 180px;
+            background: #FFFFFF;
+            border-radius: 20px;
+            top: 173px;
+            left: 50%;
+            margin-left: -180px;
+
+            .title {
+                font-weight: 600;
+                font-size: 18px;
+                color: #000000;
+                margin-bottom: 34px;
+            }
+
+            .check {
+                color: #899099;
+                font-weight: 400;
+                font-size: 14px;
+                margin: 12px 15px 32px 0;
+                text-align: right;
+                align-content: center;
+                justify-content: flex-end;
+                display: flex;
+                line-height: 17px;
+
+                input {
+                    margin-right: 8px;
+                }
+
+                label {
+                    line-height: 19px;
+                }
+
+            }
+
+            .handle {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                div {
+                    font-weight: 600;
+                    font-size: 16px;
+                    width: 156px;
+                    height: 47px;
+                    line-height: 47px;
+                    cursor: pointer;
+                    border-radius: 1000px;
+                    user-select: none;
+                }
+
+                .cancel {
+                    color: #000000;
+                    background: rgba(56, 154, 255, 0.01);
+                    border: 1px solid #E6E6E6;
+                }
+
+                .continue {
+                    background: #1D9BF0;
+                    font-weight: 600;
+                    margin-left: 11px;
+                    color: #FFFFFF;
+                }
+            }
+        }
+    }
+
+    .head {
+        width: 100%;
+        height: 40px;
+        background: #373737;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        div {
+            display: flex;
+            justify-content: center;
+        }
+
+        span {
+            color: #FFFFFF;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            margin-left: 16px;
+        }
+
+        img {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+
+        }
+
+        .full {
+            margin-right: 16px;
+        }
+
+        .fixed {
+            margin-right: 20px;
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: calc(100% - 40px);
+        background: #686868;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        iframe {
+            background: #fff;
+            width: 100%;
+            height: 100%;
+            border: medium none;
+        }
+
+        .state {
+            text-align: center;
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .cover {
+                width: 100%;
+                height: 100%;
+                background: #000000;
+                opacity: 0.6;
+            }
+
+            .icon-loading {
+                animation: loading 1s infinite linear;
+            }
+
+            .info {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                z-index: 1;
+                display: flex;
+                flex-wrap: wrap;
+                flex-direction: column;
+                justify-content: center;
+
+                img {
+                    margin-bottom: 14px;
+                }
+
+
+
+                div {
+                    margin-bottom: 40px;
+                    color: #fff;
+                    text-align: center;
+                    font-weight: 500;
+                    font-size: 22px;
+                }
+
+                .pinned {
+                    color: #8E8E8E;
+                }
+            }
+
+        }
+
+    }
+}
+
+@keyframes loading {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>

src/view/iframe/tool-box/full.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="denet-toolbox">
+        <div class="head">
+            <span></span>
+            <div>
+                <!-- 缩小 -->
+                <img v-if="state.status == '全屏'" :src="require('@/assets/svg/icon-iframe-small.svg')" alt class="full"
+                    @click="clickFull" />
+                <img v-else :src="require('@/assets/svg/icon-iframe-full.svg')" alt class="full" @click="clickFull" />
+                <!-- 关闭 -->
+                <img :src="require('@/assets/svg/icon-iframe-close.svg')" alt class="fixed" @click="clickClose" />
+            </div>
+        </div>
+        <div class="content">
+            <iframe :src="state.iframe_url" frameborder="0" allow="camera *;microphone *"></iframe>
+        </div>
+    </div>
+</template>
+<script setup>
+import { reactive } from "vue";
+import { sendChromeTabMessage } from "@/uilts/chromeExtension";
+
+let state = reactive({
+    status: '固定右上角', // 全屏
+    iframe_url: '',
+    tweetId: ''
+})
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+
+    switch (req.actionType) {
+        // 事件传输
+        case 'Set_ToolBox_Fixed':
+            if (req.data.type == '全屏' || req.data.type == '固定右上角') {
+                state.status = req.data.type
+                if (state.tweetId != req.data.tweetId) {
+                    state.tweetId = req.data.tweetId
+                }
+                if (state.iframe_url != req.data.iframe_url) {
+                    state.iframe_url = req.data.iframe_url
+                }
+            }
+
+            break
+    }
+})
+
+
+const clickFull = () => {
+    if (state.status == '固定右上角') {
+        state.status = '全屏'
+        changeFull()
+    } else {
+        state.status = '固定右上角'
+        changeFixed()
+    }
+}
+
+const changeFull = () => {
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '全屏',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+}
+
+const changeFixed = () => {
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '固定右上角',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+}
+
+const clickClose = () => {
+    sendClose()
+
+}
+const sendClose = () => {
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '关闭',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+    state.iframe_url = ''
+    state.tweetId = ''
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.denet-toolbox {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
+    border-radius: 12px;
+    overflow: hidden;
+
+    .head {
+        width: 100%;
+        height: 40px;
+        background: #373737;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+            color: #FFFFFF;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            margin-left: 16px;
+        }
+
+        div {
+            display: flex;
+            justify-content: center;
+        }
+
+        svg {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+
+        }
+
+        .full {
+            margin-right: 16px;
+        }
+
+        .fixed {
+            margin-right: 20px;
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: calc(100% - 40px);
+        background: #686868;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        iframe {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

src/view/iframe/tool-box/index.vue

@@ -0,0 +1,24 @@
+<template>
+    <v-full v-if="page_type == 'full'"></v-full>
+    <v-card v-if="page_type == 'card'"></v-card>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import VFull from '@/view/iframe/tool-box/full.vue'
+import VCard from '@/view/iframe/tool-box/card.vue'
+import { getQueryString } from "@/uilts/help";
+let page_type = ref('')
+onMounted(() => {
+    page_type.value = getQueryString('page_type') || ''
+})
+</script>
+<style lang="scss">
+html,
+body,
+#app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>

src/view/popup/components/tabbar.vue

@@ -1,27 +1,18 @@
 <template>
     <div class="tab-bar-wrappeer">
-        <template
-            v-for="(item, index) in tabbarData"
-            :key="index">
-            <div class="tab-item" 
-                 v-if="item.path != '/NFT' || item.path == '/NFT' && showNFTTab"
-                 @click="tabbarHandler(item, index)">
-                    <red-dot class="red-dots"
-                        v-if="unReadCountTask > 0 && item.path == '/message' && currentTab.path != '/message'"
-                        ></red-dot>
-                    <img
-                        :src="
-                            index == currentTab.index
-                                ? item.iconActive
-                                : item.iconInActive
-                        "
-                    />
-                    <div
-                        class="text"
-                        :class="{ 'active-tab': index == currentTab.index }"
-                    >
-                        {{ item.name }}
-                    </div>
+        <template v-for="(item, index) in tabbarData" :key="index">
+            <div class="tab-item" v-if="item.path != '/NFT' || item.path == '/NFT' && showNFTTab"
+                @click="tabbarHandler(item, index)">
+                <red-dot class="red-dots"
+                    v-if="unReadCountTask > 0 && item.path == '/message' && currentTab.path != '/message'"></red-dot>
+                <img :src="
+                    index == currentTab.index
+                        ? item.iconActive
+                        : item.iconInActive
+                " />
+                <div class="text" :class="{ 'active-tab': index == currentTab.index }">
+                    {{ item.name }}
+                </div>
             </div>
         </template>
     </div>
@@ -131,7 +122,7 @@ const setActiveTab = () => {
 };
 
 const getNFTListMine = (params = {}) => {
-    if(!props.userInfo.accessToken && !params.accessToken) return;
+    if (!props.userInfo.accessToken && !params.accessToken) return;
     nftListMine({
         params: NFTReqParams.params,
     }).then((res) => {
@@ -145,15 +136,17 @@ const getNFTListMine = (params = {}) => {
 
 
 const setMessageCount = () => {
-    if(!props.userInfo.accessToken) return;
-    getAllMessageInfo({params: {
-    }}).then(res => {
-        if(res.code == 0) {
-            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+    if (!props.userInfo.accessToken) return;
+    getAllMessageInfo({
+        params: {
+        }
+    }).then(res => {
+        if (res.code == 0) {
+            let { unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0 } = res.data;
             unReadCountTask.value = unReadCountTaskLuckdrop;
-            if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
-                setBadgeInfo({data: {text}});
+            if (unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
+                setBadgeInfo({ data: { text } });
             } else {
                 hideBadge();
             }
@@ -167,7 +160,7 @@ const onMessage = () => {
 }
 
 const msgListener = (req, sender, sendResponse) => {
-    sendResponse('ok');
+    ;
     switch (req.actionType) {
         case 'CONTENT_POPUP_PAGE_SHOW':
             init();
@@ -227,27 +220,27 @@ onBeforeUnmount(() => {
 
     cursor: pointer;
 
-        .tab-item {
-            flex: 1;
-            text-align: center;
-            position: relative;
+    .tab-item {
+        flex: 1;
+        text-align: center;
+        position: relative;
 
-            .text {
-                font-size: 12px;
-                color: #c0c0c0;
-            }
+        .text {
+            font-size: 12px;
+            color: #c0c0c0;
+        }
 
-            .active-tab {
-                color: #1d9bf0 !important;
-                font-weight: 500;
-            }
+        .active-tab {
+            color: #1d9bf0 !important;
+            font-weight: 500;
+        }
 
-            .red-dots {
-                position: absolute;
-                right: 32%;
-                top: 0px;
-            }
+        .red-dots {
+            position: absolute;
+            right: 32%;
+            top: 0px;
         }
-    
+    }
+
 }
 </style>

src/view/popup/currency-detail.vue

@@ -14,7 +14,7 @@
         :src="currencyInfo.iconPath"/>
       <div class="amount">
         <div class="balance"
-             :class="{'direction-column': (currencyInfo.totalBalance.length + currencyInfo.tokenSymbol.length) > 15}">
+            :class="{'direction-column': (currencyInfo.totalBalance.length + currencyInfo.tokenSymbol.length) > 15}">
           <a-tooltip :title="currencyInfo.totalBalance">
               {{ getBit(currencyInfo.totalBalance) }}
           </a-tooltip> 
@@ -22,7 +22,7 @@
             &nbsp;&nbsp;
           </template>
           <span class="symbol">
-             {{currencyInfo.tokenSymbol}}
+            {{currencyInfo.tokenSymbol}}
           </span>
         </div>
         <div class="final">
@@ -34,22 +34,18 @@
     </div>
     <div class="bottom">
       <template v-if="showSendBtn">
-        <div class="btn send-btn" @click="showSendGiveawayDialog(currencyInfo)">
+        <div class="btn send-btn" v-if="enableRecharge == 1" @click="showSendGiveawayDialog(currencyInfo)">
           <img :src="require('@/assets/svg/icon-send-giveaway.svg')" /> 
           Send Giveaway
         </div>
         <div class="btn-wrapper">
-          <div class="button "
-            v-if="currencyInfo.currencyCode != 'USD'"
-            @click="clickDeposit">Deposit</div>
-          <div class="button" @click="clickWithdraw">Withdrawal</div>
+          <div class="button left" v-if="enableRecharge == 1" @click="clickDeposit">Deposit</div>
+          <div class="button" v-if="enableWithdraw == 1" @click="clickWithdraw">Withdrawal</div>
         </div>
       </template>
       <template v-else>
-        <div class="btn deposit-btn"
-          v-if="currencyInfo.currencyCode != 'USD'"
-          @click="clickDeposit">Deposit</div>
-        <div class="btn withdrawal-btn" @click="clickWithdraw">Withdrawal</div>
+        <div class="btn deposit-btn" v-if="enableRecharge == 1" @click="clickDeposit">Deposit</div>
+        <div class="btn withdrawal-btn" v-if="enableWithdraw == 1" @click="clickWithdraw">Withdrawal</div>
       </template>
     </div>
 
@@ -63,6 +59,14 @@
         </div>
         <div class="selectBg" @click="showCurrencySelect = false"></div>
     </template>
+    <input-action-sheet 
+      :visible="showDepositInput"
+      title="Enter the USD amount to be deposited"
+      :desc="depositDesc"
+      position="absolute"
+      @onInput="onDepositAmountInput"
+      @cancel="cancelDeposit"
+      @confirm="confirmDeposit"></input-action-sheet>
   </div>
 </template>
 
@@ -72,12 +76,14 @@ import router from "@/router/popup.js";
 import Report from "@/log-center/log";
 import { getStorage } from "@/uilts/help";
 
-import { getCurrencyInfoBySymbol } from "@/http/publishApi";
+import { getCurrencyInfoBySymbol, syncChainTokenRechargeRecord } from "@/http/publishApi";
 import {setChromeStorage} from "@/uilts/chromeExtension"
 
 import VHead from '@/view/popup/components/head.vue'
 import currencySelect from "@/view/components/currency-select.vue";
+import inputActionSheet from "@/view/components/input-action-sheet.vue";
 import { getBit } from "@/uilts/help";
+import { payCalcFee } from "@/http/pay";
 
 let currenciesData = ref([]);
 let currencyInfo = ref({
@@ -90,15 +96,35 @@ let currencyOpertionType = '';
 
 let showSendBtn = ref(true);
 
+let enableRecharge = ref(1);
+let enableWithdraw = ref(1);
+
+let showDepositInput = ref(false);
+
+let reqCalcIng = false;
+let depositDesc = ref('');
+let finalAmountData = ref({});
+
 
 
 const selectCurrency = (params) => {
     showCurrencySelect.value = false;
+    let {enableRecharge, enableWithdraw} = params;
+
     if(currencyOpertionType == 'WITHDRAW') {
+      if(enableWithdraw != 1) {
+        return;
+      }
       withdrawHandle(params);
     } else if(currencyOpertionType == 'DEPOSIT') {
+      if(enableRecharge != 1) {
+        return;
+      }
       depositHandle(params);
     } else if(currencyOpertionType == 'SEND') {
+      if(enableRecharge != 1) {
+        return;
+      }
       showSendGiveawayDialog(params);
     }
 }
@@ -122,18 +148,20 @@ const clickWithdraw = () => {
 
 const withdrawHandle = (_params) => {
   withdraw_info.chainInfo = _params.chainInfo;
+  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 || ''
+  withdraw_info.currency_code = _params.currencyCode
+  withdraw_info.icon_token = _params.iconPath || ''
+  withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')
+
   if (_params.currencyCode == 'USD') {
       withdraw_info.currency_code = _params.currencyCode
+      withdraw_info.paypal.amount_value = _params.balance
       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')
   }
@@ -154,10 +182,32 @@ const clickDeposit = () => {
       showCurrencySelect.value = true;
       currencyOpertionType = "DEPOSIT";
     } else if(currenciesData.value.length == 1){
-      depositHandle(currenciesData.value[0]);
+      let currencyInfo = currenciesData.value[0];
+      if(currencyInfo.currencyCode == 'USD') {
+        // 法币充值
+        showDepositInput.value = true;
+        setDepositDesc();
+          
+      } else {
+        depositHandle(currencyInfo);
+      }
     }
 }
 
+const setDepositDesc = async () => {
+  let res = await payCalcFee({
+      params: {
+          amountValue: 0,
+          currencyCode: currencyInfo.value.currencyCode,
+          payChannel: 'ach',
+      },
+  });
+  if(res.code == 0) {
+    let {feeDesc} = res.data;
+    depositDesc.value = `${feeDesc}`;
+  }
+}
+
 const depositHandle = (_params) => {
   top_up_info.token = _params.currencyName || ''
   top_up_info.token_chain = _params.tokenChain 
@@ -172,22 +222,37 @@ const depositHandle = (_params) => {
   router.push('/top-up/info');
 };
 
+
+const asyncTokenRechRecord = (currencyCode = '', cb) => {
+    syncChainTokenRechargeRecord({
+        params: {
+            currencyCode: currencyCode
+        }
+    }).then(res => {
+      cb && cb(res.data)
+    }).catch((err) => {
+      cb && cb()
+    })
+}
+
 const onRefresh = () => {
-  getCurrencyInfoBySymbol({
-    params: {
-      symbol: currencyInfo.value.tokenSymbol
-    }
-  }).then(res => {
-    if(res.code == 0) {
-      if(res.data && res.data.currencyCategories && res.data.currencyCategories.length) {
-        let data = res.data.currencyCategories[0].data;
-        if(data.length) {
-          let {totalBalance = '', totalUsdEstimateBalance = ''} = data[0] || {};
-          currencyInfo.value.totalBalance = totalBalance;
-          currencyInfo.value.totalUsdEstimateBalance = totalUsdEstimateBalance;
+  asyncTokenRechRecord('', () => {
+    getCurrencyInfoBySymbol({
+      params: {
+        symbol: currencyInfo.value.tokenSymbol
+      }
+    }).then(res => {
+      if(res.code == 0) {
+        if(res.data && res.data.currencyCategories && res.data.currencyCategories.length) {
+          let data = res.data.currencyCategories[0].data;
+          if(data.length) {
+            let {totalBalance = '', totalUsdEstimateBalance = ''} = data[0] || {};
+            currencyInfo.value.totalBalance = totalBalance;
+            currencyInfo.value.totalUsdEstimateBalance = totalUsdEstimateBalance;
+          }
         }
       }
-    }
+    });
   })
 };
 
@@ -212,6 +277,54 @@ const setLocalSelectCurrencyInfo = (params = {}) => {
     setChromeStorage({ selectCurrencyInfo : JSON.stringify(params)})    
 }
 
+const cancelDeposit = () => {
+  showDepositInput.value = false;
+}
+
+const confirmDeposit = (params) => {
+  if(reqCalcIng) {
+    return;
+  }
+
+  showDepositInput.value = false;
+  depositDesc.value = '';
+
+  let achPayInfo = {
+      amountValue: finalAmountData.value.finalAmountValue
+  };
+  let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
+  setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+
+  chrome.tabs.create({
+    url: guideUrl
+  });
+}
+
+const onDepositAmountInput = async (params = {}) => {
+  let {inputVal} = params;
+  reqCalcIng = true;
+  if(inputVal === '') {
+    inputVal = 0;
+  }
+  let res = await payCalcFee({
+      params: {
+          amountValue: inputVal,
+          currencyCode: currencyInfo.value.currencyCode,
+          payChannel: 'ach',
+      },
+  });
+  reqCalcIng = false;
+  if(res.code == 0) {
+    let {feeAmountValue, feeDesc} = res.data;
+    finalAmountData.value = res.data;
+    if(inputVal === 0) {
+      depositDesc.value = `${feeDesc}`;
+    } else {
+      depositDesc.value = `Charge Fee：${feeAmountValue} USD（${feeDesc}）`;
+    }
+  }
+}
+
 onMounted(() => {
     let {params = '{}'} = router.currentRoute.value.query;
 
@@ -225,7 +338,10 @@ onMounted(() => {
         totalBalance,
         totalUsdEstimateBalance
       };
-      console.log(currencyInfo.value )
+      if(currencies.length == 1) {
+        enableRecharge.value = currencyInfo.value.enableRecharge;
+        enableWithdraw.value = currencyInfo.value.enableWithdraw;
+      }
     } 
     if(window.location.pathname.indexOf('/home.html') > -1) {
       showSendBtn.value = false;
@@ -233,6 +349,7 @@ onMounted(() => {
       showSendBtn.value = true;
     }
 })
+
 </script>
 
 
@@ -340,7 +457,7 @@ onMounted(() => {
       justify-content: space-between;
 
       .button {
-        width: 163px;
+        flex: 1;
         height: 50px;
         border: 1px solid #d7e8f4;
         display: flex;
@@ -353,6 +470,10 @@ onMounted(() => {
         color: #1D9BF0;
         cursor: pointer;
       }
+
+      .left {
+        margin-right: 20px;
+      }
     }
   }
 

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

@@ -4,15 +4,11 @@
     <!-- login -->
     <popup-login v-if="!loginStatus" @loginAction="loginAction" />
     <template v-else>
-      <top-bar  :userInfo="userInfo" 
-                :bgColor="bgColor"
-                :color="color"
-                :boxShadow="boxShadow"></top-bar>
+      <top-bar :userInfo="userInfo" :bgColor="bgColor" :color="color" :boxShadow="boxShadow"></top-bar>
       <div class="tabbar-content">
         <router-view></router-view>
       </div>
-      <tabbar :userInfo="userInfo"  
-              @tabbarClick = "onTabbarHandler"></tabbar>
+      <tabbar :userInfo="userInfo" @tabbarClick="onTabbarHandler"></tabbar>
     </template>
   </div>
 </template>
@@ -26,15 +22,15 @@ import router from "@/router/popup.js";
 
 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 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 color = ref('#fff');
 let boxShadow = ref('none');
 
-let loginStatus = ref('default'); 
+let loginStatus = ref('default');
 
 const getUserInfo = (cb) => {
   getChromeStorage("userInfo", (res) => {
@@ -50,7 +46,7 @@ const getUserInfo = (cb) => {
 };
 
 const onTabbarHandler = (params) => {
-  if(params.path == '/') {
+  if (params.path == '/') {
     bgColor.value = '#1b92e2';
     boxShadow.value = 'none';
     color.value = '#fff'
@@ -58,7 +54,7 @@ const onTabbarHandler = (params) => {
     bgColor.value = '#fff';
     color.value = '#000';
 
-    if(params.path != '/more') {
+    if (params.path != '/more') {
       boxShadow.value = '0px 0.5px 0px 0px #D1D9DD';
     } else {
       boxShadow.value = 'none';
@@ -67,18 +63,18 @@ const onTabbarHandler = (params) => {
 }
 
 const loginAction = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetLogin,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.loginButton
-    });
-    login();
+  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);
-    });
+  callEventPageMethod("POPUP_LOGIN", "", function (response) {
+    console.log("res", response);
+  });
 }
 
 
@@ -86,22 +82,22 @@ const login = () => {
  * sendMessage
  */
 const callEventPageMethod = (actionType, data, callback) => {
-    chrome.runtime.sendMessage(
-        { 
-            actionType: actionType, 
-            data: data 
-        },
-        function (response) {
-            if (typeof callback === "function") callback(response);
-        }
-    );
+  chrome.runtime.sendMessage(
+    {
+      actionType: actionType,
+      data: data
+    },
+    function (response) {
+      if (typeof callback === "function") callback(response);
+    }
+  );
 };
 
 const onPageVisbile = () => {
   document.addEventListener('visibilitychange', function () {
     let isHidden = document.hidden;
     if (!isHidden) {
-      if(!userInfo.value.accessToken) {
+      if (!userInfo.value.accessToken) {
         setTimeout(() => {
           getUserInfo();
         }, 500)
@@ -115,18 +111,18 @@ const onRuntimeMsg = () => {
 }
 
 const msgListener = (req, sender, sendResponse) => {
-  sendResponse('ok');
+  ;
   switch (req.actionType) {
     case 'BG_LOGIN_SET_USERINFO_CB':
-      if(!userInfo.value.accessToken) {
+      if (!userInfo.value.accessToken) {
         setTimeout(() => {
           getUserInfo();
         }, 800)
       }
       break;
     case 'CONTENT_POPUP_PAGE_SHOW':
-        init();
-        break;
+      init();
+      break;
   }
 }
 

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

@@ -40,13 +40,12 @@
                 <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,
-                        'custom-bold': item.rewardType === RewardType.custom
-                      }"
-                    >
+                      'align-content':
+                        (item.type == 2 ||
+                          (item.type == 1 && item.status == 1)) &&
+                        item?.amount?.length + item?.currencySymbol?.length > 12,
+                      'custom-bold': item.rewardType === RewardType.custom
+                    }">
                       <!-- 收到的 -->
                       <template v-if="item.type == 1">
                         <!-- 进行中-->
@@ -63,15 +62,15 @@
                             </span>
                             <div class="coin-type-wrapper">
                               <span class="coin-type">{{
-                                item.currencySymbol || ""
-                                }}</span>
+                                  item.currencySymbol || ""
+                              }}</span>
                               <img :src="item.currencyIconPath" alt="" />
                             </div>
                           </template>
 
                           <!-- 已中奖-通用型奖品展示 -->
                           <template v-else>
-                            <span class="blance cuntom-prize">{{item.customizedReward}}</span>
+                            <span class="blance cuntom-prize">{{ item.customizedReward }}</span>
                           </template>
                         </template>
                         <!-- 已过期 -->
@@ -90,18 +89,18 @@
                           </span>
                           <div class="coin-type-wrapper">
                             <span class="coin-type">{{
-                              item.currencySymbol || ""
-                              }}</span>
+                                item.currencySymbol || ""
+                            }}</span>
                             <img :src="item.currencyIconPath" alt="" />
                           </div>
                         </template>
                         <!-- 已中奖-通用型奖品展示 -->
                         <template v-else>
                           <span class="blance cuntom-prize">
-                            {{item.customizedReward || ''}}<span class="cuntom-prize-icon">X</span>
-                            <span class="cuntom-prize-total">{{item?.postTaskLuckdrop?.totalCount || ''}}</span>
+                            {{ item.customizedReward || '' }}<span class="cuntom-prize-icon">X</span>
+                            <span class="cuntom-prize-total">{{ item?.postTaskLuckdrop?.totalCount || '' }}</span>
                           </span>
-                          
+
                         </template>
                       </template>
                       <template v-else-if="item.type == 3">
@@ -122,14 +121,14 @@
                             </span>
                             <div class="coin-type-wrapper">
                               <span class="coin-type">{{
-                                item.currencySymbol || ""
-                                }}</span>
+                                  item.currencySymbol || ""
+                              }}</span>
                               <img :src="item.currencyIconPath" alt="" />
                             </div>
                           </template>
                           <!-- 已中奖-通用型奖品展示 -->
                           <template v-else>
-                            <span class="blance cuntom-prize">{{item.customizedReward}}</span>
+                            <span class="blance cuntom-prize">{{ item.customizedReward }}</span>
                           </template>
 
                         </template>
@@ -154,7 +153,7 @@
                         </template>
                         <template v-else>
                           {{ item.postTaskLuckdrop.receivedCount }}/{{
-                          item.postTaskLuckdrop.totalCount
+                              item.postTaskLuckdrop.totalCount
                           }}
                         </template>
                       </template>
@@ -166,24 +165,25 @@
                             (Time expired)
                           </template>
                           <template v-if="item.status == 3">
-                            {{item.srcContentId ? '(Termination)' : 'Termination'}}
+                            {{ item.srcContentId ? '(Termination)' : 'Termination' }}
                           </template>
                           <template v-if="item.status == 2 || item.status == 3 && item.srcContentId">
                             {{ item.postTaskLuckdrop.receivedCount }}/{{
-                            item.postTaskLuckdrop.totalCount
+                                item.postTaskLuckdrop.totalCount
                             }}
                           </template>
                         </template>
                         <!-- 抽奖红包 -->
                         <template v-else>
-                            <!-- 自定义奖品类型 结束时显示 Complete -->
-                            {{ item.rewardType === RewardType.custom && item.status == 2 ? 'Complete' : 'Termination' }}
+                          <!-- 自定义奖品类型 结束时显示 Complete -->
+                          {{ item.rewardType === RewardType.custom && item.status == 2 ? 'Complete' : 'Termination' }}
                         </template>
                       </template>
                       <!-- 红包提前终止/退款（进行中）显示-->
                       <template v-if="item.status == 4">
                         {{ item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 1 ? 'Terminating' : 'Open in '
-                        + item.downTime || '' }}
+                            + item.downTime || ''
+                        }}
                       </template>
 
                       <!-- 进行中或者未发送成功时显示 
@@ -302,16 +302,16 @@ const getLuckdropRecordsList = () => {
 };
 
 const getCurrentList = () => {
-    getMineLuckdropRecords({
-        params: {
-            pageNum: 1,
-            pageSize: giveList.value.length || 20,
-        }
-    }).then((res) => {
-        if (res.data && res.data.length) {
-            giveList.value = res.data;
-        }
-    })
+  getMineLuckdropRecords({
+    params: {
+      pageNum: 1,
+      pageSize: giveList.value.length || 20,
+    }
+  }).then((res) => {
+    if (res.data && res.data.length) {
+      giveList.value = res.data;
+    }
+  })
 }
 
 /**
@@ -424,29 +424,31 @@ const modalConfirm = () => {
   terminaTask = {};
 };
 
-const readAllMsg = ({msgType}, cb) => {
-    readAllMsgByType({
-        params: {
-            msgType
-        }
-    }).then(res => {
-        cb && cb();
-    })
+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();
-            }
-        }
-    });
+  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();
+      }
+    }
+  });
 }
 
 
@@ -467,50 +469,50 @@ const init = () => {
 
   setMessageCount();
   setTimeout(() => {
-      isReadMsg.value = false;
-      readAllMsg({msgType: 1}, () => {
-          setMessageCount();
-      });
+    isReadMsg.value = false;
+    readAllMsg({ msgType: 1 }, () => {
+      setMessageCount();
+    });
   }, 2000);
 }
 
 const onMessage = () => {
-    chrome.runtime.onMessage.addListener(msgListener)
+  chrome.runtime.onMessage.addListener(msgListener)
 }
 
 const msgListener = (req, sender, sendResponse) => {
-  sendResponse('ok');
+  ;
   switch (req.actionType) {
-      case 'CONTENT_POPUP_PAGE_SHOW':
-          init();
-          break;
+    case 'CONTENT_POPUP_PAGE_SHOW':
+      init();
+      break;
   }
 }
 
 // 倒计时
 const downTimeBegin = () => {
-    let list = giveList.value || []
-    let ifDown = false
-    list.forEach((item) => {
-        if (item.endTimestamp) {
-            let time = moment(new Date().getTime())
-            let endTime = moment(item.endTimestamp + 5000)
-            let downTime = (endTime - time) || 0
-            if (downTime > 0) {
-                item.downTime = formatSecondsAsDaysOrTime(downTime / 1000, false);
-                ifDown = true;
-            }
-            if (item && item.downTime && item.downTime == '00:00:00') {
-                getCurrentList()
-            }
-        }
-    })
-
-    if (ifDown) {
-        setTimeout(() => {
-            downTimeBegin()
-        }, 1000)
+  let list = giveList.value || []
+  let ifDown = false
+  list.forEach((item) => {
+    if (item.endTimestamp) {
+      let time = moment(new Date().getTime())
+      let endTime = moment(item.endTimestamp + 5000)
+      let downTime = (endTime - time) || 0
+      if (downTime > 0) {
+        item.downTime = formatSecondsAsDaysOrTime(downTime / 1000, false);
+        ifDown = true;
+      }
+      if (item && item.downTime && item.downTime == '00:00:00') {
+        getCurrentList()
+      }
     }
+  })
+
+  if (ifDown) {
+    setTimeout(() => {
+      downTimeBegin()
+    }, 1000)
+  }
 }
 
 onMounted(() => {
@@ -529,6 +531,7 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   margin-top: 1px;
+
   .tab-bar {
     display: flex;
     align-items: center;
@@ -558,6 +561,7 @@ onBeforeUnmount(() => {
   .tab-content {
     height: 100%;
     overflow-y: auto;
+
     .list-wrapper {
       min-height: 202px;
 
@@ -607,11 +611,11 @@ onBeforeUnmount(() => {
             }
 
             .icon-mark-give {
-                position: absolute;
-                right: -2px;
-                top: 31px;
-                width: 16px;
-                height: 16px;
+              position: absolute;
+              right: -2px;
+              top: 31px;
+              width: 16px;
+              height: 16px;
             }
           }
 
@@ -647,6 +651,7 @@ onBeforeUnmount(() => {
                 display: flex;
                 align-items: flex-end;
                 flex-direction: column;
+
                 .bold {
                   font-weight: 500;
                   font-size: 13px;
@@ -756,10 +761,12 @@ onBeforeUnmount(() => {
               }
             }
           }
+
           .info-center {
             align-items: center;
           }
         }
+
         .cell-center {
           align-items: center;
         }

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

@@ -1,26 +1,16 @@
 <template>
-  <div class="nft-page-wrapper"
-    ref="pageWrapperDom"
-    @scroll="pageScroll" >
+  <div class="nft-page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
     <div class="content" ref="pageListDom">
-      <div class="item" 
-          v-for="(item, index) in listData" 
-          :key="index" 
-          @click="clickNFT(item)">
+      <div class="item" v-for="(item, index) in listData" :key="index" @click="clickNFT(item)">
         <img :src="item.imagePath" class="img">
-        <div class="name">{{item.nftItemName}}</div>
+        <div class="name">{{ item.nftItemName }}</div>
       </div>
     </div>
-    <join-group-finish-dialog 
-        :dialogVisible="joinGroupFinishShow"
-        :position="'absolute'" 
-        :contentStyle="{
-          width: '315px',
-        }"
-        :iconStyle="{width: '80px',  marginTop: '26px'}"
-        :descStyle="{marginTop: '24px', marginBottom: '25px', fontSize: '19px'}"
-        @confirm="confirmFinish">
-        </join-group-finish-dialog>
+    <join-group-finish-dialog :dialogVisible="joinGroupFinishShow" :position="'absolute'" :contentStyle="{
+      width: '315px',
+    }" :iconStyle="{ width: '80px', marginTop: '26px' }"
+      :descStyle="{ marginTop: '24px', marginBottom: '25px', fontSize: '19px' }" @confirm="confirmFinish">
+    </join-group-finish-dialog>
   </div>
 </template>
 
@@ -28,7 +18,7 @@
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import router from "@/router/popup.js";
 
-import {nftListMine} from "@/http/nft.js";
+import { nftListMine } from "@/http/nft.js";
 
 import joinGroupFinishDialog from "@/view/components/join-group-finish-dialog.vue";
 
@@ -90,26 +80,26 @@ const pageScroll = (e) => {
 
 
 const onMessage = () => {
-    chrome.runtime.onMessage.addListener(msgListener);
+  chrome.runtime.onMessage.addListener(msgListener);
 }
 
 const msgListener = (req, sender, sendResponse) => {
-    sendResponse('ok');
-    switch (req.actionType) {
-        case 'CONTENT_POPUP_PAGE_SHOW':
-            getNFTListMine();
-            showJoinFinishHandler(req.data);
-            break;
-    }
+  ;
+  switch (req.actionType) {
+    case 'CONTENT_POPUP_PAGE_SHOW':
+      getNFTListMine();
+      showJoinFinishHandler(req.data);
+      break;
+  }
 }
 
 const showJoinFinishHandler = (params) => {
-    let { path, showJoinGroupFinish} = params;
-    if(path == '/NFT' && showJoinGroupFinish) {
-      joinGroupFinishShow.value = true;
-    } else if(joinGroupFinishShow.value){
-      joinGroupFinishShow.value = false;
-    }
+  let { path, showJoinGroupFinish } = params;
+  if (path == '/NFT' && showJoinGroupFinish) {
+    joinGroupFinishShow.value = true;
+  } else if (joinGroupFinishShow.value) {
+    joinGroupFinishShow.value = false;
+  }
 }
 
 const confirmFinish = () => {
@@ -122,44 +112,44 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-    chrome.runtime.onMessage.removeListener(msgListener);
+  chrome.runtime.onMessage.removeListener(msgListener);
 })
 </script>
 
 
 <style scoped lang="scss">
-    .nft-page-wrapper {
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-
-      .content {
+.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%;
-        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;
-            margin-top: 6px;
-          }
-        }
+        border-radius: 5px;
+        height: 104px;
+        object-fit: cover;
+      }
+
+      .name {
+        font-weight: 400;
+        font-size: 12px;
+        margin-top: 6px;
       }
     }
+  }
+}
 </style>

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

@@ -8,7 +8,7 @@
             </div>
             <div class="amount-wrapper">
                 <div class="amount">
-                    <a-tooltip :title="'$'+canWithdrawBalance">
+                    <a-tooltip :title="'$' + canWithdrawBalance">
                         ${{ getBit(canWithdrawBalance) }}
                     </a-tooltip>
                 </div>
@@ -19,10 +19,8 @@
                         <img :src="require('@/assets/svg/icon-home-list.svg')" />
                     </div>
 
-                    <img :src="require('@/assets/svg/icon-home-refresh.svg')" 
-                        class="icon"
-                        :class="{ transform_rotate: iconRotate }"
-                        @click="refreshList"  />
+                    <img :src="require('@/assets/svg/icon-home-refresh.svg')" class="icon"
+                        :class="{ transform_rotate: iconRotate }" @click="refreshList" />
                 </div>
             </div>
         </div>
@@ -32,7 +30,6 @@
             style="height: calc(100% - 103px);"
             ref="currencyListDom"
             :showRefresh="false"
-            :page="'top-up'"
             @selectCurrency="selectCurrency"></currency-list>
     </div>
 </template>
@@ -60,7 +57,7 @@ var moment = require("moment");
 
 let userInfo = ref({});
 let canWithdrawBalance = ref(0);
-withdraw_info.paypal.amount_value = canWithdrawBalance
+withdraw_info.paypal.amount_value = 0;
 withdraw_info.balance = 0
 
 let isRequestWithdrawBalance = ref(false);
@@ -81,7 +78,7 @@ withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
 
 
 function selectCurrency(_params) {
-    router.push({ 
+    router.push({
         path: 'currencyDetail',
         query: {
             params: JSON.stringify(_params)
@@ -96,7 +93,7 @@ const init = () => {
             Report.reportLog({
                 pageSource: Report.pageSource.denetHomePage,
                 businessType: Report.businessType.pageView,
-            },{
+            }, {
                 type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
             });
             setMessageCount();
@@ -110,14 +107,16 @@ const init = () => {
 }
 
 const setMessageCount = () => {
-    getAllMessageInfo({params: {
-    }}).then(res => {
-        if(res.code == 0) {
-            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+    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}});
+            if (unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
+                setBadgeInfo({ data: { text } });
             } else {
                 hideBadge();
             }
@@ -196,7 +195,7 @@ const refreshList = () => {
 
     getAccountBalance();
     if(currencyListDom.value) {
-        currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
+        currencyListDom.value.refresh && currencyListDom.value.refresh();
     }
 }
 
@@ -205,11 +204,11 @@ const onMessage = () => {
 }
 
 const msgListener = (req, sender, sendResponse) => {
-    sendResponse('ok');
+    ;
     switch (req.actionType) {
         case 'CONTENT_POPUP_PAGE_SHOW':
             init();
-            if(currencyListDom.value) {
+            if (currencyListDom.value) {
                 currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
             }
             break;
@@ -283,6 +282,7 @@ body {
         .balance {
             display: flex;
             justify-content: space-between;
+
             .wallet {
                 font {
                     font-size: 13px;
@@ -335,6 +335,7 @@ body {
                     margin-left: 22px;
                     cursor: pointer;
                 }
+
                 .transform_rotate {
                     transform: rotate(360deg);
                     transition-duration: 1s;

src/view/popup/withdraw/confirm.vue

@@ -101,7 +101,7 @@ const clickBtn = () => {
     })
 
 }
-onMounted(()=>{
+onMounted(() => {
     Report.reportLog({
         pageSource: Report.pageSource.denetWithdrawConfirm,
         businessType: Report.businessType.pageView,