V2.2

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.15",
+  "version": "2.2.22",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/react-wallet/example/package.json

@@ -10,7 +10,7 @@
     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.42.0",
+    "@blueprintjs/core": "^3.44.2",
     "@sovryn/react-wallet": "link:../dist",
     "@sovryn/wallet": "link:../../wallet/dist",
     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",

packages/react-wallet/example/tsconfig.json

@@ -15,7 +15,6 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "allowSyntheticDefaultImports": true,

packages/react-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovryn/react-wallet",
-  "version": "2.2.15",
+  "version": "2.2.22",
   "description": "Made with create-react-library",
   "author": "Rytis Grincevicius",
   "license": "MIT",
@@ -30,10 +30,10 @@
   "dependencies": {
     "@blueprintjs/core": "^3.44.2",
     "@hookstate/core": "^3.0.6",
-    "@sovryn/wallet": "^2.2.15",
+    "@sovryn/wallet": "^2.2.18",
     "@types/classnames": "^2.2.11",
     "@types/react-copy-to-clipboard": "^5.0.0",
-    "caniuse-lite": "^1.0.30001287",
+    "caniuse-lite": "^1.0.30001507",
     "classnames": "^2.2.6",
     "detect-browser": "^5.2.0",
     "ethereumjs-util": "^7.0.9",
@@ -48,7 +48,7 @@
     "web3-core": "^1.3.6"
   },
   "peerDependencies": {
-    "@blueprintjs/core": "^3.41.0",
+    "@blueprintjs/core": "^3.44.2",
     "react": "^16.0.0"
   },
   "devDependencies": {
@@ -82,7 +82,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5"
+    "typescript": "~5.1.3"
   },
   "gitHead": "72b7095c24d501379e25a4938c756808d78b0e5a"
 }

packages/react-wallet/src/components/Item/index.tsx

@@ -121,11 +121,10 @@ export function WalletItem(props: WalletItemProps) {
   return (
     <ItemLink
       options={props.options}
-      image={props.image}
-      title={props.title}
       small={props.small}
       href={walletItemHref()}
       dataAttribute={props.dataAttribute}
+      {...props}
     />
   );
 }

packages/react-wallet/src/components/ItemList/index.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   margin: 35px 0;
 }

packages/react-wallet/src/components/WalletConnectionSteps/BrowserWalletSelector/index.tsx

@@ -8,22 +8,29 @@ import { images } from '../../../assets/images';
 import { PORTIS_SUPPORTED_CHAINS } from '../../../contants';
 import { translations } from '../../../locales/i18n';
 import { BottomLinkContainer } from '../../BottomLinkContainer';
-import { Item, ItemLink } from '../../Item';
+import { Item, ItemLink, WalletItem } from '../../Item';
 import { ItemList } from '../../ItemList';
 
 interface Props {
   onWalletSelected: (value: ProviderType) => void;
   hideInstructionLink?: boolean;
 }
 
