2.0 Stable release

.eslintrc.js

@@ -0,0 +1,25 @@
+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',
+  },
+}

.github/CODEOWNERS

@@ -1,3 +1,3 @@
-* @dmitry-tk
+* @dmytrotkk
 *.md @skalenetwork/docowners
 /docs/ @skalenetwork/docowners

.github/workflows/publish.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           submodules: true
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
@@ -46,7 +46,7 @@ jobs:
           echo "PRERELEASE=$PRERELEASE" >> $GITHUB_ENV
       - name: Yarn build
         run: |
-          yarn run build
+          yarn build:lib
       - name: Publish on npm
         run: |
           if [[ "$BRANCH" == "stable" ]]; then

.github/workflows/test.yml

@@ -17,9 +17,6 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node }}
-    - name: Update submodules
-      run: |
-        git submodule update --remote
     - name: Prepare metadata
       run: |
         bash prepare_meta.sh

.gitignore

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

.gitmodules

@@ -5,3 +5,4 @@
 [submodule "skale-network"]
 	path = skale-network
 	url = https://github.com/skalenetwork/skale-network.git
+	branch = add-additional-metadata

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 100,
+  "endOfLine": "auto",
+  "bracketSpacing": true
+}

.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

README.md

@@ -15,6 +15,13 @@ See https://docs.skale.network/metaport/1.1.x/
 
 ## Development
 
+### Storybook preview
+
+```
+bash prepare_meta.sh && bun install && bun build:lib
+bun dev
+```
+
 ### Debug mode
 
 To enable debug mode, set `debug` environment variable to `true`:
@@ -29,30 +36,13 @@ const metaport = new Metaport({
 
 Additionally, you can enable debug logs in developer console by enabling `Verbose` level of logs.
 
-### Storybook setup
-
-```
-yarn install
-npx sb init --builder webpack5
-yarn run storybook
-```
-
-### Linter
-
-Used linter: https://palantir.github.io/tslint/  
-
-Install the global CLI and its peer dependency:
-
-```shell
-yarn global add tslint typescript
-```
 
 #### Linter git hook
 
 Be sure to add pre-commit git hook:
 
 ```shell
-echo 'yarn lint' > .git/hooks/pre-commit
+echo 'bun lint' > .git/hooks/pre-commit
 chmod +x .git/hooks/pre-commit
 ```
 

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