udxcms 1.0.1

package/dist/components/basicComponents/TokenAmountSelect.vue

@@ -0,0 +1,309 @@
+<template>
+	<div class="wallet-token-amount-select" :class="{ small: size === 'small' }">
+		<div class="select-inner" @click="toggleVisible">
+			<img
+				v-show="curToken.symbol"
+				class="token-icon"
+				:src="curToken.icon_url"
+				alt=""
+			/>
+			<div v-if="curToken.symbol" class="token-text">
+				<span class="token-symbol">
+					{{ curToken.symbol }}
+				</span>
+				<span v-show="curToken.symbol" class="token-name">
+					{{ curToken.name }}
+				</span>
+			</div>
+			<div v-else class="token-text">Select token</div>
+
+			<a-icon
+				type="caret-down"
+				class="icon-down"
+				:class="{ active: dropMenuVisible }"
+			/>
+			<!-- <img :class="{'icon-down':true,active:dropMenuVisible}" src="@/assets/img/wallet/icon-down.png" alt=""> -->
+		</div>
+		<div
+			class="wallet-mask"
+			v-show="dropMenuVisible"
+			@click="toggleVisible"
+		></div>
+		<div class="drop-down thin-scroll" v-show="dropMenuVisible">
+			<ul>
+				<li
+					v-for="item in localTokens"
+					:key="item.name"
+					@click="change(item)"
+				>
+					<img class="token-icon" :src="item.icon_url" alt="" />
+					<div class="token-text">
+						<span class="token-symbol">{{ item.symbol }}</span>
+						<span class="token-name" :title="item.name">{{ item.name }}</span>
+					</div>
+					<div class="token-amount">
+						{{ formatAmount(item.amount, item.decimals) }}
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import { BigNumber, utils } from 'ethers';
+export default {
+	name: "TokenAmountSelect",
+	props: {
+		tokens: {
+			type: Array,
+			default: () => [],
+		},
+		value: {
+			// symbol
+			type: String,
+			default: () => null,
+		},
+		size: {
+			// size: null(52),small(40)
+			type: String,
+			default: () => null,
+		},
+	},
+	data() {
+		return {
+			keyword: "",
+			dropMenuVisible: false,
+		};
+	},
+	computed: {
+		curToken() {
+			let result = {};
+			if (this.value) {
+				result =
+					this.tokens.find((item) => item.symbol === this.value) ||
+					{};
+			}
+			return result;
+		},
+		localTokens() {
+			return this.tokens.map(item => {
+				return {
+					...item,
+					...this.$store.getters.commonTokenDetail(item.symbol, item.chainId),
+				}
+			})
+		}
+	},
+	mounted() {
+		document.addEventListener("click", (e) => {
+			// 组件之外点击
+			if (!this.$el.contains(e.target)) {
+				this.dropMenuVisible = false;
+			}
+		});
+	},
+	methods: {
+		change(item) {
+			this.dropMenuVisible = false;
+			// 有变化才响应
+			if (item.symbol !== this.value) {
+				// this.$emit("update:value", this.chainId);
+				this.$emit("input", item.symbol);
+				this.$emit("change", item);
+			}
+		},
+		toggleVisible() {
+			this.dropMenuVisible = !this.dropMenuVisible;
+		},
+        formatAmount(amount, decimals) {
+            return utils.formatUnits(amount, decimals);
+        },
+	},
+};
+</script>
+
+<style lang="less">
+.wallet-token-amount-select {
+	--height: 52px;
+	--fontSize: 18px;
+	position: relative;
+
+	.select-inner {
+		cursor: pointer;
+		height: var(--height);
+		border: 1px solid var(--border-color-base);
+
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		padding: 8px 12px;
+	}
+	.token-icon {
+		width: 32px;
+		height: 32px;
+		border: 0;
+	}
+	.token-text {
+		line-height: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.token-symbol {
+		font-size: var(--fontSize);
+		margin-left: 10px;
+		color: var(--text-color);
+	}
+	.token-name {
+		font-size: calc(var(--fontSize) - 2px);
+		margin-left: 10px;
+		color: var(--text-color-placeholder);
+	}
+
+	.icon-down {
+		margin-left: auto;
+		transition: 0.3s;
+		transform-origin: center center;
+		color: var(--text-color-placeholder);
+		&.active {
+			transform: rotate(180deg);
+		}
+	}
+    .wallet-mask {
+        max-width: 100vw;
+    }
+	.drop-down {
+		margin-top: 4px;
+		// width: 425px;
+		background: var(--drop-down-bg-color);
+		border-top-left-radius: 6px;
+		border-top-right-radius: 6px;
+		overflow: hidden;
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		min-height: 30vh;
+		max-height: 80vh;
+		z-index: 5000;
+		box-shadow: var(--box-shadow-base);
+		display: flex;
+		flex-direction: column;
+        max-width: 100vw;
+		// padding-bottom: constant(safe-area-inset-bottom);
+		// padding-bottom: env(safe-area-inset-bottom);
+		.search-row {
+			margin: 20px;
+			position: relative;
+			flex: none;
+			.anticon{
+				font-size: var(--fontSize);
+			}
+			input {
+				outline: none;
+				display: block;
+				width: 100%;
+				height: calc(var(--height) - 2px);
+				background: var(--white);
+				border: 1px solid var(--border-color-base);
+				border-radius: var(--border-radius-base);
+				font-size: var(--fontSize);
+				line-height: 1;
+			}
+			input:focus {
+				border: 1px solid var(--primary-color);
+			}
+			input::placeholder {
+				font-size: 16px;
+				line-height: 1;
+				color: #c0c3cc;
+			}
+			.search-icon {
+				position: absolute;
+				top: 50%;
+				left: 16px;
+				width: 24px;
+				height: 24px;
+				transform: translateY(-50%);
+			}
+			.clear {
+				width: 20px;
+				height: 20px;
+				position: absolute;
+				top: 50%;
+				right: 16px;
+				transform: translateY(-50%);
+			}
+		}
+		ul {
+			// padding: 0 20px;
+			margin-bottom: 4px;
+			flex: auto;
+			// height: 50vh;
+			overflow: auto;
+			li {
+				padding: 10px 20px;
+				display: flex;
+				align-items: center;
+				cursor: pointer;
+				position: relative;
+				&:hover {
+					background-color: var(--highlight-bg-color);
+				}
+				.token-text{
+					flex: auto;
+				}
+			}
+			li.disabled {
+				cursor: not-allowed;
+				span {
+					color: #c0c3cc;
+				}
+				.name {
+					color: #c0c3cc;
+				}
+			}
+		}
+	}
+
+	&.small {
+		--height: 40px;
+		--fontSize: 16px;
+
+		.token-icon {
+			width: 26px;
+			height: 26px;
+			border: 0;
+		}
+		.drop-down {
+			.search-row {
+				margin: 14px;
+			}
+			ul {
+				li {
+					padding: 8px 14px;
+				}
+			}
+		}
+	}
+
+	@media screen and (min-width: 768px) {
+		.wallet-mask {
+			display: none;
+		}
+		.drop-down {
+			border-radius: 6px;
+			position: absolute;
+			right: 0;
+			left: 0;
+			top: auto;
+			bottom: auto;
+			z-index: 2000;
+			// border: 1px solid var(--border-color-base);
+			max-height: 420px;
+			min-height: 50px;
+		}
+	}
+}
+</style>

package/dist/components/basicComponents/UserMenu.vue

@@ -0,0 +1,260 @@
+<template>
+    <div class="user-menu">
+        <template v-if="!walletLocked">
+            <!-- <router-link v-for="item in menus" :key="item.id" :to="item.click_url" class="menu-item">{{ item.bar_name }}</router-link> -->
+            <a
+                v-for="item in menus"
+                :key="item.id"
+                class="menu-item router-link-exact-active"
+                @click="goUrl(item.click_url)"
+            >
+                {{ item.bar_name }}
+            </a>
+        </template>
+
+        <template v-if="accountIsCustody">
+            <a class="menu-item log-out" @click="logOutModalVisible = true">{{
+                $t("user_menu_log_out")
+            }}</a>
+        </template>
+        <template v-else>
+            <a v-if="walletLocked" class="menu-item" @click="connectWallet">{{
+                $t("wallet_menu_unlock_account")
+            }}</a>
+            <a :class="['menu-item log-out', !menus.length && 'no-menu']" @click="logOutModalVisible = true">{{
+                $t("wallet_menu_log_out")
+            }}</a>
+        </template>
+
+        <!-- 退出登录 -->
+        <a-modal
+            v-model="logOutModalVisible"
+            :width="320"
+            centered
+            :footer="null"
+            dialogClass="log-out-modal theme-light"
+            @ok="logOutModalVisible = false"
+        >
+            <div class="content">
+                <a-icon type="exclamation-circle" />
+                <p>
+                    {{ $t("user_menu_log_out_text") }}
+                </p>
+            </div>
+            <div class="modal-btns">
+                <a-button block @click="logOutModalVisible = false">
+                    {{ $t("user_common_cancel") }}
+                </a-button>
+                <a-button
+                    type="warning"
+                    block
+                    :loading="loading"
+                    @click="onLogout"
+                >
+                    {{ $t("index_header_menu_user_log_out_confirm") }}
+                </a-button>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script>
+import { logOut } from "../../api/common";
+import conf from "../../config/index";
+
+export default {
+    name: "UserMenu",
+    data() {
+        return {
+            logOutModalVisible: false,
+            loading: false,
+
+            wallet: this.walletData.getSyncWallet() && 1,
+            // token: localStorage.getItem('TOKEN'),
+        };
+    },
+    computed: {
+        account() {
+            return this.$store.getters.account || "";
+        },
+        token() {
+            return (
+                localStorage.getItem("TOKEN") || this.$store.state.user.token
+            );
+        },
+        accountIsCustody() {
+            return this.$store.getters.accountIsCustody;
+        },
+        userMenus() {
+            return this.$store.state.navigation.user.filter(
+                (v) => v.client == "WEB"
+            );
+        },
+        menus() {
+            // type
+            // COMMON("公共"),
+            // MANAGED("托管"),
+            // UNMANAGED("非托管"),
+            if (!this.account) return [];
+            let result = this.userMenus.filter(
+                (item) => item.type === "COMMON"
+            );
+            if (this.accountIsCustody) {
+                result = result.concat(
+                    this.userMenus.filter((item) => item.type === "MANAGED")
+                );
+            } else {
+                result = result.concat(
+                    this.userMenus.filter((item) => item.type === "UNMANAGED")
+                );
+            }
+            return result.sort((a, b) => a.sort - b.sort);
+        },
+        walletConnected() {
+            let ethWallet = this.$store.state.wallet.ethWallet || {};
+            return Object.keys(ethWallet).length > 0;
+        },
+        isLocked() {
+            return this.$store.getters.isLocked;
+        },
+        walletLocked() {
+            if (this.accountIsCustody) {
+                return false;
+            } else {
+                return this.isLocked;
+            }
+        },
+    },
+    methods: {
+        connectWallet() {
+            this.$bus.$emit("linkLogin", {
+                type: "unlock",
+                fn: () => {
+                    this.unlockBack();
+                },
+            });
+        },
+        unlockBack() {
+            let name = this.$route.name;
+            let backRouteName = this.$store.state.cmsstore.backRouteName;
+            if (backRouteName && name == "login_wallet") {
+                this.$store.commit("setBackRouteName", "");
+                this.$router.push({
+                    name: backRouteName,
+                });
+            } else {
+                // this.$router.push({
+                //     name: 'home'
+                // })
+            }
+        },
+        onLogout() {
+            this.loading = true;
+            logOut().catch(e => null).finally((final) => {
+                this.logOutModalVisible = false;
+                this.$store.commit("user/logout");
+                this.walletData.set({
+                    syncWallet: undefined,
+                    syncProvider: undefined,
+                    accountState: undefined,
+                });
+                Object.keys(localStorage).forEach(key => {
+                    if (key.startsWith("wc@2:")) {
+                        localStorage.removeItem(key);
+                    }
+                })
+
+                // JSBridge
+                try {
+                    if (window.NativeBridge && window.NativeBridge.logout) {
+                        window.NativeBridge.logout();
+                    }
+                    if (window.webkit) {
+                        window.webkit.messageHandlers.nativeBridge.postMessage(
+                            JSON.stringify({
+                                action: "logout",
+                                payload: null,
+                            })
+                        );
+                    }
+                } catch (error) {
+                    console.log("Call to JSBridge failed.");
+                    console.error(error);
+                }
+
+                if (!conf.notNeedLoginRoute.includes(this.$route.name)) {
+                    this.$router.push({
+                        name: "home",
+                    });
+                }
+                this.loading = false;
+            });
+        },
+        goUrl(path) {
+            sessionStorage.setItem("portfoilType", "user");
+            this.$store.commit("setMenuChange");
+            this.$router.push(path);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.log-out-modal {
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 24px 0;
+        p {
+            margin-top: 14px;
+        }
+    }
+    .anticon-exclamation-circle {
+        color: var(--warning-color);
+        font-size: 40px;
+    }
+    .modal-btns {
+        display: flex;
+        gap: 20px;
+        .ant-btn:not(.ant-btn-warning) {
+            &:hover {
+                color: var(--primary-bg-color-hover);
+                background: var(--app-bg-color);
+                border-color: 1px solid var(--primary-bg-color-hover);
+            }
+           
+        }
+    }
+}
+
+.user-menu {
+    background: var(--popup-bg);
+    z-index: 999;
+    border-radius: var(--border-radius-base);
+    box-shadow: var(--box-shadow-base);
+    overflow: hidden;
+
+    .menu-item {
+        height: 48px;
+        line-height: 48px;
+        font-size: 16px;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+        color: var(--text-color);
+        white-space: nowrap;
+        &:hover {
+            color: var(--link-color);
+            background-color: var(--select-item-bg);
+        }
+        &.log-out {
+            color: var(--error-color);
+            border-top: 1px solid var(--border-color-base);
+            &.no-menu {
+                border-top: 0px;
+            }
+        }
+    }
+}
+</style>