WalletProvider

@coinbase/waas-sdk-web-react • API

---

Function: WalletProvider()

WalletProvider(options): JSX.Element

A provider for injecting the WalletContext into a react app.

Parameters

• options: TProviderOptions

See TProviderOptions

Returns

JSX.Element

A JSX node for injecting the wallet provider.

Example

// 1. Logging in a user and creating a wallet with interaction

 <WalletProvider>
   <MyComponent />
 </WalletProvider>

 const MyComponent = () => {
   const { waas, user, wallet, isLoggingIn, isCreatingWallet } = useWalletContext();
   if (!waas) {
     return <Loading />
   }
   if (!user) {
     const provideAuthToken = async (): string => {
       // fetch a new auth token from your server.
     };
     return <button onClick={() => waas.login({ provideAuthToken })} disabled={isLoggingIn}>Login</button>
   }
   if (!wallet) {
      return <button onClick={() => user.create()} disabled={isCreatingWallet}>Create Wallet</button>
   }
   return <p>Wallet created.</p>
 }

// 2. Automatically login and auto-create a wallet on start

 <WalletProvider autoCreateWallet={true}>
   <MyComponent />
 </WalletProvider>

 const MyComponent = () => {
   const { waas, user, wallet, isLoggingIn, isCreatingWallet } = useWalletContext();
   useEffect(() => {
     // If WaaS is not initialized, the user is logged in, or the user is already logging in, do nothing.
     if (!waas || user || isLoggingIn) return;
     const provideAuthToken = async (): string => {
       // fetch a new auth token from your server.
     };
     waas.login({ provideAuthToken });
   }, [waas, user, isLoggingIn]);
   if (isCreatingWallet) {
     return <Loading />;
   }
   if (wallet) {
     // do something with the wallet.
   }
 }