feat: remove wallet-app bridge

package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "postinstall": "patch-package",
     "preview": "vite preview",
     "lint": "eslint src",
     "format": "prettier --write . && yarn lint --fix",
@@ -18,15 +17,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@agoric/ertp": "^0.15.4-dev-f5341af.0",
-    "@agoric/rpc": "^0.0.2-dev-2c6fbc5.0",
+    "@agoric/cosmic-proto": "^0.3.0",
+    "@agoric/ertp": "^0.16.2",
+    "@agoric/rpc": "^0.6.0",
     "@agoric/smart-wallet": "^0.5.3",
-    "@agoric/ui-components": "^0.3.4-dev-f5341af.0",
-    "@agoric/web-components": "0.9.1-dev-4dd5c43.0",
-    "@agoric/zoe": "^0.25.4-dev-f5341af.0",
-    "@endo/eventual-send": "^0.16.0",
-    "@endo/init": "^0.5.53",
-    "@endo/lockdown": "^0.1.25",
+    "@agoric/ui-components": "^0.9.0",
+    "@agoric/web-components": "0.12.1-dev-74299fa.0",
+    "@agoric/zoe": "^0.26.2",
+    "@endo/eventual-send": "^0.17.6",
+    "@endo/init": "^0.5.60",
+    "@endo/lockdown": "^0.1.32",
     "@headlessui/react": "^1.6.6",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^18.7.13",
@@ -46,9 +46,7 @@
     "happy-dom": "^10.7.0",
     "jotai": "^1.8.0",
     "lodash-es": "4.17.21",
-    "patch-package": "^7.0.0",
     "postcss": "^8.4.16",
-    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "react-icons": "^4.4.0",
     "react-loader-spinner": "^5.2.0",
@@ -58,5 +56,9 @@
     "vite": "^3.2.7",
     "vite-tsconfig-paths": "^3.5.0",
     "vitest": "^0.23.4"
+  },
+  "resolutions": {
+    "**/@agoric/xsnap": "0.14.3-dev-9f085d3.0",
+    "**/@agoric/time": "0.3.3-dev-97cb715.0"
   }
 }

src/App.tsx

@@ -2,7 +2,6 @@ import './installSesLockdown';
 import { motion } from 'framer-motion';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import WalletBridge from 'components/WalletBridge';
 import Swap from 'components/Swap';
 import ChainConnection from 'components/ChainConnection';
 import { INTER_LOGO } from 'assets/assets';
