Integrate skip widget #1943

grod220 · 2024-12-11T13:10:48Z

Closes #1925

Adds a new layout and userflow to shield page:

compressed.mov

changeset-bot · 2024-12-11T13:10:52Z

🦋 Changeset detected

Latest commit: 6d59eac

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@penumbra-zone/ui-deprecated	Patch
minifront	Minor
node-status	Patch
@repo/tailwind-config	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

grod220 · 2024-12-11T13:11:49Z

apps/minifront/package.json

@@ -39,17 +39,19 @@
    "@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",


The react-query dep bump was required for the skip widget to work. Unfortunately, the osmo-query hooks only work on v4. Had to do some refactoring as a consequence, but it got simpler as a result.

grod220 · 2024-12-11T13:12:45Z

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

+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,


Far simpler than what the former osmo-query helpers were providing

using standard useQuery over osmo-query specific hooks also has the benefit of reducing reliance on third-party libs, which minimizes another potential source of breakage.

grod220 · 2024-12-11T13:13:45Z

apps/minifront/src/components/ibc/deposit-skip/index.tsx

+  srcChainId: 'osmosis-1',
+  srcAssetDenom: 'ibc/498A0751C798A0D9A389AA3691123DADA57DAA4FE165D5C75894505B876BA6E4', // $USDC on osmosis


Should be thoughtful about the default chain+asset here

Since there are issues with USDC transfers, can we use USDY instead?

grod220 · 2024-12-11T13:14:31Z

apps/minifront/src/components/tx-details/tx-viewer.tsx

+  const { data: receiverView } = useQuery({
+    queryKey: ['receiverView', txInfo?.toJson({ typeRegistry }), option],
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- TODO: justify
+    queryFn: () => fetchReceiverView(txInfo!),
+    enabled: option === TxDetailsTab.RECEIVER && !!txInfo,
+  });


New v5 react-query requires object param style

grod220 · 2024-12-11T13:15:08Z

packages/ui-deprecated/components/ui/segmented-picker/index.tsx

@@ -83,7 +84,7 @@ export const SegmentedPicker = <ValueType extends { toString: () => string }>({
            size === 'md' && 'text-sm px-3 h-8',
            size === 'lg' && 'px-4 h-10',
            value !== option.value && 'text-light-grey',
-            grow && 'grow',
+            grow && 'flex-1', // Use 'flex-1' for equal growth


Needed to add this as the tabs would be determined by text width and not be even

grod220 · 2024-12-11T13:15:21Z

packages/ui-deprecated/components/ui/segmented-picker/index.tsx

@@ -93,7 +94,7 @@ export const SegmentedPicker = <ValueType extends { toString: () => string }>({
            />
          )}

-          <div className='absolute inset-0 z-20 flex items-center justify-center'>
+          <div className='absolute inset-0 z-10 flex items-center justify-center'>


Found a bug where the tabs were overlaying the modal, this fixes that

grod220 · 2024-12-11T13:45:20Z

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",


Requires amping up memory to build app now 🏋️

hdevalence · 2024-12-11T19:23:16Z

apps/minifront/src/components/ibc/tabs.ts

+  { title: 'Deposit (skip)', href: PagePath.DEPOSIT_SKIP, enabled: true },
+  { title: 'Deposit (manual)', href: PagePath.DEPOSIT_MANUAL, enabled: true },


nit: can these be Deposit (Skip) and Deposit (Manual)?

hdevalence · 2024-12-11T19:24:05Z

This looks great! The deposit flow is way better and easier to understand.

TalDerei

tested the ibc flows 👍

can you add a changeset?

TalDerei · 2024-12-11T20:33:32Z

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

+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,


using standard useQuery over osmo-query specific hooks also has the benefit of reducing reliance on third-party libs, which minimizes another potential source of breakage.

TalDerei · 2024-12-11T20:43:08Z

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


  return {
    data: ibcAddrs,
    isLoading: registryIsLoading || ibcAddrsLoading,
-    error: registryErr || ibcAddrssErr,
+    error: registryErr ?? ibcAddrssErr,


worth considering a separate effort to better capture IBC error codes and provide more user-friendly shielding / unshielding error messages

hdevalence · 2024-12-11T21:28:26Z

I tested this and was able to successfully withdraw UM to Osmosis and deposit UM on Penumbra. The Skip widget didn't work on the preview domain but the Skip team has offered to allowlist the domains in the Prax Registry so it should work when published.

grod220 commented Dec 11, 2024

View reviewed changes

grod220 force-pushed the skip-integration branch 2 times, most recently from e58f381 to 6806478 Compare December 11, 2024 13:44

grod220 commented Dec 11, 2024

View reviewed changes

grod220 requested a review from a team December 11, 2024 14:04

hdevalence reviewed Dec 11, 2024

View reviewed changes

TalDerei approved these changes Dec 11, 2024

View reviewed changes

grod220 added 3 commits December 12, 2024 08:28

Integrate skip widget

0aeda54

lint fixes

eeb16c9

review updates

6d59eac

grod220 force-pushed the skip-integration branch from 6806478 to 6d59eac Compare December 12, 2024 07:38

grod220 merged commit 39a9fd9 into main Dec 12, 2024
6 checks passed

grod220 deleted the skip-integration branch December 12, 2024 07:49

This was referenced Dec 21, 2024

Graz wallet interface support #1190

Closed

more descriptive error messages for IBC transfers #1879

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate skip widget #1943

Integrate skip widget #1943

grod220 commented Dec 11, 2024

changeset-bot bot commented Dec 11, 2024 •

edited

Loading

grod220 Dec 11, 2024

grod220 Dec 11, 2024

TalDerei Dec 11, 2024

grod220 Dec 11, 2024

hdevalence Dec 11, 2024

grod220 Dec 11, 2024

grod220 Dec 11, 2024

grod220 Dec 11, 2024

grod220 Dec 11, 2024

hdevalence Dec 11, 2024

hdevalence commented Dec 11, 2024

TalDerei left a comment •

edited

Loading

TalDerei Dec 11, 2024

TalDerei Dec 11, 2024

hdevalence commented Dec 11, 2024

		srcChainId: 'osmosis-1',
		srcAssetDenom: 'ibc/498A0751C798A0D9A389AA3691123DADA57DAA4FE165D5C75894505B876BA6E4', // $USDC on osmosis

		{ title: 'Deposit (skip)', href: PagePath.DEPOSIT_SKIP, enabled: true },
		{ title: 'Deposit (manual)', href: PagePath.DEPOSIT_MANUAL, enabled: true },

Integrate skip widget #1943

Integrate skip widget #1943

Conversation

grod220 commented Dec 11, 2024

changeset-bot bot commented Dec 11, 2024 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hdevalence commented Dec 11, 2024

TalDerei left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hdevalence commented Dec 11, 2024

changeset-bot bot commented Dec 11, 2024 •

edited

Loading

TalDerei left a comment •

edited

Loading