Example

import { useEffect, useState } from 'react';

import {
  useDynamicContext,
  DynamicContextProvider,
} from '@dynamic-labs/sdk-react';

const Home = () => {
  const { user, handleLogOut, setShowAuthFlow, showAuthFlow, walletConnector } =
    useDynamicContext();

  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (user && walletConnector) {
      const provider = walletConnector.getWeb3Provider();
      provider.getBalance(user.walletPublicKey).then((balance) => {
        setBalance(balance.toString());
      });
    }
  }, [user, walletConnector]);

  if (user && !showAuthFlow) {
    return (
      <div>
        <p>User is logged in</p>
        <p>Address: {user.walletPublicKey}</p>
        <p>Balance: {balance}</p>
        <button type='button' onClick={handleLogOut}>
          Log Out
        </button>
      </div>
    );
  }

  return (
    <div>
      <button type='button' onClick={() => setShowAuthFlow(true)}>
        Connect With My Wallet
      </button>
    </div>
  );
};

const App = () => (
  <DynamicContextProvider
    settings={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
      onAuthSuccess: ({ authToken, user }) => {
        console.log(
          `Welcome ${user.walletPublicKey} your token is ${authToken}`,
        );
        window.location.assign('/success');
      },
    }}
  >
    <Home />
  </DynamicContextProvider>
);

export default App;

import { useEffect, useState } from 'react';

import {
  useDynamicContext,
  DynamicContextProvider,
  UserProfile,
} from '@dynamic-labs/sdk-react';

const Home = () => {
  const { user, handleLogOut, setShowAuthFlow, showAuthFlow, walletConnector } =
    useDynamicContext();

  const [balance, setBalance] = useState<string | null>(null);

  useEffect(() => {
    if (user && walletConnector) {
      walletConnector.getBalance().then((balance) => {
        if (balance) {
          setBalance(balance.toString());
        }
      });
    }
  }, [user, walletConnector]);

  if (user && !showAuthFlow) {
    return (
      <div>
        <p>User is logged in</p>
        <p>Address: {user.walletPublicKey}</p>
        <p>Balance: {balance}</p>
        <button type='button' onClick={handleLogOut}>
          Log Out
        </button>
      </div>
    );
  }

  return (
    <div>
      <button type='button' onClick={() => setShowAuthFlow(true)}>
        Connect With My Wallet
      </button>
    </div>
  );
};

const App = () => (
  <DynamicContextProvider
    settings={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
      onAuthSuccess: ({
        authToken,
        user,
      }: {
        authToken: string;
        user: UserProfile;
      }) => {
        console.log(
          `Welcome ${user.walletPublicKey} your token is ${authToken}`,
        );
        window.location.assign('/success');
      },
    }}
  >
    <Home />
  </DynamicContextProvider>
);

export default App;