chore: progress

unionlabs · May 8, 2024 · 6e33fac · 6e33fac
1 parent 31211b3
commit 6e33fac
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 85 deletions.
diff --git a/app/src/lib/components/connect/connection.svelte b/app/src/lib/components/connect/connection.svelte
@@ -7,7 +7,6 @@ import CopyIcon from "virtual:icons/lucide/copy"
 import CheckIcon from "virtual:icons/lucide/check"
 import { Button } from "$lib/components/ui/button"
 import LoaderCircleIcon from "virtual:icons/lucide/loader-circle"
-import { goto } from "$app/navigation"
 import { truncateEvmAddress, truncateUnionAddress } from "$lib/wallet/utilities/format.ts"
 
 export let chain: "cosmos" | "evm"
@@ -97,15 +96,9 @@ const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
             'hover:text-rose-50 border-rose-900 hover:bg-transparent',
         ])}
         on:click={() => {
-          // goto('https://api.leapwallet.io/deeplink?dapp-url=https%3A%2F%2Fapp.union.build')
           if (!walletIdentifier) return
           if (connectStatus === 'connected') onDisconnectClick()
-          // else onConnectClick(walletIdentifier)
-          else
-            goto(
-              'https://api.leapwallet.io/deeplink?dapp-url=https%3A%2F%2F6914-104-28-203-59.ngrok-free.app',
-              { replaceState: true },
-            )
+          else onConnectClick(walletIdentifier)
         }}
       >
         <img src={icon} alt={name} class="size-7 mr-3 text-white" />

diff --git a/app/src/lib/components/send/dialogs/assets.svelte b/app/src/lib/components/send/dialogs/assets.svelte
@@ -3,11 +3,13 @@ import { cn } from "$lib/utilities/shadcn.ts"
 import Search from "virtual:icons/lucide/search"
 import * as Dialog from "$lib/components/ui/dialog"
 import { Input } from "$lib/components/ui/input/index.js"
+import type { Asset } from "$lib/components/send/types.ts"
 import { Button } from "$lib/components/ui/button/index.js"
 
 export let dialogOpen = false
 export let handleAssetSearch: (event: InputEvent) => void
 export let handleAssetSelect: (asset: string) => void
+export let assetSearchResults: Array<Asset>
 </script>
 
 <Dialog.Root
@@ -37,35 +39,37 @@ export let handleAssetSelect: (asset: string) => void
         />
       </div>
       <ul class="my-3 mx-2 space-y-1">
