feat(react-components): modal customization and offer status updates (#120)

* feat(react-components): allow custom styling on modals

* chore: remove unused type import

* fix(react-components): update offer status when provision notice closed

* fixup! fix(react-components): update offer status when provision notice closed

Author: samsiegart

packages/react-components/src/lib/context/AgoricContext.ts

@@ -1,12 +1,7 @@
 import { createContext } from 'react';
 import { makeAgoricWalletConnection } from '@agoric/web-components';
 import type { ChainStorageWatcher } from '@agoric/rpc';
-import type {
-  Brand,
-  Amount,
-  AssetKind,
-  AmountValue,
-} from '@agoric/ertp/src/types';
+import type { Brand, Amount, AssetKind } from '@agoric/ertp/src/types';
 
 export type PurseJSONState<T extends AssetKind> = {
   brand: Brand;

packages/react-components/src/lib/context/AgoricProvider.tsx

@@ -1,4 +1,4 @@
-import { ChainProvider } from '@cosmos-kit/react';
+import { ChainProvider, type ThemeCustomizationProps } from '@cosmos-kit/react';
 import { AgoricProviderLite } from './AgoricProviderLite';
 import { chains, assets } from 'chain-registry';
 import { makeAssetList, makeChainInfo } from '../config';
@@ -17,6 +17,7 @@ export type AgoricProviderProps = PropsWithChildren<{
   walletConnectOptions?: WalletConnectOptions;
   onConnectionError?: (e: unknown) => void;
   provisionNoticeContent?: ProvisionNoticeProps['mainContent'];
+  modalTheme?: ThemeCustomizationProps;
 }>;
 
 export const AgoricProvider = (props: AgoricProviderProps) => {
@@ -37,6 +38,7 @@ const AgoricProviderInner = ({
   children,
   onConnectionError,
   provisionNoticeContent,
+  modalTheme,
 }: AgoricProviderProps) => {
   const { networkConfig } = useContext(NetworkContext);
   assert(networkConfig, 'Network config missing from context');
@@ -57,6 +59,7 @@ const AgoricProviderInner = ({
         endpoints: { [chainName]: apis },
         isLazy: true,
       }}
+      modalTheme={modalTheme}
     >
       <AgoricProviderLite
         chainName={chainName}

packages/react-components/src/lib/context/AgoricProviderLite.tsx

@@ -39,6 +39,11 @@ export type AgoricProviderLiteProps = PropsWithChildren<{
   provisionNoticeContent?: ProvisionNoticeProps['mainContent'];
 }>;
 
+interface PostProvisionOffer {
+  makeOffer: () => void;
+  onStatusChange: (change: { status: string; data: any }) => void;
+}
+
 /**
  * Provides access to Agoric-specific account features such as smart wallet
  * provisioning, purses, offer signing, and more.
@@ -74,7 +79,7 @@ export const AgoricProviderLite = ({
     bigint | undefined
   >(undefined);
   const [postProvisionOffer, setPostProvisionOffer] = useState<
-    (() => void) | undefined
+    PostProvisionOffer | undefined
   >(undefined);
 
   const { status, client } = useWalletClient();
@@ -224,9 +229,12 @@ export const AgoricProviderLite = ({
             walletConnection?.makeOffer(...offerArgs);
             return;
           }
-          setPostProvisionOffer(() => () => {
-            walletConnection?.makeOffer(...offerArgs);
-            setPostProvisionOffer(undefined);
+          setPostProvisionOffer({
+            makeOffer: () => {
+              walletConnection?.makeOffer(...offerArgs);
+              setPostProvisionOffer(undefined);
+            },
+            onStatusChange: offerArgs[3],
           });
         }
       : undefined;
@@ -251,8 +259,14 @@ export const AgoricProviderLite = ({
       {children}
       <ProvisionNoticeModal
         mainContent={provisionNoticeContent}
-        onClose={() => setPostProvisionOffer(undefined)}
-        proceed={postProvisionOffer}
+        onClose={() => {
+          postProvisionOffer?.onStatusChange({
+            status: 'error',
+            data: new Error('User cancelled'),
+          });
+          setPostProvisionOffer(undefined);
+        }}
+        proceed={postProvisionOffer?.makeOffer}
       />
     </AgoricContext.Provider>
   );