Merge branch 'dev_1.1.0' into bug_fix_220611_popup

src/assets/svg/icon-currency-category-02.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 7L12 2L3 7V17L12 22L21 17V7ZM12 4.29L17.91 7.57L14.9 9.24C14.17 8.48 13.14 8 12 8C10.86 8 9.83 8.48 9.1 9.24L6.09 7.57L12 4.29ZM11 19.16L5 15.83V9.26L8.13 11C8.04 11.31 8 11.65 8 12C8 13.86 9.27 15.43 11 15.87V19.16ZM10 12C10 10.9 10.9 10 12 10C13.1 10 14 10.9 14 12C14 13.1 13.1 14 12 14C10.9 14 10 13.1 10 12ZM13 19.16V15.88C14.73 15.44 16 13.87 16 12.01C16 11.66 15.96 11.32 15.87 11L19 9.26V15.83L13 19.16Z" fill="#2CD2C8"/>
+<path d="M12.1243 5.01728L12.1 5.00382L12.0757 5.01728L6.75674 7.96928L6.67795 8.01301L6.75674 8.05672L9.46574 9.55972L9.4994 9.57839L9.52606 9.55064C10.1741 8.87593 11.0883 8.45 12.1 8.45C13.1117 8.45 14.0259 8.87593 14.6739 9.55064L14.7006 9.57839L14.7343 9.55972L17.4433 8.05672L17.5221 8.01301L17.4433 7.96928L12.1243 5.01728ZM11.1757 18.4877L11.25 18.5289V18.444V15.483V15.4441L11.2123 15.4345C9.67711 15.0441 8.55 13.6507 8.55 12C8.55 11.6886 8.5856 11.3875 8.66502 11.1139L8.67613 11.0757L8.64129 11.0563L5.82429 9.4903L5.75 9.449V9.534V15.447V15.4764L5.77574 15.4907L11.1757 18.4877ZM12.95 18.444V18.5289L13.0243 18.4877L18.4243 15.4907L18.45 15.4764V15.447V9.534V9.449L18.3757 9.4903L15.5587 11.0563L15.5242 11.0755L15.5349 11.1135C15.6144 11.3964 15.65 11.6977 15.65 12.009C15.65 13.6597 14.5229 15.0531 12.9877 15.4435L12.95 15.4531V15.492V18.444ZM12.1 3.0572L20.15 7.52942V16.4706L12.1 20.9428L4.05 16.4706V7.52942L12.1 3.0572ZM12.1 10.15C11.0824 10.15 10.25 10.9824 10.25 12C10.25 13.0176 11.0824 13.85 12.1 13.85C13.1176 13.85 13.95 13.0176 13.95 12C13.95 10.9824 13.1176 10.15 12.1 10.15Z" fill="#1D9BF0" stroke="#F7F7F7" stroke-width="0.1"/>
 </svg>

src/view/components/currency-list.vue

