WIP

src/provider/masa-context-provider.tsx

@@ -21,6 +21,7 @@ import { MasaContext } from './masa-context';
 import { MasaShape } from './masa-shape';
 import { useScopes } from './modules/scopes/scopes';
 import { CustomGallerySBT } from 'components/masa-interface/pages/gallery/gallery';
+import { useCustomSBT, useCustomGallerySBT } from './modules/custom-sbts';
 
 export { SoulNameErrorCodes };
 
@@ -133,6 +134,10 @@ export const MasaContextProvider = ({
     modalSize,
   } = useModal(isLoggedIn, hasWalletAddress, areScopesFullfiled);
 
+  // custom SBTs
+  const customContracts = useCustomGallerySBT(masaInstance, customGallerySBT);
+  const customSBTs = useCustomSBT(masaInstance, customContracts);
+
   // global loading flag
   const isLoading = useMemo(() => {
     return (
@@ -283,6 +288,9 @@ export const MasaContextProvider = ({
 
     // gallery
     customGallerySBT,
+
+    // custom SBTs
+    customSBTs,
   };
 
   return (

src/provider/masa-shape.ts

@@ -112,4 +112,7 @@ export interface MasaShape {
 
   // gallery
   customGallerySBT?: CustomGallerySBT[];
+
+  // customSBTs
+  customSBTs?: any[];
 }

src/provider/modules/custom-sbts/custom-sbts.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+
+export const useCustomGallerySBT = (masa, customGallerySBT): any[] => {
+  const [contracts, setContracts] = useState<any[]>();
+
+  useEffect(() => {
+    (async () => {
+      if (customGallerySBT && customGallerySBT.length) {
+        const contracts: any[] = [];
+        for (const sbt of customGallerySBT) {
+          const sbtContract = await masa?.sbt.connect(sbt.address);
+          contracts.push({ ...sbtContract, ...sbt });
+        }
+        setContracts(contracts);
+      }
+    })();
+  }, [customGallerySBT, masa]);
+
+  return contracts ?? [];
+};
+
+export const useCustomSBT = (masa, customContracts) => {
+  const [hidratatedSBTs, setHidratatedSBTs] = useState<any[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const contracts = customContracts;
+      const hidratatedContracts: any[] = [];
+      for (const contract of contracts) {
+        const tokens: any[] = await contract.list();
+        const hidratatedTokens: any[] = [];
+        if (contract.getMetadata) {
+          for (const token of tokens) {
+            try {
+              const metadata = await contract.getMetadata(token);
+              hidratatedTokens.push({ metadata, ...token });
+            } catch (e) {
+              console.log('METADTA ERROR', e);
+            }
+          }
+        }
+
+        hidratatedContracts.push({ ...contract, tokens: hidratatedTokens });
+      }
+      setHidratatedSBTs(hidratatedContracts);
+    })();
+  }, [masa]);
+
+  return hidratatedSBTs;
+};

src/provider/modules/custom-sbts/index.ts

@@ -0,0 +1 @@
+export { useCustomSBT, useCustomGallerySBT } from './custom-sbts';

stories/masa.stories.tsx

@@ -4,21 +4,41 @@ import React, { useCallback } from 'react';
 import { MasaProvider, ModalComponent, queryClient, useMasa } from '../src';
 import { Args, Meta, Story } from '@storybook/react';
 import InterfaceMasaGreen from '../src/components/masa-interface/pages/masa-green';
+import { Messages, PaymentMethod } from '@masa-finance/masa-sdk';
+import { PokeSSSBT, PokeSSSBT__factory } from './typechain';
+
+const pokeSSSBTAddress = '0xD1C64fa4aDc003Ed92A10558572CbC499C7cA18A'; // sbt address
+
+// sbt friendly name
+const name = 'PokeSSSBT3';
+
+// types collection using for verification
+const types = {
+  Mint: [
+    { name: 'to', type: 'address' },
+    { name: 'authorityAddress', type: 'address' },
+    { name: 'signatureDate', type: 'uint256' },
+  ],
+};
+
+const paymentMethod: PaymentMethod = 'ETH';
+
 const customRenderPokeSBT = {
   name: 'PokeSBT',
-  address: '0xA5705C317367Ab3e17D0deACf530792745C29c10',
+  address: '0xD1C64fa4aDc003Ed92A10558572CbC499C7cA18A',
   getMetadata: async function (sbt: { tokenId: string; tokenUri: string }) {
     const apiUrl = sbt.tokenUri.replace('.json', '');
     const apiResponse = await fetch(apiUrl);
     const data = await apiResponse.json();
 
     return {
       name: data.name,
-      image: data.sprites.front_default,
+      image: data.image,
       description: '',
     };
   },
 };
+
 const meta: Meta = {
   title: 'SDK Test',
   component: () => <></>,
@@ -45,8 +65,11 @@ const Component = (): JSX.Element => {
     openMintSoulnameModal,
     openMintMasaGreen,
     openGallery,
+    masa,
+    customSBTs,
   } = useMasa();
 
+  console.log({ customSBTs });
   const handleConnect = useCallback(() => {
     connect?.({
       scope: ['auth'],
@@ -64,6 +87,121 @@ const Component = (): JSX.Element => {
     // todo
   };
 
+  const mintPK = useCallback(async () => {
+    if (!masa) return;
+    const to = await masa.config.wallet.getAddress();
+    const res = await fetch('http://localhost:4000/pokemons/mint', {
+      method: 'POST',
+      headers: {
+        Accept: 'application.json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id: 36,
+        wallet: to,
+      }),
+    });
+
+    const { authorityAddress, signatureDate, signature, pokemon } =
+      await res.json();
+
+    console.log({ pokemon });
+
+    const value: {
+      to: string;
+      authorityAddress: string;
+      signatureDate: number;
+    } = {
+      to,
+      authorityAddress,
+      signatureDate,
+    };
+
+    //@ts-ignore
+    const { selfSovereignSBT, prepareMint } =
+      await masa.contracts.sbt.connect<PokeSSSBT>(
+        '0xD1C64fa4aDc003Ed92A10558572CbC499C7cA18A',
+        PokeSSSBT__factory
+      );
+    if (!selfSovereignSBT) return;
+
+    console.log('PREPARING MINT', {
+      paymentMethod,
+      name,
+      types,
+      value,
+      signature,
+      authorityAddress,
+    });
+
+    const prepareMintResults = await prepareMint(
+      paymentMethod,
+      name,
+      types,
+      value,
+      signature,
+      authorityAddress
+    );
+
+    if (!prepareMintResults) return;
+
+    const { paymentAddress, price } = prepareMintResults;
+
+    const mintParameters: [string, string, string, number, string] = [
+      paymentAddress,
+      to,
+      authorityAddress,
+      signatureDate,
+      signature,
+    ];
+
+    const mintOverrides = {
+      value: price,
+    };
+
+    console.log({ mintParameters, mintOverrides });
+
+    const operation = 'mint(address,address,address,uint256,bytes)';
+
+    console.log('FIRE OPERATION');
+
+    // estimate gas
+    const gasLimit = await selfSovereignSBT.estimateGas[operation](
+      ...mintParameters,
+      mintOverrides
+    );
+
+    console.log({ gasLimit });
+
+    const transaction = await selfSovereignSBT[operation](...mintParameters, {
+      ...mintOverrides,
+      gasLimit,
+    });
+
+    console.log(Messages.WaitingToFinalize(transaction.hash));
+
+    const receipt = await transaction.wait();
+
+    console.log('RECEIPT', receipt);
+    console.log('minted in block:', receipt.blockNumber);
+
+    const resUpdate = await fetch('http://localhost:4000/pokemons/update', {
+      method: 'POST',
+      headers: {
+        Accept: 'application.json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        txHash: transaction.hash,
+        id: pokemon.insertedId,
+      }),
+    });
+
+    console.log({ resUpdate });
+    const dataUpdate = await resUpdate.json();
+
+    console.log({ dataUpdate });
+  }, [masa]);
   return (
     <>
       <h1>SDK Tester!</h1>
@@ -79,6 +217,7 @@ const Component = (): JSX.Element => {
       >
         Mint a MGX
       </button>
+      <button onClick={mintPK}>Mint a Pokemon</button>
       <button onClick={() => openGallery?.()}> Open gallery </button>
       <button onClick={loadCR}>Invalidate Wallet</button>
       <button onClick={mintGreen}>Mint green</button>

stories/typechain/@masa-finance/index.ts

@@ -0,0 +1,5 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+import type * as masaContractsIdentity from "./masa-contracts-identity";
+export type { masaContractsIdentity };