-        <li
-          class={cn([
-            // live ? 'cursor-pointer' : 'cursor-not-allowed',
-            'pb-2 dark:text-accent-foreground flex flex-col h-full justify-start align-middle space-x-3.5',
-          ])}
-        >
-          <Button
-            variant="ghost"
+        {#each assetSearchResults as { denom, symbol, explorerLink }, index}
+          <li
             class={cn([
-              'w-full flex justify-start space-x-4 p-2 rounded-none pl-3 h-[55px] my-auto',
+              // live ? 'cursor-pointer' : 'cursor-not-allowed',
+              'pb-2 dark:text-accent-foreground flex flex-col h-full justify-start align-middle space-x-3.5',
             ])}
-            on:click={() => handleAssetSelect('osmo-test-1')}
           >
-            <img
-              alt={`osmosis logo`}
-              class="size-10 my-auto mr-auto"
-              src={'/images/icons/osmosis.svg'}
-            />
-            <div class="size-full mr-auto flex flex-col items-start">
-              <span
-                class="my-auto text-[22px] font-extrabold mr-auto w-full text-left justify-between text-foreground"
-              >
-                OSMO
-              </span>
-              <span class="text-xs text-muted-foreground">osmo-test-5</span>
-            </div>
-            <p class="mb-auto text-lg font-black">420.69</p>
-          </Button>
-        </li>
+            <Button
+              variant="ghost"
+              class={cn([
+                'w-full flex justify-start space-x-4 p-2 rounded-none pl-3 h-[55px] my-auto',
+              ])}
+              on:click={() => handleAssetSelect('osmo-test-1')}
+            >
+              <img
+                alt={`osmosis logo`}
+                class="size-10 my-auto mr-auto"
+                src={'/images/icons/osmosis.svg'}
+              />
+              <div class="size-full mr-auto flex flex-col items-start">
+                <span
+                  class="my-auto text-[22px] font-extrabold mr-auto w-full text-left justify-between text-foreground"
+                >
+                  {symbol}
+                </span>
+                <span class="text-xs text-muted-foreground">osmo-test-5</span>
+              </div>
+              <p class="mb-auto text-lg font-black">420.69</p>
+            </Button>
+          </li>
+        {/each}
       </ul>
     </Dialog.Description>
   </Dialog.Content>

diff --git a/app/src/lib/components/send/types.ts b/app/src/lib/components/send/types.ts
@@ -0,0 +1,12 @@
+export interface Asset {
+  destination: "union-testnet-8" | "11155111" | "osmo-test-5" | "stargaze-1" | "534352"
+  port: string
+  client: string
+  channel: string
+  connection: string
+  contractAddress?: string
+  symbol: string
+  denom: string
+  display: string
+  explorerLink?: string
+}
diff --git a/app/src/routes/send/+page.svelte b/app/src/routes/send/+page.svelte
@@ -37,6 +37,7 @@ onMount(() => {
 })
 
 export let data: PageData
+const { chains, assets } = data
 
 const devBorder = 0 && "outline outline-[1px] outline-pink-200/40"
 
@@ -54,13 +55,13 @@ let dialogOpenToChain = false
 let dialogOpenToken = false
 let dialogOpenSettings = false
 
-let [chainSearch, chainSearchResults] = ["", data.chains]
+let [chainSearch, chainSearchResults] = ["", chains]
 
 function handleChainSearch(event: InputEvent) {
   const target = event.target
   if (!(target instanceof HTMLInputElement)) return
   chainSearch = target.value
-  chainSearchResults = data.chains.filter(chain =>
+  chainSearchResults = chains.filter(chain =>
     chain.name.toLowerCase().includes(chainSearch.toLowerCase())
   )
 }
@@ -79,35 +80,35 @@ const handleChainSelect = (name: string, target: "fromChain" | "toChain") =>
     200
   )()
 
-let selectedFromChain = data.chains.find(
+let selectedFromChain = chains.find(
   chain => chain.name.toLowerCase() === $queryParams.fromChain.toLowerCase()
 )
-$: selectedFromChain = data.chains.find(
+$: selectedFromChain = chains.find(
   chain => chain.name.toLowerCase() === $queryParams.fromChain.toLowerCase()
 )
 
-let selectedToChain = data.chains.find(
+let selectedToChain = chains.find(
   chain => chain.name.toLowerCase() === $queryParams.toChain.toLowerCase()
 )
-$: selectedToChain = data.chains.find(
+$: selectedToChain = chains.find(
   chain => chain.name.toLowerCase() === $queryParams.toChain.toLowerCase()
 )
 
-let [tokenSearch, tokenSearchResults] = ["", selectedFromChain?.assets]
+let [tokenSearch, assetSearchResults] = ["", assets]
 
 function handleAssetSearch(event: InputEvent) {
   const target = event.target
   if (!(target instanceof HTMLInputElement)) return
   tokenSearch = target.value
-  tokenSearchResults = selectedFromChain?.assets.filter(asset =>
+  assetSearchResults = assets.filter(asset =>
     asset.symbol.toLowerCase().includes(tokenSearch.toLowerCase())
   )
 }
 
-let selectedAsset = selectedFromChain?.assets.find(
+let selectedAsset = assets.find(
   token => token.symbol.toLowerCase() === $queryParams.token.toLowerCase()
 )
-$: selectedAsset = selectedFromChain?.assets.find(
+$: selectedAsset = assets.find(
   token => token?.symbol?.toLowerCase() === $queryParams?.token?.toLowerCase()
 )
 
@@ -146,9 +147,7 @@ let buttonText = "Send it 🔥" satisfies
 </script>
 
 <main class="flex justify-center size-full items-start px-0 sm:px-3 min-h-full">
-  <Card.Root
-    class="size-full max-w-[475px] h-[490px] sm:mt-16 mt-6 p-2 bg-transparent"
-  >
+  <Card.Root class="size-full max-w-[475px] h-[490px] sm:mt-16 mt-6 p-2 bg-transparent">
     <Card.Header
       class="pt-0.5 px-2 pb-0 flex flex-row w-full justify-between items-start h-10 gap-x-2 mb-4"
     >
@@ -175,10 +174,12 @@ let buttonText = "Send it 🔥" satisfies
       </Button>
     </Card.Header>
     <Card.Content
-      class={cn(['size-full max-h-[375px] pb-3 px-3.5 flex flex-col justify-between', devBorder,
-
-    'bg-card/60 bg-opacity-60 shadow-2xl shadow-cyan-300/10 border-none outline outline-1 outline-accent/50 rounded-md'
-    ])}
+      class={cn([
+        'size-full max-h-[375px] pb-3 px-3.5 flex flex-col justify-between',
+        devBorder,
+
+        'bg-card/60 bg-opacity-60 shadow-2xl shadow-cyan-300/10 border-none outline outline-1 outline-accent/50 rounded-md',
+      ])}
     >
       <div
         data-transfer-from-section
@@ -246,7 +247,7 @@ let buttonText = "Send it 🔥" satisfies
           class={cn(
             devBorder,
             'size-full max-h-[5.5rem] flex flex-row justify-between space-x-2 px-2 pl-3 pt-1.5 border-none',
-            'outline outline-1 outline-accent/90'
+            'outline outline-1 outline-accent/90',
           )}
         >
           <!-- <img src="/images/icons/osmosis.svg" alt="asset" class={cn('size-12 z-50 my-auto')} /> -->
@@ -297,7 +298,7 @@ let buttonText = "Send it 🔥" satisfies
           pattern="^[0-9]*[.,]?[0-9]*$"
           class={cn([
             'text-5xl font-bold h-20 mt-2 mb-0 px-3 focus-visible:ring-0 tabular-nums border-none',
-            'outline-1 outline-accent/90 outline'
+            'outline-1 outline-accent/90 outline',
           ])}
         />
       </div>
@@ -365,13 +366,13 @@ let buttonText = "Send it 🔥" satisfies
 <SettingsDialog dialogOpen={dialogOpenSettings} />
 
 <!-- token dialog -->
-<AssetsDialog dialogOpen={dialogOpenToken} {handleAssetSearch} {handleAssetSelect} />
+<AssetsDialog dialogOpen={dialogOpenToken} {handleAssetSearch} {handleAssetSelect} {assetSearchResults} />
 
 <svelte:head>
   <title>Union - Send</title>
 </svelte:head>
 
-<DraftPageNotice className='hidden sm:inline' />
+<DraftPageNotice className="hidden sm:inline" />
 
 <style lang="postcss">
 </style>
diff --git a/app/src/routes/send/+page.ts b/app/src/routes/send/+page.ts
@@ -1,20 +1,12 @@
 import type { PageLoad } from "./$types.ts"
+import type { Asset } from "$/lib/components/send/types.ts"
 
 interface Chain {
   id: string
   name: string
   ecosystem: "evm" | "cosmos"
   icon: string
   live: boolean
-  assets: Array<{
-    destination: "union-testnet-8" | "11155111" | "osmo-test-5" | "stargaze-1" | "534352"
-    port: string
-    client: string
-    channel: string
-    connection: string
-    contractAddress?: string
-    symbol: string
-  }>
 }
 
 export const load = (_context => {
@@ -43,16 +35,7 @@ export const load = (_context => {
         ecosystem: "evm",
         icon: "/images/icons/ethereum.svg",
         id: "11155111",
-        live: true,
-        assets: [
-          {
-            port: "sepolia-port",
-            client: "sepolia-client",
-            channel: "sepolia-channel",
-            connection: "sepolia-connection",
-            destination: "union-testnet-8"
-          }
-        ]
+        live: true
       },
       {
         name: "osmosis",
@@ -76,17 +59,65 @@ export const load = (_context => {
         ecosystem: "cosmos",
         icon: "/images/icons/stargaze.svg",
         id: "stargaze-1",
-        live: false,
-        assets: []
+        live: false
       },
       {
         name: "scroll",
         ecosystem: "cosmos",
         icon: "/images/icons/scroll.svg",
         id: "534352",
-        live: false,
-        assets: []
+        live: false
+      }
+    ] as Array<Chain>,
+    assets: [
+      {
+        destination: "union-testnet-8",
+        channel: "channel-7775",
+        port: "transfer",
+        client: "07-tendermint-20",
+        connection: "connection-7",
+        denom: "uosmo",
+        symbol: "OSMO",
+        display: "unionOSMO",
+        explorerLink: "https://www.mintscan.io/osmosis-testnet/tx/"
+      },
+      {
+        destination: "osmo-test-5",
+        channel: "channel-6",
+        port: "wasm.union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7",
+        client: "07-tendermint-20",
+        connection: "connection-7",
+        denom:
+          "factory/union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7/0xc5775fca1b3285dc8b749d58b227527211c108b8d3",
+        symbol: "OSMO",
+        contractAddress: "union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7",
+        display: "OSMO",
+        explorerLink: "https://testnet.bonlulu.uno/union/tx/"
+      },
+      {
+        destination: "osmo-test-5",
+        channel: "channel-6",
+        denom: "muno",
+        symbol: "UNO",
+        port: "wasm.union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7",
+        client: "07-tendermint-20",
+        connection: "connection-7",
+        contractAddress: "union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7",
+        display: "osmosisUNO",
+        explorerLink: "https://testnet.bonlulu.uno/union/tx/"
+      },
+      {
+        destination: "11155111",
+        channel: "channel-0",
+        port: "wasm.union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7",
+        client: "08-wasm-0",
+        connection: "connection-1",
+        denom: "muno",
+        symbol: "UNO",
+        contractAddress: "union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7",
+        display: "ethUNO",
+        explorerLink: "https://sepolia.etherscan.io/tx"
       }
-    ] as Array<Chain>
+    ] as Array<Asset>
   }
-}) satisfies PageLoad<{ chains: Array<Chain> }>
+}) satisfies PageLoad<{ chains: Array<Chain>; assets: Array<Asset> }>
diff --git a/typescript-sdk/scripts/to-osmosis.ts b/typescript-sdk/scripts/to-osmosis.ts
@@ -22,23 +22,24 @@ const unionClient = await UnionClient.connectWithSecret({
 })
 
 const contractAddress = "union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7"
-const osmoFromUnionToOsmosis = await unionClient.cosmwasmMessageExecuteContract([
+const unoFromUnionToOsmosis = await unionClient.cosmwasmMessageExecuteContract([
   {
     contractAddress,
     msg: {
       transfer: {
         channel: "channel-6",
         receiver: "osmo14qemq0vw6y3gc3u3e0aty2e764u4gs5l32ydm0",
-        memo: "sending wrapped OSMO from Union to Osmosis"
+        memo: "sending UNO from Union to Osmosis"
       }
     },
     funds: [
       {
-        amount: "2",
-        denom: `factory/${contractAddress}/0xc5775fca1b3285dc8b749d58b227527211c108b8d3`
+        amount: "77",
+        denom: `muno`
+        // denom: `factory/${contractAddress}/0xc5775fca1b3285dc8b749d58b227527211c108b8d3`
       }
     ]
   }
 ])
 
-console.log(osmoFromUnionToOsmosis.transactionHash)
+console.log(unoFromUnionToOsmosis.transactionHash)