Add offline account functionality to use with Quill

jest_config/__fixtures__/erc20Web3TxConfig.json

@@ -1949,5 +1949,6 @@
   "gasLimit": "32048",
   "nonce": "25",
   "data": "0xa9059cbb0000000000000000000000005197b5b062288bbf29008c92b08010a92dd677cd000000000000000000000000000000000000000000000000002386f26fc10000",
-  "value": "0"
+  "value": "0",
+  "networkId": "Ropsten"
 }

package.json

@@ -66,6 +66,7 @@
     "react-dom": "17.0.2",
     "react-is": "16.12.0",
     "react-markdown": "6.0.2",
+    "react-qr-reader": "3.0.0-beta-1",
     "react-redux": "7.2.4",
     "react-responsive": "8.2.0",
     "react-router-dom": "5.1.2",
@@ -236,7 +237,7 @@
     "storybook": "start-storybook -p 3001 --ci",
     "build:storybook": "build-storybook",
     "tscheck": "tsc --noEmit",
-    "start": " yarn run dev",
+    "start": "yarn run dev",
     "serve": "ws -d dist/web/ --spa index.html",
     "prod": "npm run build && npm run serve",
     "precommit": "lint-staged",

src/components/BusyBottom/constants.ts

@@ -111,5 +111,20 @@ export const configs: Record<
     },
     SUPPORT_LINK
   ],
-  SUPPORT: [SUPPORT_LINK]
+  SUPPORT: [SUPPORT_LINK],
+  OFFLINE: [
+    {
+      copy: 'BUSY_BOTTOM_OFFLINE_1',
+      // @todo: Update link
+      link: getKBHelpArticle(KB_HELP_ARTICLE.WHAT_IS_WALLETCONNECT),
+      external: true
+    },
+    {
+      copy: 'BUSY_BOTTOM_OFFLINE_2',
+      // @todo: Update link
+      link: getKBHelpArticle(KB_HELP_ARTICLE.HOW_TO_USE_WALLETCONNECT),
+      external: true
+    },
+    SUPPORT_LINK
+  ]
 };

src/components/SignTransactionWallets/Offline.test.tsx

@@ -0,0 +1,72 @@
+import React, { ComponentProps } from 'react';
+
+import { serialize } from '@ethersproject/transactions';
+import { APP_STATE, mockAppState, simpleRender } from 'test-utils';
+
+import { WALLETS_CONFIG } from '@config';
+import SignTransaction from '@features/SendAssets/components/SignTransaction';
+import { fERC20Web3TxConfigJSON, fTxConfig } from '@fixtures';
+import { translateRaw } from '@translations';
+import { WalletId } from '@types';
+import { makeTransaction } from '@utils';
+
+const defaultProps: ComponentProps<typeof SignTransaction> = {
+  txConfig: {
+    ...fTxConfig,
+    senderAccount: {
+      ...fTxConfig.senderAccount,
+      address: '0x31497f490293cf5a4540b81c9f59910f62519b63',
+      wallet: WalletId.OFFLINE
+    }
+  },
+  onComplete: jest.fn()
+};
+
+const getComponent = (props = defaultProps) => {
+  return simpleRender(<SignTransaction {...props} />, {
+    initialState: mockAppState({
+      networks: APP_STATE.networks
+    })
+  });
+};
+
+describe('SignTransactionOffline', () => {
+  it('renders', () => {
+    const { getByText } = getComponent();
+    expect(
+      getByText(translateRaw('SIGN_TX_TITLE', { $walletName: WALLETS_CONFIG.OFFLINE.name }))
+    ).toBeInTheDocument();
+  });
+
+  it('shows the raw transaction', () => {
+    const { getByText } = getComponent();
+
+    const transaction = serialize(makeTransaction(fTxConfig.rawTransaction));
+    expect(getByText(transaction)).toBeInTheDocument();
+  });
+
+  it('shows the contract information', () => {
+    const { getByText } = getComponent({
+      txConfig: {
+        ...fERC20Web3TxConfigJSON,
+        senderAccount: {
+          ...fTxConfig.senderAccount,
+          address: '0x31497f490293cf5a4540b81c9f59910f62519b63',
+          wallet: WalletId.OFFLINE
+        }
+      },
+      onComplete: jest.fn()
+    });
+
+    const transaction = serialize(makeTransaction(fERC20Web3TxConfigJSON.rawTransaction));
+    expect(getByText(transaction)).toBeInTheDocument();
+    expect(
+      getByText(
+        translateRaw('TRANSACTION_PERFORMED_VIA_CONTRACT', {
+          $contractName: translateRaw('UNKNOWN')
+        }),
+        { exact: false }
+      )
+    ).toBeInTheDocument();
+  });
+});

