udxcms 1.0.10 → 1.0.12

package/dist/components/basicComponents/WalletConnected.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="wallet-connected-component">
+        <!-- 已经登录正常状态 -->
+        <div
+            v-if="!isLocked"
+            :class="['wallet-connected', selfTheme && 'wallet-connected-theme']"
+        >
+            <!-- <img :src="chainIcon" alt="" /> -->
+            <!-- <img :src="walletIcon || require('../../assets/img/walletconnect.png')" alt="" v-if="walletIcon.indexOf('<svg') == -1" />
+        <span v-html="walletIcon" v-else></span> -->
+
+            <div v-if="accountIsCustody" class="svg-icon-wrapper">
+                <SvgIcon
+                    icon-class="user-wallet"
+                    stroke="none"
+                    className="wallet-icon"
+                />
+            </div>
+            <template v-else>
+                <img
+                    :src="
+                        walletIcon ||
+                        require('../../assets/img/walletconnect.png')
+                    "
+                    alt=""
+                    v-if="walletIcon.indexOf('<svg') == -1"
+                />
+                <span v-html="walletIcon" v-else class="svg-wallet-icon"></span>
+            </template>
+
+            <span class="user-account">{{ formatAccount(account) }}</span>
+            <a-icon type="caret-down" />
+        </div>
+        <!-- 锁定状态 -->
+        <div
+            v-else
+            :class="[
+                'wallet-connected wallet-locked',
+                selfTheme && 'wallet-connected-theme',
+            ]"
+        >
+            <!-- <img :src="chainIcon" alt="" /> -->
+            <img
+                :src="
+                    walletIcon || require('../../assets/img/walletconnect.png')
+                "
+                alt=""
+                v-if="walletIcon.indexOf('<svg') == -1"
+            />
+            <span v-html="walletIcon" v-else></span>
+            <span class="user-account">{{ connetcedWalletAccount }}</span>
+            <a-icon type="lock" class="icon-locked" />
+        </div>
+
+        <!-- wallet 菜单 -->
+        <div class="menu-dropdown">
+            <UserMenu v-if="userMenus.length > 0 || walletType == 'L1' && !l1Login" />
+            <userPanel
+                v-else
+                v-model="walletMenuVisible"
+                top="0"
+                :isClickstatus="false"
+                type="B"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "WalletConnected",
+    props: {
+        selfTheme: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        btcWallet() {
+            return this.$store.state.wallet.btcWallet || {}
+        },
+        account() {
+            return this.btcWallet?.btcAccoount || this.$store.getters.account;
+        },
+        accountIsCustody() {
+            return this.$store.getters.accountIsCustody;
+        },
+        isLocked() {
+            return this.$store.getters.isLocked;
+        },
+
+        walletIcon() {
+            return window.localStorage.getItem("selectedIcon") || "";
+            // return this.$store.getters.walletIcon || '';
+        },
+        connetcedWalletAccount() {
+            return this.formatAccount(
+                // this.walletData && this.walletData.getAddress()
+                this.account || this.walletData && this.walletData.getAddress()
+            );
+        },
+
+        userMenus() {
+            return this.$store.state.navigation.user;
+        },
+        walletType() {
+            return this.$store.state.siteConfig.walletType
+        },
+        l1Login() {
+            return this.$store.state.siteConfig.l1Login
+        }
+    },
+    data() {
+        return {
+            walletMenuVisible: true,
+        };
+    },
+    methods: {
+        formatAccount(value) {
+            if (!value) return "";
+            return value.slice(0, 4) + "******" + value.slice(-4, value.length);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.wallet-connected-component {
+    // wallet-connected
+    .wallet-connected {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--border-color-base);
+        height: var(--height);
+        border-radius: var(--border-radius-base);
+        padding: 8px 12px;
+        &.wallet-connected-theme {
+            background: var(--primary-bg-color);
+            color: var(--white);
+        }
+        span {
+            display: flex;
+            align-items: center;
+        }
+        img {
+            width: 24px;
+            height: 24px;
+        }
+        .icon-locked {
+            font-size: 14px;
+        }
+        .user-account {
+            margin: 0 6px;
+        }
+        &.wallet-locked {
+            color: var(--error-color);
+        }
+
+        .svg-icon-wrapper {
+            width: 24px;
+            height: 24px;
+            line-height: 1;
+            border-radius: 50%;
+            padding: 6px;
+            font-size: 0px;
+            background-color: var(--primary-color);
+            .wallet-icon {
+                color: #fff;
+            }
+        }
+        .svg-wallet-icon {
+            width: 24px;
+            height: 24px;
+            line-height: 1;
+            border-radius: 50%;
+        }
+    }
+}
+</style>

package/dist/components/basicComponents/sModal.vue

@@ -0,0 +1,59 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2021-03-16 08:46:13
+ * @LastEditTime: 2021-03-16 15:14:49
+ * @LastEditors: Sneed
+ * @Description:
+-->
+<template>
+    <div class="loading" v-show="value">
+        <div class="content">
+            <svg-icon class="close" icon-class="close" @click="close"></svg-icon>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type:Boolean,
+        }
+    },
+    methods: {
+        close() {
+            this.$emit('input',false)
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    .loading {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        z-index: 6000;
+        top: 0;
+        left: 0;
+        background: var(--mask-bg-color);
+        .content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            width: 280px;
+            background: var(--modal-bg-color);
+            border-radius: 24px;
+            padding: 30px;
+            .close {
+                width: 20px;
+                height: 20px;
+                position: absolute;
+                top: 12px;
+                right: 12px;
+            }
+        }
+    }
+</style>