Additional tooling (#957)

* feat: migration script

* feat: replace Nami ui with migration tool LW-10492

* feat: add migration components

* feat: wire-up migration logic [LW-10704]

* fix: allow Lace migration to retry in Nami completed state [LW-10492]

* fix: check for Lace installation more granularily [LW-10492]

* fix: adjust button and bg colors LW-10492

* feat: add migration analytics LW-10650

* feat: migrate color theme [LW-10673]

* chore(extension): adjust migration dark theme elements

* chore(extension): code cleanup

* feat: handle no-wallet migration case

* chore: add missing files

* chore: remove unused prop

* chore: noWallet fetch improvement

* chore: noWallet fetch improvement

* chore: code cleanup

* chore: add know more faq link

* feat: update nami migration copy [LW-10801]

* chore: update no-wallet copy

* chore: update Slide component padding

* feat: make migration flow dimissible

* feat: extract nami-migration-tool

* feat: revert package.lock file

* fix(nami): [lw-11651] update tou and pp links

* fix(nami): [lw-11652] fix blinking legal & analytics popup

* fix(nami): [lw-11435] resolve sdet comments

* fix: init posthog even if consent === false

* chore: fix readme typo

* chore: remove nami migration tool tgz

* chore: update copy

* ci: use env over with in ci.yml as with syntax not available in bash execution

* fix: remove duplicated prop def and console log

* fix: adjust migration container width

* feat: clear existing dismissed migration when enabling migration

* feat: add nami migration dormant state for beta enrolment program

* feat: update settings to show beta program and upgrade wallet conditions

* feat: update migration flow additional conditions

* feat: add end state for migration

* chore: update switch to nami mode copies

* chore: update terms content copies

* send noWallet property to posthog when beginning migration

* feat: make nami upgrade wallet button visible during lifecycle of migration period

* fix: enable injection in all frames

* chore: update terms content copies breakdown

---------

Co-authored-by: Renan Ferreira <[email protected]>
Co-authored-by: Dominik Guzei <[email protected]>
Co-authored-by: Lucas Araujo <[email protected]>
Co-authored-by: Tomislav Horaček <[email protected]>
Co-authored-by: Michael Chappell <[email protected]>

.github/workflows/ci.yml

@@ -24,10 +24,10 @@ jobs:
         run: npm test
       - name: Generates Secrets File
         run: |
-          echo "export default { PROJECT_ID_MAINNET: '${{ secrets.PROJECT_ID_MAINNET  }}', PROJECT_ID_PREVIEW: '${{ secrets.PROJECT_ID_PREVIEW  }}', PROJECT_ID_PREPROD: '${{ secrets.PROJECT_ID_PREPROD  }}'};" > secrets.production.js
+          echo "export default { PROJECT_ID_MAINNET: '${{ secrets.PROJECT_ID_MAINNET  }}', PROJECT_ID_PREVIEW: '${{ secrets.PROJECT_ID_PREVIEW  }}', PROJECT_ID_PREPROD: '${{ secrets.PROJECT_ID_PREPROD  }}', POSTHOG_API_KEY:'${{ secrets.POSTHOG_API_KEY_PRODUCTION }}', POSTHOG_PROJECT_ID: '${{ secrets.POSTHOG_PROJECT_ID_PRODUCTION }}'};" > secrets.production.js
       - name: Build
         run: npm run build
-        with:
+        env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           SENTRY_DSN: ${{ vars.SENTRY_DSN }}
           SENTRY_ORG: ${{ vars.SENTRY_ORG }}

.gitignore

@@ -24,3 +24,5 @@ secrets.development.js
 
 # IDEs
 .idea
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const { NormalModuleReplacementPlugin } = require('webpack');
+
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  webpackFinal: webPackconfig => {
+    const fileLoaderRule = webPackconfig.module.rules.find(rule =>
+      rule.test?.test('.svg'),
+    );
+    fileLoaderRule.exclude = /\.svg$/;
+    webPackconfig.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            icon: true,
+            exportType: 'named',
+          },
+        },
+      ],
+    });
+    webPackconfig.resolve.extensions.push('.svg');
+    if (webPackconfig.plugins) {
+      webPackconfig.plugins.push(
+        new NormalModuleReplacementPlugin(
+          /^webextension-polyfill$/,
+          path.join(__dirname, './mocks/webextension-polyfill.mock.ts'),
+        ),
+      );
+    }
+
+    return webPackconfig;
+  },
+};
+export default config;

.storybook/mocks/webextension-polyfill.mock.ts

@@ -0,0 +1,2 @@
+export const runtime = {};
+export const storage = {};

.storybook/preview.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box, DarkMode, Flex, LightMode } from '@chakra-ui/react';
+import Theme from '../src/ui/theme';
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => {
+    return (
+      <Theme>
+        <Flex>
+          <LightMode>
+            <Box p="50px">
+              <Story />
+            </Box>
+          </LightMode>
+          <DarkMode>
+            <Box p="50px" backgroundColor="#2E2E2E">
+              <Story />
+            </Box>
+          </DarkMode>
+        </Flex>
+      </Theme>
+    );
+  },
+];
+
+export default preview;