fix: added account migration and staking Dapps,Updated portal order (#…

…364)

* fix: added account migration and staking Dapps,Updated portal order

* Update node version

* Use nodejs 16

* fix: reverted EVM Address and EVM withdraw tabs

---------

Co-authored-by: fewensa <[email protected]>

.github/workflows/deploy-dev.yml

@@ -17,6 +17,10 @@ jobs:
           persist-credentials: false
           ssh-key: "${{ secrets.ITERING_ACTIONS_DEPLOY_KEY }}"
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: Install dependencies
         run: yarn install
 

.github/workflows/deploy-prd.yml

@@ -19,6 +19,10 @@ jobs:
           persist-credentials: false
           ssh-key: "${{ secrets.ITERING_ACTIONS_DEPLOY_KEY }}"
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: Install dependencies
         run: yarn install
 

.github/workflows/deploy-stg.yml

@@ -18,6 +18,10 @@ jobs:
           persist-credentials: false
           ssh-key: "${{ secrets.ITERING_ACTIONS_DEPLOY_KEY }}"
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: Install dependencies
         run: yarn install
 

src/components/migration/index.tsx

@@ -0,0 +1,63 @@
+import Identicon from '@polkadot/react-identicon';
+import { Button, Card, List } from 'antd';
+import AntdLink from 'antd/lib/typography/Link';
+import FileSaver from 'file-saver';
+import { Trans, useTranslation } from 'react-i18next';
+import { EllipsisMiddle } from '../widget/EllipsisMiddle';
+import { useWallet } from '../../hooks';
+import { LOCAL_SOURCE } from '../../config';
+
+const SubkeyMigration = () => {
+  const { t } = useTranslation();
+  const { accounts } = useWallet();
+  const localAccounts = accounts.filter((item) => item.meta.source === LOCAL_SOURCE);
+
+  return (
+    <div>
+      <Card className="mx-0 shadow-xxl">
+        <Trans className="m-8">
+          {`Here are the accounts you generated on the Darwinia Apps of the old version. You can restore them in the Polkadot{.js} by importing the JSON files. `}
+          <AntdLink
+            href="https://darwinianetwork.medium.com/using-darwinia-tools-3-8-darwinia-apps-lite-guide-part-%E2%85%B0-account-ae9b3347b3c7"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Tutorial refers here.
+          </AntdLink>
+        </Trans>
+      </Card>
+
+      <Card
+        style={{ marginTop: '20px' }}
+        title={<span className="font-bold">{t('Local Accounts')}</span>}
+        className="shadow-xxl"
+      >
+        <List
+          dataSource={localAccounts}
+          renderItem={(item) => (
+            <List.Item key={item.address}>
+              <List.Item.Meta
+                avatar={<Identicon value={item.displayAddress} size={40} className="border rounded-full p-1" />}
+                title={<span className="font-bold text-lg">{item.meta.name}</span>}
+                description={<EllipsisMiddle value={item.displayAddress} />}
+                className="flex item-center"
+              />
+
+              <Button
+                onClick={() => {
+                  const blob = new Blob([JSON.stringify(item.json)], { type: 'application/json; charset=utf-8' });
+
+                  FileSaver.saveAs(blob, `${item.address}.json`);
+                }}
+              >
+                {t('Export JSON')}
+              </Button>
+            </List.Item>
+          )}
+        />
+      </Card>
+    </div>
+  );
+};
+
+export default SubkeyMigration;

src/components/widget/QueueStatus.tsx

@@ -4,7 +4,6 @@ import { Trans } from 'react-i18next';
 import { useEffect, ReactNode } from 'react';
 import { SubmittableResult } from '@polkadot/api';
 import { useQueue, useApi, useNetworkColor } from '../../hooks';