@@ -289,6 +289,11 @@ defineExpose({
             border: none;
             outline: none;
             padding: 10px 80px 10px 22px;
+            color: #adadad;
+        }
+
+        input::placeholder {
+            color: #adadad;
         }
 
         .icon {
@@ -321,7 +326,6 @@ defineExpose({
                 padding: 0 10px;
                 box-sizing: border-box;
                 background: #f7f7f7;
-                font-weight: 500;
                 font-size: 14px;
                 color: #a2a2a2;
 
@@ -348,6 +352,7 @@ defineExpose({
                     width: 24px;
                     height: 24px;
                     margin-right: 12px;
+                    margin-top: 4px;
                 }
 
                 .currency-info {

src/view/components/popup-transactions.vue

@@ -334,7 +334,6 @@ const listScroll = (e) => {
         .cell {
             display: flex;
             justify-content: space-between;
-            align-items: center;
             min-height: 66px;
             box-sizing: border-box;
             padding-left: 20px;
@@ -350,6 +349,7 @@ const listScroll = (e) => {
                 position: relative;
                 margin-right: 16px;
                 box-sizing: border-box;
+                margin-top: 11px;
 
                 .icon-avatar {
                     width: 34px;
@@ -379,7 +379,7 @@ const listScroll = (e) => {
                         font-size: 14px;
                         margin-bottom: 5px;
                         word-break: break-all;
-                        max-width: 120px;
+                        max-width: 140px;
                     }
 
                     .time {
@@ -401,6 +401,7 @@ const listScroll = (e) => {
 
                         .amount {
                             max-width: 110px;
+                            min-width: 20px;
                             display: inline-block;
                             word-break: break-all;
                             text-align: right;
@@ -409,6 +410,10 @@ const listScroll = (e) => {
                         .name {
                             margin-left: 3px;
                             color: #E29A2E;
+                            max-width: 130px;
+                            line-height: 14px;
+                            font-size: 13px;
+                            word-break: break-all;
                         }
 
                         img {

src/view/iframe/nft/card.vue

@@ -15,6 +15,7 @@
                 <img :src="saleData.windowImagePath" />
             </div>
             <div class="buy" @click="buy">
+                <img class="guide" v-if="isShowGuide" :src=" require('@/assets/img/icon-arrow.png') " />
                 <button>Buy NFT</button>
             </div>
         </template>
@@ -25,10 +26,11 @@
 import { onBeforeMount, ref } from 'vue'
 import { getTwitterSaleNftProjectInfo, getNftProjectInfo } from '@/http/nft'
 import { pageUrl } from "@/http/configAPI.js"
-import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
 const saleData = ref({});
 const isShare = ref(false);
 const isLoading = ref(true);
+const isShowGuide = ref(false);
 
 const getSaleInfo = () => {
     chrome.tabs.getCurrent((tab) => {
@@ -75,6 +77,14 @@ const getSaleProjectInfo = (account) => {
             chrome.tabs.getCurrent((tab) => {
                 chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_NFT_SHOW_SALE" });
             })
+            getChromeStorage('nft_guide', (info) => {
+                if (!info) {
+                    isShowGuide.value = true
+                    setTimeout(() => {
+                        setChromeStorage({ nft_guide: Date.now() })
+                    }, 2000)
+                }
+            })
         }
     })
 }
@@ -199,11 +209,18 @@ body {
     }
 
     .buy {
+        position: relative;
         height: 61px;
         display: flex;
         justify-content: center;
         align-items: center;
-
+        .guide {
+            position: absolute;
+            top: 20px;
+            right: 30%;
+            width: 26px;
+            animation: fade 1s infinite;
+        }
         button {
             width: 310px;
             height: 34px;
@@ -217,4 +234,15 @@ body {
         }
     }
 }
+
+@keyframes fade {
+    0%, 100% {
+        opacity: .5;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.4);
+    }
+}
 </style>

src/view/popup/components/tabbar.vue

@@ -187,13 +187,13 @@ onMounted(() => {
             position: relative;
 
             .text {
-                font-weight: 500;
                 font-size: 12px;
                 color: #c0c0c0;
             }
 
             .active-tab {
                 color: #1d9bf0 !important;
+                font-weight: 500;
             }
 
             .red-dots {

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

@@ -50,7 +50,7 @@
               >
                 <div class="left">
                   <div class="nickname">
-                    {{ item.type == 1 ? "Get Giveaway" : "Send Giveaways" }}
+                    {{ item.type == 1 ? "Get Giveaway" : "Send Giveaway" }}
                   </div>
                   <div class="time">
                     {{ moment(item.timestamp).format("MM-DD HH:mm:ss") }}
@@ -483,12 +483,15 @@ onMounted(() => {
               width: 34px;
               height: 34px;
               border-radius: 50%;
+              margin-right: 8px;
             }
 
             .icon-give {
               position: absolute;
-              right: -4px;
+              right: 3px;
               bottom: -1px;
+              width: 18px;
+              height: 18px;
             }
 
             .icon-big-give {
@@ -527,7 +530,7 @@ onMounted(() => {
               .msg {
                 .bold {
                   font-weight: 500;
-                  font-size: 14px;
+                  font-size: 13px;
                   text-align: right;
                   display: flex;
                   justify-content: flex-end;
@@ -539,7 +542,7 @@ onMounted(() => {
                     max-width: 80px;
                     word-break: break-all;
                     line-height: 18px;
-                    color: #e29a2e;
+                    color: #e86f00;
                   }
 
                   .coin-type-wrapper {

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

@@ -259,7 +259,6 @@ body {
             justify-content: space-between;
             .wallet {
                 font {
-                    font-weight: 500;
                     font-size: 13px;
                     color: #fff;
                     opacity: 0.7;