-const wallet = detectInjectableWallet();
+let initialWallet = 'none';
+detectInjectableWallet().then(value => initialWallet = value);
 
 export function BrowserWalletSelector(props: Props) {
   const { t } = useTranslation();
   const { expectedChainId, signTypedRequired, options } = React.useContext(
     WalletContext,
   );
 
+  const [wallet, setWallet] = React.useState<string>(initialWallet);
+
+  React.useEffect(() => {
+    detectInjectableWallet().then(setWallet);
+  }, []);
+
   return (
     <div>
       <h1>{t(translations.dialogs.browserSelector.title)}:</h1>
@@ -67,6 +74,19 @@ export function BrowserWalletSelector(props: Props) {
             dataAttribute='browserType-nifty'
           />
         )}
+
+        {wallet === 'defiant' && (
+          <WalletItem
+            options={options}
+            image={images.defiantWallet}
+            title='Defiant'
+            onClick={() => props.onWalletSelected(ProviderType.WEB3)}
+            linkHref='https://defiantapp.tech/'
+            linkTitle={t(translations.dialogs.browserSelector.download)}
+            dataAttribute='browserType-defiant'
+          />
+        )}
+
         {(['metamask', 'unknown'].includes(wallet) ||
           (signTypedRequired && wallet === 'liquality')) && (
           <Item
@@ -107,18 +127,31 @@ export function BrowserWalletSelector(props: Props) {
   );
 }
 
-function detectInjectableWallet() {
+let checks = 0;
+
+async function detectInjectableWallet() {
   const { ethereum } = window as any;
+
+  while (!ethereum && checks < 5) {
+    await sleep(1000);
+    checks++;
+  }
+
   if (ethereum) {
     ethereum.autoRefreshOnNetworkChange = false;
     if (ethereum.isLiquality) return 'liquality';
     if (ethereum.isNiftyWallet) return 'nifty';
+    // Defiant is discontinued
+    if (ethereum.isDefiant) return 'defiant';
+    // MetaMask must be last of the injected wallets
     if (ethereum.isMetaMask) return 'metamask';
     return 'unknown';
   }
   return 'none';
 }
 
+const sleep = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
+
 const P = styled.p`
   margin: 0 auto;
   text-align: center;

packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.module.css

@@ -0,0 +1,27 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  color: #ff0000;
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+.subtitle {
+  color: #ff0000;
+  margin-bottom: 3px;
+  font-size: 14px;
+}
+.link {
+  color: #ff0000 !important;
+  text-decoraton: underline;
+}
+
+@media (min-width: 768px) {
+  .title {
+    margin-top: -15px;
+  }
+}

packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.tsx

@@ -8,6 +8,8 @@ import { translations } from '../../../locales/i18n';
 import { useTranslation } from 'react-i18next';
 import { WalletContext } from '../../..';
 import { isWalletVisibleForSignTyped } from '../../../helpers';
+import style from './index.module.css';
+
 interface Props {
   onWalletSelected: (value: ProviderType) => void;
   hideInstructionLink?: boolean;
@@ -38,15 +40,26 @@ export function HardwareWalletSelector(props: Props) {
           ProviderType.TREZOR,
           signTypedRequired,
         ) && (
-          <Item
-            options={options}
-            image={images.trezorWallet}
-            title='Trezor'
-            onClick={() => props.onWalletSelected(ProviderType.TREZOR)}
-            linkHref='https://trezor.io/?offer_id=12&aff_id=7144&source=sovryn'
-            linkTitle='Buy Now'
-            dataAttribute='hardwareWallet-trezor'
-          />
+          <div className={style.item}>
+            <Item
+              options={options}
+              image={images.trezorWallet}
+              title='Trezor'
+              disabled
+              onClick={() => props.onWalletSelected(ProviderType.TREZOR)}
+              dataAttribute='hardwareWallet-trezor'
+            />
+            <p className={style.title}>{t(translations.deprecated)}</p>
+            <p className={style.subtitle}>{t(translations.trezorDescription)}</p>
+            <a
+              className={style.link}
+              href='https://wiki.sovryn.com/en/getting-started/trezor-deprecation'
+              target='_blank'
+              rel='noreferrer nofollow'
+            >
+              {t(translations.dialogs.walletConnect.learn)}
+            </a>
+          </div>
         )}
       </ItemList>
       {!props.hideInstructionLink && (

packages/react-wallet/src/components/WalletConnectionSteps/ProviderTypeSelector/index.module.css

@@ -0,0 +1,22 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  color: #ff0000;
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+.link {
+  color: #ff0000!important;
+  text-decoraton: underline;
+}
+
+@media (min-width: 768px) {
+  .title {
+    margin-top: -15px;
+  }
+}

packages/react-wallet/src/components/WalletConnectionSteps/ProviderTypeSelector/index.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../../helpers';
 import { ProviderType } from '@sovryn/wallet';
 import { WalletContext } from '../../..';
-import { WALLET_CONNECT_SUPPORTED_CHAINS } from '../../../contants';
+import style from './index.module.css';
 
 interface Props {
   onStep: (value: WalletConnectionStep) => void;
@@ -22,7 +22,7 @@ interface Props {
 
 export function ProviderTypeSelector(props: Props) {
   const { t } = useTranslation();
-  const { signTypedRequired, expectedChainId, options } = React.useContext(
+  const { signTypedRequired, options } = React.useContext(
     WalletContext,
   );
   return (
@@ -43,21 +43,18 @@ export function ProviderTypeSelector(props: Props) {
             dataAttribute='walletType-hardware'
           />
         )}
-        {isWalletVisibleForSignTyped(
-          ProviderType.WALLET_CONNECT,
-          signTypedRequired,
-        ) &&
-          WALLET_CONNECT_SUPPORTED_CHAINS.includes(expectedChainId!) && (
-            <Item
-              options={options}
-              image={images.mobileWallets}
-              title={t(translations.dialogs.providerTypes.items.mobile)}
-              onClick={() =>
-                props.onStep(WalletConnectionStep.WALLET_CONNECT_PROVIDERS)
-              }
-              dataAttribute='walletType-mobile'
-            />
-          )}
+        <div className={style.item}>
+          <Item
+            options={options}
+            image={images.mobileWallets}
+            title={t(translations.dialogs.providerTypes.items.mobile)}
+            onClick={() => {}}
+            dataAttribute='walletType-mobile'
+          />
+          <p className={style.title}>{t(translations.dialogs.walletConnect.deprecated)}</p>
+          <a className={style.link} href="https://wiki.sovryn.com/en/getting-started/deprecation-notice-walletconnect-v1-0-sovryn-alpha" target="_blank" rel="noreferrer nofollow">{t(translations.dialogs.walletConnect.learn)}</a>
+        </div>
+
         {isWalletVisibleForSignTyped(ProviderType.WEB3, signTypedRequired) && (
           <Item
             options={options}