udxcms 1.0.10 → 1.0.12

package/dist/components/h5Components/walletconnectBottom.vue

@@ -0,0 +1,667 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2021-03-03 17:28:40
+ * @LastEditTime: 2025-09-23 18:49:11
+ * @LastEditors: lewis lewis@everylink.ai
+ * @Description:
+-->
+<template>
+    <div>
+        <!-- <div class="placeholder"></div> -->
+        <div class="info">
+            <div class="wallectconnect" v-show="!showDetail">
+                <div class="no-connect">
+                    <button class="connect theme-bg-color" v-if="!walletAccount.length" @click="open">
+                        {{$t("wallet_common_connect")}}
+                    </button>
+                    <div :class="['account', {'account_no': isLocked}]" v-else-if="walletAccount.length" @click="openDetail">
+                        <!-- <img :src="chainIcon" alt="" class='wallet-icon'/> -->
+                        <img :src="avatar" alt="" class='wallet-icon'/>
+                        <span>{{walletAccount}}</span>
+                        <img :src="require('../../assets/h5/unlock.png')" alt="" class='unlock' v-if='isLocked'/>
+                    </div>
+                    <button v-if="walletAccount" class="more" @click="openMenuH5">
+                        <!-- <img :src="require('../../assets/h5/more-three.png')" alt=""> -->
+                        <ul>
+                            <li></li>
+                            <li></li>
+                            <li></li>
+                        </ul>
+                    </button>
+                </div>
+            </div>
+            <div class="detail" v-show="showDetail">
+                <div class="detail-box">
+                    <div class="title">
+                        <span>{{$t('wallet_common_account')}}</span>
+                        <svg-icon class="close" icon-class="close-x" @click="closeDetail"></svg-icon>
+                    </div>
+                    <div class="connect-info">
+                        <div class="action">
+                            <span class="action-title">
+                                {{ $t('wallet_common_connected_to') }}<br />{{ walletName }}
+                            </span>
+                            <span class="action-disconnect" @click="disconnect('')">
+                                {{$t('wallet_common_walletconnect_disconnect')}}
+                            </span>
+                        </div>
+                        <div :class="['connect-info-address', {'account_no': !activeUser}]">
+                            <img :src="avatar" alt="">
+                            <span>{{walletAccount}}</span>
+
+                            <div class="action-disconnect-agin" @click="openAgin" v-if='isLocked'>
+                                {{$t('wallet_common_walletconnect_unlock_account')}}
+                            </div>
+                        </div>
+                        <div class="copy-view">
+                            <span @click="copy">
+                                <svg-icon class="icon" icon-class="copy"></svg-icon>
+                                <i>{{$t('wallet_common_walletconnect_copy_address')}}</i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mobi-info" v-show="mobiShow">
+                <div class="mobi-content">
+                    <div class="mobi-title">
+                        <span>{{$t('wallet_common_platform_title')}}</span>
+                        <svg-icon class="icon" icon-class="close-white" @click="closeMobi"></svg-icon>
+                    </div>
+                    <div class="platform bottom">
+                        <div>
+                            <span class="platform-title">
+                                <img :src="require('../../assets/h5/platform-1.png')" alt="">
+                                <span class='symbol'>{{info.platform_coin_symbol}}</span>
+                                {{$t('wallet_common_platform_balance')}}
+                            </span>
+                            <span> {{info.platform_coin_balance}}</span>
+                        </div>
+                        <div>
+                            <span>{{$t('wallet_common_mbop_price', {coinOp: info.platform_coin_symbol})}}</span>
+                            <span>{{info.currency_symbol}}{{info.market_price}}</span>
+                        </div>
+                        <div>
+                            <span>{{$t('wallet_common_mbop_circulation', {coinOp: info.platform_coin_symbol})}}</span>
+                            <span>{{info.circulation_supply}}
+                                <span>{{info.platform_coin_symbol}}</span>
+                            </span>
+                        </div>
+                        <div>
+                            <span>{{$t('wallet_common_total_supply', {coin: info.platform_coin_symbol})}}</span>
+                            <span>{{info.total_supply}}</span>
+                        </div>
+                    </div>
+                    <div class="platform">
+                        <div >
+                            <span class="platform-title">
+                                <img :src="require('../../assets/h5/platform-2.png')" alt="">
+                                <span class='symbol'>{{info.dividend_coin_symbol}}</span>
+                                {{$t('wallet_common_platform_balance')}}
+                            </span>
+                            <span>{{info.dividend_coin_balance}}</span>
+                        </div>
+                        <div>
+                            <span>{{$t('wallet_common_mobi_price', {coin: info.dividend_coin_symbol})}}</span>
+                            <span>{{info.currency_symbol}}{{info.rigid_price}}</span>
+                        </div>
+                        <div>
+                            <span>{{$t('wallet_common_mobi_circulation', {coin: info.dividend_coin_symbol})}}</span>
+                            <span>{{info.reserve_fund}}
+                                <span>{{info.dividend_coin_symbol}}</span>
+                            </span>
+                        </div>
+                        <div>
+                            <span>{{$t('wallet_common_total_supply', {coin: info.dividend_coin_symbol})}}</span>
+                            <span>{{info.yielded}}</span>
+                        </div>
+                    </div>
+                    <a :href="'#/trade/data-preview?coin_name=' + info.dividend_coin_symbol + '&symbol=' + info.platform_coin_symbol " class="uni">{{$t('trade_swap_view_uni_analytics')}}</a>
+                    <a href='http://192.168.2.11:7000/ ' class='uni float-r' target="block">
+                        {{$t('wallet_common_reserve_funds')}}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { copyText } from '../../utils/index'
+import { logOut, breakdown } from '../../api/common'
+import { mapState } from 'vuex';
+import { toDataUrl } from '../../utils/blockies'
+export default {
+    data() {
+        return {
+            showDetail:false,
+            mobiShow:false,
+            info: {
+
+            },
+            walletAccount: '',
+            activeUser: false,
+            showMobiBtn: '',
+            errorInfo: '',
+            walletName: window.localStorage.getItem("selectedWallet"),
+        }
+    },
+    computed:{
+        ...mapState('user', ['userInfo', 'currency']),
+        wallet() {
+            return this.$store.state.wallet.wallet
+        },
+        uid() {
+            return this.$store.state.uid
+        },
+		chainId() {
+			return this.$store.state.chainId;
+		},
+		chainIcon() {
+			const networkDetail = this.$store.getters.filterNetworkItem(
+				this.chainId,
+				"L1"
+			);
+			return networkDetail.networkLogo;
+		},
+        ethWallet() {
+            return this.$store.state.wallet.ethWallet
+        },
+        walletType() {
+            return this.$store.state.siteConfig.walletType
+        },
+        account() {
+			return this.$store.getters.account || '';
+		},
+        accountIsCustody() {
+            return this.$store.getters.accountIsCustody;
+        },
+        isLocked() {
+            return this.$store.getters.isLocked;
+        },
+        avatar() {
+            return this.formartUserIcon(this.userInfo?.profile?.avatar) || '';
+        }
+    },
+    watch: {
+        '$store.state.wallet.wallet':{
+            handler: function(wallet) {
+                if(!this.userCenter) {
+                    this.initActiveUser()
+                }
+            },
+            deep: true
+        },
+        '$store.state.uid'(val) {
+            if (!this.userCenter) {
+                this.initActiveUser()
+            }
+        }
+    },
+    created() {
+        this.initActiveUser()
+    },
+    mounted() {
+        this.$nextTick(() => {
+            $Vue.$bus.$on('refresh', events => {
+                events.map(v => {
+                    switch (v) {
+                        case 'initActiveUser':
+                            this.initActiveUser()
+                            break;
+                        default:
+                            break;
+                    }
+                })
+            })
+        })
+    },
+    methods: {
+        initWallet() {
+            let walletName = this.account || ''; //this.walletData.getAddress() || ''
+            if (walletName && walletName.length) {
+                this.walletAccount = walletName.slice(0, 4) + '******' + walletName.slice(-4, walletName.length)
+            } else {
+                this.walletAccount = ''
+            }
+        },
+        async initActiveUser() {
+            this.initWallet()
+            let activeUser = this.userInfo && this.userInfo.uid && this.userInfo.uid.length || 0;
+            this.activeUser = activeUser;
+            if (this.accountIsCustody) return;
+            let token = localStorage.getItem('TOKEN')
+            if (this.walletType == 'L2') {
+                let syncWallet = this.walletData.getSyncWallet()
+                let walletActive = syncWallet && Object.keys(syncWallet).length || false
+                this.activeUser = activeUser && walletActive && token
+            } else {
+                this.activeUser = activeUser && this.ethWallet && token
+            }
+        },
+        formartUserIcon(imgUrl) {
+            let userAddress = this.userInfo?.wallet_address
+            return (!imgUrl || imgUrl.includes('users/default/avatar.png')) ? userAddress && toDataUrl(userAddress) : imgUrl
+        },
+        breakdown() {
+            if (this.errorInfo) return
+            let currency = this.$store.state.user.currency
+            breakdown({
+                currency_symbol: currency.symbol,
+                currency_name: currency.name,
+            }).then(res=> {
+                this.info = res.data
+            }).catch(err => {
+                this.errorInfo = err || '1'
+            })
+        },
+        openInfo() {
+            this.mobiShow = true
+        },
+        closeMobi() {
+            this.mobiShow = false
+        },
+        open() {
+            $Vue.$bus.$emit('linkWallet')
+        },
+        openAgin() {
+            $Vue.$bus.$emit('linkLogin', {
+                type:'unlock'
+            })
+        },
+        openDetail() {
+            this.showDetail = true;
+            this.breakdown()
+        },
+        openMenuH5() {
+            $Vue.$bus.$emit('menu-h5', 'main')
+        },
+        closeDetail() {
+            this.showDetail = false;
+        },
+        logOutFunc() {
+            // let message = this.$t("index_header_menu_user_log_out_text")
+            // this.$Powx.toast.confirm(message, 'logOut', this)
+            this.logOut(1)
+        },
+        logOut(val) {
+            if (val) {
+                this.$Powx.toast.hide()
+                this.$store.commit('user/logout')
+                this.walletData.set({
+                    syncWallet: undefined,
+                    syncProvider: undefined,
+                    accountState: undefined
+                })
+                logOut().catch(e => e);
+                this.closeDetail()
+                this.initActiveUser()
+                this.$router.push({
+                    name: 'home'
+                })
+            }
+        },
+        // 断开钱包链接
+        disconnect(cb) {
+            // 断开链接
+            this.logOutFunc()
+        },
+        copy() {
+            let text = this.account || ''; //this.walletData.getAddress() || ''
+            copyText(text)
+            this.$message.success({
+                content: this.$t('common_base_copied'),
+                closeOnClick: true,
+                duration: 5
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    // .placeholder{
+    //     height: 72px;
+    // }
+    .info {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100vw;
+        z-index: 200;
+    }
+    .wallectconnect {
+        padding: 0 20px;
+        position: fixed;
+        width: 100vw;
+        bottom: 0;
+        height: 72px;
+        background: var(--popup-bg-secondary);
+        .no-connect {
+            height: 72px;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            .connect {
+                width: stretch;
+                margin-left: 2px;
+                font-size: 16px;
+                font-family: FontMedium;
+                text-align: left;
+                color: var(--white);
+                line-height: 16px;
+                padding: 12px 16px;
+                background: var(--primary-bg-color);
+                border-radius: var(--border-radius-base);
+                text-align: center;
+            }
+            .account {
+                width: 196px;
+                height: 40px;
+                padding:0 16px;
+                border: 1px solid var(--popup-bg-third);
+                border-radius: var(--border-radius-base);
+                font-size: 14px;
+                font-family: Font;
+                background: var(--popup-bg-third);
+                text-align: left;
+                color: var(--text-color);
+                display: flex;
+                align-items: center;
+                flex: 1;
+                img {
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    line-height: 40px;
+                    vertical-align: middle;
+                }
+                span {
+                    margin-left: 10px;
+                    flex:1 1 auto;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    .inherit();
+                }
+            }
+            .account-wallet {
+                border: 1px solid transparent;
+                background: var(--primary-bg-color);
+                color: white;
+            }
+            .logo, .logoZ {
+                margin-left: 1em;
+                margin-right: 1em;
+                width: 62px;
+            }
+            .logoZ {
+                margin: 0 .5em;
+                width: 0;
+            }
+            .more {
+                height: 40px;
+                padding: 15px;
+                background: var(--popup-bg-third);
+                border-radius: var(--border-radius-base);
+                text-align: center;
+                margin-left: auto;
+                display: flex;
+                align-items: center;
+                ul {
+                    line-height: 4px;
+                }
+                ul li {
+                    display: inline-block;
+                    border-radius: 50%;
+                    // width: 6px;
+                    // height: 6px;
+                    width: 4px;
+                    height: 4px;
+                    margin-left: 4px;
+                    margin-top: -2px;
+                    background: var(--text-color);
+                    &:first-child {
+                        margin-left: 0;
+                    }
+                }
+                // img {
+                //     width:18px;
+                //     // filter: hue-rotate(45deg);
+                // }
+            }
+        }
+    }
+    .detail {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 999999;
+        background: var(--pop-mask-background-color);
+        .detail-box {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            padding: 20px;
+            padding-bottom: 40px;
+            background: var(--popup-bg-secondary);
+            border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
+            .title {
+                font-size: 16px;
+                font-family: FontMedium;
+                text-align: left;
+                color: var(--text-color);
+                line-height: 16px;
+                display: flex;
+                justify-content: space-between;
+                span {
+                    .inherit();
+                }
+                .icon {
+                    width: 22px;
+                    height: 22px;
+                }
+                .close {
+                    width: 14px;
+                    height: 14px;
+                    color: var(--text-color);
+                }
+            }
+        }
+        .connect-info {
+            margin-top: 26px;
+            padding: 16px 20px;
+            background: rgba(255,255,255,0.00);
+            border: 1px solid var(--border-color-base);
+            border-radius: var(--border-radius-base);
+            .action {
+                display: flex;
+                align-items: flex-start;
+                font-size: 12px;
+                gap: 20px;
+                .action-title {
+                    flex: auto;
+                    font-family: FontMedium;
+                    text-align: left;
+                    color: var(--text-color-secondary);
+                    line-height: 14px;
+                }
+                .action-change {
+                    margin-left: 12px;
+                    margin-right: 0;
+                    padding: 6px 10px;
+                    border: 1px solid var(--link-color);
+                    border-radius: var(--border-radius-base);
+                    font-size: 12px;
+                    font-family: Font;
+                    text-align: left;
+                    color: var(--link-color);
+                    line-height: 12px;
+                }
+            }
+            .connect-info-address {
+                margin-top: 20px;
+                display: flex;
+                align-items: center;
+                img {
+                    width:24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    margin-right: 10px;
+                }
+                span {
+                    flex: 1 1 auto;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 16px;
+                    font-family: FontMedium;
+                    text-align: left;
+                    color: var(--text-color-secondary);
+                    line-height: 16px;
+                }
+                .img {
+                    background: #ff0505;
+                }
+                .span {
+                    color: #ff0505;
+                    line-height: 30px;
+                }
+            }
+            .connect-info-address-active {
+                filter: hue rotate(145);
+
+            }
+            .action-disconnect, .action-disconnect-agin {
+                margin-left: auto;
+                padding: 6px 10px;
+                border: 1px solid var(--link-color);
+                border-radius: 17px;
+                font-family: Font;
+                text-align: center;
+                color: var(--link-color);
+                line-height: 12px;
+            }
+            .action-disconnect-agin {
+                border: 1px solid var(--link-color);
+                color: var(--link-color);
+            }
+            .copy-view {
+                margin-top: 16px;
+                display: flex;
+                justify-content: center;
+                span,a {
+                    font-size: 12px;
+                    font-family: Font;
+
+                    text-align: left;
+                    color: var(--text-color-secondary);
+                    line-height: 12px;
+
+                    i {
+                        .inherit();
+                        font-style: normal;
+                    }
+                }
+                a {
+                    margin-left: 18px;
+                }
+                .icon {
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+    .mobi-info {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: var(--pop-mask-background-color);
+        .mobi-content {
+            position: fixed;
+            bottom: 0;
+            width: 375px;
+            // height: 457px;
+            padding:20px;
+            background: url('../../assets/img/mobi-info.png') 0 0 no-repeat;
+            background-size: 100% 110%;
+            color: var(--white);
+            .mobi-title {
+                display: flex;
+                justify-content: space-between;
+                font-size: 16px;
+                font-family: Font;
+
+                text-align: left;
+                color: var(--white);
+                line-height: 16px;
+                .icon {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            .platform {
+                padding: 25px 0;
+                &>div {
+                    margin-top: 15px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .platform-title {
+                        display: inline-flex;
+                        align-items: center;
+                        img {
+                            width: 36px;
+                            height: 36px;
+                            margin-right: 11px;
+                        }
+                        .symbol {
+                            margin-right: .2em;
+                        }
+                    }
+
+                }
+            }
+            .platform.bottom {
+                border-bottom:  1px solid rgba(255,255,255,0.12);
+            }
+            .uni {
+                transform: translateY(-10px);
+                font-size: 16px;
+                font-family: Font;
+
+                text-decoration: underline;
+                text-align: left;
+                color: var(--primary-color);
+                line-height: 16px;
+            }
+        }
+    }
+    .wallectconnect .no-connect .account_no {
+        filter: hue-rotate(145deg);
+        border: 1px solid var(--primary-color);
+        .wallet-icon {
+            filter: hue-rotate(215deg);
+        }
+        span {
+            color: var(--primary-color) !important;
+        }
+        .unlock {
+            width: 20px;
+            height: 20px;
+            filter: hue-rotate(264deg);
+        }
+    }
+    .action-disconnect-agin {
+        border: 1px solid red;
+    }
+    .float-r {
+        float: right;
+        transform: translateY(0) !important;
+    }
+</style>