fix: light mode

app/src/lib/components/connect/connect.svelte

@@ -9,6 +9,7 @@ import * as Avatar from "$lib/components/ui/avatar"
 import WalletIcon from "virtual:icons/lucide/wallet"
 import { Separator } from "$lib/components/ui/separator"
 import * as Collapsible from "$lib/components/ui/collapsible"
+import ThemeSwitch from "$lib/components/header/theme-switch.svelte"
 import ChevronsUpDownIcon from "virtual:icons/lucide/chevrons-up-down"
 import { sepoliaStore, evmWalletsInformation } from "$lib/wallet/evm/index.ts"
 import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index.ts"
@@ -42,13 +43,13 @@ let collapsibleOpen = true
     </Button>
   </Sheet.Trigger>
   <Sheet.Content
-    class="border-solid border-[1px] border-accent min-w-[95%] sm:min-w-min sm:max-w-[475px] px-2"
+    class="h-full border-solid border-[1px] border-accent min-w-[95%] sm:min-w-min sm:max-w-[475px] px-2 flex flex-col justify-start"
   >
     <Sheet.Header class="mb-4 pl-2">
       <Sheet.Title>
         <!-- Connect Wallet -->
         <Avatar.Root
-          class={cn(['size-8', $sepoliaStore.connectionStatus !== 'connected' && 'hidden'])}
+          class={cn('size-8', $sepoliaStore.connectionStatus !== 'connected' && 'hidden')}
         >
           <Avatar.Image
             alt="ethereum avatar"
@@ -62,15 +63,15 @@ let collapsibleOpen = true
       open={true}
       tabindex={-1}
       onOpenChange={() => (collapsibleOpen = !collapsibleOpen)}
-      class="focus:ring-0 ring-transparent focus-visible:ring-0 mb-0 pb-0"
+      class="h-3/5 focus:ring-0 ring-transparent focus-visible:ring-0 mb-auto pb-0"
     >
       <Collapsible.Trigger
         tabindex={-1}
-        class={cn([
+        class={cn(
           'mb-3 font-bold w-full flex justify-between items-center align-middle transition-all active:scale-98 rounded-md px-2',
           'border-solid border-[1px] border-transparent hover:bg-white/10',
           !collapsibleOpen && 'border-accent',
-        ])}
+        )}
       >
         <span class="mb-0.5 text-center w-full text-lg">Connect Wallets</span>
         <Button variant="ghost" size="sm" class="w-9 p-0 my-auto h-10 hover:bg-transparent">
@@ -102,5 +103,8 @@ let collapsibleOpen = true
         />
       </Collapsible.Content>
     </Collapsible.Root>
+    <div class="">
+      <ThemeSwitch />
+    </div>
   </Sheet.Content>
 </Sheet.Root>

app/src/lib/components/connect/connection.svelte

@@ -63,7 +63,7 @@ const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
     {#if copyClicked}
       <CheckIcon class="size-4 ml-auto" />
     {:else}
-      <CopyIcon class="size-4 ml-auto text-black/70" />
+      <CopyIcon class="size-4 ml-auto dark:text-black/70" />
     {/if}
   {/if}
 </Button>
@@ -93,15 +93,15 @@ const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
             'opacity-60 hover:opacity-100',
           hoverState === 'hover' &&
             connectedWalletId === id &&
-            'hover:text-rose-50 border-rose-900 hover:bg-transparent',
+            'hover:text-rose-500 border-rose-900 hover:bg-transparent',
         )}
         on:click={() => {
           if (!walletIdentifier) return
           if (connectStatus === 'connected') onDisconnectClick()
           else onConnectClick(walletIdentifier)
         }}
       >
