diff --git a/docs/README.md b/docs/README.md index ac98e5e1..5b21b4c4 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,12 +10,20 @@ * [Setup](#setup) +* [Getting Started with masa-react](#getting-started-with-masa-react) + * [Setup](#setup) + * [Styles](#styles) + * [Usage ( inside MasaProvider )](#usage--inside-masaprovider-) + * [Example for useMasa ( Connect users wallet )](#example-for-usemasa--connect-users-wallet-) + * [Example for masa object ( Wallet is already connected here )](#example-for-masa-object--wallet-is-already-connected-here-) + * [For some contracts you will need some pre requisites ( Scopes )](#for-some-contracts-you-will-need-some-pre-requisites--scopes-) + * [Current useMasa shape](#current-usemasa-shape) ## Setup -``` +```bash git clone https://github.com/masa-finance/masa-react.git yarn @@ -31,18 +39,17 @@ First install `masa-react` in your project Then import and add a provider -``` - -import { MasaProvider } from "@masa-finance/masa-react"; - -... +```typescript jsx +import { + MasaProvider +} from "@masa-finance/masa-react"; function App() { return ( - ... + ... - ); + ); } ``` @@ -58,68 +65,72 @@ Import `useMasa` to have access to the `masa` object, this will let you connect ### Example for useMasa ( Connect users wallet ) -``` -import { useMasa } from "@masa-finance/masa-react"; - -... +```typescript jsx +import { + useMasa +} from "@masa-finance/masa-react"; const { connect } = useMasa(); const connectionCallback = () => { - history.push('/dashboard'); + history.push('/dashboard'); } const connectionHandler = useCallback(() => { - connect(options) + connect(options) }, [connect, options]); -... - - + ``` ### Example for masa object ( Wallet is already connected here ) -``` -import { useMasa } from "@masa-finance/masa-react"; - -... +```typescript jsx +import { + useMasa +} from "@masa-finance/masa-react"; const { masa } = useMasa(); -const askForCreditReports = useCallback(() => { - const creditReports = await masa?.creditScore.list(); - console.log({creditReports}) +const askForCreditReports = useCallback(async () => { + const creditReports = await masa?.creditScore.list(); + console.log({ creditReports }) }, [masa]); -... - - + ``` ### 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 -``` +```typescript jsx const options = { - scope: ['identity']; + scope: ['identity'] } const connectionHandler = useCallback(() => { - connect(options) + connect(options) }, [connect, options]); -... - - - + ``` ### Current useMasa shape -``` +```typescript jsx +interface MasaShape { setProvider?: (provider: any) => void; provider?: any; isModalOpen?: boolean; @@ -138,4 +149,5 @@ const connectionHandler = useCallback(() => { closeModal?: Function; scope?: string[]; company?: string; +} ```