├── .npmrc
├── run.sh
├── static
    ├── robots.txt
    └── favicon.png
├── .gitignore
├── src
    ├── index.test.ts
    ├── chain-registry
    │   ├── index.ts
    │   └── README.md
    ├── app.d.ts
    ├── app.html
    └── routes
    │   └── +page.svelte
├── .eslintignore
├── .prettierignore
├── tests
    └── test.ts
├── installs.txt
├── vite.config.js
├── .prettierrc
├── playwright.config.ts
├── .vscode
    └── settings.json
├── svelte.config.js
├── .eslintrc.cjs
├── tsconfig.json
├── README.md
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/run.sh:
--------------------------------------------------------------------------------
1 | # production
2 | git pull && npm i && npm run build && npm run preview


--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: Googlebot
2 | 
3 | User-agent: *
4 | Allow: /


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Reecepbcups/ibc-anywhere-webapp/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | 


--------------------------------------------------------------------------------
/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 | 
3 | describe('sum test', () => {
4 | 	it('adds 1 + 2 to equal 3', () => {
5 | 		expect(1 + 2).toBe(3);
6 | 	});
7 | });
8 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/tests/test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | 
3 | test('index page has expected h1', async ({ page }) => {
4 | 	await page.goto('/');
5 | 	expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
6 | });
7 | 


--------------------------------------------------------------------------------
/src/chain-registry/index.ts:
--------------------------------------------------------------------------------
 1 | import assets from './assets';
 2 | import chains from './chains';
 3 | import ibc from './ibc';
 4 | 
 5 | export default {
 6 |   assets,
 7 |   chains,
 8 |   ibc
 9 | };
10 | 
11 | export { assets, chains, ibc };
12 | 


--------------------------------------------------------------------------------
/installs.txt:
--------------------------------------------------------------------------------
1 | 
2 | # gets all chains we need to make it easy for what we want to transfer
3 | # https://github.com/cosmology-tech/chain-registry
4 | npm install chain-registry
5 | 
6 | 
7 | # keplr
8 | # https://github.com/cosmology-tech/cosmos-kit/tree/main/packages/keplr


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | 
 3 | /** @type {import('vite').UserConfig} */
 4 | const config = {
 5 | 	plugins: [sveltekit()],
 6 | 	test: {
 7 | 		include: ['src/**/*.{test,spec}.{js,ts}']
 8 | 	}
 9 | };
10 | 
11 | export default config;
12 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte"],
 7 | 	"pluginSearchDirs": ["."],
 8 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 9 | }
10 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { PlaywrightTestConfig } from '@playwright/test';
 2 | 
 3 | const config: PlaywrightTestConfig = {
 4 | 	webServer: {
 5 | 		command: 'npm run build && npm run preview',
 6 | 		port: 4173
 7 | 	},
 8 | 	testDir: 'tests'
 9 | };
10 | 
11 | export default config;
12 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | // and what to do when importing types
 4 | declare namespace App {
 5 | 	// interface Error {}
 6 | 	// interface Locals {}
 7 | 	// interface PageData {}
 8 | 	// interface Platform {}
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/chain-registry/README.md:
--------------------------------------------------------------------------------
1 | ## Chain Registry
2 | 
3 | I had some issues getting my fork to work and import (TS/npm noob). This is a simple 'hacky' solution to get the objects to import correctly.
4 | 
5 | git clone reecepbcups/chain-registry-ts
6 | 
7 | generate latest from the chain-registry submodule
8 | 
9 | copy the chain-registry/src/*.ts files to this area.


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "files.exclude": {
 3 |         "**/.git": true,
 4 |         "**/.svn": true,
 5 |         "**/.hg": true,
 6 |         "**/CVS": true,
 7 |         "**/.DS_Store": true,
 8 |         "**/Thumbs.db": true,
 9 |         "**/.classpath": true,
10 |         "**/.project": true,
11 |         "**/.settings": true,
12 |         "**/.factorypath": true,
13 |         "**/node_modules": false
14 |     }
15 | }


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/kit/vite';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		adapter: adapter()
12 | 	}
13 | };
14 | 
15 | export default config;
16 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		
 7 | 		<title>IBC Anywhere</title>		
 8 | 		<meta name="author" content="Reece Williams" />		
 9 | 		<meta name="description" content="IBC transfer tokens anywhere in the interchain" />				
