Fix penumbra and add penumbra to the widget (#173)

.changeset/hot-rocks-reflect.md

@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+prax wallet support

examples/nextjs/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

examples/nextjs/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "dev:https": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

package.json

@@ -12,9 +12,11 @@
   ],
   "scripts": {
     "dev": "yarn run dev:widget & yarn run dev:nextjs & yarn run dev:client",
+    "dev:https": "yarn run dev:widget & yarn run dev:nextjs-https & yarn run dev:client",
     "dev:widget": "yarn workspace @skip-go/widget run dev",
     "dev:widgetv2": "yarn workspace widget-v2 run dev",
     "dev:nextjs": "yarn workspace nextjs run dev",
+    "dev:nextjs-https": "yarn workspace nextjs run dev:https",
     "dev:client": "yarn workspace @skip-go/client run watch",
     "build": "yarn run build:client && yarn run build:widget && yarn run build:nextjs",
     "build:widget": "yarn workspace @skip-go/widget run build",
@@ -82,7 +84,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.34.0",
+    "rollup-plugin-typescript2": "0.36.0",
     "rollup-plugin-visualizer": "^5.5.4",
     "ts-jest": "^29.1.2",
     "tslib": "^1.9.3",

packages/widget/package.json

@@ -83,6 +83,10 @@
     "@initia/initia-registry": "latest",
     "@injectivelabs/utils": "1.14.6",
     "@interchain-ui/react": "^1.23.13",
+    "@penumbra-zone/bech32m": "7.0.0",
+    "@penumbra-zone/client": "18.0.0",
+    "@penumbra-zone/protobuf": "6.0.0",
+    "@penumbra-zone/transport-dom": "7.5.0",
     "@r2wc/react-to-web-component": "^2.0.3",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",

packages/widget/src/hooks/use-assets.ts

@@ -1,9 +1,11 @@
-import { AssetsRequest } from '@skip-go/client';
-import { useQuery } from '@tanstack/react-query';
+import { Asset, AssetsRequest } from '@skip-go/client';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useSkipClient } from './use-skip-client';
 
