Landing onboarding

__tests__/addaccount.test.js

@@ -1,4 +1,4 @@
-import { getByText } from '@testing-library/testcafe';
+import { getAllByText, getByText } from '@testing-library/testcafe';
 
 import AddAccountPage from './addaccount-page.po';
 import DashboardPage from './dashboard-page.po';
@@ -42,3 +42,13 @@ test('Should be able to add a web3 address', async () => {
   await dashboardPage.expectAddressToBePresent(FIXTURE_WEB3_ADDRESS);
   await dashboardPage.expectAccountTableToMatchCount(1);
 });
+
+test('Should be able to redirect to the correct flow from wallet id', async (t) => {
+  await addAccountPage.navigateTo(`${PAGES.ADD_ACCOUNT}/portis`);
+  await addAccountPage.waitForPage(PAGES.ADD_ACCOUNT_VIEWONLY);
+
+  await addAccountPage.selectEthereumNetwork();
+
+  const title = getAllByText('Portis');
+  await t.expect(title.exists).ok();
+});

__tests__/fixtures.js

@@ -33,7 +33,8 @@ const PAGES = {
   SWAP: `${FIXTURES_CONST.BASE_URL}/swap`,
   BUY_MEMBERSHIP: `${FIXTURES_CONST.BASE_URL}/membership/buy`,
   INTERACT_WITH_CONTRACTS: `${FIXTURES_CONST.BASE_URL}/interact-with-contracts`,
-  DEPLOY_CONTRACTS: `${FIXTURES_CONST.BASE_URL}/deploy-contracts`
+  DEPLOY_CONTRACTS: `${FIXTURES_CONST.BASE_URL}/deploy-contracts`,
+  ONBOARDING: `${FIXTURES_CONST.BASE_URL}/onboarding`
 };
 
 const FIXTURE_ETHEREUM = 'Ethereum';

__tests__/onboarding-page.po.js

@@ -0,0 +1,12 @@
+import BasePage from './base-page.po';
+import { PAGES } from './fixtures';
+
+export default class OnboardingPage extends BasePage {
+  async navigateToPage(wallet) {
+    this.navigateTo(`${PAGES.ONBOARDING}/${wallet}`);
+  }
+
+  async waitPageLoaded(wallet, timeToWait) {
+    await this.waitForPage(`${PAGES.ONBOARDING}/${wallet}`, timeToWait);
+  }
+}

__tests__/onboarding.test.js

@@ -0,0 +1,24 @@
+import { getAllByText } from '@testing-library/testcafe';
+
+import { PAGES } from './fixtures';
+import OnboardingPage from './onboarding-page.po';
+
+const onboardingPage = new OnboardingPage();
+
+fixture('Onboarding').page(PAGES.ONBOARDING);
+
+test('Should be able to show a custodial exchange onboarding', async (t) => {
+  await onboardingPage.navigateToPage('kraken');
+  await onboardingPage.waitPageLoaded('kraken');
+
+  const title = getAllByText('Kraken');
+  await t.expect(title.exists).ok();
+});
+
+test('Should be able to show a non-custodial exchange onboarding', async (t) => {
+  await onboardingPage.navigateToPage('jaxx');
+  await onboardingPage.waitPageLoaded('jaxx');
+
+  const title = getAllByText('Jaxx');
+  await t.expect(title.exists).ok();
+});

package.json

@@ -26,6 +26,7 @@
     "@mycrypto/eth-scan": "3.4.4",
     "@mycrypto/ui": "0.24.1",
     "@mycrypto/unlock-scan": "1.2.0",
+    "@mycrypto/wallet-list": "1.3.0",
     "@mycrypto/wallets": "1.3.4",
     "@reduxjs/toolkit": "1.6.0",
     "@styled-system/should-forward-prop": "5.1.5",
@@ -267,4 +268,4 @@
       "pre-push": "yarn test"
     }
   }
-}
+}

src/components/Icon/Icon.test.tsx

@@ -16,6 +16,10 @@ describe('Icon', () => {
     const { container } = renderComponent({ type: 'add' });
     expect(container.querySelector('img')).toBeInTheDocument();
   });
