WIP: boilerplate-setup (#10)

* WIP: boilerplate-setup * configure webpack for dev and prod with react * WIP setup sample code with styling and design tokens * finalized i18n localization * added eslint and prettier config and change files accordingly * replave react/hotreload with react-refresh * added ts path aliases and updated types * init onboarding flow
2026-01-12 09:43:44 +08:00 · 2022-09-20 10:13:20 +02:00
parent 1ca33a89b7
commit 2fcd6e1413
67 changed files with 9104 additions and 11679 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["react-refresh/babel", "babel-plugin-styled-components"]
+}
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+build
+node_modules/
+**/*.js
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["plugin:react/recommended", "airbnb", "airbnb-typescript", "airbnb/hooks"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["react", "prettier", "eslint-plugin-no-inline-styles"],
+  "rules": {
+    "no-inline-styles/no-inline-styles": 2,
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "moduleDirectory": ["node_modules", "src/"]
+      }
+    }
+  }
+}
--- a/.github/ISSUE_TEMPLATE/bug-template.md
+++ b/.github/ISSUE_TEMPLATE/bug-template.md
@@ -0,0 +1,34 @@
+---
+name: Bug template
+about: Template for bug report.
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+# Component
+`Insert screen/component of this bug is related.`
+
+# Severity
+`Choose one`:
+- `Critical (Application crash, Loss of data)`
+- `Major (Unable to proceed on a journey)`
+- `Trivial (Some UI issue)`
+
+# Summary
+`Insert a TL;DR sentence describing the bug.`
+
+# Reproduce steps
+1.
+2.
+3.
+
+# Expected result
+`Insert expected behaviour.`
+
+# Actual result
+`Insert actual behaviour.`
+
+# Remark
+`(Optional)`
--- a/.github/ISSUE_TEMPLATE/chores-template.md
+++ b/.github/ISSUE_TEMPLATE/chores-template.md
@@ -0,0 +1,14 @@
+---
+name: Chores template
+about: Template for development chores.
+title: ''
+labels: chores
+assignees: ''
+
+---
+
+# What to implement
+
+# How to implement
+
+# Resource
--- a/.github/ISSUE_TEMPLATE/enhancement-template.md
+++ b/.github/ISSUE_TEMPLATE/enhancement-template.md
@@ -0,0 +1,19 @@
+---
+name: Enhancement template
+about: Template for user story.
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+# Story
+**As a** `insert subject here`  
+**I want to** `insert demand here`  
+**so that** `insert benefit here`.
+# Acceptance Criteria
+## Prerequisite
+### Scenario `N`
+**Given** `insert pre requisites here`
+**When** `insert triggering point here`
+**Then** `insert result here`
--- a/.github/ISSUE_TEMPLATE/idea-template.md
+++ b/.github/ISSUE_TEMPLATE/idea-template.md
@@ -0,0 +1,8 @@
+---
+name: Idea template
+about: Template for new ideas.
+title: ''
+labels: idea
+assignees: ''
+
+---
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,20 @@
+# PR Type
+What kind of change does this PR introduce?
+
+<!-- Please check the one that applies to this PR using "x". -->
+
+- [ ] Bugfix
+- [ ] Enhancement
+- [ ] Code style update (formatting, local variables)
+- [ ] Refactoring (no functional changes, no api changes)
+- [ ] Build related changes
+- [ ] CI related changes
+- [ ] Documentation content changes
+- [ ] Other... Please describe:
+
+
+# What is the current behavior?
+(Optional) Resolved: #`Insert issue number`
+
+
+# What is the new behavior?
--- a/.github/PULL_REQUEST_TEMPLATE/bump-version-template.md
+++ b/.github/PULL_REQUEST_TEMPLATE/bump-version-template.md
@@ -0,0 +1,12 @@
+---
+name: Bump version template
+about: Template for bumping version after release.
+title: 'Bumping to {version_number}'
+assignees: ''
+
+---
+
+## Checklist
+
+- [ ] Change version number
+- [ ] Reset build number
--- a/.github/PULL_REQUEST_TEMPLATE/changes-template.md
+++ b/.github/PULL_REQUEST_TEMPLATE/changes-template.md
@@ -0,0 +1,42 @@
+---
+name: Changes template
+about: Template for changes in repo.
+title: ''
+assignees: ''
+
+---
+
+# PR Type
+What kind of change does this PR introduce?
+
+<!-- Please check the one that applies to this PR using "x". -->
+
+- [ ] Bugfix
+- [ ] Enhancement
+- [ ] Code style update (formatting, local variables)
+- [ ] Refactoring (no functional changes, no api changes)
+- [ ] Build related changes
+- [ ] CI related changes
+- [ ] Documentation content changes
+- [ ] Other... Please describe:
+
+
+# What is the current behavior?
+<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
+
+(Optional) Resolved: #`Insert issue number`
+
+
+# What is the new behavior?
+
+
+# Does this PR introduce a breaking change?
+
+- [ ] Yes
+- [ ] No
+
+
+<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
+
+
+# Other information
--- a/.github/PULL_REQUEST_TEMPLATE/pre-release-template.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pre-release-template.md
@@ -0,0 +1,14 @@
+---
+name: Pre-release template
+about: Template for pre-release. Develop -> Master.
+title: 'Pre-releasing {version_number}'
+labels: pre-release
+assignees: ''
+
+---
+
+## Checklist
+
+- [ ] Bump version PR merged #`Insert PR number`
+- [ ] CHANGELOG Generated
+- [ ] CHANGELOG unreleased tag changed
--- a/.gitignore
+++ b/.gitignore
@@ -81,6 +81,7 @@ typings/
 # Nuxt.js build / generate output
 .nuxt
 dist
+dist/

 # Gatsby files
 .cache/
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "singleQuote": true,
+  "semi": true,
+  "printWidth": 100,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
--- a/README.md
+++ b/README.md
@@ -1,46 +1,15 @@
-# Getting Started with Create React App
+# xverse-extension

-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Installing and Running

-## Available Scripts
+### Procedures

-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+1. Check if your [Node.js](https://nodejs.org/) version is >= **14**.
+2. Clone this repository.
+3. Run `npm install` to install the dependencies.
+4. Run `npm start`
+5. Load your extension on Chrome following:
+   1. Access `chrome://extensions/`
+   2. Check `Developer mode`
+   3. Click on `Load unpacked extension`
+   4. Select the `build` folder.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,26 +1,28 @@
 {
  "name": "xverse-web-extension",
-  "version": "0.1.0",
+  "description": "A Bitcoin wallet for Web3",
+  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.56",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.6",
+    "i18next": "^21.9.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.8.2",
-    "web-vitals": "^2.1.4"
+    "react-i18next": "^11.18.6",
+    "react-router-dom": "^6.4.0",
+    "styled-components": "^5.3.5"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "npx node webpack/utils/build.js",
+    "start": "npx node webpack/utils/devServer.js",
+    "clean": "rimraf dist",
+    "test": "npx jest",
+    "style": "prettier --write \"src/**/*.{ts,tsx}\""
+  },
+  "resolutions": {
+    "styled-components": "^5"
  },
  "eslintConfig": {
    "extends": [
@@ -28,16 +30,51 @@
      "react-app/jest"
    ]
  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@babel/preset-react": "^7.18.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@types/jest": "^27.5.2",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-styled-components": "^2.0.7",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.23.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-no-inline-styles": "^1.0.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "glob": "^7.1.6",
+    "html-loader": "^4.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^27.2.1",
+    "path": "^0.12.7",
+    "prettier": "^2.7.1",
+    "react-refresh": "^0.14.0",
+    "react-refresh-typescript": "^2.0.7",
+    "rimraf": "^3.0.2 ",
+    "source-map-loader": "^4.0.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "ts-jest": "^27.0.5",
+    "ts-loader": "^8.4.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "type-fest": "^2.19.0",
+    "typescript": "^4.8.2",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^4.11.0"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -0,0 +1,19 @@
+import { ThemeProvider } from 'styled-components';
+import { RouterProvider } from 'react-router-dom';
+import Theme from '../theme';
+import GlobalStyle from '../theme/global';
+import '../locales';
+import router from './routes';
+
+function App(): JSX.Element {
+  return (
+    <>
+      <GlobalStyle />
+      <ThemeProvider theme={Theme}>
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </>
+  );
+}
+
+export default App;
--- a/src/app/components/button/index.tsx
+++ b/src/app/components/button/index.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const ButtonContainer = styled.div((props) => ({}));
+
+function GeneralButton(): JSX.Element {
+  return <ButtonContainer />;
+}
+export default GeneralButton;
--- a/src/app/components/header/index.tsx
+++ b/src/app/components/header/index.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+
+const StyledHeader = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  font-family: Satoshi-Regular;
+  color: ${(props) => props.theme.colors.action.classic};
+`;
+
+function Header():JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'common' });
+  return <StyledHeader>{t('appName')}</StyledHeader>;
+}
+
+export default Header;
--- a/src/app/components/screenContainer/index.tsx
+++ b/src/app/components/screenContainer/index.tsx
@@ -0,0 +1,19 @@
+import { Outlet } from 'react-router-dom';
+import styled from 'styled-components';
+
+const RouteContainer = styled.div((props) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  backgroundColor: props.theme.colors.background.elevation0,
+}));
+
+function ScreenContainer(): JSX.Element {
+  return (
+    <RouteContainer>
+      <Outlet />
+    </RouteContainer>
+  );
+}
+
+export default ScreenContainer;
--- a/src/app/components/typography/index.tsx
+++ b/src/app/components/typography/index.tsx
--- a/src/app/routes/index.tsx
+++ b/src/app/routes/index.tsx
@@ -0,0 +1,33 @@
+import { createHashRouter } from 'react-router-dom';
+import Home from '@screens/home';
+import Landing from '@screens/landing';
+import Onboarding from '@screens/onboarding';
+import ScreenContainer from '@components/screenContainer';
+import LegalLinks from '@screens/legalLinks';
+
+const router = createHashRouter([
+  {
+    path: '/',
+    element: <ScreenContainer />,
+    children: [
+      {
+        index: true,
+        element: <Landing />,
+      },
+      {
+        path: 'onboarding',
+        element: <Onboarding />,
+      },
+      {
+        path: 'home',
+        element: <Home />,
+      },
+      {
+        path: 'legal',
+        element: <LegalLinks />,
+      },
+    ],
+  },
+]);
+
+export default router;
--- a/src/app/screens/home/index.tsx
+++ b/src/app/screens/home/index.tsx
@@ -0,0 +1,7 @@
+import ScreenContainer from '@components/screenContainer';
+
+function Home(): JSX.Element {
+  return <ScreenContainer />;
+}
+
+export default Home;
--- a/src/app/screens/landing/index.tsx
+++ b/src/app/screens/landing/index.tsx
@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+import logo from '@assets/img/full_logo_vertical.svg';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+const TopSectionContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  flex: 0.5,
+});
+
+const LandingTitle = styled.h1((props) => ({
+  ...props.theme.tile_text,
+  paddingTop: props.theme.spacing(15),
+  paddingLeft: props.theme.spacing(34),
+  paddingRight: props.theme.spacing(34),
+  color: props.theme.colors.white['200'],
+  textAlign: 'center',
+}));
+
+const ActionButtonsContainer = styled.div((props) => ({
+  display: 'flex',
+  flex: 0.5,
+  flexDirection: 'column',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  paddingLeft: props.theme.spacing(10),
+  paddingRight: props.theme.spacing(10),
+  marginBottom: props.theme.spacing(30),
+}));
+
+const CreateButton = styled.button((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: props.theme.radius(1),
+  backgroundColor: props.theme.colors.action.classic,
+  marginBottom: props.theme.spacing(10),
+  width: '100%',
+  height: 44,
+}));
+
+const RestoreButton = styled.button((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: props.theme.radius(1),
+  backgroundColor: props.theme.colors.background.elevation0,
+  border: `0.5px solid ${props.theme.colors.background.elevation2}`,
+  width: '100%',
+  height: 44,
+}));
+
+const ButtonText = styled.div((props) => ({
+  ...props.theme.body_xs,
+  color: props.theme.colors.white['200'],
+  textAlign: 'center',
+}));
+
+function Landing(): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'LANDING_SCREEN' });
+  const navigate = useNavigate();
+
+  const handlePressAction = () => {
+    navigate('/onboarding');
+  };
+  return (
+    <>
+      <TopSectionContainer>
+        <img src={logo} width={100} alt="logo" />
+        <LandingTitle>{t('SCREEN_TITLE')}</LandingTitle>
+      </TopSectionContainer>
+      <ActionButtonsContainer>
+        <CreateButton onClick={handlePressAction}>
+          <ButtonText>{t('CREATE_WALLET_BUTTON')}</ButtonText>
+        </CreateButton>
+        <RestoreButton onClick={handlePressAction}>
+          <ButtonText>{t('RESTORE_WALLET_BUTTON')}</ButtonText>
+        </RestoreButton>
+      </ActionButtonsContainer>
+    </>
+  );
+}
+export default Landing;
--- a/src/app/screens/legalLinks/index.tsx
+++ b/src/app/screens/legalLinks/index.tsx
@@ -0,0 +1,5 @@
+function LegalLinks() {
+  return <></>;
+}
+
+export default LegalLinks;
--- a/src/app/screens/onboarding/index.tsx
+++ b/src/app/screens/onboarding/index.tsx
@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import onboarding1 from '@assets/img/onboarding/onboarding1.svg';
+import onboarding2 from '@assets/img/onboarding/onboarding2.svg';
+import onboarding3 from '@assets/img/onboarding/onboarding3.svg';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+const OnBoardingDotsContainer = styled.div((props) => ({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: props.theme.spacing(10),
+  justifyContent: 'center',
+}));
+const OnboardingDot = styled.div((props) => ({
+  width: 8,
+  height: 8,
+  borderRadius: 4,
+  backgroundColor: props.active
+    ? props.theme.colors.action.classic
+    : props.theme.colors.background.elevation3,
+  marginRight: props.theme.spacing(4),
+}));
+const OnBoardingImage = styled.img((props) => ({
+  marginTop: props.theme.spacing(25),
+  alignSelf: 'center',
+  transform: 'all',
+}));
+const OnBoardingContentContainer = styled.div((props) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  justifyContent: 'center',
+  paddingLeft: props.theme.spacing(8),
+  paddingRight: props.theme.spacing(8),
+}));
+const OnboardingTitle = styled.h1((props) => ({
+  ...props.theme.body_bold_l,
+  textAlign: 'center',
+}));
+const OnboardingSubTitle = styled.h1((props) => ({
+  ...props.theme.body_l,
+  textAlign: 'center',
+  marginTop: props.theme.spacing(10),
+  color: props.theme.colors.white['200'],
+}));
+const OnBoardingActionsContainer = styled.div((props) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  paddingLeft: props.theme.spacing(8),
+  paddingRight: props.theme.spacing(8),
+  marginBottom: props.theme.spacing(30),
+}));
+
+const OnBoardingNextButton = styled.button((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: props.theme.radius(1),
+  backgroundColor: props.theme.colors.action.classic,
+  marginLeft: props.theme.spacing(8),
+  color: props.theme.colors.white['0'],
+  width: '45%',
+  height: 44,
+}));
+
+const OnBoardingSkipButton = styled.button((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: props.theme.radius(1),
+  backgroundColor: props.theme.colors.background.elevation0,
+  border: '1px solid #272A44',
+  marginLeft: props.theme.spacing(8),
+  color: props.theme.colors.white['0'],
+  width: '45%',
+  height: 44,
+}));
+
+const OnBoardingContinueButton = styled.button((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: props.theme.radius(1),
+  backgroundColor: props.theme.colors.action.classic,
+  marginLeft: props.theme.spacing(8),
+  marginRight: props.theme.spacing(8),
+  marginBottom: props.theme.spacing(30),
+  color: props.theme.colors.white['0'],
+  width: '90%',
+  height: 44,
+}));
+
+function Onboarding(): JSX.Element {
+  const [currentStepIndex, setCurrentStepIndex] = useState<number>(0);
+  const { t } = useTranslation('translation', { keyPrefix: 'ONBOARDING_SCREEN' });
+  const navigate = useNavigate();
+  const onboardingViews = [
+    {
+      image: onboarding1,
+      imageWidth: '100%',
+      title: t('ONBOARDING_1_TITlE'),
+      subtitle: t('ONBOARDING_2_SUBTITlE'),
+    },
+    {
+      image: onboarding2,
+      imageWidth: 163,
+      title: t('ONBOARDING_1_TITlE'),
+      subtitle: t('ONBOARDING_2_SUBTITlE'),
+    },
+    {
+      image: onboarding3,
+      imageWidth: 192,
+      title: t('ONBOARDING_1_TITlE'),
+      subtitle: t('ONBOARDING_3_SUBTITlE'),
+    },
+  ];
+  const handleClickNext = () => {
+    setCurrentStepIndex(currentStepIndex + 1);
+  };
+
+  const handleSkip = () => {
+    navigate('/home');
+  };
+  return (
+    <>
+      <OnBoardingDotsContainer>
+        {onboardingViews.map((view, index) => (
+          <OnboardingDot active={index === currentStepIndex} />
+        ))}
+      </OnBoardingDotsContainer>
+      <OnBoardingImage
+        src={onboardingViews[currentStepIndex].image}
+        alt="onboarding1"
+        width={onboardingViews[currentStepIndex].imageWidth}
+      />
+      <OnBoardingContentContainer>
+        <OnboardingTitle>{onboardingViews[currentStepIndex].title}</OnboardingTitle>
+        <OnboardingSubTitle>{onboardingViews[currentStepIndex].subtitle}</OnboardingSubTitle>
+      </OnBoardingContentContainer>
+      {currentStepIndex === onboardingViews.length - 1 ? (
+        <OnBoardingContinueButton onClick={handleSkip}>Continue</OnBoardingContinueButton>
+      ) : (
+        <OnBoardingActionsContainer>
+          <OnBoardingSkipButton onClick={handleSkip}>Skip</OnBoardingSkipButton>
+          <OnBoardingNextButton onClick={handleClickNext}>Next</OnBoardingNextButton>
+        </OnBoardingActionsContainer>
+      )}
+    </>
+  );
+}
+
+export default Onboarding;
--- a/src/assets/fonts/Satoshi-Black.otf
+++ b/src/assets/fonts/Satoshi-Black.otf
--- a/src/assets/fonts/Satoshi-Bold.otf
+++ b/src/assets/fonts/Satoshi-Bold.otf
--- a/src/assets/fonts/Satoshi-Medium.otf
+++ b/src/assets/fonts/Satoshi-Medium.otf
--- a/src/assets/fonts/Satoshi-Regular.otf
+++ b/src/assets/fonts/Satoshi-Regular.otf
--- a/src/assets/img/full_logo_horizontal.svg
+++ b/src/assets/img/full_logo_horizontal.svg
@@ -0,0 +1,20 @@
+<svg width="300" height="80" viewBox="0 0 300 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_385_2346)">
+<path d="M116.196 39.6408L100 63.2163H107.51L120.18 44.5388C121.747 47.2816 123.51 50.1551 125.339 52.8327L132.588 63.2163H140.163L124.163 39.5755L139.967 16H132.588L120.114 34.8082C118.743 32.1959 117.176 29.5837 115.086 26.5143L107.706 16H100.065L116.196 39.6408Z" fill="white"/>
+<path d="M154.146 63.2163H160.22L173.542 31.2816H167.142L160.024 49.1102C158.914 51.9184 157.869 54.6612 157.346 56.751C156.824 54.7918 155.91 52.1143 154.799 49.1102L147.812 31.2816H141.281L154.146 63.2163Z" fill="white"/>
+<path d="M192.045 64C199.947 64 205.303 60.1469 206.87 53.2898H201.123C200.078 56.9469 196.943 58.9061 192.176 58.9061C186.103 58.9061 182.576 55.1837 182.119 48.4571L206.805 48.3918V46.1061C206.805 36.6367 200.862 30.3673 191.784 30.3673C182.511 30.3673 176.176 37.2898 176.176 47.2816C176.176 57.2082 182.641 64 192.045 64ZM191.784 35.5265C197.205 35.5265 200.666 39.0531 200.666 44.3429H182.249C183.033 38.7265 186.429 35.5265 191.784 35.5265Z" fill="white"/>
+<path d="M233.253 31.0204C232.012 30.7592 231.098 30.6286 229.988 30.6286C225.612 30.6286 222.412 32.849 221.106 36.1796L220.714 31.3469H214.967V63.2163H221.106V46.302C221.106 40.1633 224.698 36.6367 230.51 36.6367H233.253V31.0204Z" fill="white"/>
+<path d="M237.705 53.9429C237.705 60.0163 242.472 64 249.982 64C257.558 64 262.782 60.1469 262.782 54.0735C262.782 49.3061 260.105 46.8245 254.684 45.5184L249.068 44.1469C245.933 43.3633 244.366 41.9265 244.366 39.7714C244.366 36.8327 246.521 35.1347 250.374 35.1347C254.096 35.1347 256.252 37.1592 256.382 40.3592H262.26C262.129 34.2857 257.558 30.3673 250.57 30.3673C243.517 30.3673 238.554 34.0898 238.554 39.9673C238.554 44.6694 241.231 47.4776 246.913 48.849L252.529 50.1551C255.86 51.0041 256.905 52.3102 256.905 54.4653C256.905 57.4041 254.423 59.1673 250.113 59.1673C246.064 59.1673 243.582 57.2082 243.582 53.9429H237.705Z" fill="white"/>
+<path d="M284.675 64C292.578 64 297.933 60.1469 299.5 53.2898H293.753C292.708 56.9469 289.573 58.9061 284.806 58.9061C278.733 58.9061 275.206 55.1837 274.749 48.4571L299.435 48.3918V46.1061C299.435 36.6367 293.492 30.3673 284.414 30.3673C275.141 30.3673 268.806 37.2898 268.806 47.2816C268.806 57.2082 275.271 64 284.675 64ZM284.414 35.5265C289.835 35.5265 293.296 39.0531 293.296 44.3429H274.88C275.663 38.7265 279.059 35.5265 284.414 35.5265Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1645 10.3364C28.3739 -3.44558 51.6266 -3.44548 66.8359 10.3368L63.2903 13.8823C50.0442 2.04884 29.9563 2.04874 16.7101 13.882L13.1645 10.3364ZM69.6642 13.1652L66.1187 16.7108C77.9511 29.9569 77.9509 50.0441 66.118 63.2899L69.6636 66.8355C83.4453 51.6264 83.4455 28.3745 69.6642 13.1652ZM16.7108 66.1186C29.9568 77.951 50.0437 77.9509 63.2896 66.1183L66.8352 69.6639C51.6261 83.4453 28.3744 83.4454 13.1652 69.6642L16.7108 66.1186ZM13.8823 63.2903L10.3367 66.8359C-3.44536 51.6267 -3.44558 28.3743 10.3361 13.1649L13.8817 16.7105C2.04874 29.9567 2.04896 50.0443 13.8823 63.2903ZM64.9281 23.2984C63.859 21.7067 62.621 20.1947 61.214 18.7877C51.8935 9.46723 37.966 7.56168 26.7617 13.0711L29.2727 17.4201C38.5542 13.0107 49.9919 14.6468 57.6734 22.3283C58.7637 23.4186 59.7323 24.5846 60.579 25.8094L64.9281 23.2984ZM62.5813 29.2721L66.9303 26.7612C72.4401 37.9656 70.5347 51.8935 61.214 61.2141C59.8067 62.6214 58.2944 63.8596 56.7024 64.9288L54.1914 60.5797C55.4165 59.7329 56.5828 58.7641 57.6734 57.6735C65.3551 49.9918 66.9911 38.5538 62.5813 29.2721ZM50.7286 62.5819C41.4471 66.9911 30.0096 65.355 22.3282 57.6735C21.2373 56.5826 20.2683 55.416 19.4213 54.1905L15.0722 56.7014C16.1416 58.2939 17.38 59.8065 18.7876 61.2141C28.108 70.5345 42.0353 72.4401 53.2395 66.9309L50.7286 62.5819ZM13.0702 53.2385L17.4193 50.7275C13.0108 41.4463 14.6471 30.0094 22.3282 22.3283C23.4187 21.2378 24.5849 20.2691 25.8098 19.4223L23.2989 15.0733C21.7069 16.1424 20.1948 17.3805 18.7876 18.7877C9.46753 28.1078 7.56174 42.0345 13.0702 53.2385ZM54.1423 25.8577C57.0953 28.8107 58.9318 32.4574 59.6519 36.2732L54.6302 36.7126C54.0306 34.0321 52.6877 31.4843 50.6017 29.3982C47.8515 26.648 44.2986 25.1896 40.6972 25.023L40.2578 20.0015C45.2901 20.0659 50.3026 22.018 54.1423 25.8577ZM36.2729 20.3482C32.4573 21.0683 28.8109 22.9048 25.858 25.8577C22.0185 29.6972 20.0664 34.7094 20.0018 39.7413L25.0234 39.302C25.1902 35.7008 26.6486 32.1483 29.3986 29.3982C31.4844 27.3124 34.032 25.9696 36.7122 25.3699L36.2729 20.3482ZM20.3484 43.7263C21.0684 47.5422 22.905 51.1889 25.858 54.1419C29.6975 57.9814 34.7096 59.9335 39.7415 59.9981L39.3022 54.9765C35.701 54.8097 32.1486 53.3513 29.3986 50.6014C27.3126 48.5153 25.9697 45.9675 25.3701 43.2869L20.3484 43.7263ZM54.1423 54.1419C51.1892 57.095 47.5424 58.9316 43.7265 59.6516L43.2871 54.6299C45.9678 54.0303 48.5156 52.6874 50.6017 50.6014C53.3518 47.8513 54.8101 44.2988 54.9769 40.6975L59.9985 40.2582C59.9339 45.2902 57.9818 50.3024 54.1423 54.1419Z" fill="url(#paint0_linear_385_2346)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_385_2346" x1="11.8936" y1="68.5632" x2="82.5557" y2="-2.09887" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5565F7"/>
+<stop offset="1" stop-color="#9EA7FA"/>
+</linearGradient>
+<clipPath id="clip0_385_2346">
+<rect width="300" height="80" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/img/full_logo_vertical.svg
+++ b/src/assets/img/full_logo_vertical.svg
@@ -0,0 +1,20 @@
+<svg width="98" height="75" viewBox="0 0 98 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_666_44507)">
+<path d="M7.69808 62.6807L-0.257812 74.021H3.43141L9.65497 65.0367C10.4249 66.3561 11.2911 67.7383 12.1893 69.0262L15.7502 74.021H19.4715L11.6119 62.6493L19.3753 51.309H15.7502L9.62289 60.3561C8.94921 59.0995 8.17928 57.843 7.15271 56.3666L3.52765 51.309H-0.225732L7.69808 62.6807Z" fill="white"/>
+<path d="M26.3404 74.021H29.3239L35.8683 58.6597H32.7244L29.2277 67.2357C28.6823 68.5864 28.169 69.9058 27.9124 70.9111C27.6557 69.9686 27.2066 68.6807 26.6612 67.2357L23.2287 58.6597H20.0206L26.3404 74.021Z" fill="white"/>
+<path d="M44.9575 74.398C48.8392 74.398 51.4698 72.5446 52.2397 69.2461H49.4166C48.9033 71.0053 47.3635 71.9477 45.0216 71.9477C42.0382 71.9477 40.3059 70.1571 40.0813 66.9215L52.2076 66.8901V65.7906C52.2076 61.2357 49.2883 58.22 44.8292 58.22C40.2738 58.22 37.162 61.5498 37.162 66.3561C37.162 71.131 40.3379 74.398 44.9575 74.398ZM44.8292 60.7016C47.4918 60.7016 49.1921 62.398 49.1921 64.9425H40.1454C40.5304 62.2409 42.1986 60.7016 44.8292 60.7016Z" fill="white"/>
+<path d="M65.1998 58.5341C64.5903 58.4084 64.1412 58.3456 63.5958 58.3456C61.4464 58.3456 59.8745 59.4137 59.2329 61.0158L59.0404 58.6912H56.2174V74.021H59.2329V65.8849C59.2329 62.932 60.9973 61.2357 63.8525 61.2357H65.1998V58.5341Z" fill="white"/>
+<path d="M67.3866 69.5603C67.3866 72.4817 69.7284 74.398 73.4176 74.398C77.1389 74.398 79.7054 72.5446 79.7054 69.6231C79.7054 67.3299 78.3901 66.1362 75.7274 65.5079L72.9685 64.8482C71.4287 64.4713 70.6587 63.7802 70.6587 62.7435C70.6587 61.3299 71.7174 60.5132 73.6101 60.5132C75.4387 60.5132 76.4973 61.487 76.5615 63.0262H79.4487C79.3846 60.1048 77.1389 58.22 73.7064 58.22C70.2417 58.22 67.8036 60.0105 67.8036 62.8378C67.8036 65.0995 69.1189 66.4503 71.9099 67.11L74.6688 67.7383C76.3048 68.1467 76.8181 68.7749 76.8181 69.8116C76.8181 71.2252 75.5991 72.0734 73.4818 72.0734C71.4928 72.0734 70.2738 71.131 70.2738 69.5603H67.3866Z" fill="white"/>
+<path d="M90.46 74.398C94.3417 74.398 96.9723 72.5446 97.7422 69.2461H94.9191C94.4058 71.0053 92.866 71.9477 90.5241 71.9477C87.5407 71.9477 85.8084 70.1571 85.5838 66.9215L97.7101 66.8901V65.7906C97.7101 61.2357 94.7908 58.22 90.3317 58.22C85.7763 58.22 82.6645 61.5498 82.6645 66.3561C82.6645 71.131 85.8404 74.398 90.46 74.398ZM90.3317 60.7016C92.9943 60.7016 94.6946 62.398 94.6946 64.9425H85.648C86.0329 62.2409 87.7011 60.7016 90.3317 60.7016Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.7194 5.30351C42.5232 -1.76789 54.4539 -1.76784 62.2576 5.30368L60.4384 7.12287C53.642 1.05124 43.3351 1.05118 36.5386 7.1227L34.7194 5.30351ZM63.7088 6.75494L61.8896 8.57413C67.9607 15.3706 67.9606 25.6771 61.8893 32.4734L63.7085 34.2926C70.7797 26.489 70.7798 14.5587 63.7088 6.75494ZM36.539 33.9248C43.3354 39.9958 53.6417 39.9958 60.438 33.9246L62.2572 35.7438C54.4536 42.8149 42.5234 42.8149 34.7198 35.744L36.539 33.9248ZM35.0877 32.4735L33.2685 34.2927C26.1971 26.4891 26.197 14.5585 33.2682 6.75475L35.0874 8.57395C29.016 15.3704 29.0161 25.6772 35.0877 32.4735ZM61.2787 11.9542C60.7302 11.1375 60.095 10.3617 59.3731 9.63977C54.5908 4.85753 47.4448 3.87982 41.696 6.70662L42.9843 8.93809C47.7466 6.67566 53.6151 7.5151 57.5564 11.4564C58.1159 12.0158 58.6128 12.6141 59.0473 13.2425L61.2787 11.9542ZM60.0746 15.0192L62.3061 13.7309C65.1331 19.4797 64.1554 26.626 59.3731 31.4083C58.651 32.1303 57.8751 32.7657 57.0582 33.3143L55.7699 31.0828C56.3985 30.6483 56.9969 30.1512 57.5564 29.5917C61.4978 25.6503 62.3372 19.7815 60.0746 15.0192ZM53.9931 32.1101C49.2309 34.3724 43.3624 33.5329 39.4212 29.5917C38.8615 29.0319 38.3643 28.4333 37.9297 27.8046L35.6982 29.0929C36.2469 29.91 36.8823 30.6861 37.6046 31.4083C42.3867 36.1905 49.5327 37.1682 55.2814 34.3415L53.9931 32.1101ZM34.671 27.3161L36.9025 26.0277C34.6405 21.2656 35.4801 15.3975 39.4212 11.4564C39.9807 10.8969 40.5791 10.3999 41.2076 9.96539L39.9192 7.73393C39.1024 8.28249 38.3266 8.91777 37.6046 9.63977C32.8225 14.4218 31.8447 21.5674 34.671 27.3161ZM55.7447 13.2673C57.2598 14.7824 58.2021 16.6535 58.5716 18.6114L55.995 18.8368C55.6873 17.4615 54.9983 16.1542 53.928 15.0839C52.5169 13.6728 50.694 12.9245 48.8461 12.8391L48.6207 10.2625C51.2027 10.2956 53.7745 11.2972 55.7447 13.2673ZM46.5761 10.4404C44.6183 10.8099 42.7474 11.7522 41.2323 13.2673C39.2623 15.2373 38.2607 17.809 38.2276 20.3908L40.8041 20.1654C40.8897 18.3177 41.6379 16.4949 43.0489 15.0839C44.1192 14.0137 45.4263 13.3247 46.8015 13.017L46.5761 10.4404ZM38.4054 22.4355C38.7748 24.3934 39.7171 26.2645 41.2323 27.7796C43.2023 29.7496 45.774 30.7512 48.3558 30.7844L48.1304 28.2079C46.2827 28.1223 44.4599 27.374 43.0489 25.963C41.9786 24.8927 41.2896 23.5854 40.982 22.2101L38.4054 22.4355ZM55.7447 27.7796C54.2295 29.2948 52.3583 30.2371 50.4004 30.6066L50.175 28.03C51.5504 27.7224 52.8577 27.0334 53.928 25.963C55.339 24.552 56.0873 22.7292 56.1729 20.8815L58.7494 20.656C58.7163 23.2379 57.7147 25.8096 55.7447 27.7796Z" fill="url(#paint0_linear_666_44507)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_666_44507" x1="34.0673" y1="35.179" x2="70.3233" y2="-1.0769" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5565F7"/>
+<stop offset="1" stop-color="#9EA7FA"/>
+</linearGradient>
+<clipPath id="clip0_666_44507">
+<rect width="98" height="74.3979" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/img/onboarding/onboarding1.svg
+++ b/src/assets/img/onboarding/onboarding1.svg
--- a/src/assets/img/onboarding/onboarding2.svg
+++ b/src/assets/img/onboarding/onboarding2.svg
@@ -0,0 +1,184 @@
+<svg width="164" height="170" viewBox="0 0 164 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="106.808" cy="79.1102" r="0.729657" transform="rotate(90 106.808 79.1102)" fill="#4C5187"/>
+<circle cx="128.174" cy="79.1102" r="0.729657" transform="rotate(90 128.174 79.1102)" fill="#4C5187"/>
+<circle cx="95.94" cy="79.1102" r="0.729657" transform="rotate(90 95.94 79.1102)" fill="#4C5187"/>
+<circle cx="117.306" cy="79.1102" r="0.729657" transform="rotate(90 117.306 79.1102)" fill="#4C5187"/>
+<circle cx="106.808" cy="89.9784" r="0.729657" transform="rotate(90 106.808 89.9784)" fill="#4C5187"/>
+<circle cx="128.174" cy="89.9784" r="0.729657" transform="rotate(90 128.174 89.9784)" fill="#4C5187"/>
+<circle cx="95.94" cy="89.9784" r="0.729657" transform="rotate(90 95.94 89.9784)" fill="#4C5187"/>
+<circle cx="117.306" cy="89.9784" r="0.729657" transform="rotate(90 117.306 89.9784)" fill="#4C5187"/>
+<circle cx="106.808" cy="89.9784" r="0.729657" transform="rotate(90 106.808 89.9784)" fill="#4C5187"/>
+<circle cx="95.94" cy="89.9784" r="0.729657" transform="rotate(90 95.94 89.9784)" fill="#4C5187"/>
+<circle cx="117.306" cy="89.9784" r="0.729657" transform="rotate(90 117.306 89.9784)" fill="#4C5187"/>
+<circle cx="95.94" cy="100.846" r="0.729657" transform="rotate(90 95.94 100.846)" fill="#4C5187"/>
+<circle cx="85.2401" cy="79.1102" r="0.729657" transform="rotate(90 85.2401 79.1102)" fill="#4C5187"/>
+<circle cx="74.3731" cy="79.1102" r="0.729657" transform="rotate(90 74.3731 79.1102)" fill="#4C5187"/>
+<circle cx="85.2401" cy="89.9784" r="0.729657" transform="rotate(90 85.2401 89.9784)" fill="#4C5187"/>
+<circle cx="74.3731" cy="89.9784" r="0.729657" transform="rotate(90 74.3731 89.9784)" fill="#4C5187"/>
+<circle cx="85.2401" cy="89.9784" r="0.729657" transform="rotate(90 85.2401 89.9784)" fill="#4C5187"/>
+<circle cx="74.3731" cy="89.9784" r="0.729657" transform="rotate(90 74.3731 89.9784)" fill="#4C5187"/>
+<circle cx="85.2401" cy="100.846" r="0.729657" transform="rotate(90 85.2401 100.846)" fill="#4C5187"/>
+<circle cx="74.3731" cy="100.846" r="0.729657" transform="rotate(90 74.3731 100.846)" fill="#4C5187"/>
+<circle cx="106.808" cy="46.4413" r="0.729657" transform="rotate(90 106.808 46.4413)" fill="#4C5187"/>
+<circle cx="128.174" cy="46.4413" r="0.729657" transform="rotate(90 128.174 46.4413)" fill="#4C5187"/>
+<circle cx="95.94" cy="46.4413" r="0.729657" transform="rotate(90 95.94 46.4413)" fill="#4C5187"/>
+<circle cx="117.306" cy="46.4413" r="0.729657" transform="rotate(90 117.306 46.4413)" fill="#4C5187"/>
+<circle cx="106.808" cy="57.3086" r="0.729657" transform="rotate(90 106.808 57.3086)" fill="#4C5187"/>
+<circle cx="128.174" cy="57.3086" r="0.729657" transform="rotate(90 128.174 57.3086)" fill="#4C5187"/>
+<circle cx="95.94" cy="57.3086" r="0.729657" transform="rotate(90 95.94 57.3086)" fill="#4C5187"/>
+<circle cx="117.306" cy="57.3086" r="0.729657" transform="rotate(90 117.306 57.3086)" fill="#4C5187"/>
+<circle cx="106.808" cy="57.3086" r="0.729657" transform="rotate(90 106.808 57.3086)" fill="#4C5187"/>
+<circle cx="128.174" cy="57.3086" r="0.729657" transform="rotate(90 128.174 57.3086)" fill="#4C5187"/>
+<circle cx="95.94" cy="57.3086" r="0.729657" transform="rotate(90 95.94 57.3086)" fill="#4C5187"/>
+<circle cx="117.306" cy="57.3086" r="0.729657" transform="rotate(90 117.306 57.3086)" fill="#4C5187"/>
+<circle cx="106.808" cy="68.1759" r="0.729657" transform="rotate(90 106.808 68.1759)" fill="#4C5187"/>
+<circle cx="128.174" cy="68.1759" r="0.729657" transform="rotate(90 128.174 68.1759)" fill="#4C5187"/>
+<circle cx="95.94" cy="68.1759" r="0.729657" transform="rotate(90 95.94 68.1759)" fill="#4C5187"/>
+<circle cx="117.306" cy="68.1759" r="0.729657" transform="rotate(90 117.306 68.1759)" fill="#4C5187"/>
+<circle cx="85.2401" cy="35.5739" r="0.729657" transform="rotate(90 85.2401 35.5739)" fill="#4C5187"/>
+<circle cx="74.3731" cy="35.5739" r="0.729657" transform="rotate(90 74.3731 35.5739)" fill="#4C5187"/>
+<circle cx="85.2401" cy="35.5739" r="0.729657" transform="rotate(90 85.2401 35.5739)" fill="#4C5187"/>
+<circle cx="74.3731" cy="35.5739" r="0.729657" transform="rotate(90 74.3731 35.5739)" fill="#4C5187"/>
+<circle cx="85.2401" cy="46.4413" r="0.729657" transform="rotate(90 85.2401 46.4413)" fill="#4C5187"/>
+<circle cx="74.3731" cy="46.4413" r="0.729657" transform="rotate(90 74.3731 46.4413)" fill="#4C5187"/>
+<circle cx="85.2401" cy="57.3086" r="0.729657" transform="rotate(90 85.2401 57.3086)" fill="#4C5187"/>
+<circle cx="74.3731" cy="57.3086" r="0.729657" transform="rotate(90 74.3731 57.3086)" fill="#4C5187"/>
+<circle cx="85.2401" cy="57.3086" r="0.729657" transform="rotate(90 85.2401 57.3086)" fill="#4C5187"/>
+<circle cx="74.3731" cy="57.3086" r="0.729657" transform="rotate(90 74.3731 57.3086)" fill="#4C5187"/>
+<circle cx="85.2401" cy="68.1759" r="0.729657" transform="rotate(90 85.2401 68.1759)" fill="#4C5187"/>
+<circle cx="74.3731" cy="68.1759" r="0.729657" transform="rotate(90 74.3731 68.1759)" fill="#4C5187"/>
+<circle cx="64.0323" cy="79.1102" r="0.729657" transform="rotate(90 64.0323 79.1102)" fill="#4C5187"/>
+<circle cx="53.1639" cy="79.1102" r="0.729657" transform="rotate(90 53.1639 79.1102)" fill="#4C5187"/>
+<circle cx="64.0323" cy="89.9784" r="0.729657" transform="rotate(90 64.0323 89.9784)" fill="#4C5187"/>
+<circle cx="53.1639" cy="89.9784" r="0.729657" transform="rotate(90 53.1639 89.9784)" fill="#4C5187"/>
+<circle cx="64.0323" cy="89.9784" r="0.729657" transform="rotate(90 64.0323 89.9784)" fill="#4C5187"/>
+<circle cx="53.1639" cy="89.9784" r="0.729657" transform="rotate(90 53.1639 89.9784)" fill="#4C5187"/>
+<circle cx="64.0323" cy="100.846" r="0.729657" transform="rotate(90 64.0323 100.846)" fill="#4C5187"/>
+<circle cx="53.1639" cy="100.846" r="0.729657" transform="rotate(90 53.1639 100.846)" fill="#4C5187"/>
+<circle cx="42.4637" cy="79.1102" r="0.729657" transform="rotate(90 42.4637 79.1102)" fill="#4C5187"/>
+<circle cx="31.5963" cy="79.1102" r="0.729657" transform="rotate(90 31.5963 79.1102)" fill="#4C5187"/>
+<circle cx="42.4637" cy="89.9784" r="0.729657" transform="rotate(90 42.4637 89.9784)" fill="#4C5187"/>
+<circle cx="31.5963" cy="89.9784" r="0.729657" transform="rotate(90 31.5963 89.9784)" fill="#4C5187"/>
+<circle cx="42.4637" cy="89.9784" r="0.729657" transform="rotate(90 42.4637 89.9784)" fill="#4C5187"/>
+<circle cx="31.5963" cy="89.9784" r="0.729657" transform="rotate(90 31.5963 89.9784)" fill="#4C5187"/>
+<circle cx="42.4637" cy="100.846" r="0.729657" transform="rotate(90 42.4637 100.846)" fill="#4C5187"/>
+<circle cx="31.5963" cy="100.846" r="0.729657" transform="rotate(90 31.5963 100.846)" fill="#4C5187"/>
+<circle cx="64.0323" cy="46.4413" r="0.729657" transform="rotate(90 64.0323 46.4413)" fill="#4C5187"/>
+<circle cx="64.0323" cy="57.3086" r="0.729657" transform="rotate(90 64.0323 57.3086)" fill="#4C5187"/>
+<circle cx="53.1639" cy="57.3086" r="0.729657" transform="rotate(90 53.1639 57.3086)" fill="#4C5187"/>
+<circle cx="64.0323" cy="57.3086" r="0.729657" transform="rotate(90 64.0323 57.3086)" fill="#4C5187"/>
+<circle cx="53.1639" cy="57.3086" r="0.729657" transform="rotate(90 53.1639 57.3086)" fill="#4C5187"/>
+<circle cx="64.0323" cy="68.1759" r="0.729657" transform="rotate(90 64.0323 68.1759)" fill="#4C5187"/>
+<circle cx="53.1639" cy="68.1759" r="0.729657" transform="rotate(90 53.1639 68.1759)" fill="#4C5187"/>
+<circle cx="42.4637" cy="68.1759" r="0.729657" transform="rotate(90 42.4637 68.1759)" fill="#4C5187"/>
+<circle cx="106.808" cy="144.413" r="0.729657" transform="rotate(90 106.808 144.413)" fill="#4C5187"/>
+<circle cx="128.174" cy="144.413" r="0.729657" transform="rotate(90 128.174 144.413)" fill="#4C5187"/>
+<circle cx="95.94" cy="144.413" r="0.729657" transform="rotate(90 95.94 144.413)" fill="#4C5187"/>
+<circle cx="117.306" cy="144.413" r="0.729657" transform="rotate(90 117.306 144.413)" fill="#4C5187"/>
+<circle cx="106.808" cy="155.281" r="0.729657" transform="rotate(90 106.808 155.281)" fill="#4C5187"/>
+<circle cx="95.94" cy="155.281" r="0.729657" transform="rotate(90 95.94 155.281)" fill="#4C5187"/>
+<circle cx="117.306" cy="155.281" r="0.729657" transform="rotate(90 117.306 155.281)" fill="#4C5187"/>
+<circle cx="106.808" cy="155.281" r="0.729657" transform="rotate(90 106.808 155.281)" fill="#4C5187"/>
+<circle cx="95.94" cy="155.281" r="0.729657" transform="rotate(90 95.94 155.281)" fill="#4C5187"/>
+<circle cx="117.306" cy="155.281" r="0.729657" transform="rotate(90 117.306 155.281)" fill="#4C5187"/>
+<circle cx="95.94" cy="166.149" r="0.729657" transform="rotate(90 95.94 166.149)" fill="#4C5187"/>
+<circle cx="85.2401" cy="144.413" r="0.729657" transform="rotate(90 85.2401 144.413)" fill="#4C5187"/>
+<circle cx="74.3731" cy="144.413" r="0.729657" transform="rotate(90 74.3731 144.413)" fill="#4C5187"/>
+<circle cx="85.2401" cy="155.281" r="0.729657" transform="rotate(90 85.2401 155.281)" fill="#4C5187"/>
+<circle cx="74.3731" cy="155.281" r="0.729657" transform="rotate(90 74.3731 155.281)" fill="#4C5187"/>
+<circle cx="85.2401" cy="155.281" r="0.729657" transform="rotate(90 85.2401 155.281)" fill="#4C5187"/>
+<circle cx="74.3731" cy="155.281" r="0.729657" transform="rotate(90 74.3731 155.281)" fill="#4C5187"/>
+<circle cx="85.2401" cy="166.149" r="0.729657" transform="rotate(90 85.2401 166.149)" fill="#4C5187"/>
+<circle cx="74.3731" cy="166.149" r="0.729657" transform="rotate(90 74.3731 166.149)" fill="#4C5187"/>
+<circle cx="106.808" cy="111.744" r="0.729657" transform="rotate(90 106.808 111.744)" fill="#4C5187"/>
+<circle cx="128.174" cy="111.744" r="0.729657" transform="rotate(90 128.174 111.744)" fill="#4C5187"/>
+<circle cx="95.94" cy="111.744" r="0.729657" transform="rotate(90 95.94 111.744)" fill="#4C5187"/>
+<circle cx="117.306" cy="111.744" r="0.729657" transform="rotate(90 117.306 111.744)" fill="#4C5187"/>
+<circle cx="128.174" cy="122.612" r="0.729657" transform="rotate(90 128.174 122.612)" fill="#4C5187"/>
+<circle cx="95.94" cy="122.612" r="0.729657" transform="rotate(90 95.94 122.612)" fill="#4C5187"/>
+<circle cx="128.174" cy="122.612" r="0.729657" transform="rotate(90 128.174 122.612)" fill="#4C5187"/>
+<circle cx="95.94" cy="122.612" r="0.729657" transform="rotate(90 95.94 122.612)" fill="#4C5187"/>
+<circle cx="106.808" cy="133.479" r="0.729657" transform="rotate(90 106.808 133.479)" fill="#4C5187"/>
+<circle cx="128.174" cy="133.479" r="0.729657" transform="rotate(90 128.174 133.479)" fill="#4C5187"/>
+<circle cx="95.94" cy="133.479" r="0.729657" transform="rotate(90 95.94 133.479)" fill="#4C5187"/>
+<circle cx="117.306" cy="133.479" r="0.729657" transform="rotate(90 117.306 133.479)" fill="#4C5187"/>
+<circle cx="85.2401" cy="100.877" r="0.729657" transform="rotate(90 85.2401 100.877)" fill="#4C5187"/>
+<circle cx="74.3731" cy="100.877" r="0.729657" transform="rotate(90 74.3731 100.877)" fill="#4C5187"/>
+<circle cx="85.2401" cy="100.877" r="0.729657" transform="rotate(90 85.2401 100.877)" fill="#4C5187"/>
+<circle cx="74.3731" cy="100.877" r="0.729657" transform="rotate(90 74.3731 100.877)" fill="#4C5187"/>
+<circle cx="85.2401" cy="111.744" r="0.729657" transform="rotate(90 85.2401 111.744)" fill="#4C5187"/>
+<circle cx="74.3731" cy="111.744" r="0.729657" transform="rotate(90 74.3731 111.744)" fill="#4C5187"/>
+<circle cx="85.2401" cy="122.612" r="0.729657" transform="rotate(90 85.2401 122.612)" fill="#4C5187"/>
+<circle cx="74.3731" cy="122.612" r="0.729657" transform="rotate(90 74.3731 122.612)" fill="#4C5187"/>
+<circle cx="85.2401" cy="122.612" r="0.729657" transform="rotate(90 85.2401 122.612)" fill="#4C5187"/>
+<circle cx="74.3731" cy="122.612" r="0.729657" transform="rotate(90 74.3731 122.612)" fill="#4C5187"/>
+<circle cx="85.2401" cy="133.479" r="0.729657" transform="rotate(90 85.2401 133.479)" fill="#4C5187"/>
+<circle cx="74.3731" cy="133.479" r="0.729657" transform="rotate(90 74.3731 133.479)" fill="#4C5187"/>
+<circle cx="64.0323" cy="144.413" r="0.729657" transform="rotate(90 64.0323 144.413)" fill="#4C5187"/>
+<circle cx="53.1639" cy="144.413" r="0.729657" transform="rotate(90 53.1639 144.413)" fill="#4C5187"/>
+<circle cx="64.0323" cy="155.281" r="0.729657" transform="rotate(90 64.0323 155.281)" fill="#4C5187"/>
+<circle cx="53.1639" cy="155.281" r="0.729657" transform="rotate(90 53.1639 155.281)" fill="#4C5187"/>
+<circle cx="64.0323" cy="155.281" r="0.729657" transform="rotate(90 64.0323 155.281)" fill="#4C5187"/>
+<circle cx="53.1639" cy="155.281" r="0.729657" transform="rotate(90 53.1639 155.281)" fill="#4C5187"/>
+<circle cx="64.0323" cy="166.149" r="0.729657" transform="rotate(90 64.0323 166.149)" fill="#4C5187"/>
+<circle cx="53.1639" cy="166.149" r="0.729657" transform="rotate(90 53.1639 166.149)" fill="#4C5187"/>
+<circle cx="42.4637" cy="144.413" r="0.729657" transform="rotate(90 42.4637 144.413)" fill="#4C5187"/>
+<circle cx="31.5963" cy="144.413" r="0.729657" transform="rotate(90 31.5963 144.413)" fill="#4C5187"/>
+<circle cx="42.4637" cy="155.281" r="0.729657" transform="rotate(90 42.4637 155.281)" fill="#4C5187"/>
+<circle cx="31.5963" cy="155.281" r="0.729657" transform="rotate(90 31.5963 155.281)" fill="#4C5187"/>
+<circle cx="42.4637" cy="155.281" r="0.729657" transform="rotate(90 42.4637 155.281)" fill="#4C5187"/>
+<circle cx="31.5963" cy="155.281" r="0.729657" transform="rotate(90 31.5963 155.281)" fill="#4C5187"/>
+<circle cx="42.4637" cy="166.149" r="0.729657" transform="rotate(90 42.4637 166.149)" fill="#4C5187"/>
+<circle cx="64.0323" cy="100.877" r="0.729657" transform="rotate(90 64.0323 100.877)" fill="#4C5187"/>
+<circle cx="53.1639" cy="100.877" r="0.729657" transform="rotate(90 53.1639 100.877)" fill="#4C5187"/>
+<circle cx="64.0323" cy="100.877" r="0.729657" transform="rotate(90 64.0323 100.877)" fill="#4C5187"/>
+<circle cx="53.1639" cy="100.877" r="0.729657" transform="rotate(90 53.1639 100.877)" fill="#4C5187"/>
+<circle cx="64.0323" cy="111.744" r="0.729657" transform="rotate(90 64.0323 111.744)" fill="#4C5187"/>
+<circle cx="53.1639" cy="111.744" r="0.729657" transform="rotate(90 53.1639 111.744)" fill="#4C5187"/>
+<circle cx="64.0323" cy="122.612" r="0.729657" transform="rotate(90 64.0323 122.612)" fill="#4C5187"/>
+<circle cx="53.1639" cy="122.612" r="0.729657" transform="rotate(90 53.1639 122.612)" fill="#4C5187"/>
+<circle cx="64.0323" cy="122.612" r="0.729657" transform="rotate(90 64.0323 122.612)" fill="#4C5187"/>
+<circle cx="53.1639" cy="122.612" r="0.729657" transform="rotate(90 53.1639 122.612)" fill="#4C5187"/>
+<circle cx="64.0323" cy="133.479" r="0.729657" transform="rotate(90 64.0323 133.479)" fill="#4C5187"/>
+<circle cx="53.1639" cy="133.479" r="0.729657" transform="rotate(90 53.1639 133.479)" fill="#4C5187"/>
+<circle cx="42.4637" cy="111.744" r="0.729657" transform="rotate(90 42.4637 111.744)" fill="#4C5187"/>
+<circle cx="42.4637" cy="122.612" r="0.729657" transform="rotate(90 42.4637 122.612)" fill="#4C5187"/>
+<circle cx="31.5963" cy="122.612" r="0.729657" transform="rotate(90 31.5963 122.612)" fill="#4C5187"/>
+<circle cx="42.4637" cy="122.612" r="0.729657" transform="rotate(90 42.4637 122.612)" fill="#4C5187"/>
+<circle cx="31.5963" cy="122.612" r="0.729657" transform="rotate(90 31.5963 122.612)" fill="#4C5187"/>
+<circle cx="42.4637" cy="133.479" r="0.729657" transform="rotate(90 42.4637 133.479)" fill="#4C5187"/>
+<circle cx="31.5963" cy="133.479" r="0.729657" transform="rotate(90 31.5963 133.479)" fill="#4C5187"/>
+<circle cx="111.188" cy="32.727" r="32.5415" fill="url(#paint0_linear_364_38411)"/>
+<circle cx="53.5859" cy="137.459" r="32.5415" fill="url(#paint1_linear_364_38411)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.774 63.2859L146.448 61.9606L143.798 64.6113L145.123 65.9366C146.976 67.7897 148.017 70.303 148.017 72.9237C148.017 75.5443 146.976 78.0577 145.123 79.9107L110.074 114.96L110.074 107.99L110.074 106.116L106.325 106.116L106.325 107.99L106.325 119.473L106.325 121.347L108.199 121.347L119.682 121.347L121.556 121.347L121.556 117.599L119.682 117.599L112.737 117.599L147.774 82.5614C150.33 80.0053 151.766 76.5385 151.766 72.9237C151.766 69.3088 150.33 65.842 147.774 63.2859Z" fill="url(#paint2_angular_364_38411)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7711 107.64L18.0965 108.965L20.7471 106.315L19.4218 104.989C17.5687 103.136 16.5277 100.623 16.5277 98.0021C16.5277 95.3814 17.5687 92.8681 19.4218 91.015L54.4714 55.9655V62.9353V64.8096L58.22 64.8096V62.9353L58.22 51.4528L58.22 49.5785L56.3457 49.5785L44.8632 49.5785H42.9889V53.3271H44.8632L51.8084 53.3271L16.7711 88.3644C14.215 90.9205 12.779 94.3872 12.779 98.0021C12.779 101.617 14.215 105.084 16.7711 107.64Z" fill="url(#paint3_angular_364_38411)"/>
+<path d="M121.506 29.6162C122.047 26.3964 119.635 24.6225 116.311 23.4103L117.478 19.0537L114.844 18.3479L113.708 22.5881C113.016 22.4028 112.304 22.2261 111.597 22.0528L112.741 17.7844L110.107 17.0786L108.939 21.4309C108.365 21.2893 107.801 21.1501 107.255 21.0038L107.258 20.9907L103.625 20.0152L102.866 22.847C102.866 22.847 104.823 23.331 104.78 23.3577C105.848 23.6439 106.028 24.3594 105.984 24.9247L104.655 29.8869C104.729 29.9069 104.823 29.9361 104.927 29.9801L104.65 29.9057L102.785 36.8572C102.648 37.1823 102.306 37.6676 101.56 37.4697C101.585 37.5087 99.6453 36.9566 99.6453 36.9566L98.2732 39.9819L101.703 40.9011C102.341 41.0719 102.966 41.2515 103.581 41.4201L102.402 45.8259L105.034 46.5312L106.202 42.1728C106.92 42.3811 107.617 42.5741 108.301 42.7574L107.137 47.0947L109.772 47.8005L110.949 43.4046C115.447 44.3365 118.852 44.0448 120.358 39.9619C121.572 36.6752 120.401 34.7472 118.048 33.4657C119.788 33.0957 121.114 31.9735 121.506 29.6162ZM115.294 38.0463C114.413 41.3376 108.91 39.4633 107.123 38.9843L108.687 33.1462C110.474 33.629 116.214 34.6144 115.294 38.0463ZM116.274 29.4828C115.472 32.4778 110.89 30.8743 109.402 30.4775L110.82 25.1852C112.31 25.5843 117.113 26.3608 116.274 29.4828Z" fill="white"/>
+<path d="M121.506 29.6162C122.047 26.3964 119.635 24.6225 116.311 23.4103L117.478 19.0537L114.844 18.3479L113.708 22.5881C113.016 22.4028 112.304 22.2261 111.597 22.0528L112.741 17.7844L110.107 17.0786L108.939 21.4309C108.365 21.2893 107.801 21.1501 107.255 21.0038L107.258 20.9907L103.625 20.0152L102.866 22.847C102.866 22.847 104.823 23.331 104.78 23.3577C105.848 23.6439 106.028 24.3594 105.984 24.9247L104.655 29.8869C104.729 29.9069 104.823 29.9361 104.927 29.9801L104.65 29.9057L102.785 36.8572C102.648 37.1823 102.306 37.6676 101.56 37.4697C101.585 37.5087 99.6453 36.9566 99.6453 36.9566L98.2732 39.9819L101.703 40.9011C102.341 41.0719 102.966 41.2515 103.581 41.4201L102.402 45.8259L105.034 46.5312L106.202 42.1728C106.92 42.3811 107.617 42.5741 108.301 42.7574L107.137 47.0947L109.772 47.8005L110.949 43.4046C115.447 44.3365 118.852 44.0448 120.358 39.9619C121.572 36.6752 120.401 34.7472 118.048 33.4657C119.788 33.0957 121.114 31.9735 121.506 29.6162ZM115.294 38.0463C114.413 41.3376 108.91 39.4633 107.123 38.9843L108.687 33.1462C110.474 33.629 116.214 34.6144 115.294 38.0463ZM116.274 29.4828C115.472 32.4778 110.89 30.8743 109.402 30.4775L110.82 25.1852C112.31 25.5843 117.113 26.3608 116.274 29.4828Z" fill="white"/>
+<path d="M66.0989 136.379L66.8437 139.158L59.8395 141.035L66.5749 146.985L62.9521 147.955L54.8431 140.771L51.4326 151.042L47.8099 152.013L50.6579 143.495L43.7642 145.342L43.0141 142.543L66.0936 136.358L66.0989 136.379Z" fill="white"/>
+<path d="M65.2823 133.327L64.5376 130.548L57.5334 132.424L60.3915 123.904L56.7688 124.875L53.3382 135.151L45.2492 127.961L41.6265 128.932L48.3518 134.885L41.4581 136.732L42.2083 139.531L65.2877 133.347L65.2823 133.327Z" fill="white"/>
+<path d="M65.2823 133.327L64.5376 130.548L57.5334 132.424L60.3915 123.904L56.7688 124.875L53.3382 135.151L45.2492 127.961L41.6265 128.932L48.3518 134.885L41.4581 136.732L42.2083 139.531L65.2877 133.347L65.2823 133.327Z" fill="url(#paint4_linear_364_38411)"/>
+<defs>
+<linearGradient id="paint0_linear_364_38411" x1="78.6465" y1="0.185547" x2="143.729" y2="65.2685" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FADB94"/>
+<stop offset="0.859591" stop-color="#EFA701"/>
+</linearGradient>
+<linearGradient id="paint1_linear_364_38411" x1="86.1273" y1="104.917" x2="31.9517" y2="164.103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C6C1FB"/>
+<stop offset="1" stop-color="#4636FF"/>
+</linearGradient>
+<radialGradient id="paint2_angular_364_38411" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(135.143 86.8426) rotate(-61.4663) scale(23.2098 13.2219)">
+<stop offset="0.137195" stop-color="white" stop-opacity="0.45"/>
+<stop offset="0.570702" stop-color="white"/>
+<stop offset="0.977803" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_angular_364_38411" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.402 84.0831) rotate(118.534) scale(23.2098 13.2219)">
+<stop offset="0.137195" stop-color="white" stop-opacity="0.45"/>
+<stop offset="0.570702" stop-color="white"/>
+<stop offset="0.977803" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint4_linear_364_38411" x1="40.8581" y1="134.492" x2="63.9376" y2="128.308" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/img/onboarding/onboarding3.svg
+++ b/src/assets/img/onboarding/onboarding3.svg
--- a/src/assets/img/xverse_icon.png
+++ b/src/assets/img/xverse_icon.png
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -0,0 +1,15 @@
+{
+  "LANDING_SCREEN": {
+    "SCREEN_TITLE": "Wallet for Stacks & Bitcoin",
+    "CREATE_WALLET_BUTTON": "Create Wallet",
+    "RESTORE_WALLET_BUTTON": "Restore Wallet"
+  },
+  "ONBOARDING_SCREEN": {
+    "ONBOARDING_1_TITlE": "All your Bitcoin, Stacks assets and NFTs in one place",
+    "ONBOARDING_1_SUBTITlE": "Manage all your Bitcoin and Stacks based digital assets directly from Xverse",
+    "ONBOARDING_2_TITlE": "Stack your STX to earn rewards in Bitcoin",
+    "ONBOARDING_2_SUBTITlE": "Earn Bitcoin yield on your STX without them ever leaving your wallet.",
+    "ONBOARDING_3_TITlE": "Access your favorites Dapps from your wallet",
+    "ONBOARDING_3_SUBTITlE": "From marketplaces to DeFi, and so much more."
+  }
+}
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import enJSON from './en.json';
+
+const resources = {
+  en: { translation: enJSON },
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    react: {
+      useSuspense: false,
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -0,0 +1,23 @@
+{
+  "name": "Xverse Wallet",
+  "description": "A Bitcoin Wallet for Web3",
+  "manifest_version": 3,
+  "options_page": "options.html",
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": "assets/img/xverse_icon.png",
+    "default_title": "Xverse Wallet"
+  },
+  "chrome_url_overrides": {},
+  "background": {},
+  "icons": {
+    "128": "assets/img/xverse_icon.png"
+  },
+  "devtools_page": "devtools.html",
+  "web_accessible_resources": [
+    {
+      "resources": ["assets/img/xverse_icon.png"],
+      "matches": []
+    }
+  ]
+}
--- a/src/pages/Options/index.css
+++ b/src/pages/Options/index.css
@@ -0,0 +1,35 @@
+body {
+  margin: 0;
+  padding: 0;
+  color: #ffffff;
+  background-color: #181b24;
+  position: relative;
+}
+header {
+  display: flex;
+  justify-content: space-between;
+  padding: 30px 102px 0px 102px;
+  width: 100%;
+}
+
+header h2 {
+  font-family: 'Satoshi-Regular';
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: right;
+}
+#app-container {
+  height: 90vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#app {
+  width: 360px;
+  height: 600px;
+}
--- a/src/pages/Options/index.html
+++ b/src/pages/Options/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Xverse Wallet</title>
+  </head>
+  <body>
+    <header>
+      <img src="../../assets/img/full_logo_horizontal.svg" alt="Logo" width="113">
+      <h2>V1.0.0</h2>
+    </header>
+    <div id="app-container">
+      <div id="app" ></div>
+    </div>
+  </body>
+</html>
--- a/src/pages/Options/index.jsx
+++ b/src/pages/Options/index.jsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import App from '../../app/App';
+import './index.css';
+
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);
--- a/src/pages/Popup/index.css
+++ b/src/pages/Popup/index.css
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  color: #ffffff;
+  position: relative;
+}
+#app {
+  width: 360px;
+  height: 600px;
+}
--- a/src/pages/Popup/index.html
+++ b/src/pages/Popup/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Xverse Wallet</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
--- a/src/pages/Popup/index.jsx
+++ b/src/pages/Popup/index.jsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import App from '../../app/App';
+import './index.css';
+
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1,6 @@
-/// <reference types="react-scripts" />
+declare module '*.png';
+declare module '*.svg';
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.otf';
+declare module '*.ttf';
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
--- a/src/theme/global.ts
+++ b/src/theme/global.ts
@@ -0,0 +1,53 @@
+import { createGlobalStyle } from 'styled-components';
+import SatoshiBold from '../assets/fonts/Satoshi-Bold.otf';
+import SatoshiBlack from '../assets/fonts/Satoshi-Black.otf';
+import SatoshiMedium from '../assets/fonts/Satoshi-Medium.otf';
+import SatoshiRegular from '../assets/fonts/Satoshi-Regular.otf';
+
+const GlobalStyle = createGlobalStyle`
+  @font-face{
+    font-family: 'Satoshi-Bold';
+    src: url(${SatoshiBold});
+    font-display: block;
+  }
+    @font-face{
+    font-family: 'Satoshi-Medium';
+    src: url(${SatoshiMedium});
+    font-display: block;
+  }
+    @font-face{
+    font-family: 'Satoshi-Regular';
+    src: url(${SatoshiRegular});
+    font-display: block;
+  }
+    @font-face{
+    font-family: 'Satoshi-Black';
+    src: url(${SatoshiBlack});
+    font-display: block;
+  }
+  html {
+    box-sizing: border-box;
+  }
+  * {
+  margin: 0;
+  padding: 0;
+  }
+  * input, * button {
+    outline: 0;
+  }
+  * button {
+    cursor: pointer;
+    border: 0;
+  }
+  * p {
+    margin: 0;
+  }
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+  cursor: inherit;
+  line-height: normal;
+}
+`;
+export default GlobalStyle;
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -0,0 +1,127 @@
+const Theme = {
+  colors: {
+    action: {
+      classic: '#5565F7',
+    },
+    white: {
+      0: '#FFFFFF',
+      200: 'rgba(255, 255, 255, 0.8)',
+      400: 'rgba(255, 255, 255, 0.6)',
+    },
+    background: {
+      'elevation-1': '#070A13',
+      elevation0: '#12151E',
+      elevation1: '#1D2032',
+      elevation2: '#272A44',
+      elevation3: '#303354',
+      elevation6: '#4C5187',
+      elevation8: '#7E89AB',
+    },
+    feedback: {
+      success: '#51D6A6',
+      caution: '#F2A900',
+      error: '#D33C3C',
+    },
+  },
+  headline_category_m: {
+    fontFamily: 'Satoshi-Medium',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: 14,
+    letterSpacing: 0.02,
+    textTransform: 'uppercase',
+  },
+  headline_category_s: {
+    fontFamily: 'Satoshi-Medium',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontSize: 11,
+    letterSpacing: 0.02,
+  },
+  body_bold_l: {
+    fontFamily: 'Satoshi-Bold',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontSize: 16,
+  },
+  body_medium_l: {
+    fontFamily: 'Satoshi-Regular',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontSize: 16,
+  },
+  body_l: {
+    fontFamily: 'Satoshi-Regular',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: 16,
+  },
+  body_bold_m: {
+    fontFamily: 'Satoshi-Bold',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontSize: 14,
+  },
+  body_medium_m: {
+    fontFamily: 'Satoshi-Medium',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+  body_m: {
+    fontFamily: 'Satoshi-Regular',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: 14,
+  },
+  body_xs: {
+    fontFamily: 'Satoshi-Regular',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: 12,
+  },
+  headline_xl: {
+    fontFamily: 'Satoshi-Regular',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontSize: 42,
+    letterSpacing: 0.02,
+  },
+  tile_text: {
+    fontFamily: 'Satoshi-Regular',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontSize: 18,
+    letterSpacing: 0.02,
+  },
+  headline_l: {
+    fontFamily: 'Satoshi-Bold',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontSize: 34,
+    letterSpacing: 0.02,
+  },
+  headline_m: {
+    fontFamily: 'Satoshi-Regular',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontSize: 24,
+    letterSpacing: 0.02,
+  },
+  headline_s: {
+    fontFamily: 'Satoshi-Medium',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontSize: 21,
+    letterSpacing: 0.02,
+  },
+  breakpoints: {
+    s: '0px',
+    md: '700px',
+    lg: '1025px',
+    xlg: '1536px',
+  },
+  spacing: (multiple: number) => multiple * 2,
+  radius: (multiple: number) => multiple * 4 + 4,
+};
+export default Theme;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
@@ -17,10 +13,17 @@
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "noEmit": false,
+    "jsx": "react-jsx",
+    "rootDir": "src",
+    "outDir": "build/js",
+    "baseUrl": "./src",
+    "paths": {
+      "@components/*": ["app/components/*"],
+      "@hooks/*": ["app/hooks/*"],
+      "@assets/*": ["assets/*"],
+      "@screens/*": ["app/screens/*"],
+    }
  },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
--- a/webpack/utils/build.js
+++ b/webpack/utils/build.js
@@ -0,0 +1,15 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+process.env.ASSET_PATH = '/';
+
+var webpack = require('webpack'),
+  config = require('../webpack.config');
+
+delete config.xverseWallet;
+
+config.mode = 'production';
+
+webpack(config, function (err) {
+  if (err) throw err;
+});
--- a/webpack/utils/devServer.js
+++ b/webpack/utils/devServer.js
@@ -0,0 +1,62 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+process.env.ASSET_PATH = '/';
+
+var WebpackDevServer = require('webpack-dev-server'),
+  webpack = require('webpack'),
+  config = require('../webpack.config'),
+  env = require('../utils/env'),
+  path = require('path');
+
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+
+// Add Stuff Here to exclude from hot reloading
+var excludeEntriesToHotReload = [];
+
+for (var entryName in config.entry) {
+  if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
+    config.entry[entryName] = [
+      'webpack/hot/dev-server',
+      `webpack-dev-server/client?hot=true&hostname=localhost&port=${env.PORT}`,
+    ].concat(config.entry[entryName]);
+  }
+}
+
+config.plugins = [
+  new webpack.HotModuleReplacementPlugin(),
+  new ReactRefreshWebpackPlugin({ overlay: false }),
+].concat(config.plugins || []);
+
+var compiler = webpack(config);
+
+var server = new WebpackDevServer(
+  {
+    https: false,
+    hot: false,
+    client: false,
+    host: 'localhost',
+    port: env.PORT,
+    static: {
+      directory: path.join(__dirname, '../build'),
+    },
+    devMiddleware: {
+      publicPath: `http://localhost:${env.PORT}/`,
+      writeToDisk: true,
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    allowedHosts: 'all',
+  },
+  compiler
+);
+
+if (process.env.NODE_ENV === 'development' && module.hot) {
+  module.hot.accept();
+}
+
+(async () => {
+  await server.start();
+})();
--- a/webpack/utils/env.js
+++ b/webpack/utils/env.js
@@ -0,0 +1,6 @@
+// tiny wrapper with default env vars
+module.exports = {
+    NODE_ENV: process.env.NODE_ENV || 'development',
+    PORT: process.env.PORT || 3000,
+  };
+  
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -0,0 +1,137 @@
+var webpack = require('webpack'),
+  path = require('path'),
+  env = require('./utils/env'),
+  CopyWebpackPlugin = require('copy-webpack-plugin'),
+  HtmlWebpackPlugin = require('html-webpack-plugin'),
+  TerserPlugin = require('terser-webpack-plugin');
+var { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const ReactRefreshTypeScript = require('react-refresh-typescript');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+
+const ASSET_PATH = process.env.ASSET_PATH || '/';
+const SRC_ROOT_PATH = path.join(__dirname, '../', 'src');
+const BUILD_ROOT_PATH = path.join(__dirname, '../', 'build');
+
+var fileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'eot', 'otf', 'svg', 'ttf', 'woff', 'woff2'];
+var options = {
+  mode: env.NODE_ENV || 'development',
+
+  entry: {
+    options: path.join(SRC_ROOT_PATH, 'pages', 'Options', 'index.jsx'),
+    popup: path.join(SRC_ROOT_PATH, 'pages', 'Popup', 'index.jsx'),
+  },
+  output: {
+    filename: '[name].bundle.js',
+    path: BUILD_ROOT_PATH,
+    clean: true,
+    publicPath: ASSET_PATH,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css)$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+        ],
+      },
+      {
+        test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
+        type: 'asset/resource',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: {
+              getCustomTransformers: () => ({
+                before: [env.NODE_ENV === 'development' && ReactRefreshTypeScript()].filter(Boolean),
+              }),
+              transpileOnly: env.NODE_ENV === 'development',
+            },
+          },
+        ],
+      }
+    ],
+  },
+  resolve: {
+    plugins: [new TsconfigPathsPlugin()],
+    extensions: fileExtensions
+      .map((extension) => '.' + extension)
+      .concat(['.js', '.jsx', '.ts', '.tsx', '.css']),
+  },
+  plugins: [
+    new CleanWebpackPlugin({ verbose: false }),
+    new webpack.ProgressPlugin(),
+    // expose and write the allowed env vars on the compiled bundle
+    new webpack.EnvironmentPlugin(['NODE_ENV']),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/manifest.json',
+          to: BUILD_ROOT_PATH,
+          force: true,
+          transform: function (content, path) {
+            // generates the manifest file using the package.json informations
+            return Buffer.from(
+              JSON.stringify({
+                description: process.env.npm_package_description,
+                version: process.env.npm_package_version,
+                ...JSON.parse(content.toString()),
+              })
+            );
+          },
+        },
+      ],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.join(SRC_ROOT_PATH, 'assets'),
+          to: path.join(BUILD_ROOT_PATH, 'assets'),
+        },
+      ],
+    }),
+    new HtmlWebpackPlugin({
+      template: path.join(SRC_ROOT_PATH, 'pages', 'Options', 'index.html'),
+      filename: 'options.html',
+      chunks: ['options'],
+      cache: false,
+    }),
+    new HtmlWebpackPlugin({
+      template: path.join(SRC_ROOT_PATH, 'pages', 'Popup', 'index.html'),
+      filename: 'popup.html',
+      chunks: ['popup'],
+      cache: false,
+    }),
+  ],
+  infrastructureLogging: {
+    level: 'info',
+  },
+};
+if (env.NODE_ENV === 'development') {
+  options.devtool = 'cheap-module-source-map';
+} else {
+  options.optimization = {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      }),
+    ],
+  };
+}
+module.exports = options;
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>