Merge pull request #424 from commons-stack/feat/support_multiple_wallets

Feat/support multiple wallets

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Support multiple wallets: WalletConneect, Trust, Rainbow etc #424
+
 ### Fixed
 
 - Improve dapp responsiviness #190 #356

packages/api/.gitignore

@@ -5,4 +5,5 @@ node_modules
 tsconfig.tsbuildinfo
 uploads/*
 !*uploads/praise_logo.png
+!*uploads/gnosischain_logo.png
 .nyc_output

packages/api/src/activate/controllers.ts

@@ -12,19 +12,7 @@ import { UserAccountModel } from '@useraccount/entities';
 import { ethers } from 'ethers';
 import { Response } from 'express';
 import { ActivateRequestBody } from './types';
-
-const generateLoginMessage = (
-  accountId: string,
-  ethereumAddress: string,
-  token: string
-): string => {
-  return (
-    'SIGN THIS MESSAGE TO ACTIVATE YOUR ACCOUNT.\n\n' +
-    `ACCOUNT ID:\n${accountId}\n\n` +
-    `ADDRESS:\n${ethereumAddress}\n\n` +
-    `TOKEN:\n${token}`
-  );
-};
+import { generateActivateMessage } from './utils';
 
 const activate = async (
   req: TypedRequestBody<ActivateRequestBody>,
@@ -46,7 +34,7 @@ const activate = async (
     throw new BadRequestError('User account already activated.');
 
   // Generate expected message, token included.
-  const generatedMsg = generateLoginMessage(
+  const generatedMsg = generateActivateMessage(
     accountId,
     ethereumAddress,
     userAccount.activateToken
@@ -68,6 +56,7 @@ const activate = async (
 
   // Link user account with user
   userAccount.user = user;
+  userAccount.activateToken = undefined;
   await userAccount.save();
 
   await logEvent(EventLogTypeKey.AUTHENTICATION, 'Activated account', {

packages/api/src/activate/utils.ts

@@ -0,0 +1,12 @@
+export const generateActivateMessage = (
+  accountId: string,
+  ethereumAddress: string,
+  token: string
+): string => {
+  return (
+    'SIGN THIS MESSAGE TO ACTIVATE YOUR ACCOUNT.\n\n' +
+    `ACCOUNT ID:\n${accountId}\n\n` +
+    `ADDRESS:\n${ethereumAddress}\n\n` +
+    `TOKEN:\n${token}`
+  );
+};

packages/api/src/auth/controllers.ts

@@ -24,17 +24,10 @@ import {
   RefreshRequestInput,
   TokenSet,
 } from './types';
+import { generateLoginMessage } from './utils';
 
 const jwtService = new JwtService();
 
-const generateLoginMessage = (account: string, nonce: string): string => {
-  return (
-    'SIGN THIS MESSAGE TO LOGIN TO PRAISE.\n\n' +
-    `ADDRESS:\n${account}\n\n` +
-    `NONCE:\n${nonce}`
-  );
-};
-
 /**
  * Description
  * @param

packages/api/src/auth/utils.ts

@@ -16,3 +16,14 @@ export const extractAccessTokenFromRequest = (req: Request): string => {
 
   return accessToken;
 };
+
+export const generateLoginMessage = (
+  account: string,
+  nonce: string
+): string => {
+  return (
+    'SIGN THIS MESSAGE TO LOGIN TO PRAISE.\n\n' +
+    `ADDRESS:\n${account}\n\n` +
+    `NONCE:\n${nonce}`
+  );
+};

packages/frontend/craco.config.js

@@ -20,4 +20,22 @@ module.exports = {
   eslint: {
     enable: false, //TODO enable eslint during build
   },
+  webpack: {
+    configure: {
+      resolve: {
+        /**
+         * with CRA 5 (webpack5), webpack no longer ships with node polyfills.
+         * Craco's team is looking to give it up (https://github.com/gsoft-inc/craco/issues/415).
+         * Possible alternatives: react-app-rewired or ejecting from CRA
+         */
+        fallback: {
+          'util': require.resolve("util/"),
+        },
+      },
+      // with CRA 5 (webpack5), sourceMapLoader now complains about every third-party app that was compiled from
+      // typescript but doesn't have 'ts' files.  This line ignores them.
+      // See: https://github.com/facebook/create-react-app/issues/11924
+      ignoreWarnings: [/to parse source map/i],
+    }
+  }
 };

