Merge pull request #958 from crypto-com/dev

Internal Release v0.6.6

CHANGELOG.md

@@ -5,12 +5,24 @@ All notable changes to this project will be documented in this file.
 *Unreleased*
 
 *Released*
+## [v0.6.6] - 2022-01-26
+### Additions
+- Full DApp Browser Support on Cronos
+- Ledger Support in DApp Browser
+- UX flow improvement on Ledger Support
+- Restake rewards button
+- Search function in Validator List
+
+### Bug fixes
+- Add loading spin in Staking table list
+
 ## [v0.6.5] - 2022-01-19
 ### Bug fixes
 - NFT transaction list sorted by time
 - Bridge transaction list sorted by time
 - Repeated records in NFT transaction list when switching page
 - Incorrect Explorer URL after settings update on Cronos Assets
+- Remove CRC721 token from Assets List
 
 ## [v0.6.4] - 2022-01-13
 ### Additions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chain-desktop-wallet",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Crypto.com Chain Desktop Wallet App",
   "repository": "github:crypto-com/chain-desktop-wallet",
   "author": "Crypto.org <[email protected]>",
@@ -58,6 +58,7 @@
     "react-script": "2.0.5",
     "react-sticky-mouse-tooltip": "0.0.1",
     "recoil": "0.1.3",
+    "recoil-nexus": "0.3.15",
     "scrypt-js": "3.0.1",
     "stylelint-config-css-modules": "2.2.0",
     "stylelint-config-prettier": "8.0.2",
@@ -343,4 +344,4 @@
     "json-schema": "0.4.0",
     "follow-redirects": "1.14.7"
   }
-}
+}

src/components/LedgerNotification/LedgerNotification.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { Button, notification } from 'antd';
+import { setRecoil } from 'recoil-nexus';
+import i18n from '../../language/I18n';
+import { LedgerConnectedApp, ledgerIsConnectedState } from '../../recoil/atom';
+import { Wallet } from '../../models/Wallet';
+import IconEth from '../../svg/IconEth';
+import IconCro from '../../svg/IconCro';
+import { createLedgerDevice, LEDGER_WALLET_TYPE } from '../../service/LedgerService';
+import { UserAsset, UserAssetType } from '../../models/UserAsset';
+
+export function ledgerNotification(wallet: Wallet, asset: UserAsset) {
+  const { assetType } = asset;
+
+  const LedgerNotificationKey = 'LedgerNotification';
+  const LedgerSuccessNotificationKey = 'LedgerSuccessNotification';
+  const LedgerErrorNotificationKey = 'LedgerErrorNotification';
+
+  const clickCheckLedger = async () => {
+    try {
+      const { addressIndex, config, walletType } = wallet;
+      const addressprefix = config.network.addressPrefix;
+      if (LEDGER_WALLET_TYPE === walletType) {
+        const device = createLedgerDevice();
+        if (assetType === UserAssetType.TENDERMINT || assetType === UserAssetType.IBC) {
+          const ledgerAddress = await device.getAddress(addressIndex, addressprefix, true);
+
+          if (ledgerAddress === wallet.address) {
+            setRecoil(ledgerIsConnectedState, LedgerConnectedApp.CRYPTO_ORG);
+            notification.close(LedgerNotificationKey);
+            notification.close(LedgerErrorNotificationKey);
+            notification.success({
+              message: i18n.t('home.ledgerModalPopup.tendermintAsset.title1'),
+              description: i18n.t('home.ledgerModalPopup.tendermintAsset.description1'),
+              placement: 'topRight',
+              duration: 2,
+              key: LedgerSuccessNotificationKey,
+            });
+          } else {
+            notification.error({
+              message: i18n.t('general.ledgerNotification.error.addressMismatch.title'),
+              description: i18n.t('general.ledgerNotification.error.addressMismatch.description'),
+              duration: 10,
+              key: LedgerErrorNotificationKey,
+            });
+          }
+        }
+        if (
+          assetType === UserAssetType.EVM ||
+          assetType === UserAssetType.CRC_20_TOKEN ||
+          assetType === UserAssetType.ERC_20_TOKEN
+        ) {
+          const ledgerAddress = await device.getEthAddress(addressIndex, true);
+
+          if (ledgerAddress === asset.address) {
+            setRecoil(ledgerIsConnectedState, LedgerConnectedApp.ETHEREUM);
+            notification.close(LedgerNotificationKey);
+            notification.close(LedgerErrorNotificationKey);
+            notification.success({
+              message: i18n.t('home.ledgerModalPopup.tendermintAsset.title1'),
+              description: i18n.t('home.ledgerModalPopup.tendermintAsset.description1'),
+              placement: 'topRight',
+              duration: 2,
+              key: LedgerSuccessNotificationKey,
+            });
+          } else {
+            notification.error({
+              message: i18n.t('general.ledgerNotification.error.addressMismatch.title'),
+              description: i18n.t('general.ledgerNotification.error.addressMismatch.description'),
+              duration: 10,
+              key: LedgerErrorNotificationKey,
+            });
+          }
+        }
+      }
+    } catch (e) {
+      notification.error({
+        message: i18n.t('receive.notification.ledgerConnect.message'),
+        description: (
+          <>
+            {i18n.t('receive.notification.ledgerConnect.description')}
+            <br /> -{' '}
+            <a
+              href="https://crypto.org/docs/wallets/ledger_desktop_wallet.html#ledger-connection-troubleshoot"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {i18n.t('general.errorModalPopup.ledgerTroubleshoot')}
+            </a>
+          </>
+        ),
+        placement: 'topRight',
+        duration: 10,
+        key: LedgerErrorNotificationKey,
+      });
+      setRecoil(ledgerIsConnectedState, LedgerConnectedApp.NOT_CONNECTED);
+    }
+  };
+
+  const checkLedgerBtn = (
+    <Button
+      type="primary"
+      size="small"
+      className="btn-restart"
+      onClick={() => {
+        clickCheckLedger();
+      }}
+      style={{ height: '30px', margin: '0px', lineHeight: 1.0 }}
+    >
+      {i18n.t('general.connect')}
+    </Button>
+  );
+
+  switch (assetType) {
+    case UserAssetType.EVM:
+    case UserAssetType.CRC_20_TOKEN:
+    case UserAssetType.ERC_20_TOKEN:
+      notification.open({
+        key: LedgerNotificationKey,
+        message: i18n.t('create.ledgerModalPopup.evmAddress.title2'),
+        description: <div>{i18n.t('create.ledgerModalPopup.evmAddress.description2')}</div>,
+        duration: 60,
+        placement: 'topRight',
+        className: 'notification-ledger',
+        icon: (
+          <div className="ledger-app-icon">
+            <IconEth style={{ color: '#fff' }} />
+          </div>
+        ),
+        btn: checkLedgerBtn,
+      });
+      break;
+    case UserAssetType.TENDERMINT:
+    case UserAssetType.IBC:
+      notification.open({
+        key: LedgerNotificationKey,
+        message: i18n.t('create.ledgerModalPopup.tendermintAddress.title2'),
+        description: <div>{i18n.t('create.ledgerModalPopup.tendermintAddress.description2')}</div>,
+        duration: 60,
+        placement: 'topRight',
+        className: 'notification-ledger',
+        icon: (
+          <div className="ledger-app-icon">
+            <IconCro style={{ color: '#fff' }} />
+          </div>
+        ),
+        btn: checkLedgerBtn,
+      });
+      break;
+    default:
+      break;
+  }
+}

