udxcms 1.0.8 → 1.0.10

package/dist/components/businessComponents/ChainNetWork.vue

@@ -1,365 +0,0 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author:
- * @Date: 2021-10-26 16:50:22
- * @LastEditors: Lewis
- * @LastEditTime: 2022-08-20 04:28:11
--->
-<template>
-    <!-- <div class='networklist' v-if="type == 'chainNetWork' || !multiChain && tradeChainShow">
-         -->
-    <div class='networklist'>
-        <div class='network-box' :style="{visibility: chainShow ? 'visible': 'hidden'}" v-if="!lendingShow">
-            <!-- <Select v-model="chainId" class='network-panel' :value='chainId' @on-change='checkChainData'>
-                <Option v-for="item in netWorkList" :value="item.chainId" :key="item.chainId">{{ item.chainName }}</Option>
-            </Select> -->
-            <div class="coin-select" :style="{visibility: chainShow ? 'visible': 'hidden'}">
-                <div class="select" @click="changeStatu">
-                    <img v-show="defaultValue.icon" class="coin-type" :src="defaultValue.icon" alt="">
-                    <span class="coin-name">{{defaultValue.chainName || $t('wallet_common_all_networks')}}</span>
-                    <svg-icon :class="{'icon-down':true, active: changeNetWorkBox}" icon-class="arrow-down-w"></svg-icon>
-                </div>
-                <div :class="['drop-down', $route.name == 'market-home' ? 'market-bg' : '']" v-show="changeNetWorkBox">
-                    <ul>
-                        <li v-for="item in showNetWorklist" :key="item.chainName" :class="{'active': item.chainId == defaultValue.chainId}" @click="select(item)">
-                            <img class="coin-type" :src="item.icon" alt="">
-                            <span class="name">{{item.chainName}}</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div v-else>
-            <Networklist class='networklist-select' name='lending'>
-                <svg-icon :class="{'icon-down':true, active: changeNetWorkBox}" icon-class="arrow-down-w"></svg-icon>
-            </Networklist>
-        </div>
-    </div>
-</template>
-
-<script>
-    let closeFn
-    import { getTradeDefaultChainId } from '../../utils/index'
-    import _ from 'lodash';
-    export default {
-        name: 'ChainNetWork',
-        props: {
-            value: {
-                type: String,
-                default: ''
-            },
-            chainType: {
-                type: String,
-                default: 'chainNetWork' // ''
-            },
-            // 交易对配置
-            symbolConfig: {
-                type: Object,
-                default: () => {
-                    return {}
-                }
-            },
-        },
-        computed: {
-            layer1NetworkList() {
-                return this.$store.getters.layer1NetworkList;
-            },
-            supportChains() {
-                return this.symbolConfig.support_chains || ''
-            },
-            symbol() {
-                return this.symbolConfig.display_name || ''
-            },
-            showNetWorklist() {
-                let supportChains = this.supportChains
-                return this.netWorkList.filter(v => !supportChains || supportChains.includes(v.chainId))
-            }
-            // networkLogo() {
-            //     const network = this.layer1NetworkList.find(item => item.chainId == this.defaultValue.chainId);
-            //     return network && network.networkLogo;
-            // }
-        },
-        watch: {
-            $route: {
-                handler(val) {
-                    let routeName = val.name
-                    this.type = routeName
-                    this.tradeChainShow = this.tradeMultiChain.indexOf(routeName) != -1
-                    this.chainShow = (this.chainShowArr.indexOf(routeName) != -1 && this.chainType == 'chainNetWork' && !this.multiChain || this.chainType == 'tradeChain')
-                    this.lendingShow = this.lendingShowArr.indexOf(routeName) != -1
-                },
-                immediate: true
-            },
-            symbol(val) {
-                this.symbolChange()
-            },
-            '$store.state.chainId'(val) {
-                this.chainId = val
-            },
-            changeNetWorkBox: function(val) {
-                if(val) {
-                    this.queryWord = "";
-                }else {
-                    document.removeEventListener('click',closeFn)
-                }
-                closeFn = (e)=>{
-                    if(!this.$el.contains(e.target)){
-                        this.changeNetWorkBox = false
-                    }
-                }
-                this.$nextTick(()=>{
-                    if(val) {
-                        document.addEventListener('click',closeFn)
-                    }else {
-                        document.removeEventListener('click',closeFn)
-                    }
-                })
-            },
-            layer1NetworkList() {
-                console.log('change')
-            },
-            value() {
-                this.setChainArrLists()
-            }
-        },
-        created() {
-        },
-        mounted() {
-            this.chainId = this.$store.state.chainId;
-            this.setChainArrLists()
-        },
-        data() {
-            return {
-                chainShow: false,
-                lendingShow: false,
-                tradeChainShow: false,
-                chainId: '',
-                chainInitId: '',
-                netWorkList: [],
-                chainShowArr: ['pools-home', 'pools-add', 'pools-detail'],
-                lendingShowArr: ['lending-home', 'lending-usdr'],
-                tradeMultiChain: ['market-home', 'trade'],
-                defaultValue: {},
-                changeNetWorkBox: false,
-                setchainIdAllow: true,
-                timer: null
-            }
-        },
-        methods: {
-            select(item) {
-                if (this.setchainIdAllow) {
-                    console.log('item', item)
-                    this.defaultValue = item
-                    this.checkChainData(item.chainId)
-                    this.changeNetWorkBox = false
-                    this.setchainIdAllow = false
-                } else {
-                    this.setchainIdAllow = false
-                    if (this.timer) return
-                }
-                this.timer = setTimeout(() => {
-                    this.setchainIdAllow = true
-                    clearTimeout(this.timer)
-                    this.timer = null
-                }, 2 * 1000)
-            },
-            changeStatu() {
-                this.changeNetWorkBox = !this.changeNetWorkBox
-            },
-            checkChainData(val) {
-                let chainId = this.chainInitId
-                if (val && val != chainId) {
-                    this.chainInitId = val
-                    this.$store.commit('setChainId', val)
-                    // localStorage.setItem('lastChainId', val)
-                }
-            },
-            async setChainArrLists() {
-                if (!this.layer1NetworkList.length) {
-                    await this.$store.dispatch('fetchNetworkList')
-                }
-                try {
-                    this.chainInitId = this.chainId = this.$store.state.chainId + ''
-                    let netWorkLists = window.site_config['networks']
-                    this.netWorkList = JSON.parse(netWorkLists || '[]')
-                    let isExitChainId = false
-                    this.netWorkList = this.netWorkList.map(v => {
-                        let network = this.layer1NetworkList.find(item => item.chainId == v.chainId)
-                        let networkData = {
-                            chainId: network.chainId,
-                            chainName: network.name,
-                            icon: network.networkLogo
-                        }
-                        if (v.chainId == this.chainInitId) {
-                            isExitChainId = true
-                            this.defaultValue = networkData
-                        }
-                        return networkData
-                    })
-
-                    if (!isExitChainId) {
-                        this.chainInitId = this.chainId = getTradeDefaultChainId(this.$store)
-                        this.defaultValue = this.netWorkList.find(v => v.chainId == this.chainInitId)
-                    }
-                    // this.$store.commit('setChainId', this.chainId)
-                    // localStorage.setItem('lastChainId', this.chainId)
-                } catch (error) {
-                    console.log('netWorkList', error)
-                    this.netWorkList = []
-                }
-            },
-            getNetworkLogo(chainId) {
-                const network = this.layer1NetworkList.find(item => item.chainId == chainId);
-                return network && network.networkLogo;
-            },
-            symbolChange() {
-                if (Object.keys(this.defaultValue).length) {
-                    // let chainId = window.ethereum && window.ethereum.chainId
-                    let chainId = this.$store.state.chainId;
-                    let networkItem = this.showNetWorklist.find(v => v.chainId == parseInt(chainId)) || this.showNetWorklist[0]
-                    this.select(networkItem)
-                }
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-    .select {
-        cursor: pointer;
-        width: 208px;
-        height: 40px;
-        border: 1px solid var(--border-color-base);
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        padding: 8px 12px;
-        span {
-            font-size: 12px;
-            font-family: Font;
-            text-align: left;
-            color: var(--text-color);
-            margin-left: 10px;
-        }
-
-        .icon-down {
-            width: 24px;
-            height: 24px;
-            margin-left: auto;
-            transition: .3s;
-            transform-origin: center center;
-            color: var(--text-color);
-        }
-        .icon-down.active {
-            transform: rotate(180deg);
-        }
-    }
-    .coin-type {
-        width: 24px;
-        height: 24px;
-        border: 0;
-    }
-    .drop-down {
-        width: 208px;
-        position: absolute;
-        z-index: 500;
-        background: var(--popup-bg);
-        border-radius: var(--border-radius-base);
-        overflow: hidden;
-        box-shadow: var(--box-shadow-base);
-        top: 110%;
-        ul {
-            li {
-                height: 40px;
-                padding: 8px;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                span {
-                    font-size: 14px;
-                    font-family: Font;
-                    text-align: left;
-                    color: var(--text-color-secondary);
-                    line-height: 9px;
-                    margin-left: 10px;
-                }
-            }
-            li:hover {
-                background-color: var(--select-item-bg);
-                span {
-                   color: var(--text-color);
-                }
-            }
-            li.active {
-                background-color: var(--select-item-bg);
-                span {
-                    color: var(--text-color);
-                }
-            }
-        }
-    }
-    /deep/ .networklist-select {
-        cursor: pointer;
-        width: 208px;
-        height: 40px;
-        border: 1px solid var(--text-color);
-        border-radius: 6px;
-        // margin-left: -40px;
-        .coin-select {
-            .select {
-                min-width: 208px;
-                max-width: 208px;
-                border-radius: 6px;
-                border: 1px solid var(--text-color);
-                background: var(--header-bg-color);
-                div.chose-top {
-                    display: flex;
-                    z-index: 10;
-                    align-items: center;
-                    span {
-                        display: inline-block;
-                        max-width: 160px;
-                        overflow : hidden;
-                        text-overflow: ellipsis;
-                        color: var(--text-color);
-                    }
-                }
-                .icon-down {
-                    z-index: 10;
-                }
-                .network-icon {
-                    display: none;
-                }
-                .drop-down {
-                    min-width: 208px;
-                    padding:0 12px;
-                    position: absolute;
-                    z-index: -1;
-                    background: var(--header-bg-color);
-                    border-radius: 6px 6px;
-                    box-shadow: 0px 1px 2px 0px rgba(144,161,184,0.2);
-                    top: 0;
-                    padding-top: 48px;
-                    ul {
-                        background: none;
-                        border: 0;
-                        li {
-                            span {
-                                color: var(--text-color-secondary);
-                                line-height: 1;
-                            }
-                            border-bottom: 0;
-                        }
-                        li:hover span {
-                            color: var(--text-color-placeholder);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .market-bg {
-        background: #3a3a3a;
-    }
-</style>

package/dist/components/businessComponents/CoinSelectList.vue

@@ -1,291 +0,0 @@
-<!--
- * @Author: Sneed
- * @Date: 2020-11-06 17:26:50
- * @LastEditTime: 2022-08-06 18:58:44
- * @LastEditors: Lewis
- * @Description:
--->
-<template>
-	<div class="coin-select">
-		<div class="select" @click="changeStatu">
-			<img class="coin-type" :src="curToken.icon_url" alt="" v-if='curToken.icon_url'/>
-			<span class="coin-name">{{ curToken.symbol || '' }}</span>
-			<span>{{ curToken.name || ''}}</span>
-			<img :class="{ 'icon-down': true, active: showChoseBox }" src="../../assets/img/icon-down.png" alt=""/>
-		</div>
-		<div class="coin-mask" v-show="showChoseBox" @click="changeStatu"></div>
-		<div class="drop-down" v-show="showChoseBox">
-			<div class="search" v-if='showSearch'>
-				<input type="text" :placeholder="$t('wallet_security_search_coin_name')" v-model="queryWord"/>
-				<svg-icon class="img" icon-class="query"></svg-icon>
-				<svg-icon class="clear" icon-class="clear" v-show="queryWord" @click="clear"></svg-icon>
-			</div>
-			<ul>
-				<li v-for="item in list" :key="item.name" :class="{ disabled: item.disabled }" @click="select(item)">
-					<img class="coin-type" :src="item.icon_url" alt="" />
-					<span class="name">{{ item.symbol }}</span>
-					<span v-if='item.name'>{{ item.name }}</span>
-				</li>
-			</ul>
-		</div>
-	</div>
-</template>
-
-<script>
-let closeFn;
-
-export default {
-    props: {
-        showSearch: {
-            type: Boolean,
-            default: false
-        },
-        curToken: {
-            type: Object,
-            default: function() {
-                return {}
-            }
-        },
-        list: {
-            type: Array,
-            default: () => []
-        },
-    },
-    data() {
-        return {
-            queryWord: "",
-            showChoseBox: false
-        }
-    },
-	computed: {
-	},
-    watch: {
-        value: function(val,oldValue) {
-            if(val) {
-                this.queryWord = "";
-            }else {
-                document.removeEventListener('click',closeFn)
-            }
-            closeFn = (e)=>{
-                if(!this.$el.contains(e.target)){
-                    this.$emit('input',false)
-                }
-            }
-            this.$nextTick(()=>{
-                if(val) {
-                    document.addEventListener('click',closeFn)
-                }else {
-                    document.removeEventListener('click',closeFn)
-                }
-            })
-        },
-        queryWord: function(val) {
-            this.query(val)
-        }
-    },
-    created() {
-    },
-    methods: {
-        changeStatu() {
-            this.showChoseBox = !this.showChoseBox
-        },
-        select(item) {
-            if(item.disabled) {
-                return;
-            }
-            this.$emit("input", item)
-        },
-        query(val) {
-            let curToken = this.list.filter(item=>{
-                return item.symbol.toLowerCase().indexOf(val.toLowerCase()) > -1
-            })
-            this.showChoseBox = false
-            this.$emit("input", curToken)
-        },
-        clear() {
-            this.queryWord = ''
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.coin-select {
-	position: relative;
-}
-.select {
-	cursor: pointer;
-	height: 48px;
-	border: 1px solid var(--border-color-base);
-	border-radius: 12px;
-	display: flex;
-	align-items: center;
-	padding: 12px 16px;
-	span {
-		font-size: 16px;
-		font-family: FontMedium;
-		text-align: left;
-		color: var(--text-color-secondary);
-		line-height: 20px;
-		align-self: flex-end;
-	}
-	.coin-name {
-		margin-left: 10px;
-		margin-right: 4px;
-		font-size: 16px;
-		color: var(--text-color-secondary);
-		line-height: 20px;
-		align-self: center;
-	}
-
-	.icon-down {
-		width: 20px;
-		height: 20px;
-		margin-left: auto;
-		transition: 0.3s;
-		transform-origin: center center;
-	}
-	.icon-down.active {
-		transform: rotate(180deg);
-	}
-}
-.coin-type {
-	width: 24px;
-	height: 24px;
-}
-.drop-down {
-	margin-top: 4px;
-	// width: 425px;
-	background: var(--drop-down-bg-color);
-	border-top-left-radius: 6px;
-	border-top-right-radius: 6px;
-	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	min-height: fit-content;
-	z-index: 5000;
-	.search {
-		margin: 20px;
-		position: relative;
-		input {
-			outline: none;
-			display: block;
-			width: 100%;
-			height: 50px;
-			background: #ffffff;
-			border: 1px solid var(--border-color-base);
-			border-radius: 6px;
-			padding-left: 56px;
-			font-size: 18px;
-			font-family: Font;
-
-			text-align: left;
-			color: var(--text-color);
-			line-height: 18px;
-		}
-		input:focus {
-			border: 1px solid var(--primary-color);
-		}
-		input::placeholder {
-			font-size: 16px;
-			font-family: Font;
-
-			text-align: left;
-			color: #c0c3cc;
-			line-height: 16px;
-		}
-		.img {
-			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 16px;
-		height: 50vh;
-		overflow: auto;
-		li {
-			padding: 12px 0;
-			display: flex;
-			align-items: center;
-			cursor: pointer;
-			span {
-				font-size: 16px;
-				font-family: FontMedium;
-				text-align: left;
-				color: var(--text-color-placeholder);
-				line-height: 16px;
-			}
-			.name {
-				margin-left: 10px;
-				margin-right: 6px;
-				font-size: 18px;
-				font-family: FontMedium;
-
-				text-align: left;
-				color: var(--text-color);
-				line-height: 18px;
-			}
-			.status {
-				margin-left: auto;
-				font-size: 14px;
-				font-family: Font;
-
-				text-align: left;
-				color: #c0c3cc;
-				line-height: 14px;
-			}
-		}
-		li.disabled {
-			cursor: not-allowed;
-			span {
-				color: #c0c3cc;
-			}
-			.name {
-				color: #c0c3cc;
-			}
-			.status {
-				color: #c0c3cc;
-			}
-		}
-	}
-}
-
-@media screen and (min-width: 768px) {
-	.coin-select {
-		position: relative;
-		.coin-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);
-			box-shadow: 0px 1px 2px 0px rgba(144, 161, 184, 0.2);
-			ul {
-				height: auto;
-				max-height: none;
-			}
-		}
-	}
-}
-@media screen and (min-width: 1200px) {
-}
-</style>