feat: web3 integration

- add wagmi, viem, rainbowKit
- add providers lib for wagmi context
- add .env for wallet connect project id, add to gitignore
- update eslint imports rule
- add browserlistrc for bigint support

.browserlistrc

@@ -0,0 +1,7 @@
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11

.env

@@ -0,0 +1 @@
+VITE_WALLET_CONNECT_PROJECT_ID=

.eslintrc.json

@@ -6,6 +6,7 @@
     "formatjs",
     "unused-imports",
     "simple-import-sort",
+    "import",
     "prettier"
   ],
   "overrides": [
@@ -29,22 +30,26 @@
         "react/react-in-jsx-scope": "off",
         // Unused imports rules
         "unused-imports/no-unused-imports": "error",
-        "unused-imports/no-unused-vars": "warn",
+        "unused-imports/no-unused-vars": [
+          "warn",
+          {
+            "varsIgnorePattern": "^_",
+            "args": "none",
+            "argsIgnorePattern": "^_",
+            "ignoreRestSiblings": true
+          }
+        ],
 
         // Import ordering rules
         "simple-import-sort/imports": [
           "warn",
           {
             "groups": [
-              // Side effect imports
               ["^\\u0000"],
-              // React Package(s) comes first as seperate group
               ["^react(-dom(/client)?)?$"],
-              // All other imports
               ["^@?\\w"],
               ["^((?!\\u0000$)|/.*|$)"],
               ["^\\."],
-              // Type imports: keep these last!
               ["^@?\\w.*\\u0000$"],
               ["^.*\\u0000$"],
               ["^\\..*\\u0000$"]
@@ -54,6 +59,7 @@
 
         // import types rules
         "@typescript-eslint/consistent-type-imports": "error",
+        "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
 
         // FormatJS rules
         "formatjs/enforce-default-message": ["error", "literal"],

.gitignore

@@ -37,3 +37,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# env
+.env.local

libs/shared/providers/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/shared/providers/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "plugin:@nx/react",
+    "../../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    }
+  ]
+}

libs/shared/providers/README.md

@@ -0,0 +1,7 @@
+# shared-providers
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shared-providers` to execute the unit tests via [Jest](https://jestjs.io).

libs/shared/providers/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "shared-providers",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/providers/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/shared/providers/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    }
+  }
+}

libs/shared/providers/src/index.ts

@@ -0,0 +1 @@
+export * from './wagmi';

libs/shared/providers/src/wagmi/components/AddressLabel.tsx

@@ -0,0 +1,37 @@
+import { Skeleton } from '@mui/material';
+import { MiddleTruncated } from '@origin/shared/components';
+import { mainnet, useEnsName } from 'wagmi';
+
+import type { MiddleTruncatedProps } from '@origin/shared/components';
+import type { HexAddress } from '@origin/shared/utils';
+
+type AddressLabelProps = {
+  address: HexAddress;
+  enableEnsName?: boolean;
+} & Omit<MiddleTruncatedProps, 'children'>;
+
+export const AddressLabel = ({
+  address,
+  enableEnsName = false,
+  ...rest
+}: AddressLabelProps) => {
+  const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({
+    address,
+    enabled: enableEnsName,
+    chainId: mainnet.id,
+  });
+
+  return enableEnsName ? (
+    isEnsNameLoading ? (
+      <Skeleton sx={{ minWidth: 100, ...rest?.sx }} />
+    ) : (
+      <MiddleTruncated textProps={{ fontFamily: 'monospace', ...rest }}>
+        {ensName ?? address}
+      </MiddleTruncated>
+    )
+  ) : (
+    <MiddleTruncated textProps={{ fontFamily: 'monospace', ...rest }}>
+      {address}
+    </MiddleTruncated>
+  );
+};

libs/shared/providers/src/wagmi/components/OpenAccountModalButton.tsx

@@ -0,0 +1,87 @@
+import { ConnectButton as CustomButton } from '@origin/shared/components';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { useIntl } from 'react-intl';
+
+import { AddressLabel } from './AddressLabel';
+
+import type { ButtonProps } from '@mui/material';
+import type { HexAddress } from '@origin/shared/utils';
+import type { MouseEvent } from 'react';
+
+interface OpenAccountModalButtonProps extends ButtonProps {
+  connectLabel?: string;
+}
+
+export const OpenAccountModalButton = ({
+  connectLabel,
+  ...props
+}: OpenAccountModalButtonProps) => {
+  const intl = useIntl();
+
+  const handleClick =
+    (handler: () => void) => (evt: MouseEvent<HTMLButtonElement>) => {
+      if (props?.onClick) {
+        props.onClick(evt);
+      }
+      handler();
+    };
+
+  return (
+    <ConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openChainModal,
+        openConnectModal,
+        openAccountModal,
+        mounted,
+      }) => {
+        if (!mounted || !account || !chain) {
+          return (
+            <CustomButton
+              {...props}
+              connected={false}
+              onClick={handleClick(openConnectModal)}
+            >
+              {connectLabel ||
+                intl.formatMessage({ defaultMessage: 'Connect' })}
+            </CustomButton>
+          );
+        }
+
+        if (chain.unsupported) {
+          return (
+            <CustomButton
+              {...props}
+              connected
+              onClick={handleClick(openChainModal)}
+              color="warning"
+            >
+              {intl.formatMessage({
+                defaultMessage: 'Wrong Network',
+              })}
+            </CustomButton>
+          );
+        }
+
+        return (
+          <CustomButton
+            {...props}
+            connected
+            onClick={(evt: MouseEvent<HTMLButtonElement>) => {
+              if (props?.onClick) {
+                props.onClick(evt);
+              }
+              openAccountModal();
+            }}
+          >
+            <AddressLabel
+              address={account.address as HexAddress}
+              enableEnsName
+            />
+          </CustomButton>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+};

libs/shared/providers/src/wagmi/index.ts

@@ -0,0 +1,2 @@
+export * from './components/AddressLabel';
+export * from './components/OpenAccountModalButton';

libs/shared/providers/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": false
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

libs/shared/providers/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

nx.json

@@ -16,14 +16,25 @@
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
     },
     "e2e": {
-      "inputs": ["default", "^production"]
+      "inputs": [
+        "default",
+        "^production"
+      ]
     },
     "test": {
-      "inputs": ["default", "^production"]
+      "inputs": [
+        "default",
+        "^production"
+      ]
     },
     "lint": {
       "inputs": [
@@ -42,7 +53,10 @@
     }
   },
   "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
     "production": [
       "default",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",

package.json

@@ -12,15 +12,20 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.3",
+    "@rainbow-me/rainbowkit": "^1.0.9",
     "@react-hookz/web": "^23.1.0",
     "@tanstack/react-query": "^4.32.6",
     "@tanstack/react-table": "^8.9.3",
+    "immer": "^10.0.2",
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intl": "^6.4.4",
     "react-router-dom": "6.14.2",
-    "tslib": "^2.6.1"
+    "react-tracked": "^1.7.11",
+    "tslib": "^2.6.1",
+    "viem": "^1.7.0",
+    "wagmi": "^1.3.10"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.14.5",
@@ -54,6 +59,7 @@
     "@vitest/coverage-c8": "~0.33.0",
     "@vitest/ui": "~0.34.1",
     "babel-plugin-formatjs": "^10.5.3",
+    "buffer": "^6.0.3",
     "danger": "^11.2.7",
     "danger-plugin-github-notion": "^0.0.3",
     "eslint": "~8.46.0",