src/components/SignTransactionWallets/Offline.tsx

@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+
+import { serialize } from '@ethersproject/transactions';
+import styled from 'styled-components';
+
+import { Body, Box, BusyBottom, Button, Heading, InputField, LinkApp } from '@components';
+import { TxIntermediaryDisplay } from '@components/TransactionFlow/displays';
+import { isContractInteraction } from '@components/TransactionFlow/helpers';
+import { getWalletConfig, IWalletConfig, ROUTE_PATHS, WALLETS_CONFIG } from '@config';
+import { getContractName, useSelector } from '@store';
+import { FONT_SIZE, SPACING } from '@theme';
+import translate, { translateRaw } from '@translations';
+import { BusyBottomConfig, ISignComponentProps, ITxObject, WalletId } from '@types';
+import { makeTransaction } from '@utils';
+
+export function SignTransactionOffline({ senderAccount, rawTransaction }: ISignComponentProps) {
+  const walletConfig = getWalletConfig(WalletId.OFFLINE);
+
+  const network = senderAccount.networkId;
+  const contractName = useSelector(getContractName(network, rawTransaction.to));
+
+  return (
+    <SignTransactionOfflineUI
+      walletConfig={walletConfig}
+      rawTransaction={rawTransaction}
+      contractName={contractName}
+    />
+  );
+}
+
+const Footer = styled.div`
+  width: 100%;
+  margin-top: 2em;
+`;
+
+export interface UIProps {
+  walletConfig: IWalletConfig;
+  rawTransaction: ITxObject;
+  contractName?: string;
+}
+
+export const SignTransactionOfflineUI = ({
+  walletConfig,
+  rawTransaction,
+  contractName
+}: UIProps) => {
+  const rawTransactionHex = useMemo(() => serialize(makeTransaction(rawTransaction)), [
+    rawTransaction
+  ]);
+
+  return (
+    <Box>
+      <Heading fontSize="32px" textAlign="center" fontWeight="bold">
+        {translate('SIGN_TX_TITLE', {
+          $walletName: walletConfig.name || WALLETS_CONFIG.OFFLINE.name
+        })}
+      </Heading>
+      <Body textAlign="center" lineHeight="1.5" fontSize={FONT_SIZE.MD} paddingTop={SPACING.LG}>
+        {translate('SIGN_TX_OFFLINE_PROMPT', {
+          $walletName: walletConfig.name || WALLETS_CONFIG.OFFLINE.name
+        })}
+      </Body>
+      {isContractInteraction(rawTransaction.data) && rawTransaction.to && (
+        <Box mt={3}>
+          <TxIntermediaryDisplay address={rawTransaction.to} contractName={contractName} />
+        </Box>
+      )}
+
+      <InputField
+        label={translateRaw('RAW_TRANSACTION')}
+        value={rawTransactionHex}
+        textarea={true}
+        height={'125px'}
+        disabled={true}
+      />
+
+      <LinkApp href={ROUTE_PATHS.BROADCAST_TX.path}>
+        <Button>Broadcast Transaction</Button>
+      </LinkApp>
+
+      <>
+        <Body textAlign="center" lineHeight="1.5" fontSize={FONT_SIZE.MD} marginTop="16px">
+          {translateRaw('SIGN_TX_EXPLANATION')}
+        </Body>
+        <Footer>
+          <BusyBottom type={BusyBottomConfig.OFFLINE} />
+        </Footer>
+      </>
+    </Box>
+  );
+};