-        <img src={icon} alt={name} class="size-7 mr-3 text-white" />
+        <img src={icon} alt={name} class="size-7 mr-3 dark:text-white" />
         {name}
         {#if connectStatus === 'connected'}
           {#if connectedWalletId === id}

app/src/lib/components/draft-page-notice.svelte

@@ -8,7 +8,7 @@ export let className = ""
 <Badge
   variant="outline"
   class={cn(
-    'text-sm text-left left-2 top-2 absolute border-solid border-amber-400/40 rounded-md',
+    'text-sm text-left left-2 top-2 absolute border-solid border-amber-400/40 bg-amber-200 dark:bg-transparent rounded-md',
     className,
   )}
 >

app/src/lib/components/header/header.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { page } from "$app/stores"
 import { cn } from "$lib/utilities/shadcn.ts"
+import ThemeSwitch from "./theme-switch.svelte"
 import SearchBar from "$lib/components/search-bar.svelte"
 import Connect from "$lib/components/connect/connect.svelte"
 import Button from "$lib/components/ui/button/button.svelte"
@@ -38,7 +39,7 @@ import { routes } from "$lib/components/navigation/index.ts"
     </nav>
     <div class="hidden sm:flex space-x-3">
       <Connect />
-      <!-- <ThemeSwitch /> -->
+      <ThemeSwitch />
     </div>
     <!-- <Navigation /> -->
   </div>

app/src/lib/components/header/theme-switch.svelte

@@ -5,12 +5,12 @@ import Moon from "virtual:icons/lucide/moon"
 import { Button } from "$lib/components/ui/button/index.ts"
 </script>
 
-<Button on:click={toggleMode} variant="outline" size="icon">
+<Button on:click={toggleMode} variant="outline" size="icon" class='outline-none border-none hover:bg-transparent'>
   <Sun
-    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+    class="size-[1.3rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
   />
   <Moon
-    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+    class="absolute size-[1.3rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
   />
   <span class="sr-only">Toggle theme</span>
 </Button>

app/src/routes/+layout.svelte

@@ -25,6 +25,7 @@ import OnlineStatus from "$lib/components/online-status.svelte"
 import { partytownSnippet } from "@builder.io/partytown/integration"
 import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import PreloadingIndicator from "$lib/components/preloading-indicator.svelte"
+import { cn } from "$lib/utilities/shadcn"
 
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
 
@@ -148,7 +149,11 @@ onMount(() => {
 <div
   id="background-dotted-grid"
   data-background-dotted-grid="true"
-  class="absolute top-0 z-[-2] size-full min-h-screen bg-[#99e6ff20] bg-[radial-gradient(#4545538c_0.3px,#09090b_1px)] bg-[size:20px_20px]"
+  class={cn(
+    'absolute top-0 z-[-2] size-full min-h-screen bg-[size:20px_20px]',
+    'bg-[#b9e9ff78]',
+    'dark:bg-[#99e6ff20] dark:bg-[radial-gradient(#4545538c_0.3px,#09090b_1px)]'
+  )}
 ></div>
 
 <svelte:window

app/src/routes/faucet/+page.svelte

@@ -11,6 +11,7 @@ import { faucetFormSchema, unionAddressRegex } from "./schema.ts"
 import DraftPageNotice from "$lib/components/draft-page-notice.svelte"
 import { isValidCosmosAddress } from "$/lib/wallet/utilities/validate.ts"
 import { superForm, setError, setMessage, defaults } from "sveltekit-superforms"
+
 /**
  * TODO:
  * [ ] - Fetch address from wallet and pass it as default, allow user to change it
@@ -115,9 +116,9 @@ const handleMouseLeave = () => {
             autocapitalize="none"
             on:blur={handleBlur}
             on:focus={handleFocus}
-            bind:value={$cosmosStore.address}
             on:mouseleave={handleMouseMove}
             on:mouseenter={handleMouseEnter}
+            bind:value={$cosmosStore.address}
             pattern={unionAddressRegex.source}
             placeholder="union14qemq0vw6y3gc3u3e0aty2e764u4gs5lnxk4rv"
             class="h-12 w-full cursor-default rounded-md border border-slate-800 bg-neutral-950 p-3.5 text-slate-100 transition-colors duration-500 placeholder:select-none placeholder:text-neutral-600 focus:border-[#8678F9] focus:outline-none"

app/src/routes/send/+page.svelte

@@ -214,10 +214,10 @@ let buttonText = "Send it 🔥" satisfies
         <Button
           size="icon"
           variant="outline"
-          class="size-full max-w-8 max-h-8 rounded-xl text-white my-auto mx-3"
+          class="size-full max-w-8 max-h-8 rounded-xl dark:text-white my-auto mx-3"
           on:click={swapChainsClick}
         >
-          <ArrowLeftRight class="size-5 text-white" />
+          <ArrowLeftRight class="size-5 dark:text-white" />
         </Button>
 
         <Button

typescript-sdk/scripts/from-osmosis.ts

@@ -21,16 +21,19 @@ const unionClient = await UnionClient.connectWithSecret({
   rpcUrl: "https://rpc.testnet.osmosis.zone:443"
 })
 
-const osmoFromOsmosisToUnion = await unionClient.ibcMessageTransfers([
-  {
-    sourcePort: "transfer",
-    sourceChannel: "channel-7775",
-    token: { denom: "uosmo", amount: "100" },
-    sender: "osmo14qemq0vw6y3gc3u3e0aty2e764u4gs5l32ydm0",
-    receiver: "union14qemq0vw6y3gc3u3e0aty2e764u4gs5lnxk4rv",
-    memo: "sending wrapped OSMO from Osmosis to Union",
-    timeoutHeight: { revisionHeight: 888888888n, revisionNumber: 8n }
-  }
-])
+const osmoFromOsmosisToUnion = await unionClient.transferAssets({
+  kind: "ibc",
+  messageTransfers: [
+    {
+      sourcePort: "transfer",
+      sourceChannel: "channel-7775",
+      token: { denom: "uosmo", amount: "1" },
+      sender: "osmo14qemq0vw6y3gc3u3e0aty2e764u4gs5l32ydm0",
+      receiver: "union14qemq0vw6y3gc3u3e0aty2e764u4gs5lnxk4rv",
+      memo: "sending OSMO from Osmosis to Union x",
+      timeoutHeight: { revisionHeight: 888888888n, revisionNumber: 8n }
+    }
+  ]
+})
 
 console.log(osmoFromOsmosisToUnion.transactionHash)

typescript-sdk/scripts/to-osmosis.ts

@@ -22,24 +22,27 @@ const unionClient = await UnionClient.connectWithSecret({
 })
 
 const contractAddress = "union124t57vjgsyknnhmr3fpkmyvw2543448kpt2xhk5p5hxtmjjsrmzsjyc4n7"
-const unoFromUnionToOsmosis = await unionClient.cosmwasmMessageExecuteContract([
-  {
-    contractAddress,
-    msg: {
-      transfer: {
-        channel: "channel-6",
-        receiver: "osmo14qemq0vw6y3gc3u3e0aty2e764u4gs5l32ydm0",
-        memo: "sending UNO from Union to Osmosissss"
-      }
-    },
-    funds: [
-      {
-        amount: "1",
-        denom: `muno`
-        // denom: `factory/${contractAddress}/0xc5775fca1b3285dc8b749d58b227527211c108b8d3`
-      }
-    ]
-  }
-])
+const unoFromUnionToOsmosis = await unionClient.transferAssets({
+  kind: "cosmwasm",
+  instructions: [
+    {
+      contractAddress,
+      msg: {
+        transfer: {
+          channel: "channel-6",
+          receiver: "osmo14qemq0vw6y3gc3u3e0aty2e764u4gs5l32ydm0",
+          memo: "sending UNO from Union to Osmosissss"
+        }
+      },
+      funds: [
+        {
+          amount: "1",
+          denom: `muno`
+          // denom: `factory/${contractAddress}/0xc5775fca1b3285dc8b749d58b227527211c108b8d3`
+        }
+      ]
+    }
+  ]
+})
 
 console.log(unoFromUnionToOsmosis.transactionHash)