@@ -15,11 +14,16 @@ const App = () => {
   return (
     <>
       <ToastContainer
-        position={'bottom-right'}
+        position="top-right"
         closeOnClick={false}
         newestOnTop={true}
         hideProgressBar={true}
         autoClose={false}
+        style={{ marginTop: 96 }}
+        toastStyle={{
+          boxShadow: '0px 0px 32px -2px var(--color-glow)',
+          wordBreak: 'break-word',
+        }}
       ></ToastContainer>
       <motion.div className="flex flex-col min-h-screen">
         <motion.div className="min-w-screen container p-4 mx-auto flex justify-between items-center">
@@ -31,7 +35,6 @@ const App = () => {
               width="200"
             />
           </a>
-          <WalletBridge />
           <ChainConnection />
         </motion.div>
         <motion.div className="flex-1 min-w-screen container mx-auto flex justify-center mt-16 mb-16">

src/components/AssetDialog.tsx

@@ -1,12 +1,9 @@
 import { useAtomValue } from 'jotai';
-
 import AssetListItem from 'components/AssetListItem';
 import ListItem from 'components/ListItem';
 import SkeletonListItem from 'components/SkeletonListItem';
 import { displayFunctionsAtom } from 'store/app';
-
-// Ambient
-import '@agoric/ertp/src/types.js';
+import type { Brand } from '@agoric/ertp/src/types';
 
 const AssetDialog = ({
   brands,

src/components/AssetListItem.tsx

@@ -1,9 +1,6 @@
 import { useAtomValue } from 'jotai';
-
 import { displayFunctionsAtom } from 'store/app';
-
-// Ambient
-import '@agoric/ertp/src/types';
+import type { Brand } from '@agoric/ertp/src/types';
 
 const AssetListItem = ({ brand }: { brand: Brand }) => {
   const { displayBrandIcon, displayBrandPetname } =

src/components/ChainConnection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { toast } from 'react-toastify';
 import { Oval } from 'react-loader-spinner';
@@ -16,21 +16,57 @@ import {
   chainConnectionAtom,
   networkConfigAtom,
   termsIndexAgreedUponAtom,
+  smartWalletProvisionedAtom,
+  provisionToastIdAtom,
+  ChainConnection as ChainConnectionStore,
 } from 'store/app';
-import { watchContract, watchPurses } from 'utils/updates';
+import {
+  watchContract,
+  watchPurses,
+  watchSmartWalletProvision,
+} from 'utils/updates';
 import NetworkDropdown from 'components/NetworkDropdown';
 import TermsDialog, { currentTermsIndex } from './TermsDialog';
 import clsx from 'clsx';
 import { makeAgoricChainStorageWatcher } from '@agoric/rpc';
 import { sample } from 'lodash-es';
-import { makeImportContext } from '@agoric/smart-wallet/src/marshal-contexts';
+import { loadNetworkConfig } from 'utils/networkConfig';
+import ProvisionSmartWalletDialog from './ProvisionSmartWalletDialog';
 
 import 'react-toastify/dist/ReactToastify.css';
 import 'styles/globals.css';
-import { loadNetworkConfig } from 'utils/networkConfig';
+import { querySwingsetParams } from 'utils/swingsetParams';
 
 const autoCloseDelayMs = 7000;
 
+const useSmartWalletFeeQuery = (
+  chainConnection: ChainConnectionStore | null
+) => {
+  const [smartWalletFee, setFee] = useState<bigint | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const fetchParams = async () => {
+      assert(chainConnection);
+      try {
+        const params = await querySwingsetParams(
+          chainConnection.watcher.rpcAddr
+        );
+        console.debug('swingset params', params);
+        setFee(BigInt(params.params.powerFlagFees[0].fee[0].amount));
+      } catch (e: any) {
+        setError(e);
+      }
+    };
+
+    if (chainConnection) {
+      fetchParams();
+    }
+  }, [chainConnection]);
+
+  return { smartWalletFee, error };
+};
+
 const ChainConnection = () => {
   const [connectionInProgress, setConnectionInProgress] = useState(false);
   const [chainConnection, setChainConnection] = useAtom(chainConnectionAtom);
@@ -40,9 +76,18 @@ const ChainConnection = () => {
   const setMetricsIndex = useSetAtom(metricsIndexAtom);
   const setGovernedParamsIndex = useSetAtom(governedParamsIndexAtom);
   const setInstanceIds = useSetAtom(instanceIdsAtom);
+  const [provisionToastId, setProvisionToastId] = useAtom(provisionToastIdAtom);
+  const smartWalletProvisionRequired = useRef(false);
+  const [isSmartWalletProvisioned, setSmartWalletProvisioned] = useAtom(
+    smartWalletProvisionedAtom
+  );
   const networkConfig = useAtomValue(networkConfigAtom);
   const termsAgreed = useAtomValue(termsIndexAgreedUponAtom);
   const [isTermsDialogOpen, setIsTermsDialogOpen] = useState(false);
+  const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState(false);
+  const { smartWalletFee, error: smartWalletFeeError } =
+    useSmartWalletFeeQuery(chainConnection);
+
   const areLatestTermsAgreed = termsAgreed === currentTermsIndex;
 
   const handleTermsDialogClose = () => {
@@ -51,7 +96,44 @@ const ChainConnection = () => {
   };
 
   useEffect(() => {
-    if (chainConnection === null) return;
+    if (
+      isSmartWalletProvisioned === false &&
+      !smartWalletProvisionRequired.current
+    ) {
+      if (smartWalletFeeError) {
+        console.error('Swingset params error', smartWalletFeeError);
+        toast.error('Error reading smart wallet provisioning fee from chain.');
+        return;
+      } else if (smartWalletFee) {
+        smartWalletProvisionRequired.current = true;
+        setIsProvisionDialogOpen(true);
+      }
+    } else if (
+      isSmartWalletProvisioned &&
+      smartWalletProvisionRequired.current
+    ) {
+      smartWalletProvisionRequired.current = false;
+      if (provisionToastId) {
+        toast.dismiss(provisionToastId);
+        setProvisionToastId(undefined);
+      }
+      toast.success('Smart wallet successfully provisioned.');
+    }
+  }, [
+    isSmartWalletProvisioned,
+    provisionToastId,
+    setProvisionToastId,
+    smartWalletFeeError,
+    smartWalletFee,
+  ]);
+
+  useEffect(() => {
+    if (!chainConnection) return;
+
+    watchSmartWalletProvision(chainConnection, setSmartWalletProvisioned).catch(
+      (err: Error) =>
+        console.error('Error watching smart wallet provision status', err)
+    );
 
     watchPurses(chainConnection, setPurses, mergeBrandToInfo).catch(
       (err: Error) => console.error('got watchPurses err', err)
@@ -77,6 +159,7 @@ const ChainConnection = () => {
     setMetricsIndex,
     setGovernedParamsIndex,
     setInstanceIds,
+    setSmartWalletProvisioned,
   ]);
 
   const connect = async (checkTerms = true) => {
@@ -94,19 +177,18 @@ const ChainConnection = () => {
         networkConfig.url
       );
       const rpc = sample(rpcAddrs);
-      assert(rpc, 'netconfig missing rpcAddrs');
-      const context = makeImportContext().fromBoard;
-      const watcher = makeAgoricChainStorageWatcher(
-        rpc,
-        chainName,
-        context.unserialize
-      );
+      if (!rpc) {
+        throw new Error(Errors.networkConfig);
+      }
+      const watcher = makeAgoricChainStorageWatcher(rpc, chainName, e => {
+        console.error(e);
+        throw e;
+      });
       connection = await makeAgoricWalletConnection(watcher);
       setChainConnection({
         ...connection,
         watcher,
         chainId: chainName,
-        unserializer: context,
       });
     } catch (e: any) {
       switch (e.message) {
@@ -119,28 +201,8 @@ const ChainConnection = () => {
         case Errors.networkConfig:
           toast.error('Network not found.');
           break;
-        case Errors.noSmartWallet:
-          toast.error(
-            <p>
-              No Agoric smart wallet found for this address. Try creating one at{' '}
-              <a
-                className="underline text-blue-500"
-                href="https://wallet.agoric.app/wallet/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                wallet.agoric.app/wallet/
-              </a>{' '}
-              then try again.
-            </p>,
-            {
-              hideProgressBar: false,
-              autoClose: autoCloseDelayMs,
-            }
-          );
-          break;
         default:
-          toast.error('Error connecting to network.');
+          toast.error('Error connecting to network:' + e.message);
           break;
       }
     } finally {
@@ -180,6 +242,11 @@ const ChainConnection = () => {
         isOpen={isTermsDialogOpen}
         onClose={handleTermsDialogClose}
       />
+      <ProvisionSmartWalletDialog
+        isOpen={isProvisionDialogOpen}
+        onClose={() => setIsProvisionDialogOpen(false)}
+        smartWalletFee={smartWalletFee}
+      />
     </div>
   );
 };

src/components/CustomInput.tsx

@@ -5,9 +5,7 @@ import { useAtomValue } from 'jotai';
 import { displayFunctionsAtom } from 'store/app';
 import { PursesJSONState } from '@agoric/wallet-backend';
 import { calcSignificantDecimalPlaces } from 'utils/displayFunctions';
-
-// Ambient
-import '@agoric/ertp/src/types';
+import type { Brand } from '@agoric/ertp/src/types';
 
 const DEFAULT_PLACES_TO_SHOW = 2;
 

src/components/DialogSwap.tsx

@@ -2,11 +2,8 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { AnimatePresence, motion } from 'framer-motion';
 import { FiX, FiExternalLink } from 'react-icons/fi';
-
 import AssetDialog from 'components/AssetDialog';
-
-// Ambient
-import '@agoric/ertp/src/types';
+import type { Brand } from '@agoric/ertp/src/types';
 
 const DialogSwap = ({
   open,