First take at send flow refactor, working (#509)

* Refactor send flow to fit multisig flow * Improve send flow user experience Co-authored-by: Alex Singh <[email protected]>
glifio · Sep 11, 2020 · 32f294d · 32f294d
1 parent 80d9f1b
commit 32f294d
Show file tree

Hide file tree

Showing 18 changed files with 6,065 additions and 3,704 deletions.
diff --git a/components/Msig/ChangeOwner/index.jsx b/components/Msig/ChangeOwner/index.jsx
@@ -14,7 +14,8 @@ import {
   StepHeader,
   Input,
   Text,
-  IconLedger
+  IconLedger,
+  Form
 } from '../../Shared'
 import {
   ADDRESS_PROPTYPE,
@@ -161,13 +162,7 @@ const ChangeOwner = ({ address, balance, close }) => {
           close()
         }}
       />
-      <Box
-        width='100%'
-        display='flex'
-        flexDirection='column'
-        alignItems='center'
-        mb={7}
-      >
+      <Form onSubmit={onSubmit}>
         <Box
           maxWidth={14}
           width={13}
@@ -291,11 +286,11 @@ const ChangeOwner = ({ address, balance, close }) => {
               variant='primary'
               title='Next'
               disabled={isSubmitBtnDisabled()}
-              onClick={onSubmit}
+              type='submit'
             />
           </Box>
         </Box>
-      </Box>
+      </Form>
     </>
   )
 }

diff --git a/components/Msig/Shared/Headers.jsx b/components/Msig/Shared/Headers.jsx
@@ -6,6 +6,7 @@ import {
   FILECOIN_NUMBER_PROP
 } from '../../../customPropTypes'
 import makeFriendlyBalance from '../../../utils/makeFriendlyBalance'
