WIP: Added gallery UI, CustomSBT reading and LS contract storage

.storybook/main.js

@@ -1,34 +1,36 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
-    name: 'storybook-addon-sass-postcss',
-    options: {
-      loadSassAfterPostCSS: true,
-      postcssLoaderOptions: {
-        implementation: require('postcss')
+  stories: [
+    '../stories/**/*.stories.@(ts|tsx|js|jsx)',
+    '../src/**/*.stories.@(ts|tsx|js|jsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      name: 'storybook-addon-sass-postcss',
+      options: {
+        loadSassAfterPostCSS: true,
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+        rule: {
+          test: /\.(scss|sass)$/i,
+        },
       },
-      rule: {
-        test: /\.(scss|sass)$/i
-      }
-    }
-  }, {
-    name: '@storybook/addon-postcss',
-    options: {
-      postcssLoaderOptions: {
-        implementation: require('postcss')
-      }
-    }
-  }, '@storybook/addon-mdx-gfm'],
+    },
+    '@storybook/addon-mdx-gfm',
+    '@storybook/addon-styling',
+  ],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
-    check: true // type-check stories during Storybook build
+    check: true, // type-check stories during Storybook build
   },
 
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: true
-  }
-};
+    autodocs: true,
+  },
+};

package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@acusti/react-code-input": "^3.11.0",
     "@babel/preset-typescript": "^7.21.4",
+    "@masa-finance/arcomia-contracts": "^1.4.2",
     "@masa-finance/masa-sdk": "^1.13.2",
     "@metamask/providers": "^10.2.1",
     "babel-loader": "^9.1.2",
@@ -60,6 +61,7 @@
     "@storybook/addon-links": "^7.0.2",
     "@storybook/addon-mdx-gfm": "^7.0.2",
     "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-styling": "^1.0.1",
     "@storybook/addons": "^7.0.2",
     "@storybook/react": "^7.0.2",
     "@storybook/react-webpack5": "^7.0.2",

src/components/masa-interface/pages/gallery/add-sbt.tsx

@@ -0,0 +1,18 @@
+import { useLocalStorage } from '../../../../provider';
+import React, { useCallback, useState } from 'react';
+export const AddSBT = () => {
+  const { localStorageSet } = useLocalStorage();
+  const [address, setAddress] = useState('');
+  const [name, setName] = useState('');
+
+  const handleAddSBT = useCallback(() => {
+    localStorageSet(`masa-gallery-sbt-${name}`, { address, name });
+  }, [address, setAddress, name, setName]);
+  return (
+    <div>
+      <input placeholder="0x..." onChange={(e) => setAddress(e.target.value)} />
+      <input placeholder="My SBT" onChange={(e) => setName(e.target.value)} />
+      <button onClick={handleAddSBT}>Add</button>
+    </div>
+  );
+};

src/components/masa-interface/pages/gallery/gallery.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { MasaProvider } from '../../../../provider';
+import { Meta, StoryObj } from '@storybook/react';
+import { Gallery } from '.';
+import { GalleryItem } from './galleryItem';
+
+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: 'Gallery',
+  component: Gallery,
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <>
+        <MasaProvider
+          company={'Masa'}
+          forceNetwork={'alfajores'}
+          customGallerySBT={[customRenderPokeSBT]}
+        >
+          <div className="masa-modal">
+            <Story />
+          </div>
+        </MasaProvider>
+      </>
+    ),
+  ],
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Gallery>;
+
+export const Primary: Story = {
+  render: () => <Gallery />,
+};
+
+export const Item: Story = {
+  render: () => (
+    <GalleryItem
+      image={
+        'https://images.ctfassets.net/soczmgyl79ye/6p8ZvjmQZRcC60uVWzJex9/74528d3beee14aa9071c51dc36dad873/Masa_Brand_post.png'
+      }
+      title={'Masa SBT'}
+      description={'This is a Masa SBT'}
+    />
+  ),
+};

src/components/masa-interface/pages/gallery/gallery.tsx

@@ -0,0 +1,53 @@
+import { useMasa } from '../../../../provider';
+import React, { useEffect, useMemo, useState } from 'react';
+import { GalleryItem } from './galleryItem';
+import { ICreditScore, IGreen, SoulNameDetails } from '@masa-finance/masa-sdk';
+import { BigNumber } from 'ethers';
+import { Tabs } from './tabs';
+
+export const types = {
+  Mint: [
+    { name: 'to', type: 'address' },
+    { name: 'authorityAddress', type: 'address' },
+    { name: 'signatureDate', type: 'uint256' },
+  ],
+};
+
+interface Greens {
+  tokenId: BigNumber;
+  tokenUri: string;
+  metadata?: IGreen | undefined;
+}
+
+interface CreditScores {
+  tokenId: BigNumber;
+  tokenUri: string;
+  metadata?: ICreditScore | undefined;
+}
+export interface Tabs {
+  items: SoulNameDetails[] | Greens[] | CreditScores[];
+  render: (SBT: any) => JSX.Element;
+  content: () => JSX.Element[];
+  title: string;
+}
+
+export interface CustomGallerySBT {
+  name: string;
+  address: string;
+  getMetadata: (item: { tokenId; tokenUri }) => Promise<{
+    image: string;
+    name: string;
+    description: string;
+  }>;
+}
+export const Gallery = ({ setIndex, context }) => {
+  return (
+    <div className="masa-gallery-container">
+      <Tabs
+        tabs={context.tabs}
+        wrapperClassName={'masa-gallery'}
+        onAdd={() => setIndex('addSbt')}
+      />
+    </div>
+  );
+};

src/components/masa-interface/pages/gallery/galleryItem.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface GalleryItemProps {
+  image: string;
+}
+export const GalleryItem = ({ image, title, description }) => {
+  return (
+    <div className="gallery-item">
+      <img src={image} />
+
+      {(title || description) && (
+        <div className="gallery-item-info">
+          {title && <h3 className="gallery-item-title">{title}</h3>}
+          {description && (
+            <p className="gallery-item-description">{description}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};