wallet-ui: init project

* app shows an `under construction` message (in popup and new tab)
* after installing the extension, a new tab will open with the app
* build tools: webpack, typescript, eslint, stylelint & prettier
* the ui part is a react app

.github/actions/diffs/action.yml

@@ -20,7 +20,7 @@ runs:
     with:
       filters: |
         isRust:
-          - '!(explorer|doc|.github|sdk)/**'
+          - '!(explorer|doc|.github|sdk|wallet)/**'
           - '.github/workflows/bench.yml'
           - '.github/workflows/codecov.yml'
           - '.github/workflows/rust.yml'

wallet/.browserslistrc

@@ -0,0 +1 @@
+chrome >= 88

wallet/.eslintignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

wallet/.eslintrc.js

@@ -0,0 +1,47 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = {
+    root: true,
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'react-app',
+        'react-app/jest',
+        'prettier',
+    ],
+    rules: {
+        'react/jsx-no-bind': ['error'],
+        'import/order': [
+            'warn',
+            {
+                groups: [
+                    ['builtin', 'external'],
+                    ['internal', 'parent', 'sibling', 'index'],
+                    'type',
+                ],
+                pathGroups: [
+                    {
+                        pattern: '{.,..}/**/*.?(s)css',
+                        group: 'type',
+                        position: 'after',
+                    },
+                ],
+                'newlines-between': 'always',
+                alphabetize: { order: 'asc' },
+                warnOnUnassignedImports: true,
+            },
+        ],
+        'import/no-duplicates': ['error'],
+        '@typescript-eslint/consistent-type-imports': [
+            'error',
+            {
+                prefer: 'type-imports',
+                disallowTypeAnnotations: true,
+            },
+        ],
+        'no-console': ['warn'],
+    },
+};

wallet/.gitignore

@@ -0,0 +1,4 @@
+*.log
+.DS_Store
+node_modules
+dist

wallet/.prettierignore

@@ -0,0 +1,5 @@
+dist/
+package-lock.json
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

wallet/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4
+}

wallet/.stylelintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

wallet/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-prettier-scss"
+    ]
+}

wallet/README.md

@@ -0,0 +1,45 @@
+# Sui Wallet
+
+A chrome (v88+) extension wallet for [Sui](https://sui.io).
+
+# Set up
+
+**Requirements**: Node 14.0.0 or later.
+
+Run `npm i` first to install the required `node modules`
+
+Then one of the following build steps is required:
+
+## Build in watch mode (dev)
+
+To build the extension and watch for changes run
+
+```
+npm start
+```
+
+This will build the app in the [dist/](./dist/) directory, watch for changes and rebuild it. (Also runs prettier to format the files that changed.)
+
+## Build once in dev mode
+
+To build the app once in development mode (no optimizations etc) run
+
+```
+npm run build:dev
+```
+
+The output directory is the same [dist/](./dist/), all build artifacts will go there
+
+## Build once in prod mode
+
+To build the app once in production mode run
+
+```
+npm run build:prod
+```
+
+Same as above the output is [dist/](./dist/).
+
+## Install the extension to Chrome
+
+After building the app, the extension needs to be installed to Chrome. Follow the steps [here](https://developer.chrome.com/docs/extensions/mv3/getstarted/#unpacked) and install the app from the [dist/](./dist/) directory.

wallet/configs/ts/tsconfig.common.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "esnext",
+        "allowJs": true,
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noFallthroughCasesInSwitch": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "noEmit": false,
+        "isolatedModules": true,
+        "outDir": "../../dist"
+    },
+    "include": ["../../src"],
+    "exclude": ["../../build", "../../node_modules"]
+}

wallet/configs/ts/tsconfig.dev.json

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.common",
+    "compilerOptions": {
+        "jsx": "react-jsxdev"
+    }
+}

wallet/configs/ts/tsconfig.prod.json

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.common",
+    "compilerOptions": {
+        "jsx": "react-jsx"
+    }
+}

wallet/configs/ts/tsconfig.webpack.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.common",
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "esModuleInterop": true
+    }
+}

wallet/configs/webpack/webpack.config.common.ts

@@ -0,0 +1,97 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import CopyPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { resolve } from 'path';
+
+import packageJson from '../../package.json';
+
+import type { Configuration } from 'webpack';
+
+const APP_NAME = 'Sui Wallet';
+const PROJECT_ROOT = resolve(__dirname, '..', '..');
+const CONFIGS_ROOT = resolve(PROJECT_ROOT, 'configs');
+const SRC_ROOT = resolve(PROJECT_ROOT, 'src');
+const OUTPUT_ROOT = resolve(PROJECT_ROOT, 'dist');
+
+const tsConfigFilename = `tsconfig.${
+    process.env.NODE_ENV === 'development' ? 'dev' : 'prod'
+}.json`;
+
+const commonConfig: Configuration = {
+    context: SRC_ROOT,
+    entry: {
+        background: './background',
+        ui: './ui',
+    },
+    output: {
+        path: OUTPUT_ROOT,
+        clean: true,
+    },
+    stats: {
+        preset: 'summary',
+        timings: true,
+        errors: true,
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx'],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(t|j)sx?$/,
+                loader: 'ts-loader',
+                options: {
+                    configFile: resolve(CONFIGS_ROOT, 'ts', tsConfigFilename),
+                },
+            },
+            {
+                test: /\.(s)?css$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'postcss-loader',
+                    'sass-loader',
+                ],
+            },
+            {
+                test: /\.(png|jpg|jpeg|gif)$/,
+                type: 'asset/resource',
+            },
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin(),
+        new HtmlWebpackPlugin({
+            chunks: ['ui'],
+            filename: 'ui.html',
+            template: resolve(SRC_ROOT, 'ui', 'index.template.html'),
+            title: APP_NAME,
+        }),
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: resolve(SRC_ROOT, 'manifest', 'icons', '**', '*'),
+                },
+                {
+                    from: resolve(SRC_ROOT, 'manifest', 'manifest.json'),
+                    to: resolve(OUTPUT_ROOT, '[name][ext]'),
+                    transform: (content) => {
+                        const { description, version } = packageJson;
+                        const manifestJson = {
+                            ...JSON.parse(content.toString()),
+                            name: APP_NAME,
+                            description,
+                            version,
+                        };
+                        return JSON.stringify(manifestJson, null, 4);
+                    },
+                },
+            ],
+        }),
+    ],
+};
+
+export default commonConfig;

wallet/configs/webpack/webpack.config.dev.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import ESLintPlugin from 'eslint-webpack-plugin';
+import StyleLintPlugin from 'stylelint-webpack-plugin';
+import { merge } from 'webpack-merge';
+
+import configCommon from './webpack.config.common';
+
+import type { Configuration } from 'webpack';
+
+const configDev: Configuration = {
+    mode: 'development',
+    devtool: 'cheap-source-map',
+    plugins: [new ESLintPlugin(), new StyleLintPlugin()],
+    watchOptions: {
+        aggregateTimeout: 600,
+    },
+};
+
+export default merge(configCommon, configDev);

wallet/configs/webpack/webpack.config.prod.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { merge } from 'webpack-merge';
+
+import configCommon from './webpack.config.common';
+
+import type { Configuration } from 'webpack';
+
+const configProd: Configuration = {
+    mode: 'production',
+};
+
+export default merge(configCommon, configProd);