Get balance

import { useEffect, useState } from "react";

import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

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

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

  useEffect(() => {
    const fetchBalance = async () => {
      if (primaryWallet) {
        const value = await primaryWallet.connector.getBalance();
        setBalance(value);
      }
    };
    fetchBalance();
  }, [primaryWallet]);

  if (primaryWallet && !showAuthFlow) {
    return (
      <div>
        <p>User is logged in</p>
        <p>Address: {primaryWallet.address}</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={{environmentId: '<<sandboxEnvironmentId>>'}}>
    <Home />
  </DynamicContextProvider>
);

export default App;

import { useEffect, useState } from 'react';

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

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: ({
        user,
      }: {
        user: UserProfile;
      }) => {
        console.log(
          `Welcome ${user.email}`,
        );
        window.location.assign('/success');
      },
    }}
  >
    <Home />
  </DynamicContextProvider>
);

export default App;