[feat] Portis wallet support

package.json

@@ -29,6 +29,7 @@
     "@subgraphs/eip721-matic": "^1.0.1",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
+    "@web3-react/portis-connector": "^6.2.9",
     "@web3-react/walletconnect-connector": "^6.2.8",
     "@web3-react/walletlink-connector": "^6.2.8",
     "babel-plugin-macros": "^3.1.0",

src/components/Connect/Connect.tsx

@@ -7,6 +7,7 @@ import React, { Fragment, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectConnectingStatus, setConnectingStatus, setEagerAttempt } from 'state/reducers/user';
 import MetamaskConnect from './MetamaskConnect';
+import PortisConnect from './PortisConnect';
 import WalletConnectConnect from './WalletConnectConnect';
 import WalletLinkConnect from './WalletLinkConnect';
 
@@ -71,6 +72,7 @@ const Connect: React.FC = () => {
 													<MetamaskConnect />
 													<WalletConnectConnect />
 													<WalletLinkConnect />
+													<PortisConnect />
 												</div>
 											</div>
 										</div>

src/components/Connect/PortisConnect.tsx

@@ -0,0 +1,40 @@
+import { UserRejectedRequestError } from '@web3-react/injected-connector';
+import { portis } from 'connectors';
+import { useActiveWeb3React } from 'hooks/useActiveWeb3React';
+import React from 'react';
+
+const PortisConnect: React.FC = () => {
+	const { error, activate, setError } = useActiveWeb3React();
+
+	if (error) {
+		return null;
+	}
+
+	return (
+		<>
+			<div className="m-2 min-w-full">
+				<div className="dark:text-gray-50 border dark:border-gray-600 dark:border-opacity-40 dark:bg-gray-800 transition-colors duration-300 ease-in-out dark:hover:bg-pink-900 dark:hover:border-pink-800 p-4 m-auto rounded-lg w-full flex gap-4">
+					<button
+						className="flex-1"
+						onClick={() => {
+							activate(portis, undefined, true).catch((error) => {
+								// ignore the error if it's a user rejected request
+								if (!(error instanceof UserRejectedRequestError)) {
+									setError(error);
+								}
+							});
+						}}
+					>
+						<div className="flex">Portis</div>
+					</button>
+
+					<div className="right-0 flex-none">
+						<img src="/assets/wallets/portis.png" alt="Portis logo." width={24} height={24} />
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default PortisConnect;

src/connectors.ts

@@ -1,9 +1,12 @@
 import { InjectedConnector } from '@web3-react/injected-connector';
+import { PortisConnector } from '@web3-react/portis-connector';
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector';
 import { WalletLinkConnector } from '@web3-react/walletlink-connector';
-import { ALL_SUPPORTED_CHAIN_IDS, RPC_URLS, SupportedChainId } from 'constants/chains';
+import { ALL_SUPPORTED_CHAIN_IDS, CHAIN_INFO, RPC_URLS, SupportedChainId } from 'constants/chains';
 import SHIBUI_LOGO from './public/logo.svg';
 
+export const PORTIS_ID = process.env.NEXT_PUBLIC_PORTIS_ID;
+
 export const metamask = new InjectedConnector({
 	supportedChainIds: ALL_SUPPORTED_CHAIN_IDS
 });
@@ -20,3 +23,13 @@ export const walletlink = new WalletLinkConnector({
 	appLogoUrl: SHIBUI_LOGO,
 	supportedChainIds: [SupportedChainId.BOBA]
 });
+
+export const portis = new PortisConnector({
+	dAppId: PORTIS_ID ?? '',
+	networks: [
+		{
+			chainId: SupportedChainId.BOBA.toString(),
+			nodeUrl: CHAIN_INFO[SupportedChainId.BOBA].addNetworkInfo.rpcUrl
+		}
+	]
+});

src/example.env

@@ -2,3 +2,4 @@ NEXT_PUBLIC_MAINNET_KEY=
 NEXT_PUBLIC_DEFAULT_CHAIN=288
 NEXT_PUBLIC_IPFS_RESOLVER=https://ipfs.quantumly.dev/ipfs/
 NEXT_PUBLIC_CORS_PROXY=https://eap.quantumly.workers.dev/corsproxy/?apiurl=
+NEXT_PUBLIC_PORTIS_ID=