+  it('renders a SVG Icon with a fill and a stroke', () => {
+    const { container } = renderComponent({ type: 'other-tag' });
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
   it('renders a PNG Icon by type', () => {
     const { container } = renderComponent({ type: 'uni-logo' });
     expect(container.querySelector('img')).toBeInTheDocument();

src/components/Icon/Icon.tsx

@@ -32,7 +32,11 @@ import remove from '@assets/icons/actions/remove.svg';
 import logoMyCryptoTextBlue from '@assets/icons/brand/logo-text-blue.svg';
 import logoMyCryptoText from '@assets/icons/brand/logo-text.svg';
 import logoMyCrypto from '@assets/icons/brand/logo.svg';
+import desktopTag from '@assets/icons/desktopTag.svg';
+import exchangeTag from '@assets/icons/exchangeTag.svg';
 import feedback from '@assets/icons/feedback.svg';
+import hardwareTag from '@assets/icons/hardwareTag.svg';
+import mobileTag from '@assets/icons/mobileTag.svg';
 import navAddAccount from '@assets/icons/navigation/add-account.svg';
 import navAssets from '@assets/icons/navigation/assets.svg';
 import navBitcoin from '@assets/icons/navigation/bitcoin.svg';
@@ -84,6 +88,7 @@ import navTxStatus from '@assets/icons/navigation/tx-status.svg';
 import navUnstoppable from '@assets/icons/navigation/unstoppable.svg';
 import navVerifyMessage from '@assets/icons/navigation/verify-message.svg';
 import newsletter from '@assets/icons/newsletter.svg';
+import otherTag from '@assets/icons/otherTag.svg';
 import coinmarketcap from '@assets/icons/social/coinmarketcap.svg';
 import facebook from '@assets/icons/social/facebook.svg';
 import github from '@assets/icons/social/github.svg';
@@ -93,7 +98,9 @@ import telegram from '@assets/icons/social/telegram.svg';
 import twitter from '@assets/icons/social/twitter.svg';
 import telegramIcon from '@assets/icons/telegram.svg';
 import twitterIcon from '@assets/icons/twitter.svg';
+import walletconnectTag from '@assets/icons/walletconnectTag.svg';
 import website from '@assets/icons/website.svg';
+import webTag from '@assets/icons/webTag.svg';
 import whitepaper from '@assets/icons/whitepaper.svg';
 import antLogo from '@assets/images/ant-logo.png';
 import arrowRight from '@assets/images/arrow-right.svg';
@@ -136,6 +143,7 @@ import membership from '@assets/images/membership/membership-none.svg';
 import nodeLogo from '@assets/images/node-logo.svg';
 import repLogo from '@assets/images/rep-logo.svg';
 import uniLogo from '@assets/images/uni-logo.png';
+import walletConnectLogo from '@assets/images/wallet-connect.png';
 import ledgerIcon from '@assets/images/wallets/ledger.svg';
 import trezorIcon from '@assets/images/wallets/trezor.svg';
 
@@ -225,6 +233,15 @@ const svgIcons = {
   'tx-receive': receiveIcon,
   'tx-network': networkIcon,
 
+  /* Wallet Tags */
+  'desktop-tag': desktopTag,
+  'exchange-tag': exchangeTag,
+  'hardware-tag': hardwareTag,
+  'mobile-tag': mobileTag,
+  'other-tag': otherTag,
+  'walletconnect-tag': walletconnectTag,
+  'web-tag': webTag,
+
   /* Navigation */
   'nav-home': navHome,
   'nav-send': navSend,
@@ -284,7 +301,8 @@ const pngIcons = {
   'lend-logo': lendLogo,
   'ant-logo': antLogo,
   'gol-logo': golemLogo,
-  'node-logo': nodeLogo
+  'node-logo': nodeLogo,
+  'wallet-connect': walletConnectLogo
 };
 
 type SvgIcons = keyof typeof svgIcons;
@@ -322,6 +340,16 @@ const SStrokeIcon = styled(SInlineSVG)<StylingProps>`
   stroke: ${({ color }) => color && color};
 `;
 
+const SStrokeFillIcon = styled(SInlineSVG)<StylingProps>`
+  &&&& {
+    fill: ${({ color, theme }) => (color ? theme.colors[color] : color)};
+  }
+  &&&&:hover {
+    fill: ${({ color, theme }) => (color ? theme.colors[color] : color)};
+  }
+  stroke: ${({ color, theme }) => (color ? theme.colors[color] : color)};
+`;
+
 const SExpandableIcon = styled(SInlineSVG)<StylingProps>`
   cursor: pointer;
   transition: all 0.3s ease-out;
@@ -366,8 +394,15 @@ export const isPNGType = (type: TIcon): type is PngIcons =>
 export const getSVGIcon = (type: SvgIcons) => svgIcons[type];
 
 const Icon = ({ type, color, ...props }: Props) => {
-  if (type === 'website' || type === 'faucet-icon' || type === 'nav-nft') {
+  if (
+    type === 'website' ||
+    type === 'faucet-icon' ||
+    type === 'nav-nft' ||
+    type === 'walletconnect-tag'
+  ) {
     return <SStrokeIcon src={svgIcons[type]} color={color} {...props} />;
+  } else if (type === 'other-tag') {
+    return <SStrokeFillIcon src={svgIcons[type]} color={color} {...props} />;
   } else if (type === 'expandable') {
     return <SExpandableIcon src={svgIcons[type]} color={color} {...props} />;
   } else if (type === 'sort') {

src/components/WalletIcon.test.tsx

@@ -0,0 +1,29 @@
+import { IWallet, wallets } from '@mycrypto/wallet-list';
+import { simpleRender } from 'test-utils';
+
+import { TIcon } from './Icon';
+import { WalletIcon } from './WalletIcon';
+
+const renderComponent = ({ wallet, interfaceIcon }: { wallet: IWallet; interfaceIcon?: TIcon }) => {
+  return simpleRender(<WalletIcon wallet={wallet} interfaceIcon={interfaceIcon} />);
+};
+
+describe('WalletIcon', () => {
+  it('can render a WalletIcon', () => {
+    const wallet = wallets[0];
+    const props = { wallet: wallet };
+    const { getByText, container } = renderComponent(props);
+
+    expect(getByText(wallet.name, { exact: false })).toBeInTheDocument();
+    expect(container.querySelector('img')).toBeInTheDocument();
+  });
+
+  it('can render a WalletIcon with an interface icon', () => {
+    const wallet = wallets[0];
+    const props = { wallet: wallet, interfaceIcon: 'wallet-connect' as TIcon };
+    const { getByText, container } = renderComponent(props);
+
+    expect(getByText(wallet.name, { exact: false })).toBeInTheDocument();
+    expect(container.querySelector('div[data-testid="interface-icon"]')).toBeInTheDocument();
+  });
+});

src/components/WalletIcon.tsx

@@ -0,0 +1,46 @@
+import { defaultWallet, IWallet } from '@mycrypto/wallet-list';
+
+import { Box, Icon, Text, TIcon } from '@components';
+
+export const WalletIcon = ({
+  wallet,
+  interfaceIcon
+}: {
+  wallet: IWallet;
+  interfaceIcon?: TIcon;
+}) => (
+  <Box
+    display="flex"
+    width="132px"
+    height="132px"
+    variant="columnCenter"
+    borderRadius="50%"
+    boxShadow="0px 3px 6px rgba(0, 0, 0, 0.07);"
+    border="1px solid"
+    borderColor="BG_GRAY"
+    position="relative"
+  >
+    <img width="60px" src={wallet.icon ?? defaultWallet} />
+    <Text fontWeight={700} mt="10px" width="69%" textAlign="center">
+      {wallet.name}
+    </Text>
+    {interfaceIcon && (
+      <Box
+        position="absolute"
+        p="5px"
+        borderRadius="50%"
+        width="50px"
+        height="50px"
+        border="1px solid"
+        borderColor="BG_GRAY"
+        boxShadow="0px 3px 6px rgba(0, 0, 0, 0.07);"
+        bottom="-5px"
+        right="-15px"
+        backgroundColor="WHITE"
+        data-testid="interface-icon"
+      >
+        <Icon type={interfaceIcon} />
+      </Box>
+    )}
+  </Box>
+);

src/components/WalletTag.test.tsx

@@ -0,0 +1,19 @@
+import { WalletTags } from '@mycrypto/wallet-list';
+import { simpleRender } from 'test-utils';
+
+import { translateRaw } from '@translations';
+
+import { WalletTag } from './WalletTag';
+
+const renderComponent = ({ tag }: { tag: WalletTags }) => {
+  return simpleRender(<WalletTag tag={tag} />);
+};
+
+describe('WalletTag', () => {
+  test('it can render a WalletTag', () => {
+    const props = { tag: WalletTags.Desktop };
+    const { getByText } = renderComponent(props);
+
+    expect(getByText(translateRaw('WALLET_TAG_DESKTOP'), { exact: false })).toBeInTheDocument();
+  });
+});

src/components/WalletTag.tsx

@@ -0,0 +1,17 @@
+import { WalletTags } from '@mycrypto/wallet-list';
+
+import { Body, Box, Icon } from '@components';
+import { getWalletTag } from '@config';
+
+export const WalletTag = ({ tag }: { tag: WalletTags }) => {
+  const tagConfig = getWalletTag(tag);
+
+  return (
+    <Box variant="rowCenter" m="15px">
+      <Icon type={tagConfig.icon} width="16px" color="PURPLE" mr="5px" />
+      <Body color="PURPLE" fontSize="14px" mb="0">
+        {tagConfig.text}
+      </Body>
+    </Box>
+  );
+};

src/components/WalletUnlock/ViewOnly.test.tsx

@@ -0,0 +1,35 @@
+import { IWallet, wallets } from '@mycrypto/wallet-list';
+import { simpleRender } from 'test-utils';
+
+import { translateRaw } from '@translations';
+import { FormData } from '@types';
+
+import { ViewOnlyDecrypt } from './ViewOnly';
+
+const defaultProps: React.ComponentProps<typeof ViewOnlyDecrypt> = {
+  formData: ({ network: 'Ethereum' } as unknown) as FormData,
+  onUnlock: jest.fn()
+};
+
+const getComponent = ({ walletInfos }: { walletInfos?: IWallet }) => {
+  return simpleRender(<ViewOnlyDecrypt walletInfos={walletInfos} {...defaultProps} />);
+};
+
+describe('ViewOnly', () => {
+  it('render', () => {
+    const { getByText } = getComponent({});
+
+    expect(getByText(translateRaw('INPUT_PUBLIC_ADDRESS_LABEL'))).toBeInTheDocument();
+  });
+
+  it('render with wallet infos', () => {
+    const wallet = wallets.find((wallet) => wallet.id === 'portis')!;
+    const props = { walletInfos: wallet };
+    const { getByText, getAllByText } = getComponent(props);
+
+    expect(getAllByText('Portis')).toBeTruthy();
+    expect(
+      getByText(translateRaw('VIEW_ONLY_HEADING', { $wallet: wallet.name }))
+    ).toBeInTheDocument();
+  });
+});