@masa-finance/masa-react v3.19.4
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;
}
3 days ago
4 days ago
4 days ago
5 days ago
6 days ago
10 days ago
10 days ago
13 days ago
13 days ago
18 days ago
19 days ago
20 days ago
27 days ago
27 days ago
28 days ago
27 days ago
29 days ago
29 days ago
30 days ago
30 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
6 months ago
10 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
6 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
6 months ago
6 months ago
9 months ago
9 months ago
6 months ago
9 months ago
6 months ago
9 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
6 months ago
7 months ago
7 months ago
8 months ago
6 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
6 months ago
11 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 months ago
6 months ago
6 months ago
9 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago