feat: onboard IST with elements button (#98)

* feat: query smart wallet auto-provision fee

* fix: remove extra purse updates and swingset query

* feat: onboard IST with elements button

* build: patch xsnap to separate from yarn project

works around Agoric/agoric-sdk#9261

* test(rpc): use legacy endo to fix test

* build: add prepack script

* build: fix some types

* chore: add comment for IST icon

---------

Co-authored-by: Turadg Aleahmad <[email protected]>

Author: samsiegart

.yarn/patches/@agoric-xsnap-npm-0.14.3-u14.0-768ce73dba.patch

@@ -0,0 +1,19 @@
+diff --git a/package.json b/package.json
+index 25ddb12bf728223569f4e53ed8cca20e51813725..876d249fa2584d748f6da234d5104c42090b5f34 100644
+--- a/package.json
++++ b/package.json
+@@ -12,11 +12,11 @@
+   },
+   "scripts": {
+     "repl": "node src/xsrepl.js",
+-    "build:bin": "if test -d ./test; then node src/build.js; else yarn build:from-env; fi",
++    "build:bin": "if test -d ./test; then node src/build.js; else npm run build:from-env; fi",
+     "build:env": "test -d ./test && node src/build.js --show-env > build.env",
+     "build:from-env": "{ cat build.env; echo node src/build.js; } | xargs env",
+-    "build": "yarn build:bin && yarn build:env",
+-    "postinstall": "yarn build:from-env",
++    "build": "npm run build:bin && npm run build:env",
++    "postinstall": "npm run build:from-env",
+     "clean": "rm -rf xsnap-native/xsnap/build",
+     "lint": "run-s --continue-on-error lint:*",
+     "lint:js": "eslint 'src/**/*.js' 'test/**/*.js' api.js",

package.json

@@ -10,6 +10,7 @@
   "type": "module",
   "packageManager": "[email protected]",
   "scripts": {
+    "prepack": "yarn workspaces foreach --all --topological run prepack",
     "docs": "typedoc --excludeInternal",
     "format": "yarn prettier --write packages",
     "lint": "yarn workspaces foreach --all run lint",
@@ -45,7 +46,9 @@
     "typescript": "~5.3.3"
   },
   "resolutions": {
-    "@agoric/swingset-liveslots": "0.10.3-dev-8c14632.0"
+    "@agoric/swingset-liveslots": "0.10.3-dev-8c14632.0",
+    "@agoric/xsnap@npm:^0.14.3-u14.0": "patch:@agoric/xsnap@npm%3A0.14.3-u14.0#~/.yarn/patches/@agoric-xsnap-npm-0.14.3-u14.0-768ce73dba.patch",
+    "@agoric/xsnap@npm:^0.14.2": "patch:@agoric/xsnap@npm%3A0.14.3-u14.0#~/.yarn/patches/@agoric-xsnap-npm-0.14.3-u14.0-768ce73dba.patch"
   },
   "ava": {
     "files": [

packages/react-components/package.json

@@ -30,12 +30,14 @@
     "@cosmos-kit/core": "2.8.9",
     "@cosmos-kit/react": "2.10.10",
     "@interchain-ui/react": "1.21.18",
+    "@leapwallet/elements": "0.12.1",
     "chain-registry": "1.28.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.10",
+    "@chain-registry/types": "^0.25.7",
     "@headlessui/react": "^1.7.18",
     "@testing-library/react": "14.0.0",
     "@types/node": "20.4.9",

packages/react-components/src/lib/components/OnboardIstModal.tsx

@@ -0,0 +1,76 @@
+import { type AssetSelector, LiquidityModal, Tabs } from '@leapwallet/elements';
+import { useElementsWalletClient } from '../utils';
+import { useAgoric } from '../hooks';
+import { Ist } from '../icons/Ist';
+import { Button } from '@interchain-ui/react';
+
+import '@leapwallet/elements/styles.css';
+
+const agoricChainId = 'agoric-3';
+const istSelector: AssetSelector = ['symbol', 'IST'];
+const bldSelector: AssetSelector = ['symbol', 'BLD'];
+
+export const OnboardIstModal = () => {
+  const { address } = useAgoric();
+  const elementsWalletClient = useElementsWalletClient();
+
+  const renderLiquidityButton = ({ onClick }: { onClick: () => void }) => {
+    return (
+      <Button onClick={onClick} leftIcon="walletFilled">
+        Deposit IST
+      </Button>
+    );
+  };
+
+  return (
+    <LiquidityModal
+      renderLiquidityButton={renderLiquidityButton}
+      theme="light"
+      walletClientConfig={{
+        userAddress: address,
+        walletClient: elementsWalletClient,
+        connectWallet: (chainId?: string) => {
+          return elementsWalletClient.enable(chainId ?? []);
+        },
+      }}
+      defaultActiveTab={Tabs.SWAP}
+      config={{
+        icon: Ist,
+        title: 'Deposit IST',
+        subtitle: '',
+        tabsConfig: {
+          [Tabs.BRIDGE_USDC]: {
+            enabled: false,
+          },
+          [Tabs.FIAT_ON_RAMP]: {
+            enabled: false,
+          },
+          [Tabs.CROSS_CHAIN_SWAPS]: {
+            enabled: true,
+            defaults: {
+              destinationChainId: agoricChainId,
+              destinationAssetSelector: istSelector,
+            },
+          },
+          [Tabs.SWAP]: {
+            enabled: true,
+            defaults: {
+              sourceChainId: agoricChainId,
+              sourceAssetSelector: bldSelector,
+              destinationChainId: agoricChainId,
+              destinationAssetSelector: istSelector,
+            },
+          },
+          [Tabs.TRANSFER]: {
+            enabled: true,
+            defaults: {
+              destinationChainId: agoricChainId,
+              sourceChainId: agoricChainId,
+              sourceAssetSelector: istSelector,
+            },
+          },
+        },
+      }}
+    />
+  );
+};

packages/react-components/src/lib/components/index.ts

@@ -2,3 +2,4 @@ export * from './ConnectWalletButton';
 export * from './NodeSelectorModal';
 export * from './AmountInput';
 export * from './NetworkDropdown';
+export * from './OnboardIstModal';

packages/react-components/src/lib/config/index.ts

@@ -1,5 +1,5 @@
 import { assets, chains } from 'chain-registry';
-import type { Chain, AssetList } from '@chain-registry/types';
+import type { AssetList, Chain } from '@chain-registry/types';
 import type { Endpoints } from '@cosmos-kit/core';
 
 export type ChainConfig = { chains: Chain[]; assetLists: AssetList[] };

packages/react-components/src/lib/icons/Ist.ts

@@ -3,3 +3,4 @@ export * from './components';
 export * from './config';
 export * from './context';
 export * from './hooks';
+export * from './utils';

packages/react-components/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './leapElementsClient';

packages/react-components/src/lib/utils/index.ts

@@ -0,0 +1,53 @@
+import type { WalletClient } from '@leapwallet/elements';
+import { useWalletClient } from '@cosmos-kit/react';
+import { useMemo } from 'react';
+
+export const useElementsWalletClient = (): WalletClient => {
+  const { client } = useWalletClient();
+
+  // @ts-expect-error Mismatch between `Long` type in `signDoc`
+  const walletClient: WalletClient = useMemo(() => {
+    return {
+      enable: (chainIds: string | string[]) => {
+        return client!.enable!(chainIds);
+      },
+      getAccount: async (chainId: string) => {
+        await client!.enable!(chainId);
+        const result = await client!.getAccount!(chainId);
+        return {
+          bech32Address: result.address,
+          pubKey: result.pubkey,
+          isNanoLedger: !!result.isNanoLedger,
+        };
+      },
+      getSigner: async (chainId: string) => {
+        const signer = client!.getOfflineSignerDirect!(chainId);
+        const aminoSigner = client!.getOfflineSignerAmino!(chainId);
+
+        return {
+          signDirect: async (address, signDoc) => {
+            // @ts-expect-error Mismatch between `Long` type in `signDoc`
+            const result = await signer.signDirect(address, signDoc);
+            return {
+              signature: new Uint8Array(
+                Buffer.from(result.signature.signature, 'base64'),
+              ),
+              signed: result.signed,
+            };
+          },
+          signAmino: async (address, signDoc) => {
+            const result = await aminoSigner.signAmino(address, signDoc);
+            return {
+              signature: new Uint8Array(
+                Buffer.from(result.signature.signature, 'base64'),
+              ),
+              signed: result.signed,
+            };
+          },
+        };
+      },
+    };
+  }, [client]);
+
+  return walletClient;
+};

packages/react-components/src/lib/utils/leapElementsClient.ts

@@ -1,4 +1,4 @@
-import '@endo/init'; // UNTIL https://github.com/endojs/endo/issues/1686
+import '@endo/init/legacy.js'; // UNTIL https://github.com/endojs/endo/issues/1686
 import { expect, test } from 'vitest';
 import { makeClientMarshaller } from '../src/marshal.js';
 

packages/rpc/test/marshal.test.ts

@@ -31,8 +31,6 @@ type VBankAssets = [
   { brand: Brand; issuerName: string; displayInfo: unknown },
 ][];
 
-/** @typedef {import('@agoric/ertp/src/types.js').Amount<'nat'>['value']} NatValue */
-
 const POLL_INTERVAL_MS = 6000;
 const RETRY_INTERVAL_MS = 200;
 const MAX_ATTEMPTS_TO_WATCH_BANK = 2;