feat: redemption widget without connecting wallet (#627)

* feat: redemption without connecting wallet works * feat: both signer and web3libadapter
bosonprotocol · Dec 12, 2023 · 241fbcb · 241fbcb
1 parent 9779933
commit 241fbcb
Show file tree

Hide file tree

Showing 15 changed files with 324 additions and 75 deletions.
diff --git a/packages/react-kit/src/components/chat/ChatProvider/ChatProvider.tsx b/packages/react-kit/src/components/chat/ChatProvider/ChatProvider.tsx
@@ -6,6 +6,7 @@ import { useEnvContext } from "../../environment/EnvironmentContext";
 import { Context } from "./ChatContext";
 import { getChatEnvName } from "./const";
 import { useSigner } from "../../../hooks/connection/connection";
+import { useExternalSigner } from "../../signer/useExternalSigner";
 
 interface Props {
   children: ReactNode;

diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
@@ -5,7 +5,7 @@ import Confirmation, { ConfirmationProps } from "./Confirmation";
 import { NonModalProps, useNonModalContext } from "../../../nonModal/NonModal";
 import Typography from "../../../../ui/Typography";
 import { theme } from "../../../../../theme";
-import { useAccount } from "wagmi";
+import { useAccount } from "../../../../../hooks/connection/connection";
 
 const colors = theme.colors.light;
 

diff --git a/...s/react-kit/src/components/modal/components/Redeem/ExchangeView/DetailView/TokenGated.tsx b/...s/react-kit/src/components/modal/components/Redeem/ExchangeView/DetailView/TokenGated.tsx
@@ -1,4 +1,4 @@
-import { EvaluationMethod, TokenType, GatingType } from "@bosonprotocol/common";
+import { EvaluationMethod, TokenType } from "@bosonprotocol/common";
 import { CoreSDK } from "@bosonprotocol/core-sdk";
 import { Check, X } from "phosphor-react";
 import React, { CSSProperties, useEffect, useMemo, useState } from "react";
@@ -61,14 +61,11 @@ const buildMessage = (
     tokenType,
     minTokenId,
     maxTokenId,
-    gatingType,
+    // gatingType,
     tokenAddress,
     threshold
   } = condition;
 
-  const perWalletOrPerToken =
-    gatingType === GatingType.PerAddress ? " (per wallet)" : " (per token)";
-
   const TokenLink = (
     <a
       href={getTxExplorerUrl?.(tokenAddress, true)}
@@ -91,22 +88,21 @@ const buildMessage = (
     if (method === EvaluationMethod.Threshold) {
       return (
         <>
-          {threshold} tokens {perWalletOrPerToken} from {TokenLink}
+          {threshold} tokens from {TokenLink}
         </>
       );
     }
     if (method === EvaluationMethod.TokenRange) {
       if (minTokenId === maxTokenId) {
         return (
           <>
-            Token ID {perWalletOrPerToken}: {minTokenId} from {TokenLink}
+            Token ID: {minTokenId} from {TokenLink}
           </>
         );
       }
       return (
         <>
-          From token ID {minTokenId} to token ID {maxTokenId}{" "}
-          {perWalletOrPerToken} from {TokenLink}
+          From token ID {minTokenId} to token ID {maxTokenId} from {TokenLink}
         </>
       );
     }
@@ -115,15 +111,14 @@ const buildMessage = (
     if (minTokenId === maxTokenId) {
       return (
         <>
-          {threshold} x token(s) with id: {minTokenId} {perWalletOrPerToken}{" "}
-          from {TokenLink}
+          {threshold} x token(s) with id: {minTokenId} from {TokenLink}
         </>
       );
     }
     return (
       <>
         {threshold} x token(s) from token ID {minTokenId} to token ID{" "}
-        {maxTokenId} {perWalletOrPerToken} from {TokenLink}
+        {maxTokenId} from {TokenLink}
       </>
     );
   }

diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
@@ -87,6 +87,7 @@ export type RedeemNonModalProps = {
   cancellationViewOnSuccess?: CancellationViewProps["onSuccess"];
   confirmationViewOnSuccess?: ConfirmationViewProps["onSuccess"];
   forcedAccount?: string;
+  parentOrigin?: string | null;
 };
 
 export default function RedeemWrapper({
@@ -105,7 +106,8 @@ export default function RedeemWrapper({
         footerComponent: <BosonFooter />,
         contentStyle: {
           background: colors.white
-        }
+        },
+        showConnectButton: !props.parentOrigin
       }}
     >
       <RedeemNonModal hideModal={hideModal} {...props} />

diff --git a/packages/react-kit/src/components/modal/nonModal/Header.tsx b/packages/react-kit/src/components/modal/nonModal/Header.tsx
@@ -30,20 +30,22 @@ type HeaderProps = {
   HeaderComponent: ReactNode;
   closable: boolean;
   handleOnClose: () => void;
+  showConnectButton: boolean;
 };
 
 const Header: React.FC<HeaderProps> = ({
   HeaderComponent,
   closable,
-  handleOnClose
+  handleOnClose,
+  showConnectButton
 }) => {
   return (
     <>
       {HeaderComponent && (
         <Wrapper tag="div" margin="0">
           {HeaderComponent}
           <Grid justifyContent="flex-end">
-            <ConnectButton showChangeWallet />
+            {showConnectButton && <ConnectButton showChangeWallet />}
             {closable && (
               <ThemedButton data-close theme="blank" onClick={handleOnClose}>
                 <Close size={32} />

diff --git a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
@@ -207,6 +207,7 @@ export interface NonModalProps {
   maxWidths?: Store["modalMaxWidth"];
   theme?: NonNullable<Store["theme"]>;
   closable?: boolean;
+  showConnectButton: boolean;
 }
 
 export default function NonModal({
@@ -219,7 +220,8 @@ export default function NonModal({
     maxWidths = null,
     theme = "light",
     contentStyle: _contentStyle,
-    closable = true
+    closable = true,
+    showConnectButton
   }
 }: {
   children: React.ReactNode;
@@ -243,6 +245,7 @@ export default function NonModal({
           HeaderComponent={HeaderComponent}
           closable={closable}
           handleOnClose={handleOnClose}
+          showConnectButton={showConnectButton}
         />
 
         <Content $size={size} style={contentStyle}>

diff --git a/packages/react-kit/src/components/signer/SignerContext.tsx b/packages/react-kit/src/components/signer/SignerContext.tsx
@@ -1,24 +1,25 @@
 import React, { createContext, ReactNode } from "react";
 import { Web3LibAdapter } from "@bosonprotocol/common";
 import { useProvideExternalSigner } from "../../lib/signer/externalSigner";
+import { Signer } from "ethers";
 
-export const SignerContext = createContext<Web3LibAdapter | undefined>(
-  undefined
-);
+export const SignerContext = createContext<
+  { externalWeb3LibAdapter: Web3LibAdapter; externalSigner: Signer } | undefined
+>(undefined);
 
 type SignerProviderProps = {
   children: ReactNode;
-  parentOrigin: `http${string}` | null | undefined;
+  parentOrigin: string | null | undefined;
 };
 export const SignerProvider = ({
   children,
   parentOrigin
 }: SignerProviderProps) => {
-  const externalSigner = useProvideExternalSigner({
+  const externalSignerListenerObject = useProvideExternalSigner({
     parentOrigin
   });
   return (
-    <SignerContext.Provider value={externalSigner}>
+    <SignerContext.Provider value={externalSignerListenerObject}>
       {children}
     </SignerContext.Provider>
   );

diff --git a/packages/react-kit/src/components/widgets/finance/FinanceWidget.tsx b/packages/react-kit/src/components/widgets/finance/FinanceWidget.tsx
@@ -150,7 +150,7 @@ type FinanceWidgetProps = {
 } & Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
   EnvironmentProviderProps &
   ConvertionRateProviderProps & {
-    parentOrigin: `http${string}` | undefined | null;
+    parentOrigin: string | undefined | null;
     sellerId: string | null | undefined;
   };
 

diff --git a/packages/react-kit/src/components/widgets/redemption/RedemptionWidget.tsx b/packages/react-kit/src/components/widgets/redemption/RedemptionWidget.tsx
@@ -25,6 +25,7 @@ import { RedeemNonModalProps } from "../../modal/components/Redeem/RedeemNonModa
 import { RedeemModalWithExchange } from "./RedeemModalWithExchange";
 import { MagicProvider } from "../../magicLink/MagicContext";
 import { CONFIG } from "../../../lib/config/config";
+import { SignerProvider } from "../../signer/SignerContext";
 
 type RedemptionProps = {
   buttonProps?: Omit<ButtonProps, "onClick">;
@@ -41,7 +42,9 @@ type WidgetProps = RedemptionProps &
   Omit<RedemptionContextProps, "setWidgetAction"> &
   EnvironmentProviderProps &
   ConvertionRateProviderProps &
-  Omit<WalletConnectionProviderProps, "children" | "envName">;
+  Omit<WalletConnectionProviderProps, "children" | "envName"> & {
+    parentOrigin?: string | undefined | null;
+  };
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -69,28 +72,30 @@ export function RedemptionWidget(props: WidgetProps) {
           infuraKey={infuraKey}
           {...props}
         >
-          <MagicProvider>
-            <QueryClientProvider client={queryClient}>
-              <WalletConnectionProvider
-                walletConnectProjectId={props.walletConnectProjectId}
-              >
-                <ChatProvider>
-                  <IpfsProvider {...props}>
-                    <ConvertionRateProvider>
-                      <ModalProvider>
-                        <RedemptionProvider {...props}>
-                          <RedeemModalWithExchange
-                            {...props}
-                            hideModal={props.closeWidgetClick}
-                          />
-                        </RedemptionProvider>
-                      </ModalProvider>
-                    </ConvertionRateProvider>
-                  </IpfsProvider>
-                </ChatProvider>
-              </WalletConnectionProvider>
-            </QueryClientProvider>
-          </MagicProvider>
+          <SignerProvider parentOrigin={props.parentOrigin}>
+            <MagicProvider>
+              <QueryClientProvider client={queryClient}>
+                <WalletConnectionProvider
+                  walletConnectProjectId={props.walletConnectProjectId}
+                >
+                  <ChatProvider>
+                    <IpfsProvider {...props}>
+                      <ConvertionRateProvider>
+                        <ModalProvider>
+                          <RedemptionProvider {...props}>
+                            <RedeemModalWithExchange
+                              {...props}
+                              hideModal={props.closeWidgetClick}
+                            />
+                          </RedemptionProvider>
+                        </ModalProvider>
+                      </ConvertionRateProvider>
+                    </IpfsProvider>
+                  </ChatProvider>
+                </WalletConnectionProvider>
+              </QueryClientProvider>
+            </MagicProvider>
+          </SignerProvider>
         </ConfigProvider>
       </EnvironmentProvider>
     </div>

diff --git a/packages/react-kit/src/hooks/connection/connection.ts b/packages/react-kit/src/hooks/connection/connection.ts
@@ -13,23 +13,31 @@ import { useEthersSigner } from "../ethers/useEthersSigner";
 import { useConfigContext } from "../../components/config/ConfigContext";
 import { useExternalSigner } from "../../components/signer/useExternalSigner";
 import { useSignerAddress } from "../useSignerAddress";
+import { useExternalSignerChainId } from "../../lib/signer/externalSigner";
+import { Signer } from "ethers";
 
 export function useAccount() {
   const { address: account } = useWagmiAccount();
   const { user } = useUser();
-  const externalSigner = useExternalSigner();
-  const externalSignerAddress = useSignerAddress(externalSigner);
+  const { externalWeb3LibAdapter } = useExternalSigner() ?? {};
+  const externalSignerAddress = useSignerAddress(externalWeb3LibAdapter);
   return useMemo(
     () => ({ address: externalSignerAddress ?? account ?? user }),
     [account, user, externalSignerAddress]
   );
 }
 
-export function useChainId() {
+export function useChainId(): number | undefined {
+  const externalSigner = useExternalSigner();
+  const { data: externalSignerChainId } = useExternalSignerChainId();
   const { chain } = useNetwork();
   const magicChainId = useMagicChainId();
   const isMagicLoggedIn = useIsMagicLoggedIn();
-  const chainIdToReturn = isMagicLoggedIn ? magicChainId : chain?.id;
+  const chainIdToReturn = externalSigner
+    ? externalSignerChainId
+    : isMagicLoggedIn
+    ? magicChainId
+    : chain?.id;
   return chainIdToReturn;
 }
 
@@ -40,13 +48,18 @@ export function useIsConnectedToWrongChain(): boolean {
   return connectedToWrongChain;
 }
 
-export function useSigner() {
+export function useSigner(): Signer | undefined {
   const wagmiSigner = useEthersSigner();
+  const { externalSigner } = useExternalSigner() ?? {};
   const magicProvider = useMagicProvider();
   const isMagicLoggedIn = useIsMagicLoggedIn();
 
   const signer = useMemo(() => {
-    return isMagicLoggedIn ? magicProvider?.getSigner() : wagmiSigner;
-  }, [wagmiSigner, magicProvider, isMagicLoggedIn]);
+    return externalSigner
+      ? externalSigner
+      : isMagicLoggedIn
+      ? magicProvider?.getSigner()
+      : wagmiSigner;
+  }, [externalSigner, wagmiSigner, magicProvider, isMagicLoggedIn]);
   return signer;
 }
diff --git a/packages/react-kit/src/hooks/useCoreSdkOverrides.ts b/packages/react-kit/src/hooks/useCoreSdkOverrides.ts
@@ -9,7 +9,7 @@ export const useCoreSdkOverrides = ({
 }) => {
   const externalSigner = useExternalSigner();
   const overrides = useMemo(() => {
-    return externalSigner ? { web3Lib: externalSigner } : undefined;
+    return externalSigner ? { web3Lib: externalSigner.externalWeb3LibAdapter } : undefined;
   }, [externalSigner]);
   const coreSdk = useCoreSdk(coreSdkConfig, overrides);
   return coreSdk;

diff --git a/packages/react-kit/src/hooks/useCoreSdkWithContext.ts b/packages/react-kit/src/hooks/useCoreSdkWithContext.ts
@@ -12,7 +12,7 @@ export function useCoreSDKWithContext() {
   const signer = useSigner();
   const defaultConfig = getEnvConfigById(envName, configId);
   const overrides = useMemo(() => {
-    return externalSigner ? { web3Lib: externalSigner } : undefined;
+    return externalSigner ? { web3Lib: externalSigner.externalWeb3LibAdapter } : undefined;
   }, [externalSigner]);
   return hooks.useCoreSdk(
     {

diff --git a/packages/react-kit/src/lib/errors/transactions.ts b/packages/react-kit/src/lib/errors/transactions.ts
@@ -1,4 +1,3 @@
-import { Provider } from "@bosonprotocol/ethers-sdk";
 import * as Sentry from "@sentry/browser";
 import { getRevertReason } from "./eth-revert-reason";
 import { providers } from "ethers";
@@ -12,7 +11,7 @@ export async function extractUserFriendlyError(
   }: {
     defaultError?: string;
     txResponse?: providers.TransactionResponse;
-    provider?: Provider;
+    provider?: providers.Provider;
   } = {}
 ): Promise<string> {
   try {