From a57e8e62f6f2cbb66f853c595646b12550e6ce8b Mon Sep 17 00:00:00 2001 From: "Alisa | Side.one" Date: Mon, 29 May 2023 18:04:07 +0800 Subject: [PATCH] feat: h5 style --- src/modules/wallet/accounts.vue | 470 ++++++++++++++++++------------- src/modules/wallet/portfolio.vue | 218 +++++++------- 2 files changed, 406 insertions(+), 282 deletions(-) diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue index 73ffe9ee..a375cee0 100644 --- a/src/modules/wallet/accounts.vue +++ b/src/modules/wallet/accounts.vue @@ -6,132 +6,155 @@ import { fromBech32, toBase64, toBech32, toHex } from '@cosmjs/encoding'; import { Icon } from '@iconify/vue'; import { computed } from 'vue'; import { ref } from 'vue'; -import { scanLocalKeys, type AccountEntry, scanCompatibleAccounts, type LocalKey } from './utils'; +import { + scanLocalKeys, + type AccountEntry, + scanCompatibleAccounts, + type LocalKey, +} from './utils'; -const dashboard = useDashboard() -const format = useFormatter() -const editable = ref(false) // to edit addresses -const sourceAddress = ref('') // -const selectedSource = ref({} as LocalKey) // +const dashboard = useDashboard(); +const format = useFormatter(); +const editable = ref(false); // to edit addresses +const sourceAddress = ref(''); // +const selectedSource = ref({} as LocalKey); // function toggleEdit() { - editable.value = !editable.value + editable.value = !editable.value; } -const conf = ref(JSON.parse(localStorage.getItem("imported-addresses") || "{}") as Record) -const balances = ref({} as Record) -const delegations = ref({} as Record) +const conf = ref( + JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record< + string, + AccountEntry[] + > +); +const balances = ref({} as Record); +const delegations = ref({} as Record); // load balances -Object.values(conf.value).forEach(imported => { - let promise = Promise.resolve() +Object.values(conf.value).forEach((imported) => { + let promise = Promise.resolve(); for (let i = 0; i < imported.length; i++) { - promise = promise.then(() => new Promise((resolve) => { - // continue only if the page is living - if (imported[i].endpoint) { - loadBalances(imported[i].endpoint || "", imported[i].address).finally(() => resolve()) - } else { - resolve() - } - })) + promise = promise.then( + () => + new Promise((resolve) => { + // continue only if the page is living + if (imported[i].endpoint) { + loadBalances( + imported[i].endpoint || '', + imported[i].address + ).finally(() => resolve()); + } else { + resolve(); + } + }) + ); } - -}) +}); const accounts = computed(() => { - let a = [] as AccountEntry[] - Object.values(conf.value).forEach(x => { - x.forEach(entry => { - const delegation = delegations.value[entry.address] + let a = [] as AccountEntry[]; + Object.values(conf.value).forEach((x) => { + x.forEach((entry) => { + const delegation = delegations.value[entry.address]; if (delegation && delegation.length > 0) { - let amount = 0 - let denom = "" - delegation.forEach(b => { - amount += Number(b.balance.amount) - denom = b.balance.denom - }) - entry.delegation = { amount: String(amount), denom } + let amount = 0; + let denom = ''; + delegation.forEach((b) => { + amount += Number(b.balance.amount); + denom = b.balance.denom; + }); + entry.delegation = { amount: String(amount), denom }; } else { - entry.delegation = undefined + entry.delegation = undefined; } - entry.balances = balances.value[entry.address] - }) - a = a.concat(x) - }) - return a -}) + entry.balances = balances.value[entry.address]; + }); + a = a.concat(x); + }); + return a; +}); const addresses = computed(() => { - return accounts.value.map(x => (x.address)) -}) + return accounts.value.map((x) => x.address); +}); const sourceOptions = computed(() => { // scan all connected wallet - const keys = scanLocalKeys() + const keys = scanLocalKeys(); // all existed keys - Object.values(conf.value).forEach(x => { - const [first] = x + Object.values(conf.value).forEach((x) => { + const [first] = x; if (first) { - const { data } = fromBech32(first.address) - const hex = toHex(data) - if (keys.findIndex(k => toHex(fromBech32(k.cosmosAddress).data) === hex) === -1) { + const { data } = fromBech32(first.address); + const hex = toHex(data); + if ( + keys.findIndex( + (k) => toHex(fromBech32(k.cosmosAddress).data) === hex + ) === -1 + ) { keys.push({ cosmosAddress: first.address, - hdPath: `m/44/${first.coinType}/0'/0/0` - }) + hdPath: `m/44/${first.coinType}/0'/0/0`, + }); } } - }) + }); // address if (sourceAddress.value) { - const { prefix, data } = fromBech32(sourceAddress.value) - const chain = Object.values(dashboard.chains).find(x => x.bech32Prefix === prefix) + const { prefix, data } = fromBech32(sourceAddress.value); + const chain = Object.values(dashboard.chains).find( + (x) => x.bech32Prefix === prefix + ); if (chain) { keys.push({ cosmosAddress: sourceAddress.value, - hdPath: `m/44/${chain.coinType}/0'/0/0` - }) + hdPath: `m/44/${chain.coinType}/0'/0/0`, + }); } } if (!selectedSource.value.cosmosAddress && keys.length > 0) { - selectedSource.value = keys[0] + selectedSource.value = keys[0]; } - return keys -}) + return keys; +}); const availableAccount = computed(() => { if (selectedSource.value.cosmosAddress) { - return scanCompatibleAccounts([selectedSource.value]).filter(x => !addresses.value.includes(x.address)) + return scanCompatibleAccounts([selectedSource.value]).filter( + (x) => !addresses.value.includes(x.address) + ); } - return [] -}) + return []; +}); function removeAddress(addr: string) { - const newConf = {} as Record - Object.keys(conf.value).forEach(key => { - const acc = conf.value[key].filter(x => x.address !== addr) - if (acc.length > 0) newConf[key] = acc - }) - conf.value = newConf - localStorage.setItem("imported-addresses", JSON.stringify(conf.value)) + const newConf = {} as Record; + Object.keys(conf.value).forEach((key) => { + const acc = conf.value[key].filter((x) => x.address !== addr); + if (acc.length > 0) newConf[key] = acc; + }); + conf.value = newConf; + localStorage.setItem('imported-addresses', JSON.stringify(conf.value)); } async function addAddress(acc: AccountEntry) { - const { data } = fromBech32(acc.address) - const key = toBase64(data) + const { data } = fromBech32(acc.address); + const key = toBase64(data); if (conf.value[key]) { // existed - if (conf.value[key].findIndex(x => x.address === acc.address) > -1) { - return + if (conf.value[key].findIndex((x) => x.address === acc.address) > -1) { + return; } - conf.value[key].push(acc) + conf.value[key].push(acc); } else { - conf.value[key] = [acc] + conf.value[key] = [acc]; } // also add chain to favorite if (!dashboard?.favoriteMap?.[acc.chainName]) { - dashboard.favoriteMap[acc.chainName] = true + dashboard.favoriteMap[acc.chainName] = true; window.localStorage.setItem( 'favoriteMap', JSON.stringify(dashboard.favoriteMap) @@ -139,153 +162,209 @@ async function addAddress(acc: AccountEntry) { } if (acc.endpoint) { - loadBalances(acc.endpoint, acc.address) + loadBalances(acc.endpoint, acc.address); } - localStorage.setItem("imported-addresses", JSON.stringify(conf.value)) + localStorage.setItem('imported-addresses', JSON.stringify(conf.value)); } async function loadBalances(endpoint: string, address: string) { - const client = CosmosRestClient.newDefault(endpoint) - await client.getBankBalances(address).then(res => { - balances.value[address] = res.balances.filter(x => x.denom.length < 10) - }) - await client.getStakingDelegations(address).then(res => { - delegations.value[address] = res.delegation_responses - }) + const client = CosmosRestClient.newDefault(endpoint); + await client.getBankBalances(address).then((res) => { + balances.value[address] = res.balances.filter((x) => x.denom.length < 10); + }); + await client.getStakingDelegations(address).then((res) => { + delegations.value[address] = res.delegation_responses; + }); } -