release: 1.0.0-beta.21.5

.gitignore

@@ -20,6 +20,7 @@
 .env.local
 .env.development.local
 .env.production.local
+.env.production
 
 /.netlify
 netlify.toml
@@ -49,3 +50,4 @@ mochawesome-report
 !src/pages/Swap/LimitOrderBox/generated/**/*
 storybook-static
 
+public/.well-known

bin/generate-wallet-connect-key/index.ts

@@ -0,0 +1,24 @@
+import dotenv from 'dotenv'
+import { mkdir, writeFile } from 'fs/promises'
+import { join, resolve } from 'path'
+
+dotenv.config({ path: resolve(__dirname, `../../.env.production`) })
+
+export async function main() {
+  const directoryAbsolutePath = './public/.well-known'
+  await mkdir(directoryAbsolutePath, { recursive: true })
+  const fileAbsolutePath = join(directoryAbsolutePath, '/walletconnect.txt')
+
+  await writeFile(fileAbsolutePath, process.env.WALLET_CONNECT_DOMAIN_VERIFICATION_TEXT ?? '')
+  console.log(
+    `Generated Wallet Connect text in ${fileAbsolutePath}`,
+    process.env.WALLET_CONNECT_DOMAIN_VERIFICATION_TEXT
+  )
+}
+
+if (require.main === module) {
+  main().catch(err => {
+    console.error(err)
+    process.exit(1)
+  })
+}

package.json