+import truncateAddress from '../../../utils/truncateAddress'
 
 export const CardHeader = ({ address, balance, customizingGas }) => {
   return (
@@ -39,7 +40,7 @@ export const CardHeader = ({ address, balance, customizingGas }) => {
                 alignItems='flex-start'
               >
                 <Text m={0}>From</Text>
-                <Text m={0}>{address}</Text>
+                <Text m={0}>{truncateAddress(address)}</Text>
               </Box>
             </>
           )}

diff --git a/components/Msig/Withdraw/index.jsx b/components/Msig/Withdraw/index.jsx
@@ -17,7 +17,8 @@ import {
   Text,
   IconLedger,
   Num,
-  Title
+  Title,
+  Form
 } from '../../Shared'
 import {
   ADDRESS_PROPTYPE,
@@ -164,13 +165,7 @@ const Withdrawing = ({ address, balance, close }) => {
           close()
         }}
       />
-      <Box
-        width='100%'
-        display='flex'
-        flex='1'
-        flexDirection='column'
-        alignItems='center'
-      >
+      <Form onSubmit={onSubmit}>
         <Box
           maxWidth={14}
           width={13}
@@ -220,39 +215,36 @@ const Withdrawing = ({ address, balance, close }) => {
                 balance={balance}
                 customizingGas={false}
               />
-
-              <>
+              <Box width='100%' p={3} border={0} bg='background.screen'>
+                <Input.Address
+                  label='Recipient'
+                  value={toAddress}
+                  onChange={e => setToAddress(e.target.value)}
+                  error={toAddressError}
+                  disabled={step === 3}
+                  onFocus={() => {
+                    if (toAddressError) setToAddressError('')
+                  }}
+                />
+              </Box>
+              {step > 1 && (
                 <Box width='100%' p={3} border={0} bg='background.screen'>
-                  <Input.Address
-                    label='Recipient'
-                    value={toAddress}
-                    onChange={e => setToAddress(e.target.value)}
-                    error={toAddressError}
+                  <Input.Funds
+                    name='amount'
+                    label='Amount'
+                    amount={value.toAttoFil()}
+                    onAmountChange={setValue}
+                    balance={balance}
+                    error={valueError}
+                    setError={setValueError}
+                    // since the ledger device pays the gas fee, we dont include that in the funds input
+                    estimatedTransactionFee={new FilecoinNumber('0', 'attofil')}
                     disabled={step === 3}
-                    onFocus={() => {
-                      if (toAddressError) setToAddressError('')
-                    }}
                   />
                 </Box>
-                {step > 1 && (
-                  <Box width='100%' p={3} border={0} bg='background.screen'>
-                    <Input.Funds
-                      name='amount'
-                      label='Amount'
-                      amount={value.toAttoFil()}
-                      onAmountChange={setValue}
-                      balance={balance}
-                      error={valueError}
-                      setError={setValueError}
-                      // since the ledger device pays the gas fee, we dont include that in the funds input
-                      estimatedTransactionFee={
-                        new FilecoinNumber('0', 'attofil')
-                      }
-                      disabled={step === 3}
-                    />
-                  </Box>
-                )}
-                {step > 2 && (
+              )}
+              {step > 2 && (
+                <>
                   <Box
                     display='flex'
                     flexDirection='row'
@@ -262,65 +254,62 @@ const Withdrawing = ({ address, balance, close }) => {
                     border={0}
                     bg='background.screen'
                   >
-                    <Box>
-                      <Text margin={0}>Transaction Fee</Text>
-                      <Box display='flex' alignItems='center'>
-                        <Text margin={0} color='core.darkgray'>
-                          Paid via
-                        </Text>
-                        <IconLedger height='32px' />{' '}
-                        <Text margin={0} color='core.darkgray'>
-                          {makeFriendlyBalance(wallet.balance, 2, true)} FIL
-                        </Text>
-                      </Box>
-                    </Box>
-                    <Box display='flex' flexDirection='row'>
-                      <Text ml={2} color='core.primary'>
-                        {'< 0.0001 FIL'}
+                    <Text margin={0}>Transaction Fee</Text>
+                    <Box display='flex' alignItems='center'>
+                      <Text margin={0} color='core.darkgray'>
+                        Paid via
+                      </Text>
+                      <IconLedger height='32px' />{' '}
+                      <Text margin={0} color='core.darkgray'>
+                        {makeFriendlyBalance(wallet.balance, 2, true)} FIL
                       </Text>
                     </Box>
+                    <Text ml={2} color='core.primary'>
+                      {'< 0.0001 FIL'}
+                    </Text>
                   </Box>
-                )}
-              </>
-              {step > 2 && (
-                <Box
-                  display='flex'
-                  flexDirection='row'
-                  alignItems='flex-start'
-                  justifyContent='space-between'
-                  pt={6}
-                  pb={3}
-                  px={3}
-                  bg='background.screen'
-                  borderBottomLeftRadius={3}
-                  borderBottomRightRadius={3}
-                >
-                  <Title fontSize={4} alignSelf='flex-start'>
-                    Total
-                  </Title>
                   <Box
                     display='flex'
-                    flexDirection='column'
-                    textAlign='right'
-                    pl={4}
+                    flexDirection='row'
+                    alignItems='flex-start'
+                    justifyContent='space-between'
+                    pt={6}
+                    pb={3}
+                    px={3}
+                    bg='background.screen'
+                    borderBottomLeftRadius={3}
+                    borderBottomRightRadius={3}
                   >
-                    <Num
-                      size='l'
-                      css={`
-                        word-wrap: break-word;
-                      `}
-                      color='core.primary'
+                    <Title fontSize={4} alignSelf='flex-start'>
+                      Total
+                    </Title>
+                    <Box
+                      display='flex'
+                      flexDirection='column'
+                      textAlign='right'
+                      pl={4}
                     >
-                      {value.toFil()} FIL
-                    </Num>
-                    <Num size='m' color='core.darkgray'>
-                      {!converterError && value.isGreaterThan(0)
-                        ? `${makeFriendlyBalance(converter.fromFIL(value), 2)}`
-                        : '0'}{' '}
-                      USD
-                    </Num>
+                      <Num
+                        size='l'
+                        css={`
+                          word-wrap: break-word;
+                        `}
+                        color='core.primary'
+                      >
+                        {value.toFil()} FIL
+                      </Num>
+                      <Num size='m' color='core.darkgray'>
+                        {!converterError && value.isGreaterThan(0)
+                          ? `${makeFriendlyBalance(
+                              converter.fromFIL(value),
+                              2
+                            )}`
+                          : '0'}{' '}
+                        USD
+                      </Num>
+                    </Box>
                   </Box>
-                </Box>
+                </>
               )}
             </Box>
           </Box>
@@ -355,11 +344,11 @@ const Withdrawing = ({ address, balance, close }) => {
               variant='primary'
               title='Next'
               disabled={isSubmitBtnDisabled()}
-              onClick={onSubmit}
+              type='submit'
             />
           </Box>
         </Box>
-      </Box>
+      </Form>
     </>
   )
 }

diff --git a/components/Shared/BalanceCard/index.jsx b/components/Shared/BalanceCard/index.jsx
@@ -9,7 +9,7 @@ import { useConverter } from '../../../lib/Converter'
 import ApproximationToggleBtn from './ApproximationToggleBtn'
 
 const BalanceCard = forwardRef(
-  ({ balance, onSend, onReceive, disableButtons, ...props }, ref) => {
+  ({ balance, onSend, disableButtons, ...props }, ref) => {
     const { converter, converterError } = useConverter()
     const [preciseMode, setPreciseMode] = useState(false)
     return (
@@ -93,10 +93,6 @@ BalanceCard.propTypes = {
    * action fired when send button is clicked
    */
   onSend: func.isRequired,
-  /**
-   * action fired when receive button is clicked
-   */
-  onReceive: func.isRequired,
   /**
    * determines if the buttons should be disabled or not
    */

diff --git a/components/Shared/Form/index.jsx b/components/Shared/Form/index.jsx
@@ -0,0 +1,16 @@
+import { layout, space, flexbox, position } from 'styled-system'
+import styled from 'styled-components'
+
+const Form = styled.form`
+  width: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  ${position}
+  ${space}
+  ${layout}
+  ${flexbox}
+`
+
+export default Form
diff --git a/components/Shared/Layout/SidebarLayout.jsx b/components/Shared/Layout/SidebarLayout.jsx
@@ -15,6 +15,7 @@ export const Content = styled.div`
   flex-basis: 0;
   flex-grow: 999;
   padding-top: ${props => props.theme.sizes[3]}px;
-  margin: 0 0.5rem 6rem 0.5rem;
+  margin: 0 0.5rem 0.5rem 0.5rem;
+  min-height: 100vh;
   min-width: 53%;
 `
diff --git a/components/Shared/index.js b/components/Shared/index.js
@@ -9,6 +9,7 @@ export { default as AccountError } from './AccountCard/Error'
 export { default as BalanceCard } from './BalanceCard'
 export { default as ApproximationToggleBtn } from './BalanceCard/ApproximationToggleBtn'
 export { default as Input } from './Input'
+export { default as Form } from './Form'
 export { default as Address } from './Address'
 export * from './Copy'
 export { default as Button } from './Button'

diff --git a/components/Wallet/Send.js/ConfirmationCard.jsx b/components/Wallet/Send.js/ConfirmationCard.jsx
@@ -37,7 +37,7 @@ const OtherWalletTypeConfirm = () => {
       <Text color='core.nearblack'>
         To complete the transaction, please review the{' '}
         <TextHighlight>recipient</TextHighlight> and{' '}
-        <TextHighlight>amount</TextHighlight> and click &rdquo;Confirm&rdquo; at
+        <TextHighlight>amount</TextHighlight> and click &rdquo;Send&rdquo; at
         the bottom of the page.
       </Text>
       <Text>

diff --git a/components/Wallet/Send.js/HeaderText.jsx b/components/Wallet/Send.js/HeaderText.jsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Text } from '../../Shared'
+import { LEDGER } from '../../../constants'
+
+const HeaderText = ({ step, customizingGas, walletType }) => {
+  let text = ''
+
+  switch (step) {
+    case 1:
+      text =
+        "First, please confirm the account you're sending from, and the recipient you want to send to."
+      break
+    case 2:
+      text = "Next, please choose an amount of FIL you'd like to withdraw."
+      break
+    case 3:
+      text = 'Please review the transaction details.'
+      break
+    case 4:
+      if (walletType === LEDGER)
+        text = 'Please confirm the transaction on your Ledger device.'
+      break
+    default:
+      text = ''
+  }
+
+  if (customizingGas)
+    text = 'Please select the custom gas fee for this transaction.'
+
+  return <Text textAlign='center'>{text}</Text>
+}
+
+HeaderText.propTypes = {
+  step: PropTypes.number.isRequired,
+  customizingGas: PropTypes.bool.isRequired,
+  walletType: PropTypes.string.isRequired
+}
+
+export default HeaderText