Next template dapp (#125)

multiversx · Sep 28, 2023 · dc13dff · dc13dff
1 parent 0182385
commit dc13dff
Show file tree

Hide file tree

Showing 191 changed files with 5,950 additions and 7,092 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,12 +14,14 @@ videos
 /build
 
 # misc
+/src/config/index.ts
 .DS_Store
 .idea
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/.swcrc b/.swcrc
@@ -0,0 +1,31 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": false,
+        "runtime": "automatic"
+      },
+      "hidden": {
+        "jest": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs",
+    "strict": false,
+    "strictMode": true,
+    "lazy": false,
+    "noInterop": false
+  }
+}
diff --git a/README.md b/README.md
@@ -7,8 +7,8 @@ See [Dapp template](https://template-dapp.multiversx.com/) for live demo.
 
 ## Requirements
 
-- Node.js version 12.16.2+
-- Npm version 6.14.4+
+- Node.js version 16.20.0+
+- Npm version 8.19.4+
 
 ## Getting Started
 
@@ -24,35 +24,31 @@ From a terminal, navigate to the project folder and run:
 yarn install
 ```
 
-### Step 2. Update environment
-
-Go to `App.tsx` and edit the `environment` variable according to the environment you want the app to run on.
-Valid values are `testnet`, `devnet` or `mainnet`
-
-If you need to edit the network configuration, you can pass in a `customNetworkConfig` object.
-More info about this can be found in [sdk-dapp documentation](https://github.com/multiversx/sdk-dapp)
-
-### Step 3. Running in development mode
+### Step 2. Running in development mode
 
 In the project folder run:
 
 ```bash
-yarn start
+yarn start-devnet - DEVNET environment
+yarn start-testnet - TESTNET environmnet
+yarn start-mainnet - MAINNET environmnet
 ```
 
-This will start the React app in development mode, using the configs found in the `config.tsx` file.
+This will start the React app in development mode, using the configs found in the `vite.config.ts` file.
 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.
 
-### Step 4. Build for testing and production use
+### Step 3. Build for testing and production use
 
 A build of the app is necessary to deploy for testing purposes or for production use.
 To build the project run:
 
 ```bash
-yarn build
+yarn build-devnet
+yarn build-testnet
+yarn build-mainnet
 ```
 
 ## Roadmap

diff --git a/config-overrides.js b/config-overrides.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -12,30 +12,12 @@
       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" />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="%PUBLIC_URL%/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="%PUBLIC_URL%/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="%PUBLIC_URL%/favicon-16x16.png"
-    />
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
-    <link
-      rel="mask-icon"
-      href="%PUBLIC_URL%/safari-pinned-tab.svg"
-      color="#23f7dd"
-    />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#23f7dd" />
     <meta name="msapplication-TileColor" content="#ffffff" />
     <meta name="theme-color" content="#ffffff" />
     <!--
@@ -82,11 +64,12 @@
       content="https://template-dapp.multiversx.com/social.jpg"
     />
 
-    <title>MultiversX dApp Template</title>
+    <title>Template dApp</title>
   </head>
-  <body>
+  <body class="bg-slate-200">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,43 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/mocks/**'
+  ],
+  coveragePathIgnorePatterns: [],
+  testEnvironment: 'jsdom',
+  modulePaths: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest'
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!@multiversx/sdk-guardians-provider|@multiversx/sdk-dapp-form|@multiversx/sdk-dapp-nft|@multiversx/sdk-dapp|@multiversx/sdk-wallet-connect-provider|@multiversx/sdk-guardians-provider|react-redux|swiper|ssr-window|dom7|axios|react-tooltip|uuid|uint8arrays|multiformats)'
+  ],
+  moduleNameMapper: {
+    '^react-native$': 'react-native-web',
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
+  },
+  setupFilesAfterEnv: ['./src/setupTests.ts'],
+  moduleFileExtensions: [
+    // Place tsx and ts to beginning as suggestion from Jest team
+    // https://jestjs.io/docs/configuration#modulefileextensions-arraystring
+    'tsx',
+    'ts',
+    'web.js',
+    'js',
+    'web.ts',
+    'web.tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node'
+  ],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname'
+  ],
+  clearMocks: true,
+  resetMocks: true,
+  restoreMocks: true
+};
diff --git a/package.json b/package.json
@@ -1,74 +1,85 @@
 {
-  "name": "@multiversx/template-dapp",
+  "name": "@multiversx/next-template-dapp",
   "description": "MultiversX Dapp Template",
   "version": "1.0.0",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
-  "repository": "@multiversx/mx-template-dapp",
+  "repository": "@multiversx/mx-next-template-dapp",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.4.0",
     "@fortawesome/free-solid-svg-icons": "6.4.0",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-core": "12.4.3",
-    "@multiversx/sdk-dapp": "2.18.3",
-    "@multiversx/sdk-network-providers": "1.5.0",
+    "@multiversx/sdk-core": "12.9.0",
+    "@multiversx/sdk-dapp": "2.21.0",
+    "@multiversx/sdk-network-providers": "2.0.0",
     "axios": "0.24.0",
-    "bootstrap": "4.6.2",
+    "classnames": "2.3.2",
     "moment": "2.29.4",
     "react": "18.2.0",
-    "react-bootstrap": "2.1.2",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.4.2",
-    "web-vitals": "1.0.1"
+    "react-router-dom": "6.16.0"
   },
   "scripts": {
-    "start": "HTTPS=true PORT=3001 react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-scripts eject",
+    "start": "vite dev",
+    "build": "vite build",
     "lint": "eslint --ext js,ts,tsx src",
-    "run-cypress": "npx cypress run"
+    "run-cypress": "npx cypress run",
+    "start-devnet": "yarn run copy-devnet-config & yarn start",
+    "start-testnet": "yarn run copy-testnet-config & yarn start",
+    "start-mainnet": "yarn run copy-mainnet-config & yarn start",
+    "copy-devnet-config": "cp ./src/config/config.devnet.ts ./src/config/index.ts",
+    "copy-testnet-config": "cp ./src/config/config.testnet.ts ./src/config/index.ts",
+    "copy-mainnet-config": "cp ./src/config/config.mainnet.ts ./src/config/index.ts",
+    "build-mainnet": "yarn run copy-mainnet-config & yarn build",
+    "build-testnet": "yarn run copy-testnet-config & yarn build",
+    "build-devnet": "yarn run copy-devnet-config & yarn build",
+    "test": "jest"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
-  "jest": {
-    "moduleNameMapper": {
-      "@multiversx/sdk-dapp/(.*)": "<rootDir>/node_modules/@multiversx/sdk-dapp/__commonjs/$1.js"
-    }
-  },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.16.5",
+    "@swc/core": "1.3.90",
+    "@swc/jest": "0.2.29",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jest": "26.0.15",
-    "@types/node": "12.0.0",
-    "@types/react": "18.0.24",
-    "@types/react-dom": "18.0.8",
-    "@types/react-router-dom": "5.1.7",
-    "crypto-browserify": "3.12.0",
-    "cypress": "^12.14.0",
-    "eslint-config-prettier": "8.3.0",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jest": "29.5.5",
+    "@types/node": "20.7.1",
+    "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.8",
+    "@types/react-router-dom": "5.3.3",
+    "@vitejs/plugin-react": "4.1.0",
+    "autoprefixer": "10.4.16",
+    "cypress": "12.17.4",
+    "eslint": "8.50.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-config-react": "1.1.7",
     "eslint-config-react-app": "7.0.1",
-    "eslint-config-standard": "17.0.0",
+    "eslint-config-standard": "17.1.0",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-import-resolver-typescript": "3.2.5",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "path-browserify": "1.0.1",
-    "prettier": "2.7.1",
-    "react-app-rewired": "2.2.1",
-    "react-scripts": "5.0.1",
-    "sass": "1.55.0",
-    "stream-browserify": "3.0.0",
-    "typescript": "4.1.2"
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-watch-typeahead": "2.2.2",
+    "postcss": "8.4.30",
+    "prettier": "3.0.3",
+    "tailwindcss": "3.3.3",
+    "ts-jest": "29.1.1",
+    "typescript": "5.2.2",
+    "vite": "4.4.9",
+    "vite-plugin-mkcert": "1.16.0",
+    "vite-plugin-node-polyfills": "0.14.1",
+    "vite-plugin-svgr": "4.0.0",
+    "vite-tsconfig-paths": "4.2.1"
   },
   "resolutions": {
     "**/*/nth-check": "2.0.1"

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/public/multiversx-white.png b/public/multiversx-white.png
diff --git a/src/App.test.tsx b/src/App.test.tsx