@@ -1,12 +1,12 @@
 {
   "name": "@swapr/frontend",
-  "version": "1.0.0-beta.21.4",
+  "version": "1.0.0-beta.21.5",
   "private": true,
   "description": "DXswap Decentralized Application",
   "license": "GPL-3.0-or-later",
   "scripts": {
     "start": "yarn codegen:socket && yarn codegen:graphql && react-app-rewired start",
-    "build": "yarn codegen:socket && yarn codegen:graphql && cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
+    "build": "yarn codegen:wallet-connect-domain-verification && yarn codegen:socket && yarn codegen:graphql && cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
     "build:serve": "yarn build && serve -s ./build -l 5001",
     "ipfs-build": "cross-env PUBLIC_URL=\".\" GENERATE_SOURCEMAP=false react-app-rewired build",
     "lint": "eslint src --ext js,jsx,ts,tsx",
@@ -31,7 +31,8 @@
     "storybook": "storybook dev -p 6006 -s public",
     "build-storybook": "storybook build -s public",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "codegen:graphql": "graphql-codegen --config graphql-codegen.yml"
+    "codegen:graphql": "graphql-codegen --config graphql-codegen.yml",
+    "codegen:wallet-connect-domain-verification": "./node_modules/.bin/ts-node --project ./bin/tsconfig.json ./bin/generate-wallet-connect-key/index.ts "
   },
   "dependencies": {
     "@apollo/client": "^3.7.5",

public/index.html

@@ -27,7 +27,7 @@
     <meta name="twitter:site" content="@Swapr_dapp" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'strict-dynamic' 'nonce-<%= CSP_NONCE %>' 'unsafe-inline' 'unsafe-eval'; script-src-attr 'none'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' data: ws: wss: http: https:; img-src 'self' data: blob: https:; font-src 'self' data:; media-src 'self' blob: https:; frame-src 'self' dexscreener.com  verify.walletconnect.com blob:; object-src 'self'; base-uri 'none'"
+      content="default-src 'self'; script-src 'strict-dynamic' 'nonce-<%= CSP_NONCE %>' 'unsafe-inline' 'unsafe-eval'; script-src-attr 'none'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' data: ws: wss: http: https:; img-src 'self' data: blob: https:; font-src 'self' data:; media-src 'self' blob: https:; frame-src 'self' dexscreener.com  verify.walletconnect.com verify.walletconnect.org blob:; object-src 'self'; base-uri 'none'"
     />
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <script nonce="<%= CSP_NONCE %>">

src/components/Web3ReactManager/index.tsx

@@ -23,10 +23,9 @@ const Message = styled.h2`
 
 export default function Web3ReactManager({ children }: { children: JSX.Element }) {
   const { t } = useTranslation('common')
-  const { isActive, connector, hooks, chainId } = useWeb3React()
-  const { useSelectedIsActive, usePriorityChainId } = hooks
+  const { isActive, hooks } = useWeb3React()
+  const { useSelectedIsActive } = hooks
   const networkIsActive = useSelectedIsActive(network)
-  const ativeChainId = usePriorityChainId()
   const targetedChainId = useTargetedChainIdFromUrl()
   const isUnsupportedChainIdError = useUnsupportedChainIdError()
 
@@ -35,22 +34,14 @@ export default function Web3ReactManager({ children }: { children: JSX.Element }
 
   //after eagerly trying injected, if the network connect ever isn't active or in an error state, activate itd
   useEffect(() => {
-    if (triedEager && !networkIsActive && !isActive && !isUnsupportedChainIdError) {
+    if (triedEager && !isUnsupportedChainIdError) {
       if (targetedChainId && Boolean(ChainId[targetedChainId])) {
         network.activate(targetedChainId)
+      } else {
+        network.activate()
       }
-      network.activate()
     }
-  }, [
-    triedEager,
-    targetedChainId,
-    isActive,
-    isUnsupportedChainIdError,
-    connector,
-    networkIsActive,
-    chainId,
-    ativeChainId,
-  ])
+  }, [triedEager, isUnsupportedChainIdError, targetedChainId])
 
   // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists
   useInactiveListener(!triedEager)

src/components/Web3Status/ConnectWalletPopover.tsx

@@ -103,7 +103,7 @@ interface ConnectWalletProps {
 }
 
 export const ConnectWalletPopover = ({ tryActivation, children }: ConnectWalletProps) => {
-  const { connector, isActive, hooks } = useWeb3React()
+  const { connector, isActive, hooks, account } = useWeb3React()
   const { useSelectedIsActive } = hooks
   const selectedIsActive = useSelectedIsActive(connector)
 
@@ -194,7 +194,7 @@ export const ConnectWalletPopover = ({ tryActivation, children }: ConnectWalletP
         content={
           <List data-testid="wallet-connect-list">
             {getOptions()}
-            {isActive && (
+            {isActive && Boolean(account) && (
               <DisconnectButton
                 onClick={() => connector && (connector.deactivate ? connector.deactivate() : connector.resetState())}
               >

src/components/Web3Status/index.tsx

@@ -114,10 +114,11 @@ export default function Web3Status() {
       connector.deactivate ? connector.deactivate() : connector.resetState()
     }
 
-    if (connector)
-      connector.activate()?.catch(error => {
+    if (connector) {
+      connector.activate(networkConnectorChainId)?.catch(error => {
         console.error('Error while activating connector: ', error)
       })
+    }
   }
 
   const toggleWalletSwitcherPopover = useWalletSwitcherPopoverToggle()

src/connectors/index.ts

@@ -35,8 +35,9 @@ export const [walletConnect, walletConnectHooks] = initializeConnector<WalletCon
       actions,
       options: {
         projectId: process.env.REACT_APP_WALLET_CONNECT_ID as string,
-        chains: [ChainId.MAINNET],
+        chains: [],
         optionalChains: [
+          ChainId.MAINNET,
           ChainId.RINKEBY,
           ChainId.ARBITRUM_ONE,
           ChainId.ARBITRUM_RINKEBY,
@@ -49,8 +50,27 @@ export const [walletConnect, walletConnectHooks] = initializeConnector<WalletCon
           ChainId.ZK_SYNC_ERA_MAINNET,
           ChainId.ZK_SYNC_ERA_TESTNET,
         ],
+        rpcMap: {
+          [ChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_PROJECT_ID}`,
+          [ChainId.XDAI]: 'https://rpc.gnosischain.com/',
+          [ChainId.ARBITRUM_ONE]: 'https://arb1.arbitrum.io/rpc',
+          [ChainId.POLYGON]: 'https://polygon-rpc.com/',
+          [ChainId.ARBITRUM_GOERLI]: 'https://goerli-rollup.arbitrum.io/rpc',
+          [ChainId.OPTIMISM_MAINNET]: 'https://mainnet.optimism.io',
+          [ChainId.OPTIMISM_GOERLI]: 'https://goerli.optimism.io',
+          [ChainId.BSC_MAINNET]: 'https://bsc-dataseed.binance.org/',
+          [ChainId.ZK_SYNC_ERA_MAINNET]: `https://mainnet.era.zksync.io`,
+          [ChainId.ZK_SYNC_ERA_TESTNET]: `https://testnet.era.zksync.dev`,
+        },
         showQrModal: true,
+        optionalMethods: ['eth_signTypedData', 'eth_signTypedData_v4', 'eth_sign', 'eth_sendTransaction'],
+        qrModalOptions: {
+          themeVariables: {
+            '--wcm-z-index': '199',
+          },
+        },
       },
+      onError: error => console.log('Wallet Connect error: ', error),
     })
 )