Add PolkaGate Extension (#158)

* Add PolkaGate

* Update Yarn on CI

* Change dependency installation command

* Update yarn.lock

* Make linter happy

* Supress sass deprecation warning

---------

Co-authored-by: Lauro Gripa <laurogripa@gmail.com>

.github/workflows/main.yml

@@ -22,7 +22,15 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: yarn ci
+
+    - name: Enable Corepack
+      run: corepack enable
+
+    - name: Prepare Yarn 4.1.1
+      run: corepack prepare yarn@4.1.1 --activate
+
+    - name: Install dependencies
+      run: yarn install --immutable
 
     - name: Run the tests and generate coverage report
       run: yarn test --coverage

.yarnrc.yml

@@ -1,4 +1,5 @@
 nodeLinker: node-modules
+
 packageExtensions:
   babel-preset-react-app@*:
     dependencies:

package.json

@@ -21,9 +21,9 @@
     "@polkadot/util": "^12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
     "@popperjs/core": "^2.11.8",
-    "@talismn/connect-wallets": "1.2.3",
+    "@talismn/connect-wallets": "1.2.5",
     "bfj": "^8.0.0",
-    "bootstrap": "5.3.2",
+    "bootstrap": "^5.3.3",
     "camelcase": "^8.0.0",
     "css-loader": "6.10.0",
     "dotenv": "16.4.2",
@@ -56,14 +56,14 @@
     "react-router-dom": "6.22.0",
     "resolve": "1.22.8",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.70.0",
+    "sass": "~1.64.2",
     "sass-loader": "^14.1.0",
     "semver": "7.6.0",
     "slugify": "^1.6.6",
     "style-loader": "3.3.4",
     "styled-components": "^6.1.8",
     "ts-pnp": "1.2.0",
-    "typescript": "^5.3.3",
+    "typescript": "~5.3.3",
     "url": "^0.11.3",
     "url-loader": "4.1.1",
     "web-vitals": "^3.5.2"
@@ -121,7 +121,6 @@
     "workbox-webpack-plugin": "7.0.0"
   },
   "resolutions": {
-    "**/node-forge": "^1.3.0",
     "lodash.pick@>=3.7.0 <4.17.19": "https://github.com/lodash/lodash/archive/f299b52f39486275a9e6483b60a410e06520c538.tar.gz",
     "postprocessing": "6.24.1",
     "react-error-overlay": "6.0.9",
@@ -131,7 +130,6 @@
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider node scripts/build.js",
     "chopsticks": "npx @acala-network/chopsticks@latest --config=config/kusama.yml",
-    "ci": "yarn install --immutable",
     "cy:open": "cypress open",
     "deploy": "gh-pages -d build",
     "eslint:fix": "eslint \"{src,apps,libs,test}/**/*.{ts,tsx}\" --fix",
@@ -153,5 +151,6 @@
     "not android <= 4.4.4",
     "not dead",
     "not op_mini all"
-  ]
+  ],
+  "packageManager": "yarn@4.5.0"
 }

src/components/LinkWithQuery.tsx

@@ -1,25 +1,30 @@
+import React from 'react'
 import { Link, LinkProps, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 
-const LinkWithQuery = ({ children, to, ...props }: LinkProps & React.RefAttributes<HTMLAnchorElement>) => {
-  const { search } = useLocation()
-  const isSelected = location.pathname === to.toString() || location.pathname === to.toString() + '/'
+interface LinkWithQueryProps extends Omit<LinkProps, 'to'> {
+  to: string
+  children: React.ReactNode
+}
 
+const LinkWithQuery: React.FC<LinkWithQueryProps> = ({ children, to, ...props }) => {
+  const { search, pathname } = useLocation()
+  const isSelected = pathname === to || pathname === to + '/'
   return (
-    <StyledLink to={to + search} {...props} selected={isSelected}>
+    <StyledLink to={to + search} {...props} $selected={isSelected}>
       {children}
     </StyledLink>
   )
 }
 
-interface StyledLinkProps extends LinkProps {
-  selected?: boolean
+interface StyledLinkProps {
+  $selected?: boolean
 }
 
 const StyledLink = styled(Link)<StyledLinkProps>`
-  color: ${(props) => props.selected && 'white !important'};
-  pointer-events: ${(props) => (props.selected ? 'none' : 'auto')};
-  cursor: ${(props) => (props.selected ? 'default' : 'pointer')};
+  color: ${(props) => props.$selected && 'white !important'};
+  pointer-events: ${(props) => (props.$selected ? 'none' : 'auto')};
+  cursor: ${(props) => (props.$selected ? 'default' : 'pointer')};
 `
 
 export { LinkWithQuery }

src/components/NextStep.tsx

@@ -6,10 +6,10 @@ import { Button } from 'react-bootstrap'
 import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 import { LinkWithQuery } from './LinkWithQuery'
-import { isVotingPeriod } from './rotation-bar/helpers/periods'
 import { useAccount } from '../account/AccountContext'
 import { StatusChangeHandler, doTx } from '../helpers/extrinsics'
 import { useKusama } from '../kusama/KusamaContext'
+import { isVotingPeriod } from './rotation-bar/helpers/periods'
 import { LoadingSpinner } from '../pages/explore/components/LoadingSpinner'
 import { toastByStatus } from '../pages/explore/helpers'
 

src/helpers/wallets.ts

@@ -17,6 +17,13 @@ class NovaWallet extends BaseDotsamaWallet {
   }
 }
 
-const wallets = [...getWallets(), new NovaWallet()]
+// Define supported wallet extensions to ensure compatibility.
+// We introduced the SUPPORTED_WALLETS constant to filter out unsupported wallets returned by getWallets(),
+// reducing the risk of errors from untested or incompatible wallets.
+const SUPPORTED_WALLETS = ['talisman', 'subwallet-js', 'polkadot-js', 'enkrypt', 'polkagate']
+
+const filteredWallets = getWallets().filter(({ extensionName }) => SUPPORTED_WALLETS.includes(extensionName))
+
+const wallets = [...filteredWallets, new NovaWallet()]
 
 export { wallets }