NEAR and NEP141 Balance Widget

A React component to display NEAR native and NEP141 tokens balance. Formatted with their corresponding decimals.

This widget integrates with the original Wallet Selector.

Getting Started

Follow the Project Setup instructions to start the project in your local machine and try the recipes yourself. You can also clone or navigate the repo to get just what you need.

The WalletSelector Component

This React component may be inserted as a child of a NavBar component. You may need only the logic for your project, so follow along to learn how to initialize the NEAR wallet and integrate it with @near-wallet-selector/core

https://github.com/aufacicenta/pulsemarkets/blob/prompt-wars/app/src/ui/wallet-selector/WalletSelector.tsx

import clsx from "clsx";
import { useEffect, useState } from "react";
import { useTranslation } from "next-i18next";

import { Button } from "../button/Button";
import { Typography } from "ui/typography/Typography";
import { Icon } from "ui/icon/Icon";
import { useNearWalletSelectorContext } from "context/near/wallet-selector/useNearWalletSelectorContext";
import near from "providers/near";
import { useWalletStateContext } from "context/wallet/state/useWalletStateContext";
import pulse from "providers/pulse";
import { CollateralTokenBalance } from "ui/pulse/market-card/collateral-token-balance/CollateralTokenBalance";
import { useNearPromptWarsMarketContractContext } from "context/near/prompt-wars-market-contract/useNearPromptWarsMarketContractContext";

import { WalletSelectorProps } from "./WalletSelector.types";
import styles from "./WalletSelector.module.scss";

import "@near-wallet-selector/modal-ui/styles.css";

