feat: support read-only address url param

Author: samsiegart

package.json

@@ -17,17 +17,17 @@
   "dependencies": {
     "@agoric/casting": "^0.4.3-u13.0",
     "@agoric/cosmic-proto": "^0.3.0",
-    "@agoric/ertp": "^0.16.2",
+    "@agoric/ertp": "^0.16.3-u16.1",
     "@agoric/inter-protocol": "^0.16.1",
-    "@agoric/rpc": "^0.9.0",
+    "@agoric/rpc": "^0.10.0",
     "@agoric/smart-wallet": "^0.5.3",
     "@agoric/ui-components": "^0.9.0",
     "@agoric/wallet": "^0.18.3",
-    "@agoric/web-components": "^0.15.0",
+    "@agoric/web-components": "^0.16.0",
     "@agoric/zoe": "^0.26.2",
-    "@endo/eventual-send": "^1.0.1",
-    "@endo/init": "^1.0.1",
-    "@endo/marshal": "^0.8.9",
+    "@endo/eventual-send": "^1.2.5",
+    "@endo/init": "^1.1.4",
+    "@endo/marshal": "^1.5.3",
     "@headlessui/react": "^1.6.6",
     "clsx": "^1.2.1",
     "framer-motion": "^7.2.1",
@@ -42,7 +42,7 @@
     "react-router-dom": "^6.4.5",
     "react-toastify": "^9.1.1",
     "react-view-slider": "^4.5.0",
-    "ses": "^1.3.0",
+    "ses": "^1.8.0",
     "zustand": "^4.1.5"
   },
   "devDependencies": {
@@ -77,6 +77,8 @@
   "resolutions": {
     "**/@agoric/xsnap": "0.14.3-u14.0",
     "**/@agoric/time": "0.3.3-u14.0",
-    "**/@agoric/vats": "0.15.2-u15.0"
-  }
+    "**/@agoric/vats": "0.15.2-u15.0",
+    "**/@endo/pass-style": "1.4.3"
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/ConfigureNewVault.tsx

@@ -19,6 +19,7 @@ import {
 import { maxIstToMintFromVault } from 'utils/vaultMath';
 import LeapLiquidityModal, { Direction } from './leap-elements/LiquidityModal';
 import { useMemo } from 'react';
+import { NatValue } from '@agoric/ertp/src/types';
 
 const maxIstWarning =
   'Warning: This will create a vault with the lowest possible collateralization ratio which greatly increases your risk of liquidation if there are downward price movements.';
@@ -103,7 +104,7 @@ const ConfigureNewVault = () => {
       selectedMetrics.totalDebt,
       AmountMath.makeEmpty(selectedParams.debtLimit.brand),
       selectedParams.mintFee,
-      AmountMath.make(collateralBrand, valueToLock),
+      AmountMath.make(collateralBrand, valueToLock ?? 0n),
       collateralPrice,
       selectedParams.inferredMinimumCollateralization,
       lockedPrice,
@@ -126,7 +127,7 @@ const ConfigureNewVault = () => {
       return;
     }
 
-    setValueToLock(purse.currentAmount.value);
+    setValueToLock(purse.currentAmount.value as NatValue);
   };
 
   const onMaxDebtClicked = () => {

src/components/NewVaultOfferSummary.tsx

@@ -184,6 +184,8 @@ const NewVaultOfferSummary = () => {
 
   const createVault = async () => {
     setIsProvisionDialogOpen(false);
+    assert(depositAmount);
+    assert(mintAmount);
     await makeOpenVaultOffer(depositAmount, mintAmount, () =>
       setIsVaultCreationDialogOpen(true),
     );
@@ -218,7 +220,7 @@ const NewVaultOfferSummary = () => {
     return 'Create Vault';
   }, [chainConnection, vaultLimitReached]);
 
-  const debtBalanceInfo = debtBalance && (
+  const debtBalanceInfo = debtBalance ? (
     <Popover className="inline absolute -right-5 top-[3px]">
       <Popover.Button className="text-base">
         <HiOutlineInformationCircle />
@@ -242,6 +244,8 @@ const NewVaultOfferSummary = () => {
         </Popover.Panel>
       </Transition>
     </Popover>
+  ) : (
+    ''
   );
 
   return (

src/service/wallet.ts

@@ -6,10 +6,7 @@ import {
   ChainConnection,
 } from 'store/app';
 import { toast } from 'react-toastify';
-import {
-  makeAgoricWalletConnection,
-  AgoricKeplrConnectionErrors as Errors,
-} from '@agoric/web-components';
+import { makeAgoricWalletConnection, Errors } from '@agoric/web-components';
 import type { Id as ToastId, ToastContent, ToastOptions } from 'react-toastify';
 
 const watchPurses = (chainConnection: ChainConnection) => {
@@ -76,6 +73,25 @@ type ConnectionError = {
 
 const autoCloseDelayMs = 7000;
 
+const getReadOnlyAddressFromUrlParams = () =>
+  new URLSearchParams(window.location.search).get('address');
+
+const makeReadOnlyClientConfig = (address: string) => {
+  return {
+    address,
+    client: {
+      getSequence: () => 0,
+      signAndBroadcast: (_address: string, msgs: unknown[], _fee: unknown) => {
+        console.log('Messages to sign copied below:');
+        console.log(msgs);
+        throw new Error(
+          'Cannot sign message in read-only mode. See previous console log for message contents.',
+        );
+      },
+    },
+  };
+};
+
 export const makeWalletService = () => {
   let stopWatchingPurses: () => void;
   let stopWatchingPublicSubscribers: () => void;
@@ -91,6 +107,8 @@ export const makeWalletService = () => {
     toastId = toast.error(content, options);
   };
 
+  const readOnlyAddress = getReadOnlyAddressFromUrlParams();
+
   const connect = async (shouldCheckDisclaimer = true) => {
     const {
       isWalletConnectionInProgress,
@@ -113,6 +131,7 @@ export const makeWalletService = () => {
     appStore.setState({ isWalletConnectionInProgress: true });
     try {
       assert(rpcNode);
+      assert(chainStorageWatcher);
       const connection = await makeAgoricWalletConnection(
         chainStorageWatcher,
         rpcNode,
@@ -125,6 +144,8 @@ export const makeWalletService = () => {
                   (e instanceof Error ? `: ${e.message}` : ''),
               ),
             ),
+        // @ts-expect-error Fake clientConfig for special read-only mode.
+        readOnlyAddress ? makeReadOnlyClientConfig(readOnlyAddress) : undefined,
       );
       appStore.setState({ chainConnection: connection });
       stopWatchingPurses = watchPurses(connection);

src/utils/vaultMath.ts

@@ -19,7 +19,12 @@ import type {
   VaultMetrics,
   VaultParams,
 } from 'store/vaults';
-import type { Amount, Brand, NatValue } from '@agoric/ertp/src/types';
+import type {
+  Amount,
+  Brand,
+  NatAmount,
+  NatValue,
+} from '@agoric/ertp/src/types';
 
 export const isLiquidationPriceBelowGivenPrice = (
   locked: Amount<'nat'>,
@@ -74,9 +79,12 @@ export const computeToLock = (
 };
 
 /**
- * @returns tuple of [value of difference, boolean of whether it's negative]
+ * Returns [value of difference, boolean of whether it's negative]
  */
-export const netValue = (lockedValue: Amount<'nat'>, debt: Amount<'nat'>) =>
+export const netValue = (
+  lockedValue: Amount<'nat'>,
+  debt: Amount<'nat'>,
+): [NatAmount, boolean] =>
   AmountMath.isGTE(lockedValue, debt)
     ? [AmountMath.subtract(lockedValue, debt), false]
     : [AmountMath.subtract(debt, lockedValue), true];