src/components/SignTransactionWallets/index.ts

@@ -2,6 +2,7 @@ import { SigningComponents, WalletId } from '@types';
 
 import SignTransactionGridPlus from './GridPlus';
 import { default as SignTransactionLedger } from './Ledger';
+import { SignTransactionOffline } from './Offline';
 import { default as SignTransactionTrezor } from './Trezor';
 import { default as SignTransactionWalletConnect } from './WalletConnect';
 import { default as SignTransactionWeb3 } from './Web3';
@@ -19,6 +20,7 @@ export const WALLET_STEPS: SigningComponents = {
   [WalletId.TREZOR_NEW]: SignTransactionTrezor,
   [WalletId.WALLETCONNECT]: SignTransactionWalletConnect,
   [WalletId.GRIDPLUS]: SignTransactionGridPlus,
+  [WalletId.OFFLINE]: SignTransactionOffline,
   [WalletId.VIEW_ONLY]: null
 };
 export { default as HardwareSignTransaction } from './Hardware';

src/components/WalletUnlock/Offline.test.tsx

@@ -0,0 +1,72 @@
+import React, { ComponentProps } from 'react';
+
+import { fireEvent } from '@testing-library/react';
+import { simpleRender } from 'test-utils';
+
+import { WALLETS_CONFIG } from '@config';
+import { AddressOnlyWallet } from '@services';
+import { translateRaw } from '@translations';
+import { FormData, WalletId } from '@types';
+
+import { OfflineDecrypt } from './Offline';
+
+const defaultProps = {
+  wallet: WALLETS_CONFIG[WalletId.OFFLINE],
+  formData: ({ network: 'Ethereum' } as unknown) as FormData,
+  onUnlock: jest.fn()
+};
+
+const getComponent = (props: Partial<ComponentProps<typeof OfflineDecrypt>> = {}) => {
+  return simpleRender(<OfflineDecrypt {...defaultProps} {...props} />);
+};
+
+describe('Offline', () => {
+  it('renders', () => {
+    const { getByText } = getComponent();
+    expect(
+      getByText(translateRaw('INPUT_OFFLINE_ADDRESS_LABEL'), { exact: false })
+    ).toBeInTheDocument();
+  });
+
+  it('validates the address', async () => {
+    const fn = jest.fn();
+    const { getByTestId, getByText } = getComponent({ onUnlock: fn });
+
+    const selector = getByTestId('selector');
+    const input = selector.querySelector('input')!;
+    const button = getByText(translateRaw('ACTION_6'));
+
+    fireEvent.click(button);
+    expect(fn).not.toHaveBeenCalled();
+
+    fireEvent.click(input);
+    input.focus();
+    fireEvent.change(input, { target: { value: 'foo' } });
+    input.blur();
+
+    fireEvent.click(button);
+    expect(fn).not.toHaveBeenCalled();
+    expect(getByText(translateRaw('TO_FIELD_ERROR'))).toBeInTheDocument();
+  });
+
+  it('calls onUnlock', async () => {
+    const fn = jest.fn();
+    const { getByTestId, getByText } = getComponent({ onUnlock: fn });
+
+    const selector = getByTestId('selector');
+    const input = selector.querySelector('input')!;
+    const button = getByText(translateRaw('ACTION_6'));
+
+    fireEvent.click(input);
+    input.focus();
+    fireEvent.change(input, { target: { value: '0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520' } });
+    input.blur();
+
+    fireEvent.click(button);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith(
+      new AddressOnlyWallet('0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520', true)
+    );
+  });
+});