udxcms 1.0.9 → 1.0.10

package/dist/components/h5Components/walletconnectBottom.vue

@@ -1,667 +0,0 @@
-<!--
- * @Author: Sneed
- * @Date: 2021-03-03 17:28:40
- * @LastEditTime: 2021-12-13 19:18:13
- * @LastEditors: Lewis
- * @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 '@cms/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>