packages/frontend/package.json

@@ -14,13 +14,11 @@
     "@fortawesome/react-fontawesome": "^0.1.17",
     "@headlessui/react": "^1.4.1",
     "@mui/material": "^5.3.0",
+    "@rainbow-me/rainbowkit": "^0.2.0",
     "@tailwindcss/forms": "latest",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "@ukstv/jazzicon-react": "^1.0.0",
-    "@web3-react/abstract-connector": "^6.0.7",
-    "@web3-react/core": "latest",
-    "@web3-react/injected-connector": "^6.0.7",
     "api": "workspace:^",
     "autoprefixer": "^10.4.7",
     "axios": "^0.22.0",
@@ -38,6 +36,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "ethers": "^5.6.8",
     "final-form": "^4.20.4",
     "jstz": "^2.1.1",
     "jwt-decode": "^3.1.2",
@@ -61,11 +60,13 @@
     "recoil-persist": "^4.0.0",
     "source-map-explorer": "^2.5.2",
     "tailwindcss": "^3.0.24",
-    "use-error-boundary": "^2.0.6"
+    "use-error-boundary": "^2.0.6",
+    "util": "^0.12.4",
+    "wagmi": "^0.4.3"
   },
   "scripts": {
     "build": "craco build",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "analyze": "yarn run build && source-map-explorer 'build/static/js/*.js'",
     "load-env": "env-cmd --silent --no-override -f ../../.env env-cmd --silent --no-override",
     "start": "TAILWIND_MODE=watch yarn run load-env craco start",
     "lint": "eslint . --ext .ts --ext .tsx",
@@ -91,4 +92,4 @@
     "@types/react-table": "^7.7.6",
     "typescript": "^4.5.5"
   }
-}
+}

packages/frontend/src/components/account/EthAccount.tsx

@@ -0,0 +1,53 @@
+import { shortenEthAddress } from 'api/dist/user/utils';
+import { Jazzicon } from '@ukstv/jazzicon-react';
+import { useAccount } from 'wagmi';
+import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+import EthAccountDialog from './EthAccountDialog';
+
+interface EthAccountParams {
+  className?: string;
+  showDownCaret?: boolean;
+  showRightCaret?: boolean;
+}
+
+export default function EthAccount({
+  className,
+  showDownCaret = true,
+  showRightCaret = false,
+}: EthAccountParams): JSX.Element | null {
+  const { data } = useAccount();
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+
+  if (!data?.address) return null;
+
+  return (
+    <>
+      <div
+        className={`flex justify-between items-center cursor-pointer ${className}`}
+        onClick={(): void => setIsDialogOpen(true)}
+      >
+        <div className="flex items-center space-x-2">
+          <div className="inline-block h-5">
+            <Jazzicon address={data.address} className="w-4 h-4" />
+          </div>
+          <span>{shortenEthAddress(data.address)}</span>
+        </div>
+        <div>
+          {showDownCaret && (
+            <FontAwesomeIcon icon={faAngleDown} className="w-4 h-4" />
+          )}
+          {showRightCaret && (
+            <FontAwesomeIcon icon={faAngleRight} className="w-4 h-4" />
+          )}
+        </div>
+      </div>
+      <EthAccountDialog
+        open={isDialogOpen}
+        address={data.address}
+        onClose={(): void => setIsDialogOpen(false)}
+      />
+    </>
+  );
+}