New metaport architecture

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier', 'plugin:storybook/recommended'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'react/jsx-key': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    'no-console': 'warn',
+  },
+}

.gitignore

@@ -53,8 +53,10 @@ test.mjs
 
 
 src/meta/
+src/icons/index.ts
 
 metaportConfig.json
+metaportConfigMainnet.json
 
 storybook-static/
 .vercel

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "endOfLine": "auto"
+}

.storybook/main.ts

@@ -1,88 +1,22 @@
-const path = require("path");
-const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from '@storybook/react-vite'
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  core: {},
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app", "@storybook/addon-interactions"],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/react-vite',
     options: {
       builder: {
-        lazyCompilation: true
-      }
-    }
+        viteConfigPath: '.storybook/vite.config.ts',
+      },
+    },
   },
   docs: {
-    autodocs: "tag"
+    autodocs: 'tag',
   },
-  staticDirs: ["../build"],
-  webpackFinal: async config => {
-    if (config.resolve && config.resolve.alias) {
-      const {
-        global,
-        ...alias
-      } = config.resolve.alias;
-      // config.resolve.alias['global'] = undefined;
-      // const { ...alias } = config.resolve.alias
-      config.resolve.alias = alias;
-    }
-    if (config.module && config.module.rules) {
-      config.module.rules.push({
-        test: /\.scss$/,
-        use: ["style-loader", {
-          loader: 'css-loader',
-          options: {
-            modules: true,
-            sourceMap: true,
-            importLoaders: 2,
-            esModule: false
-          }
-        }, "sass-loader"],
-        include: path.resolve(__dirname, "../")
-      });
-      config.module.rules.push({
-        test: /\.(ts|tsx)$/,
-        loader: require.resolve("babel-loader"),
-        options: {
-          presets: [["react-app", {
-            flow: false,
-            typescript: true,
-            runtime: 'automatic'
-          }]]
-        }
-      });
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: [{
-          loader: 'svg-url-loader',
-          options: {
-            limit: 10000
-          }
-        }]
-      });
-    }
-    if (config.plugins) {
-      config.plugins.push(new NodePolyfillPlugin());
-    }
-    if (config.resolve && config.resolve.extensions) {
-      config.resolve.extensions.push(".ts", ".tsx");
-    }
-    if (config.resolve && config.resolve.fallback) {
-      config.resolve.fallback = {
-        path: require.resolve('path-browserify'),
-        os: "os-browserify/browser",
-        "fs": false,
-        "https": require.resolve("https-browserify"),
-        "http": require.resolve("stream-http"),
-        "crypto": require.resolve("crypto-browserify"),
-        "stream": require.resolve("stream-browserify"),
-        "buffer": require.resolve("buffer")
-        //...config.resolve.fallback,
-      };
-    }
-
-    return config;
-  }
-};
-export default config;
+}
+export default config

.storybook/preview.ts

@@ -1,15 +1,25 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    grid: true,
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#222425',
+        }
+      ]
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview

.storybook/vite.config.ts

@@ -0,0 +1,16 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vitest/config'
+import { UserConfigExport } from 'vite'
+
+const app = async (): Promise<UserConfigExport> => {
+  return defineConfig({
+    plugins: [react()],
+    css: {
+      postcss: {
+        plugins: [],
+      },
+    },
+  })
+}
+// https://vitejs.dev/config/
+export default app

generate-imports.js

@@ -0,0 +1,44 @@
+const fs = require('fs');
+const path = require('path');
+
+const rootDir = process.argv[2];
+
+if (!rootDir) {
+    console.error('Please provide a root directory as an argument.');
+    process.exit(1);
+}
+
+const getSvgFilesInDir = (dir) => {
+    return fs.readdirSync(dir).filter(file => path.extname(file) === '.svg').map(file => path.join(dir, file));
+};
+
+const generateNamespaceExportsForDir = (dir) => {
+    const svgFiles = getSvgFilesInDir(dir);
+
+    if (svgFiles.length === 0) return; // Skip folders without SVGs
+
+    const namespaceExports = svgFiles.map(file => {
+        const variableName = path.basename(file, '.svg').replace(/-([a-z])/g, (_, g) => g.toUpperCase()); // Convert kebab-case to camelCase
+        return `export * as ${variableName} from './${path.basename(file)}';`;
+    }).join('\n');
+
+    const outputPath = path.join(dir, 'index.ts');
+    fs.writeFileSync(outputPath, namespaceExports, 'utf-8');
+};
+
+const walkDirectories = (dir) => {
+    const items = fs.readdirSync(dir);
+
+    for (const item of items) {
+        const itemPath = path.join(dir, item);
+        const stat = fs.statSync(itemPath);
+
+        if (stat && stat.isDirectory()) {
+            generateNamespaceExportsForDir(itemPath);
+            walkDirectories(itemPath);
+        }
+    }
+};
+
+generateNamespaceExportsForDir(rootDir);  // Generate for rootDir itself
+walkDirectories(rootDir);                 // Then walk its subdirectories