Size updates for gallery

masa-finance · Apr 17, 2023 · cd48ff2 · cd48ff2
1 parent 5ef5b4c
commit cd48ff2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/masa-interface/pages/gallery/gallery.tsx b/src/components/masa-interface/pages/gallery/gallery.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ICreditScore, IGreen, SoulNameDetails } from '@masa-finance/masa-sdk';
 import { BigNumber } from 'ethers';
 import { Tabs } from './tabs';
+import { useMasa } from '../../../../provider';
 
 export const types = {
   Mint: [
@@ -39,6 +40,10 @@ export interface CustomGallerySBT {
   }>;
 }
 export const Gallery = ({ setIndex, context }) => {
+  const { useModalSize } = useMasa();
+
+  useModalSize?.({ width: 1100, height: 800 });
+
   return (
     <div className="masa-gallery-container">
       <Tabs

diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx
@@ -4,7 +4,21 @@ 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';
+const customRenderPokeSBT = {
+  name: 'PokeSBT',
+  address: '0xA5705C317367Ab3e17D0deACf530792745C29c10',
+  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,
+      description: '',
+    };
+  },
+};
 const meta: Meta = {
   title: 'SDK Test',
   component: () => <></>,
@@ -30,6 +44,7 @@ const Component = (): JSX.Element => {
     switchNetwork,
     openMintSoulnameModal,
     openMintMasaGreen,
+    openGallery,
   } = useMasa();
 
   const handleConnect = useCallback(() => {
@@ -64,6 +79,7 @@ const Component = (): JSX.Element => {
       >
         Mint a MGX
       </button>
+      <button onClick={() => openGallery?.()}> Open gallery </button>
       <button onClick={loadCR}>Invalidate Wallet</button>
       <button onClick={mintGreen}>Mint green</button>
 
@@ -104,7 +120,11 @@ const Component = (): JSX.Element => {
 const Template: Story = (props: Args) => {
   return (
     <>
-      <MasaProvider company="Masa" forceNetwork={'alfajores'}>
+      <MasaProvider
+        company="Masa"
+        forceNetwork={'goerli'}
+        customGallerySBT={[customRenderPokeSBT]}
+      >
         <Component {...props} />
       </MasaProvider>
     </>
@@ -122,7 +142,11 @@ Default.args = {};
 const MasaGreenTemplate: Story = (props: Args) => {
   return (
     <>
-      <MasaProvider company="Masa" forceNetwork={'ethereum'}>
+      <MasaProvider
+        company="Masa"
+        customGallerySBT={[customRenderPokeSBT]}
+        forceNetwork={'goerli'}
+      >
         <ModalComponent
           open={true}
           close={() => {