Skip to content

Commit

Permalink
Clients and Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
schnetzlerjoe committed Sep 5, 2023
1 parent ff9164f commit bbc8087
Show file tree
Hide file tree
Showing 18 changed files with 416 additions and 53 deletions.
2 changes: 1 addition & 1 deletion packages/snap/snap.manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"url": "https://github.com/cosmos/snap.git"
},
"source": {
"shasum": "BUvYfrMzqItqZnUamxnbljHlzx457YOFsyK8bip408E=",
"shasum": "z5MiND1FM0FftB3U1mnaXtDh2sOwXOWQAH57NrUZ7i4=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
Expand Down
8 changes: 0 additions & 8 deletions packages/snap/src/types/registry.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,6 @@ export let registry = [
chain_id: "crescent",
url: "https://raw.githubusercontent.com/cosmos/chain-registry/master/crescent/chain.json",
},
{
chain_id: "evmos",
url: "https://raw.githubusercontent.com/cosmos/chain-registry/master/evmos/chain.json",
},
{
chain_id: "gitopia",
url: "https://raw.githubusercontent.com/cosmos/chain-registry/master/gitopia/chain.json",
Expand All @@ -43,10 +39,6 @@ export let registry = [
chain_id: "gravitybridge",
url: "https://raw.githubusercontent.com/cosmos/chain-registry/master/gravitybridge/chain.json",
},
{
chain_id: "injective",
url: "https://raw.githubusercontent.com/cosmos/chain-registry/master/injective/chain.json",
},
{
chain_id: "juno",
url: "https://raw.githubusercontent.com/cosmos/chain-registry/master/juno/chain.json",
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,12 @@
},
"type": "module",
"dependencies": {
"@cosmjs/crypto": "^0.31.1",
"@cosmjs/stargate": "^0.31.1",
"@fullhuman/postcss-purgecss": "^5.0.0",
"@metamask/detect-provider": "^2.0.0",
"flowbite-svelte": "^0.44.4",
"flowbite-svelte-icons": "^0.3.6",
"flowbite-svelte-icons": "^0.4.3",
"gridjs": "^6.0.6",
"gridjs-svelte": "^2.1.1",
"postcss": "^8.4.27",
Expand Down
41 changes: 21 additions & 20 deletions packages/ui/src/components/AddChain.svelte
Original file line number Diff line number Diff line change
@@ -1,22 +1,12 @@
<script>
import { JSONEditor } from 'svelte-jsoneditor';
import { state } from '../store/state';
let content = {
text: undefined,
json: {
array: [1, 2, 3],
boolean: true,
color: '#82b92c',
null: null,
number: 123,
object: { a: 'b', c: 'd' },
string: 'Hello World'
}
}
$: console.log('contents changed:', content)
</script>
import defaultChains from '../../../snap/tests/public/chain-test.json';
import { JSONEditor, Mode } from 'svelte-jsoneditor';
import { state } from '../store/state';
let content = {
json: JSON.parse(JSON.stringify(defaultChains[0]))
}
</script>

<div class="rectangle-66">
<div class="group-4449">
Expand All @@ -33,8 +23,8 @@
</div>
<div class="group-4447">
<div class="group-4445">
<div class="overlap-group">
<JSONEditor bind:content mainMenuBar={false} navigationBar={false} statusBar={false} mode="text"/>
<div class="overlap-group jse-theme-dark">
<JSONEditor content={content} mainMenuBar={false} navigationBar={false} statusBar={false} mode={Mode.text}/>
</div>
</div>
<button class="frame-1-2 create-new-chain inter-medium-white-12px">
Expand All @@ -46,6 +36,8 @@
</div>

<style>
@import 'svelte-jsoneditor/themes/jse-theme-dark.css';
.rectangle-66 {
z-index: 100;
backdrop-filter: blur(15px) brightness(100%);
Expand Down Expand Up @@ -153,6 +145,11 @@
min-height: 330px;
font-family: var(--font-family-inter);
color: var(--white);
overflow-y: scroll;
max-height: 375px;
/* Variables Editor */
--jse-theme-color: transparent;
--jse-theme-color-highlight: transparent;
}
.overlap-group:focus {
Expand All @@ -169,6 +166,8 @@
min-height: 330px;
font-family: var(--font-family-inter);
color: var(--white);
overflow-y: scroll;
max-height: 375px;
}
.overlap-group:focus-visible {
Expand All @@ -185,6 +184,8 @@
min-height: 330px;
font-family: var(--font-family-inter);
color: var(--white);
overflow-y: scroll;
max-height: 375px;
}
.frame-1-2 {
Expand Down
26 changes: 24 additions & 2 deletions packages/ui/src/components/Balance.svelte
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
<script>
import { state } from "../store/state";
import { copyToClipboard } from "../utils/general";
export let name = "Osmosis";
export let dollarAmount = 16.75;
export let tokenAmount = 48.77;
export let tokenDenom = "osmo";
export let chainAddress = "osmo1m9l358xunhdhqp0568dj37mzhvuxx9uxtz4vt7";
export let logo = "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/mask-group-18@2x.png";
const copyAddress = async () => {
await copyToClipboard(chainAddress);
$state.showAlert = true;
$state.alertText = "Address Copied to Clipboard"
console.log($state);
}
</script>

<div class="group-55">
Expand All @@ -29,10 +39,11 @@
</div>
</div>
</div>
<div class="frame-33 frame-2">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={copyAddress} class="frame-33 frame-2">
<div class="cosmos1vhw82tqftrg-1 inter-medium-white-14px">
{chainAddress}
</div>
</div>
<img class="content_copy-1" src="https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/content-copy-1.svg" alt="content_copy">
</div>
</div>
Expand Down Expand Up @@ -189,4 +200,15 @@
min-width: 18px;
margin-left: 15px;
}
.frame-33:hover {
width: max-content;
z-index: 100;
}
@media (max-width: 1024px) {
.frame-33:hover {
width: 100%;
}
}
</style>
18 changes: 11 additions & 7 deletions packages/ui/src/components/Menu.svelte
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<script>
import { goto } from "$app/navigation";
import { page } from '$app/stores';
let menu_items = [
{ title: "Dashboard", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/dashboard.svg", path: "/dashboard" },
{ title: "History", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/dns.svg", path: "/transactions" },
{ title: "Address Book", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/account-box.svg", path: "/address" },
{ title: "Settings", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/settings.svg", path: "/settings" }
{ route: "/dashboard", title: "Dashboard", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/dashboard.svg", path: "/dashboard" },
{ route: "/transactions", title: "History", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/dns.svg", path: "/transactions" },
{ route: "/address", title: "Address Book", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/account-box.svg", path: "/address" },
{ route: "/settings", title: "Settings", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/settings.svg", path: "/settings" }
]
export let active = "Dashboard"
export let active = $page.route.id
</script>

<div class="">
<div class="frame-47 frame-2">
{#each menu_items as tab}
<div class="w-full flex justify-between h-[20px]">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="frame" on:click={() => goto(tab.path)}>
<img
Expand All @@ -21,8 +23,9 @@
alt={tab.title.toLowerCase()}
/>
<div class="item-1 inter-medium-white-16px">{tab.title}</div>
<div hidden={active != tab.title} class="rectangle-12"></div>
</div>
<div hidden={active != tab.route} class="rectangle-12"></div>
</div>
{/each}
</div>
</div>
Expand All @@ -44,9 +47,10 @@
}
.frame-2 {
display: grid;
display: flex;
justify-content: center;
width: auto;
padding: 20px;
}
.frame {
Expand Down
45 changes: 41 additions & 4 deletions packages/ui/src/routes/dashboard/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
<script>
<script lang="ts">
import Balance from "../../components/Balance.svelte";
import Transfer from "../../components/Transfer.svelte";
import { state } from "../../store/state";
import { chains, fetchAllClients } from "../../store/chains";
import { onMount } from "svelte";
import type { ChainClient } from "../../utils/chains";
export let balances = [
let allChains: (ChainClient | null)[] = [];
$: {
allChains = $chains;
console.log(allChains);
}
onMount(async () => {
await fetchAllClients();
console.log("All Clients Created...");
});
export let balancesOld = [
{
name: "Osmosis",
dollarAmount: 16.75,
Expand Down Expand Up @@ -38,15 +54,32 @@
]
</script>

<div hidden={!$state.showAlert} style="font-family: 'Inter'; position: fixed; right: 10px; bottom: 0px; z-index: 1000;">
<div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ml-3 text-sm font-normal">{$state.alertText}</div>
<button on:click={() => { $state.showAlert = false; $state.alertText = "";}} type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
</button>
</div>
</div>
<div style="padding: 25px;">
<div class="grid grid-cols-8 gap-[20px]">
<div class="lg:col-span-5 col-span-8">
<div class="chain-holding-distribution">
Chains
</div>
<div class="mt-[20px] grid grid-cols-2 gap-[20px]">
{#each balances as balance}
<div class="col-span-2 lg:col-span-1">
{#each balancesOld as balance}
<div class="balance col-span-2 lg:col-span-1">
<Balance
name={balance.name}
dollarAmount={balance.dollarAmount}
Expand All @@ -72,4 +105,8 @@
font-size: 20px;
font-weight: 700;
}
.balance:hover {
z-index: 100;
}
</style>
4 changes: 2 additions & 2 deletions packages/ui/src/routes/transactions/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@
--black: #000000;
--white-2: #ffffff1a;
--white: #ffffff;
--licorice: #141414;
--licorice: #14141473;
--blueberry: #594bff;
--eerie-black: #1b1721;
--font-size-xl: 20px;
--font-size-xl: 18px;
--font-size-m: 14px;
--font-size-l: 16px;
--font-size-s: 12px;
Expand Down
22 changes: 22 additions & 0 deletions packages/ui/src/store/balances.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { writable } from 'svelte/store';
import { getAllBalances } from '../utils/balances';

/**
* @type {import('../utils/query').ChainBalances[] | undefined}
*/
let initialBalance = [];

const balances = writable(initialBalance);

export const fetchAllBalances = async () => {
try {
const balancesAll = await getAllBalances();

balances.set(balancesAll);
} catch (error) {
console.error("Error fetching balances:", error);
throw error
}
};

export default balances;
15 changes: 15 additions & 0 deletions packages/ui/src/store/chains.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { writable } from 'svelte/store';
import { type ChainClient, createAllChains } from '../utils/chains';

export const chains = writable<(ChainClient | null)[]>([]);

export const fetchAllClients = async () => {
try {
const clients = await createAllChains();

chains.set(clients);
} catch (error) {
console.error('Error fetching all clients:', error);
chains.set([]);
}
};
4 changes: 3 additions & 1 deletion packages/ui/src/store/state.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,7 @@ import { writable } from 'svelte/store';
export const state = writable({
connected: false,
openAddAddressPopup: false,
openAddChainPopup: false
openAddChainPopup: false,
alertText: "",
showAlert: false
});
17 changes: 17 additions & 0 deletions packages/ui/src/utils/balances.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { getChainAddresses, getChains, snapId } from './snap';
import { queryBalances } from './query';
import type { ChainBalances } from './query';

export const getAllBalances = async (): Promise<ChainBalances[]> => {
let addressesP = getChainAddresses();

let chainsP = getChains();

let [addresses, chains] = await Promise.all([addressesP, chainsP]);

let balancesP = chains.map(chain => queryBalances(chain.apis.rpc[0].address, addresses.filter(item => item.chain_id === chain.chain_id)[0].address, chain.chain_id));

let balances = Promise.all(balancesP);

return balances
};
Loading

0 comments on commit bbc8087

Please sign in to comment.