src/hooks/useCronosAsset.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+import { walletAllAssetsState } from '../recoil/atom';
+import { getCronosAsset } from '../utils/utils';
+
+export const useCronosAsset = () => {
+  const allAssets = useRecoilValue(walletAllAssetsState);
+
+  const cronosAsset = useMemo(() => {
+    return getCronosAsset(allAssets);
+  }, [allAssets]);
+
+  return cronosAsset;
+};

src/hooks/useDefaultWalletAsset.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { UserAsset } from '../models/UserAsset';
+import { sessionState } from '../recoil/atom';
+import { walletService } from '../service/WalletService';
+
+export function useDefaultWalletAsset() {
+  const currentSession = useRecoilValue(sessionState);
+  const [defaultAsset, setDefaultAsset] = useState<UserAsset>();
+
+  useEffect(() => {
+    const syncAssetData = async () => {
+      const currentWalletAsset = await walletService.retrieveDefaultWalletAsset(currentSession);
+      setDefaultAsset(currentWalletAsset);
+    };
+
+    syncAssetData();
+  }, [currentSession]);
+
+  return { defaultAsset };
+}

src/hooks/useLedgerStatus.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { UserAsset, UserAssetType } from '../models/UserAsset';
+import { LedgerConnectedApp, ledgerIsConnectedState } from '../recoil/atom';
+
+interface Props {
+  asset: UserAsset | undefined;
+}
+
+export const useLedgerStatus = (props: Props) => {
+  const { asset } = props;
+
+  const ledgerConnectedApp = useRecoilValue(ledgerIsConnectedState);
+  const [isLedgerConnected, setIsLedgerConnected] = useState<boolean>();
+
+  useEffect(() => {
+    const checkIsLedgerConnected = () => {
+      if (asset?.assetType === UserAssetType.TENDERMINT || asset?.assetType === UserAssetType.IBC) {
+        setIsLedgerConnected(ledgerConnectedApp === LedgerConnectedApp.CRYPTO_ORG);
+      } else if (
+        asset?.assetType === UserAssetType.EVM ||
+        asset?.assetType === UserAssetType.CRC_20_TOKEN ||
+        asset?.assetType === UserAssetType.ERC_20_TOKEN
+      ) {
+        setIsLedgerConnected(ledgerConnectedApp === LedgerConnectedApp.ETHEREUM);
+      } else {
+        setIsLedgerConnected(false);
+      }
+    };
+
+    checkIsLedgerConnected();
+  }, [ledgerConnectedApp]);
+
+  return { isLedgerConnected };
+};

src/index.less

@@ -60,6 +60,27 @@
     color: @font-color;
     font-size: 14px;
   }
+  &.no-icon {
+    .ant-notification-notice-message {
+      margin-left: 0;
+    }
+    .ant-notification-notice-description {
+      margin-left: 0;
+    }
+  }
+  &.notification-ledger {
+    .ledger-app-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      margin: 0 auto 0 auto;
+      padding: 2px;
+      background: #000;
+      border-radius: 12px;
+    }
+  }
 }
 
 .ant-carousel {

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { RecoilRoot } from 'recoil';
+import RecoilNexus from 'recoil-nexus';
 import * as serviceWorker from './serviceWorker';
 import RouteHub from './pages/route';
 import './index.less';
@@ -9,6 +10,7 @@ import './language/I18n';
 
 ReactDOM.render(
   <RecoilRoot>
+    <RecoilNexus />
     <RouteHub />
   </RecoilRoot>,
   document.getElementById('root'),

src/language/de-DE.json

@@ -170,6 +170,7 @@
   "wallet.table1.address": "Adresse",
   "wallet.table1.walletType": "Walletsart",
   "wallet.table1.network": "Netzwerk",
+  "wallet.table1.addressIndex": "Addresseindex",
   "home.nft.tab1": "Mein NFT",
   "home.transactions.table1.amount": "Betrag",
   "home.transactions.table1.status": "Zeit",