-import { Path } from '../../config/routes';
 import { SubscanLink } from './SubscanLink';
 
 type NotificationConfig = {
@@ -16,11 +15,6 @@ type NotificationConfig = {
   type: 'success' | 'error' | 'info' | 'warning' | 'open';
 };
 
-const AccountMigrationLink = ({ children }: { children: ReactNode }) => {
-  const searchParamsStr = new URLSearchParams(window.location.search).toString();
-  return <a href={searchParamsStr.length ? `${Path.migration}?${searchParamsStr}` : Path.migration}>{children}</a>;
-};
-
 export const QueueStatus = () => {
   const { txqueue } = useQueue();
   const { network } = useApi();
@@ -36,10 +30,7 @@ export const QueueStatus = () => {
           config = {
             type: 'error',
             description: (
-              <span>
-                {error.message}. Check on the <AccountMigrationLink>Account Migration</AccountMigrationLink> Page or
-                restore your account with your backup files.
-              </span>
+              <span>{error.message}. Check on the Tools Page or restore your account with your backup files.</span>
             ),
           };
         } else {

src/components/widget/SideNav.tsx

@@ -8,7 +8,7 @@ import { THEME } from '../../config';
 import { Path, routes } from '../../config/routes';
 import { useApi, useBestNumber } from '../../hooks';
 import { getNetworkByName, NETWORK_CONFIGURATIONS } from '../../utils';
-import { AccountIcon, DarwiniaIcon, StakingIcon, ToolboxIcon, UsersIcon, ViewBrowserIcon } from '../icons';
+import { AccountIcon, DarwiniaIcon, StakingIcon, ToolboxIcon, ViewBrowserIcon } from '../icons';
 import { IconProps } from '../icons/icon-factory';
 import { BestNumber } from './BestNumber';
 import { SubscanLink } from './SubscanLink';
@@ -34,19 +34,19 @@ const NETWORKS_TEST = NETWORK_CONFIGURATIONS.filter((item) => item.category ===
 const NETWORKS_PARACHAIN = NETWORK_CONFIGURATIONS.filter((item) => item.category === 'parachain');
 
 const navigators: Nav[] = [
+  { label: 'Portal', path: Path.portal, Icon: DarwiniaIcon },
   { label: 'Account', path: Path.account, Icon: AccountIcon },
   { label: 'Staking', path: Path.staking, Icon: StakingIcon },
   { label: 'Toolbox', path: Path.toolbox, Icon: ToolboxIcon },
-  { label: 'Darwinia Portal', path: Path.portal, Icon: DarwiniaIcon },
-  { label: 'Account Migration', path: Path.migration, Icon: UsersIcon, className: 'migration' },
+  // { label: 'Account Migration', path: Path.migration, Icon: UsersIcon, className: 'migration' },
   // { label: 'Fee Market', path: Path.feemarket, Icon: ChartIcon },
 ];
 
 export const getActiveNav = (path: string) => {
   return routes
     .filter((item) => path === item.path)
     .map((item) => {
-      const urlPath = item.path === Path.root ? Path.account : (item.path as string);
+      const urlPath = item.path === Path.root ? Path.portal : (item.path as string);
 
       return navigators.find((nav) => nav.path.startsWith(urlPath));
     })
@@ -94,12 +94,6 @@ export function SideNav({ collapsed, theme, toggle, children }: PropsWithChildre
         <Select.OptGroup key="product" label={collapsed ? '' : t('Live networks')}>
           {NETWORKS_LIVE.map((item) => ele(item))}
         </Select.OptGroup>
-        <Select.OptGroup key="test" label={collapsed ? '' : t('Test networks')}>
-          {NETWORKS_TEST.map((item) => ele(item))}
-        </Select.OptGroup>
-        <Select.OptGroup key="parachain" label={collapsed ? '' : t('Parachain networks')}>
-          {NETWORKS_PARACHAIN.map((item) => ele(item))}
-        </Select.OptGroup>
       </>
     );
   }, [collapsed, t]);

src/config/network/networks.ts

@@ -1,15 +1,3 @@
-import { crabConfig } from './crab';
 import { darwiniaConfig } from './darwinia';
-import { pangolinConfig } from './pangolin';
-import { pangoroConfig } from './pangoro';
-import { crabParachainConfig } from './crab-parachain';
-import { pangolinParachainConfig } from './pangolin-parachain';
 
-export const SYSTEM_NETWORK_CONFIGURATIONS = [
-  crabConfig,
-  darwiniaConfig,
-  pangolinConfig,
-  pangoroConfig,
-  crabParachainConfig,
-  pangolinParachainConfig,
-];
+export const SYSTEM_NETWORK_CONFIGURATIONS = [darwiniaConfig];

src/config/routes.ts

@@ -1,7 +1,6 @@
 import { RouteProps } from 'react-router-dom';
 
 import { Account } from '../pages/Account';
-import { Migration } from '../pages/Migration';
 import { Portal } from '../pages/Portal';
 import { Staking } from '../pages/Staking';
 import { Toolbox } from '../pages/Toolbox';
@@ -14,14 +13,13 @@ export enum Path {
   staking = '/staking',
   toolbox = '/toolbox',
   portal = '/portal',
-  migration = '/migration',
   feemarket = '/feemarket',
 }
 
 export const routes: (RouteProps & { PageComponent: React.ComponentType })[] = [
   {
     path: Path.root,
-    PageComponent: Account,
+    PageComponent: Portal,
   },
   {
     path: Path.account,
@@ -39,10 +37,6 @@ export const routes: (RouteProps & { PageComponent: React.ComponentType })[] = [
     path: Path.portal,
     PageComponent: Portal,
   },
-  {
-    path: Path.migration,
-    PageComponent: Migration,
-  },
   // {
   //   path: Path.feemarket,
   //   PageComponent: FeeMarket,