From a2659c405035df039c73e868f27eec2c3895d1ee Mon Sep 17 00:00:00 2001 From: Joe Schnetzler Date: Mon, 11 Sep 2023 01:03:13 +0000 Subject: [PATCH] Fix display and ui optimize --- .gitpod.yml | 11 ++ packages/snap/package.json | 2 +- packages/snap/snap.manifest.json | 4 +- packages/snap/src/index.ts | 2 +- packages/ui/src/components/AddChain.svelte | 35 +++-- packages/ui/src/components/Balance.svelte | 2 +- packages/ui/src/components/Transfer.svelte | 129 +++++++++-------- packages/ui/src/routes/+page.svelte | 16 ++- .../ui/src/routes/api/balances/+server.js | 15 +- packages/ui/src/routes/balances/+page.svelte | 41 +++--- packages/ui/src/store/balances.ts | 3 +- packages/ui/src/utils/constants.ts | 9 +- packages/ui/src/utils/general.ts | 132 ++++++++++++++++-- packages/ui/src/utils/ibc.ts | 1 + 14 files changed, 286 insertions(+), 116 deletions(-) create mode 100644 .gitpod.yml diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..f2bf425 --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,11 @@ +# This configuration file was automatically generated by Gitpod. +# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) +# and commit this file to your remote git repository to share the goodness with others. + +# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart + +tasks: + - init: yarn install && yarn run build + command: yarn run start + + diff --git a/packages/snap/package.json b/packages/snap/package.json index fde71b0..0fe4186 100644 --- a/packages/snap/package.json +++ b/packages/snap/package.json @@ -1,6 +1,6 @@ { "name": "@cosmsnap/snap", - "version": "0.1.12", + "version": "0.1.13", "description": "The Cosmos extension for your Metamask wallet.", "repository": { "type": "git", diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json index 996d955..d7c6ff0 100644 --- a/packages/snap/snap.manifest.json +++ b/packages/snap/snap.manifest.json @@ -1,5 +1,5 @@ { - "version": "0.1.12", + "version": "0.1.13", "description": "Cosmos Extension that adds Cosmos support to Metamask.", "proposedName": "Cosmos Extension", "repository": { @@ -7,7 +7,7 @@ "url": "https://github.com/cosmos/snap.git" }, "source": { - "shasum": "mjWxRVx7VvVyf7FsGBLI0orobQyZhLK4x+vUbu/HqM0=", + "shasum": "Wb57UIJWIkWoPgwIfeb9OabgrNESQc9nufrAqJo+Mtk=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snap/src/index.ts b/packages/snap/src/index.ts index 0e8539d..9120423 100644 --- a/packages/snap/src/index.ts +++ b/packages/snap/src/index.ts @@ -485,7 +485,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ heading("Confirm Chain Addition"), divider(), heading("Chain Info"), - text(`${new_chain}`), + text(`${JSON.stringify(new_chain, null, 4)}`), ]), }, }); diff --git a/packages/ui/src/components/AddChain.svelte b/packages/ui/src/components/AddChain.svelte index e31d3bf..11a622c 100644 --- a/packages/ui/src/components/AddChain.svelte +++ b/packages/ui/src/components/AddChain.svelte @@ -1,14 +1,27 @@ - @@ -18,7 +31,7 @@
- {edit ? "Edit chain" : "Add new chain"} + Add new chain
$state.openAddChainPopup = false} class="clear" src="https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64ef9c2985c1bf1a9cb5beba/img/clear@2x.png" alt="clear"> @@ -28,11 +41,11 @@
- +
-
diff --git a/packages/ui/src/components/Balance.svelte b/packages/ui/src/components/Balance.svelte index be30440..d3f7dee 100644 --- a/packages/ui/src/components/Balance.svelte +++ b/packages/ui/src/components/Balance.svelte @@ -50,7 +50,7 @@ ${_.round(dollarAmount, 2)}

- {_.round(tokenAmount, 2) + " " + tokenDenom.substring(1).toUpperCase()} + {_.round(tokenAmount, 2) + " " + tokenDenom}