10 | 		<meta name="keywords" content="IBC, Cosmos, Interchain, Inter Blockchain Communication, Juno Network, Osmosis">
11 | 
12 | 		<meta name="viewport" content="width=device-width" />
13 | 		%sveltekit.head%
14 | 	</head>
15 | 	<body data-sveltekit-preload-data="hover">
16 | 		<div style="display: contents">%sveltekit.body%</div>
17 | 	</body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ibc-anywhere
 2 | 
 3 | <https://ibc.reece.sh>
 4 | 
 5 | A simple website interface for transferring tokens with IBC.
 6 | The goal is to make it super simple to transfer a token from any network to any other network in which a relayer channel is already setup.
 7 | 
 8 | Currently, the only way to do this is with JunoSwap, Osmosis, but that only transfers to a single network. If you want to transfer your ATOM to a network without a DEX interface, you have to do it manually in Keplr / CLI. This removes that requirement.
 9 | 
10 | In the future, add support for IBCMemo
11 | 
12 | Goal: Make it a few clicks (<4-5) to transfer an IBC packet for ICS-20 (native tokens) to another chain which has a relayer.
13 | 
14 | ---
15 | 
16 | ## Developing
17 | 
18 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
19 | 
20 | ```bash
21 | npm run dev
22 | ```
23 | 
24 | ## Building
25 | 
26 | To create a production version of your app:
27 | 
28 | ```bash
29 | npm run build
30 | ```
31 | 
32 | You can preview the production build with `npm run preview`.
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "ibc-anywhere",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev --port 6001 --host 0.0.0.0",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview --port 6001 --host",
 9 | 		"test": "playwright test",