export const WalletSelector: React.FC<WalletSelectorProps> = ({ className }) => {
  const [isWidgetVisible, setIsWidgetVisible] = useState(false);

  const { marketId } = useNearPromptWarsMarketContractContext();

  const nearWalletSelectorContext = useNearWalletSelectorContext();

  const wallet = useWalletStateContext();

  useEffect(() => {
    if (!nearWalletSelectorContext.selector) {
      return;
    }

    nearWalletSelectorContext.initModal(near.getConfig().factoryWalletId);
  }, [nearWalletSelectorContext.selector]);

  const handleOnConnectWalletClick = () => {
    nearWalletSelectorContext.signOut();
    setIsWidgetVisible(false);
  };

  const handleOnDisplayWidgetClick = () => {
    if (wallet.isConnected) {
      setIsWidgetVisible(!isWidgetVisible);
    } else {
      nearWalletSelectorContext.modal?.show();
    }
  };

  const { t } = useTranslation(["prompt-wars"]);

  return (
    <div className={clsx(styles["wallet-selector"], className)}>
      <Button
        color={wallet.actions.isGettingGuestWallet ? "success" : "primary"}
        variant="outlined"
        onClick={handleOnDisplayWidgetClick}
        rightIcon={<Icon name={wallet.address ? "icon-power" : "icon-power-crossed"} />}
        className={styles["wallet-selector__button"]}
        animate={wallet.actions.isGettingGuestWallet ? "pulse" : undefined}
        size="s"
      >
        {wallet.isConnected ? (
          <Typography.Text inline truncate flat>
            {wallet.address}
          </Typography.Text>
        ) : (
          <>
            {wallet.actions.isGettingGuestWallet
              ? t("promptWars.walletSelector.isSettingGuestWallet")
              : t("promptWars.connectWallet")}
          </>
        )}
      </Button>
      {isWidgetVisible && (
        <>
          <div
            className={styles["wallet-selector__widget--backdrop"]}
            onClick={() => setIsWidgetVisible(!isWidgetVisible)}
            role="presentation"
          />
          <div className={styles["wallet-selector__widget"]}>
            <div className={styles["wallet-selector__balance"]}>
              <Typography.Description>{t("promptWars.walletSelector.nativeBalance")}</Typography.Description>
              <Typography.Text>{wallet.balance}</Typography.Text>
              <Typography.Description>
                {t("promptWars.balance")} <code>@{pulse.getDefaultCollateralToken().accountId}</code>
              </Typography.Description>
              <Typography.Text>
                <CollateralTokenBalance
                  accountId={wallet.address || marketId}
                  contractAddress={pulse.getDefaultCollateralToken().accountId}
                />
              </Typography.Text>
              <Typography.MiniDescription flat>
                <Typography.Anchor href={`${wallet.explorer}/accounts/${wallet.address}`} target="_blank">
                  {wallet.isConnected && wallet.address}
                </Typography.Anchor>
              </Typography.MiniDescription>
            </div>
            <div className={styles["wallet-selector__connect"]}>
              <Button size="xs" color="primary" onClick={handleOnConnectWalletClick}>
                {wallet.isConnected ? "Disconnect" : "Connect"}
              </Button>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

The NearWalletSelectorContextController

This component is designed to be a React context state and action manager. It should initialize the NEAR wallets modules on the first load. It will also set a selector state const so that you can load the wallets modal within UI components.

This context component works together with WalletStateContextController .

WalletStateContextController

This context component is used through the useWalletStateContext hook. It provides the connected wallet address, balance, and actions to sign in and out:

https://github.com/aufacicenta/pulsemarkets/blob/prompt-wars/app/src/context/wallet/state/WalletStateContextController.tsx

import { ReactNode, useState } from "react";
import { NetworkId } from "@near-wallet-selector/core";

import { Address, Balance, Chain, Context, Explorer, IsConnected, StateActions } from "./WalletStateContext.types";
import { WalletStateContext } from "./WalletStateContext";

export const WalletStateContextController = ({ children }: { children: ReactNode }) => {
  const [network, setNetwork] = useState<NetworkId | undefined>("testnet");
  const [explorer, setExplorer] = useState<Explorer>(undefined);
  const [chain, setChain] = useState<Chain>(undefined);
  const [address, setAddress] = useState<Address>(undefined);
  const [balance, setBalance] = useState<Balance>("0.00");
  const [isConnected, setIsConnected] = useState<IsConnected>(false);
  const [context, setContext] = useState<Context>({
    connection: undefined,
    provider: undefined,
    guest: {
      address: "",
    },
  });
  const [actions, setActions] = useState<StateActions>({
    isGettingGuestWallet: false,
  });

  const reset = () => {
    setNetwork(undefined);
    setExplorer(undefined);
    setChain(undefined);
    setAddress(undefined);
    setBalance("0.00");
    setIsConnected(false);
    setActions({ isGettingGuestWallet: false });
  };

  const props = {
    setNetwork,
    setAddress,
    setExplorer,
    setChain,
    setBalance,
    setIsConnected,
    setContext,
    setActions,
    network,
    address,
    explorer,
    chain,
    balance,
    isConnected,
    reset,
    context,
    actions,
  };

  return <WalletStateContext.Provider value={props}>{children}</WalletStateContext.Provider>;
};

CollateralTokenBalance

You may also want to look at this component to understand how it fetches the balance of a given NEP141 token. Also displayed in the wallet widget:

https://github.com/aufacicenta/pulsemarkets/blob/prompt-wars/app/src/ui/pulse/market-card/collateral-token-balance/CollateralTokenBalance.tsx

import { useEffect } from "react";

import useNearFungibleTokenContract from "providers/near/contracts/fungible-token/useNearFungibleTokenContract";
import pulse from "providers/pulse";

import { CollateralTokenBalanceProps } from "./CollateralTokenBalance.types";

export const CollateralTokenBalance: React.FC<CollateralTokenBalanceProps> = ({ contractAddress, accountId }) => {
  const { getBalanceOf, balanceOf } = useNearFungibleTokenContract({
    contractAddress,
  });

  useEffect(() => {
    if (!accountId) {
      return;
    }

    getBalanceOf(accountId);
  }, [accountId, contractAddress]);

  const collateralToken = pulse.getCollateralTokenByAccountId(contractAddress);

  return (
    <>
      {collateralToken.symbol} {balanceOf}
    </>
  );
};