-export function useAssets(options: AssetsRequest = {}) {
+export function useAssets(
+  options: AssetsRequest = {}
+): UseQueryResult<Record<string, Asset[]>> {
   const skipClient = useSkipClient();
 
   const queryKey = useMemo(() => ['solve-assets', options] as const, [options]);

packages/widget/src/hooks/use-auto-set-address.ts

@@ -1,5 +1,5 @@
 import { Chain } from '@skip-go/client';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import {
   ChainAddresses,
   SetChainAddressesParam,
@@ -27,7 +27,7 @@ export const useAutoSetAddress = ({
   signRequired?: boolean;
   chainAddresses: ChainAddresses;
   setChainAddresses: (v: SetChainAddressesParam) => void;
-}) => {
+}): UseQueryResult => {
   const trackedWallets = useTrackWallet(chain?.chainType as TrackWalletCtx);
   const source = chainAddresses?.[0];
   const destination =
@@ -69,7 +69,8 @@ export const useAutoSetAddress = ({
           index !== 0 &&
           signRequired &&
           source?.chainType === 'cosmos' &&
-          cosmos
+          cosmos &&
+          !chain.chainID.includes('penumbra')
         ) {
           const walletSelected = wallets.find(
             (wallet) => wallet.walletName === cosmos?.walletName
@@ -91,7 +92,8 @@ export const useAutoSetAddress = ({
           destination?.chainType === 'cosmos' &&
           destination?.source !== 'input' &&
           index !== 0 &&
-          !signRequired
+          !signRequired &&
+          !chain.chainID.includes('penumbra')
         ) {
           const walletName = destination.source?.walletName;
           const walletSelected = wallets.find(

packages/widget/src/hooks/use-balances-by-chain.ts

@@ -1,7 +1,7 @@
 import { Asset, SkipClient } from '@skip-go/client';
 import * as token from '@solana/spl-token';
 import { Connection, PublicKey } from '@solana/web3.js';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { createPublicClient, erc20Abi, http, PublicClient } from 'viem';
 
 import { multicall3ABI } from '../constants/abis';
@@ -27,7 +27,7 @@ export function useBalancesByChain({
   chain,
   assets,
   enabled = true,
-}: Args) {
+}: Args): UseQueryResult<Record<string, string> | undefined> {
   // const publicClient = usePublicClient({
   //   chainId: chain?.chainType === "evm" ? parseInt(chain.chainID) : undefined,
   // });

packages/widget/src/hooks/use-bridges.ts

@@ -1,13 +1,14 @@
 import { Bridge } from '@skip-go/client';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useSkipClient } from './use-skip-client';
 
 export type UseBridgesQueryArgs<T = Bridge[]> = {
   enabled?: boolean;
   select?: (arr?: Bridge[]) => T;
 };
-
-export function useBridges<T = Bridge[]>(args: UseBridgesQueryArgs<T> = {}) {
+export function useBridges<T = Bridge[]>(
+  args: UseBridgesQueryArgs<T> = {}
+): UseQueryResult<T> {
   const { select = (t) => t as T } = args;
 
   const skipClient = useSkipClient();

packages/widget/src/hooks/use-broadcasted-txs.ts

@@ -1,5 +1,5 @@
 import { ChainTransaction, TransferState, StatusState } from '@skip-go/client';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useState, useMemo } from 'react';
 import { useSkipClient } from './use-skip-client';
 
@@ -13,6 +13,13 @@ interface TransferSequence {
   state: TransferState;
 }
 
+interface TxsStatus {
+  isSuccess: boolean;
+  isSettled: boolean;
+  transferSequence: TransferSequence[];
+  states: StatusState[];
+}
+
 export const useBroadcastedTxsStatus = ({
   txs,
   txsRequired,
@@ -21,18 +28,10 @@ export const useBroadcastedTxsStatus = ({
   txsRequired: number;
   txs: { chainID: string; txHash: string }[] | undefined;
   enabled?: boolean;
-}) => {
+}): UseQueryResult<TxsStatus> => {
   const skipClient = useSkipClient();
   const [isSettled, setIsSettled] = useState(false);
-  const [prevData, setPrevData] = useState<
-    | {
-        isSuccess: boolean;
-        isSettled: boolean;
-        transferSequence: TransferSequence[];
-        states: StatusState[];
-      }
-    | undefined
-  >(undefined);
+  const [prevData, setPrevData] = useState<TxsStatus | undefined>(undefined);
   const queryKey = useMemo(
     () => ['solve-txs-status', txsRequired, txs] as const,
     [txs, txsRequired]

packages/widget/src/hooks/use-chains.ts

@@ -1,5 +1,5 @@
 import { Chain as SkipChain } from '@skip-go/client';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useSkipClient } from './use-skip-client';
 import { useSwapWidgetUIStore } from '../store/swap-widget';
 
@@ -12,7 +12,9 @@ export type UseChainsQueryArgs<T = Chain[]> = {
   select?: (arr?: Chain[]) => T;
 };
 
-export function useChains<T = Chain[]>(args: UseChainsQueryArgs<T> = {}) {
+export function useChains<T = Chain[]>(
+  args: UseChainsQueryArgs<T> = {}
+): UseQueryResult<T> {
   const { select = (t) => t as T } = args;
   const skipClient = useSkipClient();
   const onlyTestnet = useSwapWidgetUIStore((state) => state.onlyTestnet);

packages/widget/src/hooks/use-make-wallets.tsx

@@ -7,6 +7,10 @@ import { chainIdToName } from '../chains';
 import { useChains } from './use-chains';
 import { gracefullyConnect } from '../utils/wallet';
 import { useCallbackStore } from '../store/callbacks';
+import { createPenumbraClient } from '@penumbra-zone/client';
+import { ViewService } from '@penumbra-zone/protobuf';
+import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
+import { bech32CompatAddress } from '@penumbra-zone/bech32m/penumbracompat1';
 
 export interface MinimalWallet {
   walletName: string;
@@ -67,6 +71,52 @@ export const useMakeWallets = () => {
     let wallets: MinimalWallet[] = [];
 
     if (chainType === 'cosmos') {
+      if (chainID.includes('penumbra')) {
+        const praxWallet: MinimalWallet = {
+          walletName: 'prax',
+          walletPrettyName: 'Prax Wallet',
+          walletInfo: {
+            logo: 'https://raw.githubusercontent.com/prax-wallet/web/e8b18f9b997708eab04f57e7a6c44f18b3cf13a8/apps/extension/public/prax-white-vertical.svg',
+          },
+          connect: async () => {
+            console.error('Prax wallet is not supported for connect');
+            toast.error('Prax wallet is not supported for connect');
+          },
+          getAddress: async ({ praxWallet }) => {
+            const penumbraWalletIndex = praxWallet?.index;
+            const sourceChainID = praxWallet?.sourceChainID;
+            const prax_id = 'lkpmkhpnhknhmibgnmmhdhgdilepfghe';
+            const prax_origin = `chrome-extension://${prax_id}`;
+            const client = createPenumbraClient(prax_origin);
+            try {
+              await client.connect();
+
+              const viewService = client.service(ViewService);
+              const address = await viewService.addressByIndex({
+                addressIndex: {
+                  account: penumbraWalletIndex ? penumbraWalletIndex : 0,
+                },
+              });
+              if (!address.address) throw new Error('No address found');
+              const bech32Address = getPenumbraCompatibleAddress({
+                address: address.address,
+                chainID: sourceChainID,
+              });
+              return bech32Address;
+            } catch (error) {
+              console.error(error);
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-expect-error
+              toast.error(error?.message);
+            }
+          },
+          disconnect: async () => {
+            console.error('Prax wallet is not supported');
+          },
+          isWalletConnected: false,
+        };
+        return [praxWallet];
+      }
       const chainName = chainIdToName(chainID);
       const walletRepo = getWalletRepo(chainName);
       wallets = walletRepo.wallets.map((wallet) => ({
@@ -125,7 +175,7 @@ export const useMakeWallets = () => {
             }
             return wallet.address;
           } catch (error) {
-            console.log(error);
+            console.error(error);
             toast.error(
               <p>
                 <strong>Failed to get address!</strong>
@@ -187,7 +237,6 @@ export const useMakeWallets = () => {
                   return evmAddress;
                 }
               } else {
-                console.log('connecting');
                 await connectAsync({ connector, chainId: Number(chainID) });
                 trackWallet.track('evm', connector.id, chainType);
 
@@ -291,3 +340,17 @@ export const useMakeWallets = () => {
     makeWallets,
   };
 };
+
+const penumbraBech32ChainIDs = ['noble-1', 'grand-1'];
+const getPenumbraCompatibleAddress = ({
+  chainID,
+  address,
+}: {
+  chainID?: string;
+  address: { inner: Uint8Array };
+}): string => {
+  if (!chainID) return bech32mAddress(address);
+  return penumbraBech32ChainIDs.includes(chainID)
+    ? bech32CompatAddress(address)
+    : bech32mAddress(address);
+};

packages/widget/src/hooks/use-route.ts

@@ -1,10 +1,11 @@
 import {
   BridgeType,
   ExperimentalFeature,
+  RouteResponse,
   SmartSwapOptions,
   SwapVenueRequest,
 } from '@skip-go/client';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useState, useMemo, useEffect } from 'react';
 import { useSkipClient } from './use-skip-client';
 
@@ -44,7 +45,7 @@ export function useRoute({
     splitRoutes: true,
     evmSwaps: true,
   },
-}: UseRouteArgs) {
+}: UseRouteArgs): UseQueryResult<RouteResponse | undefined> {
   const skipClient = useSkipClient();
 
   const [refetchCount, setRefetchCount] = useState(0);

packages/widget/src/hooks/use-usd-value.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { getAssets } from '../chains';
 import { raise } from '../utils/assert';
@@ -11,7 +11,7 @@ export type Args = {
   value: string;
 };
 
-export function useUsdValue(args: Args) {
+export function useUsdValue(args: Args): UseQueryResult<number> {
   const queryKey = useMemo(() => ['USE_USD_VALUE', args] as const, [args]);
 
   const enabled = useMemo(() => {

packages/widget/src/lib/wagmi.ts

@@ -1,5 +1,5 @@
 import { http } from 'viem';
-import { createConfig } from 'wagmi';
+import { Config, createConfig } from 'wagmi';
 import {
   arbitrum,
   arbitrumSepolia,
@@ -28,7 +28,7 @@ import {
 import { forma, formaTestnet } from './viem/chains';
 
 // Update EVM_CHAINS in src/constants/wagmi.ts as well
-export const config = createConfig({
+export const config: Config = createConfig({
   chains: [
     arbitrum,
     avalanche,

packages/widget/src/ui/WalletModal/PraxWalletIndex.tsx

@@ -31,8 +31,10 @@ export const PraxWalletIndex = ({
         type="number"
         className={cn(`w-16 h-5.5 rounded-md border px-2 text-xs`)}
         value={Number(input)}
-        onChange={(e) => {
+        onClick={(e) => {
           e.stopPropagation();
+        }}
+        onChange={(e) => {
           if (Number(e.target.value) < 0) {
             setInput(0);
             return;

packages/widget/tsconfig.json

@@ -7,7 +7,7 @@
     "declaration": true,
     "declarationDir": "build",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "target": "ES2019",
     "lib": ["es6", "dom", "es2016", "es2017", "es2021"],
     "sourceMap": false,