diff --git a/packages/ui/src/components/Transfer.svelte b/packages/ui/src/components/Transfer.svelte index c535c24..300c70d 100644 --- a/packages/ui/src/components/Transfer.svelte +++ b/packages/ui/src/components/Transfer.svelte @@ -4,82 +4,101 @@ import { balances } from "../store/balances"; import { getSkipRecommendation, getMsgs, type CoinIBC } from '../utils/ibc'; import { state } from "../store/state"; - import type { Coin } from "@cosmjs/stargate"; import type { Msg } from "@cosmsnap/snapper"; import _ from 'lodash'; - import { makeCoinPresentable } from "../utils/general"; let source = "cosmoshub-4"; let destination = "cosmoshub-4"; - let denom = "uatom"; - let available: Coin = {amount: "0", denom}; + let selected: CoinIBC = {amount: "0", denom: "uatom", ibc: false, display: "uatom".substring(1).toUpperCase()}; let amount = 0; let noRoute = false; let recipient = ""; let slippage = "1"; let sourceBalances: CoinIBC[] = []; - let defaultSourceAsset: string = ""; + let setInitial = false; $: { if ($balances) { let source_chain = $balances.filter(item => item.chain_id == source)[0]; if (source_chain) { sourceBalances = source_chain.balances; - defaultSourceAsset = source_chain.balances[0].ibc ? source_chain.balances[0].ibc_denom! : source_chain.balances[0].denom; + if (!setInitial) { + selected = sourceBalances[0]; + setInitial = true; + } } } } - const computeIBCRoute = async () => { - noRoute = false; - if (source != destination) { - try { - let skipRec = await getSkipRecommendation(denom, source, destination); - if (skipRec.recommendations.length == 0) { - noRoute = true; - throw new Error("No recommended asset found."); - } - let msg = await getMsgs(source, denom, destination, skipRec.recommendations[0].asset.denom, (amount*1000000).toString(), slippage, $chains); - let fees = { - amount: [ - { - amount: "100000", - denom: "uosmo" - } - ], - gas: "300000", - } - let messages: Msg[] = msg.msgs.map(item => { - let msgCamel: any = _.mapKeys(JSON.parse(item.msg), (value: any, key: any) => _.camelCase(key)); - return { - value: msgCamel, - typeUrl: item.msg_type_url - } - }); - await window.cosmos.signAndBroadcast(source, messages, fees); - } catch (error: any) { - console.log(error); - noRoute = true; - $state.alertType = "danger"; - $state.showAlert = true; - $state.alertText = `Error Occured Finding Route: ${error.message}` + const setSelected = async (e: Event) => { + const target = e.target as HTMLSelectElement; + if (sourceBalances) { + let find = sourceBalances.find(item => item.denom.toUpperCase() == target.value.toUpperCase()); + if (find) { + selected = find } } } - $: { - let filtBal = $balances.filter(item => item.chain_id == source); - if (filtBal.length > 0) { - let filtTokens = filtBal[0].balances.filter(item => item.denom == denom); - if (filtTokens.length > 0) { - available = makeCoinPresentable(filtTokens[0]) - } else { - available = makeCoinPresentable({ amount: "0", denom, ibc: false }); - } - } else { - available = makeCoinPresentable({ amount: "0", denom, ibc: false }); + const computeIBCRoute = async () => { + noRoute = false; + + if (source === destination) { + return; } - } + + try { + const skipRec = await getSkipRecommendation(selected.denom, source, destination); + + if (!Array.isArray(skipRec.recommendations) || skipRec.recommendations.length === 0) { + throw new Error("No recommended asset found."); + } + + const firstRec = skipRec.recommendations[0].asset; + if (!firstRec || !firstRec.denom) { + throw new Error("Invalid recommendation data."); + } + + const adjustedAmount = (amount * 1000000).toString(); + + const msg = await getMsgs(source, selected.denom, destination, firstRec.denom, adjustedAmount, slippage, $chains); + + if (!Array.isArray(msg.msgs)) { + throw new Error("Invalid message data."); + } + + const fees = { + amount: [ + { + amount: "100000", + denom: "uosmo" + } + ], + gas: "300000", + }; + + const messages: Msg[] = msg.msgs.map(item => { + if (!item.msg || !item.msg_type_url) { + throw new Error("Invalid message format."); + } + + const msgCamel = _.mapKeys(JSON.parse(item.msg), (value: any, key: any) => _.camelCase(key)); + + return { + value: msgCamel, + typeUrl: item.msg_type_url + }; + }); + + await window.cosmos.signAndBroadcast(source, messages, fees); + + } catch (error: any) { + console.error(error); + $state.alertType = "danger"; + $state.showAlert = true; + $state.alertText = `Error Occurred Finding Route: ${error.message}`; + } + };
@@ -100,9 +119,9 @@
Asset
- { await setSelected(e) }} id="denom" name="denom" class="group-32-1 source-chain-osmosis inter-medium-white-14px"> {#each sourceBalances as balance} - + {/each}
@@ -125,8 +144,8 @@ -
{ amount = _.round((Number(available.amount) / 1000000)) }} class="available-balance-1454789 inter-medium-blueberry-14px cursor-pointer"> - Available: {_.round((Number(available.amount) / 1000000))} {available.denom.substring(1).toUpperCase()} +
{ amount = _.round((Number(selected.amount) / 1000000)) }} class="available-balance-1454789 inter-medium-blueberry-14px cursor-pointer"> + Available: {_.round((Number(selected.amount) / 1000000))} {selected.display}