Skip to main content

Masa React

/ Exports

Getting Started with masa-react​

Installation​

First install masa-react in your project yarn add @masa-finance/masa-react

Then import and add a provider

import {
  MasaProvider
} from "@masa-finance/masa-react";

function App() {
  return (
    <MasaProvider>
      ...
    </MasaProvider>
  );
}

Styles​

If you want to add our styles to your project just include this line at the very top of your file right below your imports import "@masa-finance/masa-react/dist/style.css";

Setup Storybook​

git clone https://github.com/masa-finance/masa-react.git

yarn 
yarn storybook

Usage ( inside MasaProvider )​

Import useMasa to have access to the masa object, this will let you connect with the whole interface of smart contracts and tools from masa-sdk

Example for useMasa ( Connect users wallet )​

import {
  useMasa
} from "@masa-finance/masa-react";

const { connect } = useMasa();

const connectionCallback = () => {
  history.push('/dashboard');
}

const connectionHandler = useCallback(() => {
  connect(options)
}, [connect, options]);

<Button
  onClick={connectionHandler}>
  Connect
  with
  Masa
</Button>

Example for masa object ( Wallet is already connected here )​

import {
  useMasa
} from "@masa-finance/masa-react";

const { masa } = useMasa();

const askForCreditScores = useCallback(async () => {
  const creditScores = await masa?.creditScore.list();
  console.log({ creditScores })
}, [masa]);

<Button
  onClick={askForCreditScores}>
  Show
  credit
  reports
</Button>

For some contracts you will need some pre requisites ( Scopes )​

You can specify which scopes you want, here goes an example of requesting the connected user to have an identity

const options = {
  scope: ['identity']
}

const connectionHandler = useCallback(() => {
  connect(options)
}, [connect, options]);

<Button
  onClick={connectionHandler}>
  Connect
  with
  Masa
</Button>

Current useMasa shape​

export interface MasaShape {
  children?: React.ReactNode;

  // masa
  masa?: Masa;
  // verbose flag
  verbose?: boolean;

  // global loading
  isLoading?: boolean;

  // global connect
  connect?: (options?: {
    scope?: string[];
    callback?: () => void
  }) => void;

  // general config
  scope?: string[];
  areScopesFullfiled?: boolean;
  company?: string;

  // provider
  provider?: Wallet | Signer;
  setProvider?: (provider?: Wallet | Signer) => void;

  // modal
  isModalOpen?: boolean;
  setModalOpen?: (val: boolean) => void;
  closeModal?: (forceCallback?: boolean) => void;
  forcedPage?: string | null;
  setForcedPage?: (page: string | null) => void;
  openMintSoulnameModal?: (callback?: () => void) => void;
  openMintMasaGreen?: (callback?: () => void) => void;
  modalSize?: {
    width: number;
    height: number
  } | null;
  useModalSize?: (size: {
    width: number;
    height: number
  }) => void;

  // wallet
  walletAddress?: string;
  isWalletLoading?: boolean;
  hasWalletAddress?: boolean;

  // identity
  identity?: {
    identityId?: BigNumber;
    address?: string;
  };
  isIdentityLoading?: boolean;
  handlePurchaseIdentity?: () => Promise<boolean | undefined>;
  handlePurchaseIdentityWithSoulname?: (
    paymentMethod: PaymentMethod,
    soulname: string,
    registrationPrice: number
  ) => Promise<boolean>;
  reloadIdentity?: () => void;

  // session
  isLoggedIn?: boolean;
  isSessionLoading?: boolean;
  handleLogin?: () => void;
  handleLogout?: (logoutCallback?: () => void) => Promise<void>;

  // credit scores
  creditScores?: {
    tokenId: BigNumber;
    tokenUri: string;
    metadata?: ICreditScore;
  }[];
  isCreditScoresLoading?: boolean;
  handleCreateCreditScore?: () => Promise<boolean | undefined>;
  reloadCreditScores?: () => void;

  // soul names
  soulnames?: SoulNameDetails[];
  isSoulnamesLoading?: boolean;
  reloadSoulnames?: () => void;

  // greens
  greens?: {
    tokenId: BigNumber;
    tokenUri: string;
    metadata?: IGreen;
  }[];
  isGreensLoading?: boolean;
  handleGenerateGreen?: (
    phoneNumber: string
  ) => Promise<GenerateGreenResult | undefined>;
  handleCreateGreen?: (
    phoneNumber: string,
    code: string
  ) => Promise<VerifyGreenResult | undefined>;
  reloadGreens?: () => void;

  // network
  currentNetwork?: Network;
  SupportedNetworks?: Partial<{ [index in NetworkName]: Network }>;
  switchNetwork?: (networkName: NetworkName) => void;
  forceNetwork?: NetworkName;
}