Integrate skip widget (#1943)

* Integrate skip widget

* lint fixes

* review updates

.changeset/calm-plums-carry.md

@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui-deprecated': patch
+---
+
+Fixed tab width grow setting

.changeset/rich-ghosts-shake.md

@@ -0,0 +1,5 @@
+---
+'minifront': minor
+---
+
+Integrate skip widget for shielding

apps/minifront/package.json

@@ -5,7 +5,7 @@
   "license": "(MIT OR Apache-2.0)",
   "type": "module",
   "scripts": {
-    "build": "vite build",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
     "clean": "rm -rfv dist *.tsbuildinfo",
     "dev:app": "vite --port 5173",
     "lint": "eslint src",
@@ -19,9 +19,9 @@
     "@connectrpc/connect": "^1.4.0",
     "@cosmjs/proto-signing": "^0.32.4",
     "@cosmjs/stargate": "^0.32.4",
-    "@cosmos-kit/core": "^2.13.1",
-    "@cosmos-kit/react": "^2.18.0",
-    "@interchain-ui/react": "^1.23.29",
+    "@cosmos-kit/core": "^2.15.0",
+    "@cosmos-kit/react": "^2.20.1",
+    "@interchain-ui/react": "^1.26.1",
     "@penumbra-labs/registry": "^12.0.0",
     "@penumbra-zone/bech32m": "workspace:*",
     "@penumbra-zone/client": "workspace:*",
@@ -39,33 +39,39 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-portal": "^1.0.4",
     "@remix-run/router": "^1.16.1",
-    "@tanstack/react-query": "4.36.1",
+    "@skip-go/widget": "^3.0.22",
+    "@tanstack/react-query": "5.62.7",
     "bech32": "^2.0.0",
     "bignumber.js": "^9.1.2",
-    "chain-registry": "^1.63.46",
-    "cosmos-kit": "^2.18.4",
+    "chain-registry": "^1.69.59",
+    "cosmjs-types": "^0.9.0",
+    "cosmos-kit": "^2.21.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.2.4",
+    "graz": "^0.1.31",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.378.0",
-    "osmo-query": "^16.13.0",
+    "osmo-query": "^16.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.23.1",
     "sonner": "1.4.3",
     "tailwindcss": "^3.4.3",
+    "viem": "^2.21.54",
+    "wagmi": "^2.14.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@chain-registry/types": "^0.45.38",
+    "@chain-registry/types": "^0.50.33",
     "@eslint/compat": "^1.1.0",
     "@types/lodash": "^4.17.7",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
+    "cross-env": "^7.0.3",
     "vite": "^5.2.11",
     "vitest": "^1.6.0"
   }

apps/minifront/src/components/header/constants.tsx

@@ -2,8 +2,8 @@ import { PagePath } from '../metadata/paths';
 import { SwapIcon } from '../../icons/swap';
 import { ReactElement } from 'react';
 import {
-  CubeIcon,
   ArrowTopRightIcon,
+  CubeIcon,
   MixerHorizontalIcon,
   TextAlignLeftIcon,
 } from '@radix-ui/react-icons';
@@ -18,7 +18,7 @@ export interface HeaderLink {
 
 export const headerLinks: HeaderLink[] = [
   {
-    href: PagePath.IBC,
+    href: PagePath.DEPOSIT_SKIP,
     label: 'Shield Funds',
     active: true,
     mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,

apps/minifront/src/components/ibc/ibc-in/asset-utils.test.ts → apps/minifront/src/components/ibc/deposit-manual/asset-utils.test.ts

@@ -2,10 +2,11 @@ import { describe, expect, test } from 'vitest';
 import { fromDisplayAmount, toDisplayAmount } from './asset-utils';
 import { bigNumConfig } from '@penumbra-zone/types/lo-hi';
 import { BigNumber } from 'bignumber.js';
+import { Asset } from '@chain-registry/types';
 
 BigNumber.config(bigNumConfig);
 
-const osmoMetadata = {
+const osmoMetadata: Asset = {
   denom_units: [
     { denom: 'osmo', exponent: 6 },
     { denom: 'uosmo', exponent: 0 },
@@ -14,9 +15,10 @@ const osmoMetadata = {
   name: 'Osmosis',
   display: 'osmo',
   symbol: 'OSMO',
+  type_asset: 'sdk.coin',
 };
 
-const usdyMetadata = {
+const usdyMetadata: Asset = {
   denom_units: [
     {
       denom: 'ausdy',
@@ -32,6 +34,7 @@ const usdyMetadata = {
   display: 'usdy',
   name: 'Ondo US Dollar Yield',
   symbol: 'USDY',
+  type_asset: 'sdk.coin',
 };
 
 describe('toDisplayAmount', () => {
@@ -81,12 +84,13 @@ describe('fromDisplayAmount', () => {
   });
 
   test('defaults base exponent to zero when base exponent not found in denom units array', () => {
-    const noExponentForBase = {
+    const noExponentForBase: Asset = {
       denom_units: [{ denom: 'osmo', exponent: 6 }],
       base: 'uosmo',
       name: 'Osmosis',
       display: 'osmo',
       symbol: 'OSMO',
+      type_asset: 'sdk.coin',
     };
     const result = fromDisplayAmount(noExponentForBase, 'osmo', '100');
     expect(result).toEqual({ denom: 'uosmo', amount: '100000000' });

apps/minifront/src/components/ibc/ibc-in/asset-utils.tsx → apps/minifront/src/components/ibc/deposit-manual/asset-utils.tsx

@@ -1,11 +1,10 @@
 import { assets as cosmosAssetList } from 'chain-registry';
-import { Coin } from 'osmo-query';
-import { Asset } from '@chain-registry/types';
+import { Asset, DenomUnit } from '@chain-registry/types';
 import { BigNumber } from 'bignumber.js';
-import { AssetDenomUnit } from '@chain-registry/types/assets';
 import { CosmosAssetBalance } from './hooks.ts';
 import { ChainRegistryClient } from '@penumbra-labs/registry';
 import { bigNumConfig } from '@penumbra-zone/types/lo-hi';
+import { Coin } from '@cosmjs/stargate';
 
 // Searches for corresponding denom in asset registry and returns the metadata
 export const augmentToAsset = (denom: string, chainName: string): Asset => {
@@ -23,6 +22,7 @@ const fallbackAsset = (denom: string): Asset => {
     display: denom,
     name: denom,
     symbol: denom,
+    type_asset: 'sdk.coin',
   };
 };
 
@@ -61,7 +61,7 @@ export const fromDisplayAmount = (
   return { denom: asset.base, amount };
 };
 
-const getExponent = (denomUnits: AssetDenomUnit[], denom: string): number | undefined => {
+const getExponent = (denomUnits: DenomUnit[], denom: string): number | undefined => {
   return denomUnits.find(unit => unit.denom === denom)?.exponent;
 };
 

apps/minifront/src/components/ibc/ibc-in/assets-table.tsx → apps/minifront/src/components/ibc/deposit-manual/assets-table.tsx

@@ -26,9 +26,9 @@ export const AssetsTable = () => {
 
   if (isLoading) {
     return (
-      <div className='flex justify-center text-stone-700'>
-        <span className='text-purple-700'>Loading balances...</span>
-        <LineWave visible={true} height='70' width='70' color='#7e22ce' wrapperClass='-mt-9' />
+      <div className='flex justify-center text-white'>
+        <span className='text-white'>Loading balances...</span>
+        <LineWave visible={true} height='70' width='70' color='white' wrapperClass='-mt-9' />
       </div>
     );
   }
@@ -38,7 +38,7 @@ export const AssetsTable = () => {
   }
 
   return (
-    <div className='text-stone-700'>
+    <div className='text-white'>
       <div className='flex justify-center italic text-stone-400'>
         Balances on {selectedChain.label}
       </div>

apps/minifront/src/components/ibc/ibc-in/chain-dropdown.tsx → apps/minifront/src/components/ibc/deposit-manual/chain-dropdown.tsx

@@ -38,7 +38,7 @@ const useChainInfos = (): ChainInfo[] => {
 
         return {
           chainName: r.name,
-          label: r.chain.pretty_name,
+          label: r.chain.pretty_name ?? r.name,
           icon: getChainLogo(r.name),
           chainId: r.chain.chain_id,
         };

apps/minifront/src/components/ibc/ibc-in/destination-addr.tsx → apps/minifront/src/components/ibc/deposit-manual/destination-addr.tsx

@@ -19,20 +19,20 @@ export const DestinationAddr = () => {
   }, [setAccount]);
 
   return (
-    <div className='mb-2 flex w-full flex-col gap-1 text-stone-700'>
+    <div className='mb-2 flex w-full flex-col gap-1 text-white'>
       <div className='flex items-center justify-between'>
         <p className='font-bold'>Sending to</p>
         <AccountSwitcher compact account={account} onChange={setAccount} />
       </div>
 
       {address && (
-        <div className='text-sm text-stone-700 [&>button]:inline-block [&>button]:p-0'>
+        <div className='text-sm text-white [&>button]:inline-block [&>button]:p-0'>
           The deposit will be made to a freshly generated address belonging to you. You can inspect
           what account it points to inside of Prax.{' '}
           <CopyToClipboard
             text={address}
             successLabel={<span className='text-sm'>Copied</span>}
-            label={<span className='text-sm text-stone-700 underline'>Copy address</span>}
+            label={<span className='text-sm text-white underline'>Copy address</span>}
           />
         </div>
       )}

apps/minifront/src/components/ibc/ibc-in/hooks.ts → apps/minifront/src/components/ibc/deposit-manual/hooks.ts

@@ -1,26 +1,13 @@
 import { useStore } from '../../../state';
 import { ibcInSelector } from '../../../state/ibc-in';
 import { useChain, useManager } from '@cosmos-kit/react';
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
-import { ProtobufRpcClient } from '@cosmjs/stargate';
-import { Coin, createRpcQueryHooks, useRpcClient, useRpcEndpoint } from 'osmo-query';
+import { useQuery } from '@tanstack/react-query';
 import { augmentToAsset, toDisplayAmount } from './asset-utils';
 import { Asset } from '@chain-registry/types';
 import { useRegistry } from '../../../fetchers/registry.ts';
 import { sha256HashStr } from '@penumbra-zone/crypto-web/sha256';
 import { Chain } from '@penumbra-labs/registry';
-
-// This is sad, but osmo-query's custom hooks require calling .toJSON() on all fields.
-// This will throw an error for bigint, so needs to be added to the prototype.
-declare global {
-  interface BigInt {
-    toJSON(): string;
-  }
-}
-
-BigInt.prototype.toJSON = function () {
-  return this.toString();
-};
+import { Coin, StargateClient } from '@cosmjs/stargate';
 
 export const useChainConnector = () => {
   const { selectedChain } = useStore(ibcInSelector);
@@ -32,50 +19,23 @@ export const useChainConnector = () => {
   return useChain(selectedOrDefaultChain);
 };
 
-const useCosmosQueryHooks = () => {
+const useCosmosChainBalance = () => {
   const { address, getRpcEndpoint, chain } = useChainConnector();
 
-  const rpcEndpointQuery = useRpcEndpoint({
-    getter: getRpcEndpoint,
-    options: {
-      enabled: !!address,
-      staleTime: Infinity,
-      queryKey: ['rpc endpoint', address, chain.chain_name],
-      // Needed for osmo-query's internal caching
-      queryKeyHashFn: queryKey => {
-        return JSON.stringify([...queryKey, chain.chain_name]);
-      },
+  return useQuery({
+    queryKey: ['rpc endpoint', address, chain.chain_name],
+    queryFn: async () => {
+      if (!address) {
+        throw new Error('missing address');
+      }
+      const endpoint = await getRpcEndpoint();
+      const client = await StargateClient.connect(endpoint);
+      return client.getAllBalances(address);
     },
-  }) as UseQueryResult<string>;
-
-  const rpcClientQuery = useRpcClient({
-    rpcEndpoint: rpcEndpointQuery.data ?? '',
-    options: {
-      enabled: !!address && !!rpcEndpointQuery.data,
-      staleTime: Infinity,
-      queryKey: ['rpc client', address, rpcEndpointQuery.data, chain.chain_name],
-      // Needed for osmo-query's internal caching
-      queryKeyHashFn: queryKey => {
-        return JSON.stringify([...queryKey, chain.chain_name]);
-      },
-    },
-  }) as UseQueryResult<ProtobufRpcClient>;
-
-  const { cosmos: cosmosQuery, osmosis: osmosisQuery } = createRpcQueryHooks({
-    rpc: rpcClientQuery.data,
+    enabled: !!address,
   });
-
-  const isReady = !!address && !!rpcClientQuery.data;
-  const isFetching = rpcEndpointQuery.isFetching || rpcClientQuery.isFetching;
-
-  return { cosmosQuery, osmosisQuery, isReady, isFetching, address, chain };
 };
 
-interface BalancesResponse {
-  balances: Coin[];
-  pagination: { nexKey: Uint8Array; total: bigint };
-}
-
 // Reference: https://github.com/cosmos/chain-registry/blob/master/assetlist.schema.json#L60
 const ASSET_TYPES = [
   'sdk.coin',
@@ -145,51 +105,30 @@ const usePenumbraIbcDenoms = () => {
     data: ibcAddrs,
     isLoading: ibcAddrsLoading,
     error: ibcAddrssErr,
-  } = useQuery(
-    ['penumbraIbcDenoms', registry],
-    async () => generatePenumbraIbcDenoms(registry?.ibcConnections ?? []),
-    {
-      enabled: Boolean(registry),
-    },
-  );
+  } = useQuery({
+    queryKey: ['penumbraIbcDenoms', registry],
+    queryFn: async () => generatePenumbraIbcDenoms(registry?.ibcConnections ?? []),
+    enabled: Boolean(registry),
+  });
 
   return {
     data: ibcAddrs,
     isLoading: registryIsLoading || ibcAddrsLoading,
-    error: registryErr || ibcAddrssErr,
+    error: registryErr ?? ibcAddrssErr,
   };
 };
 
 export const useCosmosChainBalances = (): UseCosmosChainBalancesRes => {
-  const { address, cosmosQuery, isReady, chain } = useCosmosQueryHooks();
-
-  const {
-    data: balancesResponse,
-    isLoading: balancesIsLoading,
-    error: balancesError,
-  } = cosmosQuery.bank.v1beta1.useAllBalances({
-    request: {
-      address: address ?? '',
-      pagination: {
-        offset: 0n,
-        limit: 100n,
-        key: new Uint8Array(),
-        countTotal: true,
-        reverse: false,
-      },
-    },
-    options: {
-      enabled: isReady,
-    },
-  }) as UseQueryResult<BalancesResponse>;
+  const { chain } = useChainConnector();
+  const { data, isLoading: balancesIsLoading, error: balancesError } = useCosmosChainBalance();
 
   const {
     data: penumbraIbcAddrs,
     isLoading: penumbraIbcAddrsLoading,
     error: penumbraIbcAddrsErr,
   } = usePenumbraIbcDenoms();
 
-  const augmentedAssets = balancesResponse?.balances.map(coin => {
+  const augmentedAssets = data?.map(coin => {
     const asset = augmentToAsset(coin.denom, chain.chain_name);
     return {
       raw: coin,
@@ -204,7 +143,7 @@ export const useCosmosChainBalances = (): UseCosmosChainBalancesRes => {
   return {
     data: augmentedAssets,
     isLoading: balancesIsLoading || penumbraIbcAddrsLoading,
-    error: balancesError || penumbraIbcAddrsErr,
+    error: balancesError ?? penumbraIbcAddrsErr,
   };
 };