10 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12 | 		"test:unit": "vitest",
13 | 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
14 | 		"format": "prettier --plugin-search-dir . --write ."
15 | 	},
16 | 	"devDependencies": {
17 | 		"@playwright/test": "^1.28.1",
18 | 		"@sveltejs/adapter-auto": "^1.0.0",
19 | 		"@sveltejs/kit": "^1.0.0",
20 | 		"@typescript-eslint/eslint-plugin": "^5.45.0",
21 | 		"@typescript-eslint/parser": "^5.45.0",
22 | 		"eslint": "^8.28.0",
23 | 		"eslint-config-prettier": "^8.5.0",
24 | 		"eslint-plugin-svelte3": "^4.0.0",
25 | 		"prettier": "^2.8.0",
26 | 		"prettier-plugin-svelte": "^2.8.1",
27 | 		"svelte": "^3.54.0",
28 | 		"svelte-check": "^2.9.2",
29 | 		"tslib": "^2.4.1",
30 | 		"typescript": "^4.9.3",
31 | 		"vite": "^4.0.0",
32 | 		"vitest": "^0.25.3"
33 | 	},
34 | 	"type": "module",
35 | 	"dependencies": {
36 | 		"@cosmjs/stargate": "^0.30.1",
37 | 		"@cosmos-kit/keplr": "^0.32.14",
38 | 		"chain-registry": "^1.6.0",
39 | 		"cosmjs-types": "^0.8.0",
40 | 		"svelte-french-toast": "^1.0.3"
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 |     Reece Williams | Dec 2022 | IBCAnywhere
  3 |     - Easily transfer a token denom from one chain to another in 5 clicks
  4 |     - Abstracts away the complexity of channels for the average user    
  5 | 
  6 |     TODO:
  7 |     - Only show channels for the to-chain which from-chain has a connection too
  8 |     - Dockerize
  9 |     - Remove redundant code, such as the open keplr window. Make easy utils
 10 |     - Better design. animations?
 11 |     - Auto convert IBC denoms to their human readable versions, including exponents
 12 |     - Mobile Support
 13 | -->
 14 | <script lang="ts">
 15 | 	import type { Window as KeplrWindow } from '@keplr-wallet/types';
 16 | 
 17 | 	import type { Coin } from 'cosmjs-types/cosmos/base/v1beta1/coin';
 18 | 	import { SigningStargateClient, type MsgTransferEncodeObject } from '@cosmjs/stargate';
 19 | 
 20 | 	// Signing (Keplr & Ledger)
 21 | 	import type { OfflineAminoSigner } from '@cosmjs/amino';
 22 | 	import type { OfflineDirectSigner } from '@cosmjs/proto-signing';
 23 | 
 24 | 	// ibc balances
 25 | 	import { Tendermint34Client } from '@cosmjs/tendermint-rpc';
 26 | 	import { setupIbcExtension, QueryClient } from '@cosmjs/stargate';
 27 | 	import type { DenomTrace } from '@cosmjs/stargate/node_modules/cosmjs-types/ibc/applications/transfer/v1/transfer';
 28 | 	import type {IbcExtension} from '@cosmjs/stargate/build/modules/ibc/queries';
 29 | 	import { MsgTransfer } from "cosmjs-types/ibc/applications/transfer/v1/tx";
 30 | 
 31 | 	// notifications
 32 | 	import toast, { Toaster, type ToastOptions } from 'svelte-french-toast';    	
 33 | 
 34 | 	// https://github.com/cosmology-tech/chain-registry/blob/main/packages/assets/src/asset_lists.ts	
 35 | 	// Can't find module even though its the same for the fork?
 36 | 	import { assets, chains, ibc } from '../chain-registry';	
 37 | 	import type { Chain } from '@chain-registry/types';
 38 | 	import Long from 'long';
 39 | 
 40 | 	// This does not work for Failed to load url?
 41 | 	// import assets from '../../node_modules/chain-registry/packages/chain-registry/types/assets';	
 42 | 	// import chains from '../../node_modules/chain-registry/packages/chain-registry/types/chains';
 43 | 	// import ibc from '../../node_modules/chain-registry/packages/chain-registry/types/ibc';
 44 | 
 45 | 	// Since RPCs are Ass, force use mine which ACTUALLY HAS CORS ENABLED AND LETS ME DEVELOP
 46 | 	const JUNO_RPC = "https://juno-rpc.reece.sh"	
 47 | 
 48 | 	let divisor = 10**6;
 49 | 	let toggle_divisor = () => {
 50 | 		 // converts utoken to token, can we get this from an IBC asset denom? 10**6 breaks ETH based assets
 51 | 		if(divisor === 10**6) {
 52 | 			divisor = 1;
 53 | 		} else {
 54 | 			divisor = 10**6;
 55 | 		}
 56 | 	}
 57 | 
 58 | 	let usePFM = false;
 59 | 	let togglePFMUsage = () => {
 60 | 		usePFM = !usePFM
 61 | 	}
 62 | 
 63 | 	const toast_style: ToastOptions = {
 64 | 		position: 'top-right',
 65 | 		duration: 6000,
 66 | 		style: 'background: #333; color: #fff; width: 15%; font-size: 1.1rem;'
 67 | 	};    
 68 | 
 69 | 	interface Balance {
 70 | 		denom: string; // human readable (ex: uosmo)
 71 | 		symbol: string // human readable WITHOUT the u (ex: osmo)
 72 | 		amount: string;
 73 | 		ibc_trace?: string; // ibc/
 74 | 		channel?: string;
 75 | 		// chain_id?: string; // this possible to get from channel-number?
 76 | 	}
 77 | 
 78 | 	let chain_input: string;
 79 | 	let to_chain_input: string;
 80 | 	let pfm_chain_input: string;
 81 | 	
 82 | 	let pfmWalletAddr: string;
 83 | 	
 84 | 	let balances: Balance[] = [];
 85 | 
 86 | 	const channel_version: string = 'ics20-1';
 87 | 	const port_id: string = 'transfer';
 88 | 	let gas = 300000;
 89 | 
 90 | 	let ibc_denom: string;
 91 | 	let ibc_amount: number;
 92 | 
 93 | 	let from_client: SigningStargateClient | undefined;
 94 | 	
 95 | 	const proper_rpcs = (chain_id: string, chain_rpc: any) => {		
 96 | 		let rpcs: any;
 97 | 		if(chain_id === "juno-1") {
 98 | 			rpcs = [{address: JUNO_RPC}, {address: "https://rpc.juno.strange.love/"}, ...chain_rpc]
 99 | 		} else {
100 | 			rpcs = chain_rpc
101 | 		}
102 | 		return rpcs
103 | 	}
104 | 
105 | 	let query_client: IbcExtension;
106 | 	const get_query_client = async (chain_id: string): Promise<IbcExtension> => {		
107 | 		const chain = chains.find((chain) => chain.chain_id === chain_id);
108 | 		if (chain === undefined) {
109 | 			toast.error(`Chain ${chain_id} not found`, toast_style);
110 | 			throw new Error('Chain not found');
111 | 		}
112 | 		let chain_rpc = chain.apis?.rpc;
113 | 		if (chain_rpc === undefined) {
114 | 			throw new Error('Chain RPC not found');
115 | 		}		
116 | 
117 | 		// hardcode non ass endpoints that actually work	
118 | 		chain_rpc = proper_rpcs(chain_id, chain_rpc)
119 | 		if (!chain_rpc) {
120 | 			throw new Error('Chain RPC not found');
121 | 		}		
122 | 
123 | 
124 | 		// try 10 different endpoints max
125 | 		for (let i = 0; i < 10; i++) {
126 | 			try {
127 | 				const tm_client: Tendermint34Client = await Tendermint34Client.connect(chain_rpc[i].address);		
128 | 				let temp = QueryClient.withExtensions(tm_client);
129 | 				query_client = setupIbcExtension(temp);
130 | 				break;
131 | 			} catch (error) {
132 | 				// cors issues
133 | 				console.log(error);
134 | 			}
135 | 		}
136 | 
137 | 		return query_client;
138 | 	}
139 | 
140 | 	const get_wallet_for_chain = async (
141 | 		chain_id: string
142 | 	): Promise<OfflineAminoSigner | OfflineDirectSigner> => {
143 | 		if (chain_input === undefined) {
144 | 			toast.error(`From chain not selected`, toast_style);
145 | 			throw new Error('Chain not found');
146 | 		}
147 | 
148 | 		// open keplr
149 | 		const keplr = window as KeplrWindow;
150 | 		if (keplr === undefined) {
151 | 			toast.error(`Keplr not found`, toast_style);
152 | 			throw new Error('Keplr not found');
153 | 		}
154 | 
155 | 		let signer = keplr.getOfflineSignerAuto;
156 | 		if (signer === undefined) {
157 | 			throw new Error('Keplr not found');
158 | 		}
159 | 
160 | 		return signer(chain_id);
161 | 	};
162 | 
163 | 	const get_pfm_wallet = async () => {
164 | 		// get wallet for pfm_chain
165 | 		if (pfm_chain_input === undefined) {
166 | 			toast.error(`PFM chain not selected`, toast_style);
167 | 			throw new Error('PFM chain not found');
168 | 		}
169 | 
170 | 		// open keplr
171 | 		const keplr = window as KeplrWindow;
172 | 
173 | 		if (keplr === undefined) {
174 | 			toast.error(`Keplr not found`, toast_style);
175 | 			throw new Error('Keplr not found');
176 | 		}
177 | 
178 | 		let signer = keplr.getOfflineSignerAuto;
179 | 
180 | 		if (signer === undefined) {
181 | 			throw new Error('Keplr not found');
182 | 		}
183 | 
184 | 		let wallet = await signer(pfm_chain_input);
185 | 		let accounts = await wallet.getAccounts()
186 | 		if (accounts === undefined) {
187 | 			throw new Error('Keplr not found');
188 | 		}
189 | 		
190 | 		pfmWalletAddr = accounts[0].address;
191 | 	}
192 | 
193 | 	const get_ibc_denom_human_readable = async (chain_id: string, ibc_trace: string): Promise<DenomTrace | undefined> => {		
194 | 		if (ibc_trace !== undefined && (!ibc_trace.startsWith('ibc/'))) {
195 | 			return undefined;
196 | 		}
197 | 
198 | 		// redefine as it could be a new wallet / chain connection
199 | 		query_client = await get_query_client(chain_id);		
200 | 		
201 | 		// maybe get all denom traces in the future instead of a single one per, are they the same SHA hash (trace)?
202 | 		const data = await query_client.ibc.transfer.denomTrace(ibc_trace);
203 | 		console.log('data', data)
204 | 
205 | 		return data?.denomTrace;
206 | 	}
207 | 
208 | 	// async function connectToChain
209 | 	const connect_wallet_get_balances = async () => {		
210 | 		const chain = chains.find((chain) => chain.chain_id === chain_input);
211 | 		if (chain === undefined) {
212 | 			throw new Error('Chain not found');
213 | 		}
214 | 
215 | 		let chain_rpc = chain.apis?.rpc;
216 | 		if (chain_rpc === undefined) {
217 | 			throw new Error('Chain RPC not found');
218 | 		}
219 | 
220 | 		let wallet = await get_wallet_for_chain(chain.chain_id);
221 | 		wallet.getAccounts().then((accounts) => {
222 | 			console.log('accounts', accounts);
223 | 		});
224 | 
225 | 		// hardcode non ass endpoints that actually work
226 | 		chain_rpc = proper_rpcs(chain.chain_id, chain_rpc)
227 | 		if (!chain_rpc) {
228 | 			throw new Error('Chain RPC not found');
229 | 		}	
230 | 
231 | 		// try 10 different endpoints max
232 | 		for (let i = 0; i < 10; i++) {
233 | 			try {
234 | 
235 | 				// let opts = {
236 | 				// 	prefix: chain.bech32_prefix
237 | 				// }
238 | 
239 | 				from_client = await SigningStargateClient.connectWithSigner(chain_rpc[i].address, wallet);
240 | 				await from_client.getAllBalances((await wallet.getAccounts())[0].address); // ensures it works correctly
241 | 				break;
242 | 			} catch (error) {
243 | 				// cors
244 | 				console.log(error);
245 | 			}
246 | 		}
247 | 
248 | 		if (from_client === undefined) {
249 | 			throw new Error('RPC with CORS not found, Client can not be created');
250 | 		}
251 | 
252 | 		// get the from balance of addr
253 | 		// assign read only from await client.getAllBalances(addr) to user_balancecs Coin[]
254 | 		const _bals = await from_client.getAllBalances((await wallet.getAccounts())[0].address);
255 | 		// console.log(balances)		
256 | 		
257 | 		// set the global users_balances to balances		
258 | 		balances = []
259 | 		for (const b of _bals) {
260 | 			// instead get all denoms from the chain in the future so it only requires 1 query
261 | 			if (b.denom.startsWith('ibc/')) {		
262 | 				// get the human readable name
263 | 				await get_ibc_denom_human_readable(chain_input, b.denom).then((denom_trace) => {
264 | 					if (denom_trace !== undefined) {
265 | 
266 | 						let symbol = denom_trace.baseDenom;
267 | 						if(symbol.startsWith('u')) {
268 | 							symbol = symbol.substring(1).toUpperCase();
269 | 						}
270 | 
271 | 						console.log('symbol', symbol)
272 | 
273 | 						balances.push({
274 | 							denom: denom_trace.baseDenom,
275 | 							amount: b.amount,
276 | 							ibc_trace: b.denom, // so we know what we are actually sending
277 | 							channel: denom_trace.path,
278 | 							symbol: symbol,
279 | 						});
280 | 					}
281 | 				}).catch((error) => {
282 | 					// its possible you send a denom to another chain which does not have it
283 | 					// Ex: Osmosis DEX stars -> Cosmos Hub - breaks since CosmosHub is not relaying with stars
284 | 					// So push it as ibc_trace for the Denom name, oh well
285 | 				
286 | 					console.log(error);
287 | 					balances.push({
288 | 						denom: b.denom,
289 | 						amount: b.amount,
290 | 						symbol: b.denom, // standard ibc/ name if none is found			
291 | 					});
292 | 				})
293 | 			} else {
294 | 				let symbol = b.denom;
295 | 				if(symbol.startsWith('u')) {
296 | 					symbol = symbol.substring(1).toUpperCase();
297 | 				}
298 | 
299 | 				balances.push({
300 | 					denom: b.denom,
301 | 					amount: b.amount,
302 | 					symbol: symbol, // standard ibc/ name if none is found
303 | 				});
304 | 			}
305 | 		}		
306 | 		// update it for Svelte
307 | 		balances = [...balances]
308 | 		console.log('balances', balances);
309 | 		// set the id of denoms_to_send to display show
310 | 		document.getElementById('denoms_to_send')!.style.display = 'block';
311 | 		toast.success(`Keplr Connected to ${chain.pretty_name}`, {
312 | 			position: 'top-right',
313 | 			duration: 6000,
314 | 			style: 'border-radius: 200px; background: #333; color: #fff; width: 12.5%;'
315 | 		});
316 | 	};
317 | 
318 | 	interface Channel {
319 | 		name: string;
320 | 		channel_id: string;
321 | 		version: string; // ics20-1
322 | 		port_id: string; // transfer
323 | 	}
324 | 
325 | 	const get_all_channel_pairs = (from_name: string): Channel[] => {
326 | 		const matches: Channel[] = [];
327 | 
328 | 		for (const channel of ibc) {
329 | 			const c = channel.channels[0]; // why channel 0
330 | 
331 | 			if (channel.chain_1.chain_name === from_name) {
332 | 				matches.push({
333 | 					name: channel.chain_2.chain_name,
334 | 					channel_id: c.chain_1.channel_id,
335 | 					port_id: c.chain_1.port_id,
336 | 					version: c.version
337 | 				});
338 | 			} else if (channel.chain_2.chain_name === from_name) {
339 | 				matches.push({
340 | 					name: channel.chain_1.chain_name,
341 | 					channel_id: c.chain_2.channel_id,
342 | 					port_id: c.chain_2.port_id,
343 | 					version: c.version
344 | 				});
345 | 			}
346 | 		}
347 | 		return matches;
348 | 	};
349 | 
350 | 	// get_all_channel_pairs("cosmoshub")
351 | 
352 | 	const get_channel = (from_name: string, to_name: string): string | undefined => {
353 | 		const pairs = get_all_channel_pairs(from_name);
354 | 		// todo; add version & port_id in the future
355 | 		for (const pair of pairs) {
356 | 			if (pair.name === to_name) {
357 | 				return pair.channel_id;
358 | 			}
359 | 		}
360 | 
361 | 		return undefined;
362 | 	};
363 | 
364 | 	const ibc_transfer = async () => {
365 | 		// use sendIbcTokens from stargate client
366 | 		const chain = chains.find((chain) => chain.chain_id === chain_input);
367 | 		if (chain === undefined) {
368 | 			toast.error(`From chain ${chain_input} not found`, toast_style);
369 | 			throw new Error('Chain not found');
370 | 		}
371 | 
372 | 		const to_chain = chains.find((chain) => chain.chain_id === to_chain_input);
373 | 		if (to_chain === undefined) {
374 | 			toast.error(`To chain ${to_chain_input} not found`, toast_style);
375 | 			throw new Error('Chain not found');
376 | 		}
377 | 
378 | 		const pfm_chain: Chain | undefined = chains.find((chain) => chain.chain_id === pfm_chain_input);
379 | 		
380 | 
381 | 		let chain_rpc = chain.apis?.rpc;
382 | 		let to_chain_rpc = to_chain.apis?.rpc;
383 | 		if (chain_rpc === undefined || to_chain_rpc === undefined) {
384 | 			throw new Error('Chain RPC not found');
385 | 		}
386 | 
387 | 		let wallet = await get_wallet_for_chain(chain.chain_id);
388 | 		const addr = (await wallet.getAccounts())[0].address;
389 | 
390 | 		const to_wallet = await get_wallet_for_chain(to_chain.chain_id);
391 | 		const to_wallet_addr = (await to_wallet.getAccounts())[0].address;
392 | 
393 | 		// get current time in seconds
394 | 		const current_time = Math.floor(Date.now() / 1000);
395 | 		const timeout_time = current_time + 300; // 5 minutes
396 | 
397 | 		const channel_id = get_channel(chain.chain_name, to_chain.chain_name); // ex: channel-141
398 | 		if (channel_id === undefined || channel_id === '') {
399 | 			toast.error(
400 | 				`There is no IBC channel for ${chain.chain_name} -> ${to_chain.chain_name} with version ${channel_version} and port_id ${port_id}`,
401 | 				toast_style
402 | 			);
403 | 			throw new Error('Channel not found');
404 | 		}
405 | 
406 | 		if (from_client === undefined) {
407 | 			throw new Error('from_client not found');
408 | 		}		
409 | 
410 | 		toast('Waiting for Keplr to sign IBC transfer', { ...toast_style, icon: '⏳' });
411 | 
412 | 		// TODO: What about LP positions?
413 | 		let actual_amount = ibc_amount;
414 | 		if (divisor == 10**6) {
415 | 			actual_amount = ibc_amount * 10**6;
416 | 		}
417 | 
418 | 		if (ibc_denom.length == 0) {
419 | 			toast.error(`No denom selected`, toast_style);
420 | 			throw new Error('No denom selected');
421 | 		}
422 | 
423 | 		if(usePFM) {
424 | 			if (pfm_chain === undefined) {
425 | 				toast.error(`PFM chain ${pfm_chain} not found`, toast_style);
426 | 				throw new Error('Chain not found');
427 | 			}
428 | 
429 | 			let timeoutTimestamp = timeout_time;	
430 | 			
431 | 			const to_final_channel = get_channel(to_chain.chain_name, pfm_chain.chain_name); // ex: channel-141
432 | 			if(to_final_channel === undefined) {
433 | 				toast.error(`There is no IBC channel for ${to_chain.chain_name} -> ${pfm_chain.chain_name} with version ${channel_version} and port_id ${port_id}`, toast_style);
434 | 				throw new Error('Channel not found for PFM');
435 | 			}
436 | 
437 | 			const timeoutTimestampNanoseconds = timeoutTimestamp
438 | 			? Long.fromNumber(timeoutTimestamp).multiply(1_000_000_000)
439 | 			: undefined;
440 | 
441 | 			let pfm_memo: string = `{ "forward": {"receiver": "${pfmWalletAddr}","port":"transfer","channel":"${to_final_channel}"}}`
442 | 			console.log(pfm_memo)
443 | 
444 | 			const transferMsg: MsgTransferEncodeObject = {
445 | 				typeUrl: "/ibc.applications.transfer.v1.MsgTransfer",
446 | 				value: MsgTransfer.fromPartial({
447 | 					sourcePort: port_id,
448 | 					sourceChannel: channel_id,
449 | 					sender: addr,
450 | 					receiver: to_wallet_addr,
451 | 					token: { denom: ibc_denom, amount: actual_amount.toString() },					
452 | 					timeoutTimestamp: timeoutTimestampNanoseconds,
453 | 					memo: pfm_memo,
454 | 				}),
455 | 			};
456 | 			console.log(transferMsg)
457 | 
458 | 			from_client.signAndBroadcast(addr, [transferMsg], { amount: [], gas: gas.toString() }, `ibc.reece.sh | ${chain.pretty_name} -> ${to_chain.pretty_name} (PFM) -> ${pfm_chain.pretty_name}`).then((tx) => {
459 | 				console.log(tx);
460 | 				if (tx.code == 0) {
461 | 					toast.success(
462 | 						`IBC transfer from ${chain.pretty_name} successful\n\nTxHash: ${tx.transactionHash}`,
463 | 						toast_style
464 | 					);
465 | 				}				
466 | 			})			
467 | 			.catch((err) => {
468 | 				toast.error(`${err}`, toast_style);
469 | 			});;
470 | 		} else {
471 | 			from_client.sendIbcTokens(
472 | 				addr,
473 | 				to_wallet_addr,
474 | 				{ denom: ibc_denom, amount: actual_amount.toString() },
475 | 				port_id,
476 | 				channel_id,
477 | 				undefined,
478 | 				timeout_time,
479 | 				{ amount: [], gas: gas.toString() },
480 | 				`ibc.reece.sh | ${chain.pretty_name} -> ${to_chain.pretty_name}`
481 | 			)
482 | 			.then((tx) => {
483 | 				console.log(tx);
484 | 				if (tx.code == 0) {
485 | 					toast.success(
486 | 						`IBC transfer from ${chain.pretty_name} successful\n\nTxHash: ${tx.transactionHash}`,
487 | 						toast_style
488 | 					);
489 | 				}				
490 | 			})			
491 | 			.catch((err) => {
492 | 				toast.error(`${err}`, toast_style);
493 | 			});
494 | 		}
495 | 	};
496 | </script>
497 | 
498 | <Toaster />
499 | 
500 | <!-- datalist of users_balances -->
501 | <datalist id="denoms">
502 | 	{#each balances as balance}
503 | 		<option value={balance.denom}>{balance.denom}</option>
504 | 	{/each}
505 | </datalist>
506 | 
507 | <!-- chain names & match with chain_id value -->
508 | <datalist id="chain_names">
509 | 	{#each chains as chain}
510 | 		<option value={chain.chain_id}>{chain.pretty_name}</option>
511 | 	{/each}
512 | </datalist>
513 | 
514 | <!-- datalist of denoms in humand reacable format -->
515 | <datalist id="denoms_human_readable">
516 | 	{#each balances as denom}
517 | 		<option value={denom.denom}>{denom.denom}</option>
518 | 	{/each}
519 | </datalist>
520 | 
521 | <!-- chain names & match with chain_id value -->
522 | <datalist id="chain_names">
523 | 	{#each chains as chain}
524 | 		<option value={chain.chain_id}>{chain.pretty_name}</option>
525 | 	{/each}
526 | </datalist>
527 | 
528 | <div class="page container">
529 | 
530 | 	<h1>IBC Anywhere</h1>
531 | 	<p>Easily IBC token transfer from and to any chain in a few clicks (<a href="https://twitter.com/Reecepbcups_" target="noreferrer">Get Support</a>)</p>
532 | 	<p><a href="https://github.com/Reecepbcups/ibc-anywhere-webapp" target="noreferrer">Open Source</a></p>
533 | 
534 | 	<hr>
535 | 
536 | <center>
537 | 	<div id="from_chain" class="div_center">
538 | 		<h3>From Chain</h3>
539 | 		<p>Type the chain you want and select in in the dropdown box</p>
540 | 		<input
541 | 			id="chain_input"
542 | 			type="text"
543 | 			placeholder="from chain-id"
544 | 			list="chain_names"
545 | 			bind:value={chain_input}
546 | 		/>
547 | 
548 | 		<!-- Connects the wallet to the current chain, then we will show the user more information. -->
549 | 		<input type="submit" value="Connect Wallet" on:click={() => connect_wallet_get_balances()} />
550 | 	</div>
551 | 
552 | 	<div id="denoms_to_send" style="display: none;" class="div_center">		
553 | 		<h3>Balances</h3>
554 | 
555 | 		<ul>
556 | 			{#each balances as b}
557 | 				{#if b.channel === undefined}
558 | 					
559 | 					{#if divisor > 1}
560 | 						<li>{Number(b.amount)/divisor} {b.symbol}</li>
561 | 					{:else}					
562 | 						<li>{b.amount} {b.denom}</li>
563 | 					{/if}
564 | 
565 | 				{:else}
566 | 
567 | 					{#if divisor > 1}
568 | 						<li>{Number(b.amount)/divisor} {b.symbol} <i>({b.channel})</i></li>
569 | 					{:else}					
570 | 						<li>{b.amount} {b.denom}</li>
571 | 					{/if}
572 | 
573 | 				{/if}
574 | 			{/each}
575 | 		</ul>
576 | 		
577 | 		<input type="submit" value="(Advanced) Toggle Denom Format" on:click={() => toggle_divisor()} />
578 | 		<br>
579 | 		<input type="number" placeholder="Amount" bind:value={ibc_amount} />				
580 | 
581 | 		<!-- create a select input box of list denoms -->
582 | 		<select bind:value={ibc_denom}>
583 | 			<option value="" disabled selected>Select a Denom</option>
584 | 
585 | 			{#each balances as balance, i}	
586 | 				{#if balance.channel === undefined}
587 | 					<option value={balance.denom}>{balance.symbol}</option>				
588 | 				{:else}
589 | 					<option value={balance.ibc_trace}>{balance.symbol} ({balance.channel})</option>
590 | 				{/if}
591 | 			{/each}
592 | 
593 | 		</select>
594 | 
595 | 		<!-- create a button which when clicked, toggles divisor -->
596 | 		<br>			
597 | 		<input type="submit" value="Use Packet Forward Middleware" on:click={() => togglePFMUsage()} />
598 | 
599 | 		{#if usePFM}
600 | 			<h4>PFM Passthrough Chain</h4>
601 | 			<input type="text" placeholder="Middlware Passthrough Chain-ID" list="chain_names" bind:value={to_chain_input} />	
602 | 			
603 | 			<br>
604 | 			<h4>Destination Chain</h4>
605 | 			<input type="text" placeholder="Final Chain-ID" list="chain_names" bind:value={pfm_chain_input} />			
606 | 			<input type="submit" value="Get Wallet Address" on:click={() => 				
607 | 				get_pfm_wallet()		
608 | 			} />
609 | 
610 | 			<!-- if pfm_wallet is set, show it -->
611 | 			{#if pfmWalletAddr !== undefined}
612 | 				<p>Destination Address: {pfmWalletAddr}</p>
613 | 			{/if}
614 | 		{:else}
615 | 			<h4>Destination Chain</h4>
616 | 			<input type="text" placeholder="Destination chain-id" list="chain_names" bind:value={to_chain_input} />
617 | 		{/if}
618 | 
619 | 		<br>
620 | 		<input type="submit" name="Submit IBC Tx" on:click={() => ibc_transfer()} />
621 | 
622 | 	</div>
623 | 
624 | 	<div id="successful_txs" style="display: none;" class="div_center">
625 | 		<ul id="past_txs_ul" />
626 | 	</div>
627 | </center>
628 | </div>
629 | 
630 | <style>
631 | 	* {
632 | 		font-size: 1.0em;		
633 | 		color: #fff;
634 | 		font-family: 'Nunito Sans', sans-serif;
635 | 	}
636 | 
637 | 	:global(body) {
638 | 		background-color: #1c1c1c;
639 | 	}
640 | 
641 | 	.page {
642 | 		padding-top: 30px;
643 | 		width: 100%;
644 | 		margin: auto;
645 | 		display: grid;
646 | 		position: relative;
647 | 	}
648 | 
649 | 	.container {
650 | 		background-color: #333;
651 | 		padding: 24px;
652 | 		margin-top: 1%;
653 | 		border-radius: 16px;
654 | 		width: 40%;
655 | 		display: flex;
656 | 		flex-direction: column;
657 | 		justify-content: center;
658 | 		align-items: center;
659 | 		margin-left: auto;
660 | 		margin-right: auto;
661 | 		box-shadow: 15px 20px 30px #444444;
662 | 		border: 1px solid #000;
663 | 	}
664 | 
665 | 	input[type="submit"] {
666 | 		margin: 16px;
667 | 		padding: 8px 16px;
668 | 		border: none;
669 | 		border-radius: 8px;
670 | 		background-color: #fff;
671 | 		color: #000;
672 | 		font-size: 16px;
673 | 		cursor: pointer;
674 | 	}
675 | 
676 | 	input[type='text'],
677 | 	input[type='number'],
678 | 	select {
679 | 		width: 40%;
680 | 		padding: 12px 20px;
681 | 		margin: 8px 0;
682 | 		display: inline-block;
683 | 		border: 1px solid #ccc;
684 | 		border-radius: 4px;
685 | 		box-sizing: border-box;
686 | 		color: #fff;		
687 | 		background-color: #000;		
688 | 	} 
689 | 
690 | 	h1 {
691 | 		font-size: 48px;
692 | 		margin-bottom: 10px;
693 | 		text-align: center;
694 | 	}
695 | 
696 | 	ul {
697 | 		list-style: none;
698 | 	}
699 | 
700 | 	li {
701 | 		margin: 10px;
702 | 	}
703 | </style>
704 | 


--------------------------------------------------------------------------------