From 32f294da07ddcd8b6b637d0930f1f92882e8b297 Mon Sep 17 00:00:00 2001
From: Jon <Schwartz10@users.noreply.github.com>
Date: Fri, 11 Sep 2020 10:13:39 -0400
Subject: [PATCH] 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 <alex@alexsingh.com>
---
 components/Msig/ChangeOwner/index.jsx         |   15 +-
 components/Msig/Shared/Headers.jsx            |    3 +-
 components/Msig/Withdraw/index.jsx            |  169 +-
 components/Shared/BalanceCard/index.jsx       |    6 +-
 components/Shared/Form/index.jsx              |   16 +
 components/Shared/Layout/SidebarLayout.jsx    |    3 +-
 components/Shared/index.js                    |    1 +
 .../Wallet/Send.js/ConfirmationCard.jsx       |    2 +-
 components/Wallet/Send.js/HeaderText.jsx      |   41 +
 .../Send.js/__snapshots__/index.test.jsx.snap | 6765 ++++++++++++-----
 components/Wallet/Send.js/index.jsx           |  496 +-
 components/Wallet/Send.js/index.test.jsx      |  185 +-
 .../Wallet/__snapshots__/index.test.js.snap   | 1876 +----
 components/Wallet/index.jsx                   |  134 +-
 components/Wallet/index.test.js               |   40 +-
 components/Wallet/views.js                    |    1 -
 pages/send.jsx                                |   13 +
 test-utils/mocks/mock-routing.js              |    3 +-
 18 files changed, 6065 insertions(+), 3704 deletions(-)
 create mode 100644 components/Shared/Form/index.jsx
 create mode 100644 components/Wallet/Send.js/HeaderText.jsx
 create mode 100644 pages/send.jsx

diff --git a/components/Msig/ChangeOwner/index.jsx b/components/Msig/ChangeOwner/index.jsx
index dcc05e94e..c526f6bf2 100644
--- 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
index 02f5e0aac..3ea0de511 100644
--- 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
index c7d4c873f..d0487840c 100644
--- 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
index 36d9f0317..19cb91bc9 100644
--- 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
new file mode 100644
index 000000000..33551ed9e
--- /dev/null
+++ 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
index 42a72468e..109a22617 100644
--- 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
index 7c6462606..df77ab372 100644
--- 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
index 65627db4f..47baa7969 100644
--- 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
new file mode 100644
index 000000000..f84dc978f
--- /dev/null
+++ 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
diff --git a/components/Wallet/Send.js/__snapshots__/index.test.jsx.snap b/components/Wallet/Send.js/__snapshots__/index.test.jsx.snap
index 9acedfe3c..b011d642d 100644
--- a/components/Wallet/Send.js/__snapshots__/index.test.jsx.snap
+++ b/components/Wallet/Send.js/__snapshots__/index.test.jsx.snap
@@ -1,47 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Send Flow snapshots it renders correctly 1`] = `
-.c2 {
+.c3 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.c3 {
+.c4 {
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.c6 {
   min-width: 0;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.c4 {
+.c8 {
   min-width: 0;
   box-sizing: border-box;
   border-width: 0.1875rem;
   border-radius: 8px;
   border-style: solid;
-  border-color: #5E26FF;
-  background-color: #5E26FF;
-  color: #EFF3FD;
+  color: #000;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -58,299 +67,264 @@ exports[`Send Flow snapshots it renders correctly 1`] = `
   justify-content: center;
 }
 
-.c7 {
+.c11 {
   min-width: 0;
   box-sizing: border-box;
-  margin-right: 8px;
+  margin-left: 24px;
+  margin-top: 0;
+  margin-bottom: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c9 {
+.c13 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
   min-width: 0;
   box-sizing: border-box;
   border-radius: 100px;
   margin-left: 4px;
   margin-right: 4px;
-  background-color: #5E26FF;
+  background-color: #1AD08F;
   display: inline-block;
   width: 8px;
   height: 8px;
 }
 
-.c10 {
+.c15 {
   min-width: 0;
   box-sizing: border-box;
   border-radius: 100px;
   margin-left: 4px;
   margin-right: 4px;
-  background-color: #999999;
+  background-color: #C4C4C4;
   display: inline-block;
   width: 8px;
   height: 8px;
 }
 
-.c13 {
+.c17 {
   min-width: 0;
   box-sizing: border-box;
-  margin-top: 32px;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
 }
 
-.c14 {
+.c18 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
+  border: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  padding: 16px;
+  background-color: #5E26FF;
+  color: #ffffff;
+  width: 100%;
 }
 
-.c16 {
+.c19 {
   min-width: 0;
   box-sizing: border-box;
-  margin-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c18 {
+.c20 {
   min-width: 0;
   box-sizing: border-box;
-  position: relative;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  margin-right: 16px;
+  color: white;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  width: 48px;
+  height: 48px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-}
-
-.c20 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: relative;
-  border-color: #999999;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-height: 160px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .c21 {
   min-width: 0;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding-left: 8px;
-  padding-right: 8px;
-  margin-right: 8px;
-  color: #999999;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
-  max-width: 240px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: center;
-}
-
-.c22 {
-  min-width: 0;
-  box-sizing: border-box;
-  display: inline-block;
-  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
 }
 
 .c23 {
   min-width: 0;
   box-sizing: border-box;
-  position: relative;
-  border-bottom: 1px solid;
-  border-color: #EFF3FD;
-  border-top-left-radius: 4px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 80px;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
   width: 100%;
 }
 
-.c24 {
+.c25 {
   min-width: 0;
   box-sizing: border-box;
-  position: absolute;
-  left: -24px;
-  bottom: -24px;
-  z-index: 99;
-  border-radius: 32px;
-  padding-bottom: 4px;
-  background-color: #ffffff;
+  margin-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 48px;
-  height: 48px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  font-size: 2rem;
-  font-family: "system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c27 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
-  border-radius: 4px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 80px;
-}
-
-.c30 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-.c33 {
+.c29 {
   min-width: 0;
   box-sizing: border-box;
-  margin-top: 32px;
-  margin-left: 4px;
-  margin-right: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
 }
 
-.c35 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-left: 24px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  text-align: right;
-}
-
-.c5 {
+.c9 {
   font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
   font-weight: 700;
   font-size: 1.5rem;
 }
 
-.c40 {
+.c30 {
   cursor: pointer;
-  border: 1px solid core.lightgray;
+  border: 1px solid #262626;
   background-color: transparent;
-  border-color: core.lightgray;
+  border-color: #262626;
   color: #262626;
   font-size: 1.125rem;
   -webkit-transition: 0.18s ease-in-out;
   transition: 0.18s ease-in-out;
-  border-radius: 0;
+  border-radius: 4px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 16px;
   padding-right: 16px;
   height: 48px;
-  border: 0;
-  border-right: 1px solid;
-  border-radius: 0;
-  border-color: #C4C4C4;
   border-width: 1px;
+  border-radius: 4px;
 }
 
-.c40:hover {
+.c30:hover {
   opacity: 0.8;
 }
 
-.c42 {
-  cursor: pointer;
-  border: 1px solid #1AD08F;
-  background-color: #1AD08F;
-  border-color: #1AD08F;
-  color: #08442F;
+.c31 {
+  cursor: not-allowed;
+  border: 1px solid #C4C4C4;
+  background-color: #C4C4C4;
+  border-color: #C4C4C4;
   font-size: 1.125rem;
   -webkit-transition: 0.18s ease-in-out;
   transition: 0.18s ease-in-out;
-  border-radius: 0;
+  border-radius: 4px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 16px;
   padding-right: 16px;
   height: 48px;
-  border: 0;
-  border-radius: 0;
   border-width: 1px;
+  border-radius: 4px;
 }
 
-.c42:hover {
-  opacity: 0.8;
+.c31:hover {
+  opacity: 1;
 }
 
-.c12 {
+.c1 {
   width: 24;
   height: 24;
 }
 
-.c34 {
+.c10 {
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.2;
@@ -358,45 +332,34 @@ exports[`Send Flow snapshots it renders correctly 1`] = `
   margin: 0;
 }
 
-.c36 {
-  color: #5E26FF;
-  font-size: 2rem;
-  font-weight: 700;
-  line-height: 1.2;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c38 {
-  color: #666666;
-  font-size: 1.5rem;
+.c12 {
+  color: #262626;
+  font-size: 1.125rem;
   font-weight: 400;
-  line-height: 1.2;
+  line-height: 1.4;
   font-family: RT-Alias-Grotesk;
-  margin: 0;
+  margin-right: 8px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.c6 {
-  color: #5E26FF;
+.c16 {
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.4;
   font-family: RT-Alias-Grotesk;
-  margin-left: 8px;
+  text-align: center;
 }
 
-.c8 {
-  color: #5E26FF;
+.c22 {
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.4;
   font-family: RT-Alias-Grotesk;
-  margin-right: 8px;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: 0;
 }
 
-.c17 {
+.c26 {
   color: #262626;
   font-size: 1.125rem;
   font-weight: 400;
@@ -405,7 +368,7 @@ exports[`Send Flow snapshots it renders correctly 1`] = `
   margin: 0;
 }
 
-.c19 {
+.c28 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -430,614 +393,3545 @@ exports[`Send Flow snapshots it renders correctly 1`] = `
   border-color: #999999;
 }
 
-.c19:hover {
-  background: #bacbf7;
-  cursor: text;
-}
-
-.c19:focus {
-  box-shadow: 0;
-  outline: 0;
+.c28:hover {
   background: #bacbf7;
-}
-
-.c31 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
   cursor: text;
-  background: transparent;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: inline-block;
-  height: 48px;
-  width: 100%;
-  border-radius: 4px;
-  border: 0;
-  border-color: #999999;
-}
-
-.c31:hover {
-  background: transparent;
-  cursor: initial;
 }
 
-.c31:focus {
+.c28:focus {
   box-shadow: 0;
   outline: 0;
   background: #bacbf7;
 }
 
-.c15 {
+.c24 {
   display: inline-block;
   width: 100%;
   border-radius: 1px;
 }
 
-.c26 {
-  min-width: 0;
-  box-sizing: border-box;
-  top: 0px;
-  left: 0px;
-  border-top-right-radius: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  color: #5E26FF;
+.c2 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
-  min-width: 64px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: #d1ddfa;
 }
 
-.c29 {
-  min-width: 0;
-  box-sizing: border-box;
-  top: 0px;
-  left: 0px;
-  border-bottom-right-radius: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  color: #5E26FF;
+.c5 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
-  min-width: 64px;
+  width: 100%;
+  border-color: silver;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: #d1ddfa;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c32 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
-  background-color: transparent;
-  color: #5E26FF;
-  height: 64px;
+.c7 {
+  margin-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  min-width: 64px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: core.transparent;
-}
-
-.c25 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
-  cursor: text;
-  background: #d1ddfa;
-  font-size: 2rem;
-  height: 100%;
-  display: inline-block;
-  width: 100%;
-  border-top-left-radius: 4px;
-  border: 0;
-  border-color: #999999;
-  -moz-appearance: textfield;
-}
-
-.c25:hover {
-  background: #bacbf7;
-  cursor: text;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c25:focus {
-  box-shadow: 0;
+.c0 {
   outline: 0;
-  background: #bacbf7;
-}
-
-.c25::-webkit-outer-spin-button,
-.c25::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c28 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
-  cursor: text;
-  background: #d1ddfa;
-  font-size: 2rem;
-  height: 100%;
-  display: inline-block;
-  width: 100%;
-  border-bottom-left-radius: 4px;
   border: 0;
-  border-color: #999999;
-  -moz-appearance: textfield;
-}
-
-.c28:hover {
-  background: #bacbf7;
-  cursor: text;
-}
-
-.c28:focus {
-  box-shadow: 0;
-  outline: 0;
-  background: #bacbf7;
+  background: transparent;
+  -webkit-transition: 0.24s ease-in-out;
+  transition: 0.24s ease-in-out;
+  cursor: pointer;
+  display: inline-block;
+  position: fixed;
+  top: 16px;
+  right: 16px;
 }
 
-.c28::-webkit-outer-spin-button,
-.c28::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+.c0:hover {
+  -webkit-transform: scale(1.25);
+  -ms-transform: scale(1.25);
+  transform: scale(1.25);
 }
 
-.c39 {
-  min-width: 0;
-  box-sizing: border-box;
-  border: 1px solid;
-  border-color: #C4C4C4;
-  background-color: #F6F8FE;
-  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
-  position: fixed;
+<div>
+  <button
+    class="c0"
+    display="inline-block"
+    role="button"
+    type="button"
+  >
+    <svg
+      class="c1"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
+        fill="#5E26FF"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+  <form
+    class="c2"
+  >
+    <div
+      class="c3"
+      display="flex"
+      width="13"
+    >
+      <div
+        class="c4"
+      >
+        <ul
+          class="c5"
+          display="flex"
+          width="100%"
+        >
+          <div
+            class="c6"
+            display="flex"
+          >
+            <li
+              class="c7"
+              display="flex"
+            >
+              <div
+                class="c8"
+                color="#000"
+                display="flex"
+                size="6"
+              >
+                <h3
+                  class="c9"
+                >
+                  Sf
+                </h3>
+              </div>
+            </li>
+            <li
+              class=""
+            >
+              <h2
+                class="c10"
+                font-family="RT-Alias-Grotesk"
+                font-size="4"
+                font-weight="400"
+              >
+                Sending Filecoin
+              </h2>
+            </li>
+          </div>
+          <li
+            class=""
+          >
+            <div
+              class="c11"
+              display="flex"
+            >
+              <p
+                class="c12"
+                color="core.nearblack"
+                font-family="RT-Alias-Grotesk"
+                font-size="2"
+                font-weight="400"
+              >
+                Step 
+                1
+              </p>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+            </div>
+          </li>
+        </ul>
+        <p
+          class="c16"
+          font-family="RT-Alias-Grotesk"
+          font-size="2"
+          font-weight="400"
+        >
+          First, please confirm the account you're sending from, and the recipient you want to send to.
+        </p>
+        <div
+          class="c17"
+        >
+          <div
+            class="c18"
+            color="core.white"
+            width="100%"
+          >
+            <div
+              class="c19"
+              display="flex"
+            >
+              <div
+                class="c6"
+                display="flex"
+              >
+                <div
+                  class="c20"
+                  color="white"
+                  display="flex"
+                  size="6"
+                >
+                  <h3
+                    class="c9"
+                  >
+                    Ms
+                  </h3>
+                </div>
+                <div
+                  class="c21"
+                  display="flex"
+                >
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    From
+                  </p>
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    t1z22 ... 6wgi
+                  </p>
+                </div>
+              </div>
+              <div
+                class="c21"
+                display="flex"
+              >
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Balance
+                </p>
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  1
+                   FIL
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="c23"
+            width="100%"
+          >
+            <div
+              class="c24"
+            >
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c25"
+                  display="flex"
+                >
+                  <h4
+                    class="c26"
+                    color="core.nearblack"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    Recipient
+                  </h4>
+                </div>
+                <div
+                  class="c27"
+                  display="flex"
+                >
+                  <input
+                    class="c28"
+                    display="inline-block"
+                    height="6"
+                    placeholder="t1..."
+                    value=""
+                    width="100%"
+                  />
+                  
+                </div>
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <div
+        class="c29"
+        display="flex"
+        width="13"
+      >
+        <button
+          class="c30"
+          font-size="3"
+          height="6"
+          type="button"
+        >
+          Back
+        </button>
+        <button
+          class="c31"
+          disabled=""
+          font-size="3"
+          height="6"
+          type="submit"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
+.c3 {
+  min-width: 0;
+  box-sizing: border-box;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  bottom: 16px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  border-radius: 4px;
-  max-width: 560px;
-  width: 40%;
 }
 
-.c11 {
-  outline: 0;
-  border: 0;
-  background: transparent;
-  -webkit-transition: 0.24s ease-in-out;
-  transition: 0.24s ease-in-out;
-  cursor: pointer;
-  display: inline-block;
+.c4 {
+  min-width: 0;
+  box-sizing: border-box;
 }
 
-.c11:hover {
-  -webkit-transform: scale(1.25);
-  -ms-transform: scale(1.25);
-  transform: scale(1.25);
+.c6 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-.c0 {
+.c8 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  color: #000;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-box-flex: 2;
-  -webkit-flex-grow: 2;
-  -ms-flex-positive: 2;
-  flex-grow: 2;
-  max-width: 560px;
-  min-width: 300px;
 }
 
-.c1 {
-  background-color: #EFF3FD;
-  border: 1px solid;
-  border-radius: 4px;
-  border-color: silver;
-  padding-top: 16px;
-  padding-bottom: 16px;
+.c11 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin-left: 24px;
+  margin-top: 0;
+  margin-bottom: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
+}
+
+.c13 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #1AD08F;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+}
+
+.c15 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #C4C4C4;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+}
+
+.c17 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
+}
+
+.c18 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  padding: 16px;
+  background-color: #5E26FF;
+  color: #ffffff;
+  width: 100%;
+}
+
+.c19 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c20 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  margin-right: 16px;
+  color: white;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c21 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c23 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  width: 100%;
+}
+
+.c25 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c27 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c31 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
 }
 
-.c37 {
-  word-wrap: break-word;
+.c29 {
+  min-width: 0;
+  box-sizing: border-box;
+  padding-top: 8px;
+  margin-bottom: 0;
+  text-align: right;
 }
 
-.c41 {
-  border-radius: 0px;
+.c9 {
+  font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
+  font-weight: 700;
+  font-size: 1.5rem;
 }
 
-.c43 {
-  border-radius: 0px;
+.c32 {
+  cursor: pointer;
+  border: 1px solid #262626;
+  background-color: transparent;
+  border-color: #262626;
+  color: #262626;
+  font-size: 1.125rem;
+  -webkit-transition: 0.18s ease-in-out;
+  transition: 0.18s ease-in-out;
+  border-radius: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  height: 48px;
+  border-width: 1px;
+  border-radius: 4px;
 }
 
-<div
-  class="c0"
->
-  <form
-    autocomplete="off"
-    class="c1"
-    display="flex"
-  >
-    <div
-      class="c2"
-      display="flex"
-    >
-      <div
-        class="c3"
-        display="flex"
-      >
-        <div
-          class="c4"
-          color="background.screen"
-          display="flex"
-          size="6"
-        >
-          <h3
-            class="c5"
-          >
-            To
-          </h3>
-        </div>
-        <p
-          class="c6"
-          color="core.primary"
-          font-family="RT-Alias-Grotesk"
-          font-size="2"
-          font-weight="400"
-        >
-          Sending Filecoin
-        </p>
-      </div>
-      <div
-        class="c3"
-        display="flex"
-      >
-        <div
-          class="c7"
-          display="flex"
-        >
-          <p
-            class="c8"
-            color="core.primary"
-            font-family="RT-Alias-Grotesk"
-            font-size="2"
-            font-weight="400"
-          >
-            Step 
-            1
-          </p>
+.c32:hover {
+  opacity: 0.8;
+}
+
+.c33 {
+  cursor: pointer;
+  border: 1px solid #1AD08F;
+  background-color: #1AD08F;
+  border-color: #1AD08F;
+  color: #08442F;
+  font-size: 1.125rem;
+  -webkit-transition: 0.18s ease-in-out;
+  transition: 0.18s ease-in-out;
+  border-radius: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  height: 48px;
+  border-width: 1px;
+  border-radius: 4px;
+}
+
+.c33:hover {
+  opacity: 0.8;
+}
+
+.c1 {
+  width: 24;
+  height: 24;
+}
+
+.c10 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.2;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c12 {
+  color: #262626;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin-right: 8px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c16 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  text-align: center;
+}
+
+.c22 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c26 {
+  color: #262626;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c30 {
+  color: #FC6D6F;
+  text-align: right;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c28 {
+  min-width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 1px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  font-size: 1.125rem;
+  text-align: right;
+  cursor: text;
+  background: #FC6D6F;
+  padding-left: 16px;
+  padding-right: 16px;
+  display: inline-block;
+  height: 48px;
+  width: 100%;
+  border-radius: 4px;
+  border: 0;
+  border-color: #999999;
+}
+
+.c28:hover {
+  background: #FC6D6F;
+  cursor: text;
+}
+
+.c28:focus {
+  box-shadow: 0;
+  outline: 0;
+  background: #FC6D6F;
+}
+
+.c24 {
+  display: inline-block;
+  width: 100%;
+  border-radius: 1px;
+}
+
+.c2 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  border-color: silver;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c7 {
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c0 {
+  outline: 0;
+  border: 0;
+  background: transparent;
+  -webkit-transition: 0.24s ease-in-out;
+  transition: 0.24s ease-in-out;
+  cursor: pointer;
+  display: inline-block;
+  position: fixed;
+  top: 16px;
+  right: 16px;
+}
+
+.c0:hover {
+  -webkit-transform: scale(1.25);
+  -ms-transform: scale(1.25);
+  transform: scale(1.25);
+}
+
+<div>
+  <button
+    class="c0"
+    display="inline-block"
+    role="button"
+    type="button"
+  >
+    <svg
+      class="c1"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
+        fill="#5E26FF"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+  <form
+    class="c2"
+  >
+    <div
+      class="c3"
+      display="flex"
+      width="13"
+    >
+      <div
+        class="c4"
+      >
+        <ul
+          class="c5"
+          display="flex"
+          width="100%"
+        >
           <div
-            class="c3"
+            class="c6"
             display="flex"
           >
-            <div
-              class="c9"
-              display="inline-block"
-              height="2"
-              width="2"
-            />
+            <li
+              class="c7"
+              display="flex"
+            >
+              <div
+                class="c8"
+                color="#000"
+                display="flex"
+                size="6"
+              >
+                <h3
+                  class="c9"
+                >
+                  Sf
+                </h3>
+              </div>
+            </li>
+            <li
+              class=""
+            >
+              <h2
+                class="c10"
+                font-family="RT-Alias-Grotesk"
+                font-size="4"
+                font-weight="400"
+              >
+                Sending Filecoin
+              </h2>
+            </li>
           </div>
-          <div
-            class="c3"
-            display="flex"
+          <li
+            class=""
           >
             <div
-              class="c10"
-              display="inline-block"
-              height="2"
-              width="2"
-            />
-          </div>
-        </div>
-        <button
-          class="c11"
-          display="inline-block"
-          role="button"
-          type="button"
-        >
-          <svg
-            class="c12"
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
-              fill="#5E26FF"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
+              class="c11"
+              display="flex"
+            >
+              <p
+                class="c12"
+                color="core.nearblack"
+                font-family="RT-Alias-Grotesk"
+                font-size="2"
+                font-weight="400"
+              >
+                Step 
+                1
+              </p>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+            </div>
+          </li>
+        </ul>
+        <p
+          class="c16"
+          font-family="RT-Alias-Grotesk"
+          font-size="2"
+          font-weight="400"
+        >
+          First, please confirm the account you're sending from, and the recipient you want to send to.
+        </p>
+        <div
+          class="c17"
+        >
+          <div
+            class="c18"
+            color="core.white"
+            width="100%"
+          >
+            <div
+              class="c19"
+              display="flex"
+            >
+              <div
+                class="c6"
+                display="flex"
+              >
+                <div
+                  class="c20"
+                  color="white"
+                  display="flex"
+                  size="6"
+                >
+                  <h3
+                    class="c9"
+                  >
+                    Ms
+                  </h3>
+                </div>
+                <div
+                  class="c21"
+                  display="flex"
+                >
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    From
+                  </p>
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    t1z22 ... 6wgi
+                  </p>
+                </div>
+              </div>
+              <div
+                class="c21"
+                display="flex"
+              >
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Balance
+                </p>
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  1
+                   FIL
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="c23"
+            width="100%"
+          >
+            <div
+              class="c24"
+            >
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c25"
+                  display="flex"
+                >
+                  <h4
+                    class="c26"
+                    color="core.nearblack"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    Recipient
+                  </h4>
+                </div>
+                <div
+                  class="c27"
+                  display="flex"
+                >
+                  <input
+                    class="c28"
+                    display="inline-block"
+                    height="6"
+                    placeholder="t1..."
+                    value="t1z225tguggx4onbauimqvxz"
+                    width="100%"
+                  />
+                  
+                </div>
+              </div>
+            </div>
+            <div
+              class="c29"
+            >
+              <h4
+                class="c30"
+                color="status.fail.background"
+                font-family="RT-Alias-Grotesk"
+                font-size="2"
+                font-weight="400"
+              >
+                Invalid to address
+              </h4>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c31"
+        display="flex"
+        width="13"
+      >
+        <button
+          class="c32"
+          font-size="3"
+          height="6"
+          type="button"
+        >
+          Back
+        </button>
+        <button
+          class="c33"
+          font-size="3"
+          height="6"
+          type="submit"
+        >
+          Next
+        </button>
       </div>
     </div>
+  </form>
+</div>
+`;
+
+exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
+.c3 {
+  min-width: 0;
+  box-sizing: border-box;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c4 {
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.c6 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c8 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  color: #000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c11 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin-left: 24px;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c13 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #1AD08F;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+}
+
+.c15 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #C4C4C4;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+}
+
+.c17 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
+}
+
+.c18 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  padding: 16px;
+  background-color: #5E26FF;
+  color: #ffffff;
+  width: 100%;
+}
+
+.c19 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c20 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  margin-right: 16px;
+  color: white;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c21 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c23 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  width: 100%;
+}
+
+.c25 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c27 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c46 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c29 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  border-color: #999999;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 160px;
+}
+
+.c30 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  margin-right: 8px;
+  color: #999999;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  max-width: 240px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.c31 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+}
+
+.c32 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  border-bottom: 1px solid;
+  border-color: #EFF3FD;
+  border-top-left-radius: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 80px;
+  width: 100%;
+}
+
+.c33 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: absolute;
+  left: -24px;
+  bottom: -24px;
+  z-index: 99;
+  border-radius: 32px;
+  padding-bottom: 4px;
+  background-color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-family: "system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+
+.c36 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 80px;
+}
+
+.c39 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c41 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding-top: 48px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  background-color: #EFF3FD;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c42 {
+  min-width: 0;
+  box-sizing: border-box;
+  padding-left: 24px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  text-align: right;
+}
+
+.c9 {
+  font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+.c47 {
+  cursor: pointer;
+  border: 1px solid #262626;
+  background-color: transparent;
+  border-color: #262626;
+  color: #262626;
+  font-size: 1.125rem;
+  -webkit-transition: 0.18s ease-in-out;
+  transition: 0.18s ease-in-out;
+  border-radius: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  height: 48px;
+  border-width: 1px;
+  border-radius: 4px;
+}
+
+.c47:hover {
+  opacity: 0.8;
+}
+
+.c48 {
+  cursor: pointer;
+  border: 1px solid #1AD08F;
+  background-color: #1AD08F;
+  border-color: #1AD08F;
+  color: #08442F;
+  font-size: 1.125rem;
+  -webkit-transition: 0.18s ease-in-out;
+  transition: 0.18s ease-in-out;
+  border-radius: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  height: 48px;
+  border-width: 1px;
+  border-radius: 4px;
+}
+
+.c48:hover {
+  opacity: 0.8;
+}
+
+.c1 {
+  width: 24;
+  height: 24;
+}
+
+.c10 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.2;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c43 {
+  color: #5E26FF;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.2;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c45 {
+  color: #666666;
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.2;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c12 {
+  color: #262626;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin-right: 8px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c16 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  text-align: center;
+}
+
+.c22 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c40 {
+  color: #5E26FF;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin-left: 8px;
+}
+
+.c26 {
+  color: #262626;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c28 {
+  min-width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 1px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  font-size: 1.125rem;
+  text-align: right;
+  cursor: text;
+  background: transparent;
+  padding-left: 16px;
+  padding-right: 16px;
+  display: inline-block;
+  height: 48px;
+  width: 100%;
+  border-radius: 4px;
+  border: 0;
+  border-color: #999999;
+}
+
+.c28:hover {
+  background: transparent;
+  cursor: initial;
+}
+
+.c28:focus {
+  box-shadow: 0;
+  outline: 0;
+  background: #bacbf7;
+}
+
+.c24 {
+  display: inline-block;
+  width: 100%;
+  border-radius: 1px;
+}
+
+.c35 {
+  min-width: 0;
+  box-sizing: border-box;
+  top: 0px;
+  left: 0px;
+  border-top-right-radius: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  color: #5E26FF;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  min-width: 64px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  text-align: center;
+  position: relative;
+  background: transparent;
+}
+
+.c38 {
+  min-width: 0;
+  box-sizing: border-box;
+  top: 0px;
+  left: 0px;
+  border-bottom-right-radius: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  color: #5E26FF;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  min-width: 64px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  text-align: center;
+  position: relative;
+  background: transparent;
+}
+
+.c34 {
+  min-width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 1px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  font-size: 1.125rem;
+  text-align: right;
+  cursor: text;
+  background: transparent;
+  font-size: 2rem;
+  height: 100%;
+  display: inline-block;
+  width: 100%;
+  border-top-left-radius: 4px;
+  border: 0;
+  border-color: #999999;
+  -moz-appearance: textfield;
+}
+
+.c34:hover {
+  background: transparent;
+  cursor: initial;
+}
+
+.c34:focus {
+  box-shadow: 0;
+  outline: 0;
+  background: #bacbf7;
+}
+
+.c34::-webkit-outer-spin-button,
+.c34::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.c37 {
+  min-width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 1px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  font-size: 1.125rem;
+  text-align: right;
+  cursor: text;
+  background: transparent;
+  font-size: 2rem;
+  height: 100%;
+  display: inline-block;
+  width: 100%;
+  border-bottom-left-radius: 4px;
+  border: 0;
+  border-color: #999999;
+  -moz-appearance: textfield;
+}
+
+.c37:hover {
+  background: transparent;
+  cursor: initial;
+}
+
+.c37:focus {
+  box-shadow: 0;
+  outline: 0;
+  background: #bacbf7;
+}
+
+.c37::-webkit-outer-spin-button,
+.c37::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.c2 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  border-color: silver;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c7 {
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c0 {
+  outline: 0;
+  border: 0;
+  background: transparent;
+  -webkit-transition: 0.24s ease-in-out;
+  transition: 0.24s ease-in-out;
+  cursor: pointer;
+  display: inline-block;
+  position: fixed;
+  top: 16px;
+  right: 16px;
+}
+
+.c0:hover {
+  -webkit-transform: scale(1.25);
+  -ms-transform: scale(1.25);
+  transform: scale(1.25);
+}
+
+.c44 {
+  word-wrap: break-word;
+}
+
+<div>
+  <button
+    class="c0"
+    display="inline-block"
+    role="button"
+    type="button"
+  >
+    <svg
+      class="c1"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
+        fill="#5E26FF"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+  <form
+    class="c2"
+  >
+    <div
+      class="c3"
+      display="flex"
+      width="13"
+    >
+      <div
+        class="c4"
+      >
+        <ul
+          class="c5"
+          display="flex"
+          width="100%"
+        >
+          <div
+            class="c6"
+            display="flex"
+          >
+            <li
+              class="c7"
+              display="flex"
+            >
+              <div
+                class="c8"
+                color="#000"
+                display="flex"
+                size="6"
+              >
+                <h3
+                  class="c9"
+                >
+                  Sf
+                </h3>
+              </div>
+            </li>
+            <li
+              class=""
+            >
+              <h2
+                class="c10"
+                font-family="RT-Alias-Grotesk"
+                font-size="4"
+                font-weight="400"
+              >
+                Sending Filecoin
+              </h2>
+            </li>
+          </div>
+          <li
+            class=""
+          >
+            <div
+              class="c11"
+              display="flex"
+            >
+              <p
+                class="c12"
+                color="core.nearblack"
+                font-family="RT-Alias-Grotesk"
+                font-size="2"
+                font-weight="400"
+              >
+                Step 
+                3
+              </p>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+            </div>
+          </li>
+        </ul>
+        <p
+          class="c16"
+          font-family="RT-Alias-Grotesk"
+          font-size="2"
+          font-weight="400"
+        >
+          Please review the transaction details.
+        </p>
+        <div
+          class="c17"
+        >
+          <div
+            class="c18"
+            color="core.white"
+            width="100%"
+          >
+            <div
+              class="c19"
+              display="flex"
+            >
+              <div
+                class="c6"
+                display="flex"
+              >
+                <div
+                  class="c20"
+                  color="white"
+                  display="flex"
+                  size="6"
+                >
+                  <h3
+                    class="c9"
+                  >
+                    Ms
+                  </h3>
+                </div>
+                <div
+                  class="c21"
+                  display="flex"
+                >
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    From
+                  </p>
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    t1z22 ... 6wgi
+                  </p>
+                </div>
+              </div>
+              <div
+                class="c21"
+                display="flex"
+              >
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Balance
+                </p>
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  1
+                   FIL
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="c23"
+            width="100%"
+          >
+            <div
+              class="c24"
+            >
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c25"
+                  display="flex"
+                >
+                  <h4
+                    class="c26"
+                    color="core.nearblack"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    Recipient
+                  </h4>
+                </div>
+                <div
+                  class="c27"
+                  display="flex"
+                >
+                  <input
+                    class="c28"
+                    disabled=""
+                    display="inline-block"
+                    height="6"
+                    placeholder="t1..."
+                    value="t1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi"
+                    width="100%"
+                  />
+                  
+                </div>
+              </div>
+            </div>
+            
+          </div>
+          <div
+            class="c23"
+            width="100%"
+          >
+            <div
+              class="c29"
+              display="flex"
+              label="Amount"
+              name="amount"
+            >
+              <div
+                class="c30"
+                color="input.border"
+                display="flex"
+                width="100%"
+              >
+                <h4
+                  class="c26"
+                  color="core.nearblack"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Amount
+                </h4>
+              </div>
+              <div
+                class="c31"
+                display="inline-block"
+                width="100%"
+              >
+                <div
+                  class="c32"
+                  display="flex"
+                  height="80px"
+                  width="100%"
+                >
+                  <div
+                    class="c33"
+                    display="flex"
+                    font-family="sansSerif"
+                    font-size="5"
+                    size="6"
+                  >
+                    =
+                  </div>
+                  <input
+                    class="c34"
+                    disabled=""
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    label="Amount"
+                    name="amount"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value="0.01"
+                    width="100%"
+                  />
+                  <div
+                    class="c35"
+                    color="core.primary"
+                    disabled=""
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    FIL
+                  </div>
+                </div>
+                <div
+                  class="c36"
+                  display="flex"
+                  height="80px"
+                >
+                  <input
+                    class="c37"
+                    disabled=""
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    min="0"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value="0.05"
+                    width="100%"
+                  />
+                  <div
+                    class="c38"
+                    color="core.primary"
+                    disabled=""
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    USD
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="c39"
+            display="flex"
+            width="100%"
+          >
+            <p
+              class="c22"
+              font-family="RT-Alias-Grotesk"
+              font-size="2"
+              font-weight="400"
+            >
+              Transaction Fee
+            </p>
+            <p
+              class="c40"
+              color="core.primary"
+              font-family="RT-Alias-Grotesk"
+              font-size="2"
+              font-weight="400"
+            >
+              &lt; 0.0001 FIL
+            </p>
+          </div>
+          <div
+            class="c41"
+            display="flex"
+          >
+            <h2
+              class="c10"
+              font-family="RT-Alias-Grotesk"
+              font-size="4"
+              font-weight="400"
+            >
+              Total
+            </h2>
+            <div
+              class="c42"
+              display="flex"
+            >
+              <h2
+                class="c43 c44"
+                color="core.primary"
+                font-family="RT-Alias-Grotesk"
+                font-size="5"
+                font-weight="700"
+              >
+                0.01
+                 FIL
+              </h2>
+              <h2
+                class="c45"
+                color="core.darkgray"
+                font-family="RT-Alias-Grotesk"
+                font-size="4"
+                font-weight="400"
+              >
+                0.05
+                 
+                USD
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c46"
+        display="flex"
+        width="13"
+      >
+        <button
+          class="c47"
+          font-size="3"
+          height="6"
+          type="button"
+        >
+          Back
+        </button>
+        <button
+          class="c48"
+          font-size="3"
+          height="6"
+          type="submit"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Send Flow snapshots it renders step 2 correctly 1`] = `
+.c3 {
+  min-width: 0;
+  box-sizing: border-box;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c4 {
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.c6 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c8 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  color: #000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c11 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin-left: 24px;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c13 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #1AD08F;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+}
+
+.c15 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #C4C4C4;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+}
+
+.c17 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
+}
+
+.c18 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  padding: 16px;
+  background-color: #5E26FF;
+  color: #ffffff;
+  width: 100%;
+}
+
+.c19 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c20 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  margin-right: 16px;
+  color: white;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c21 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c23 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  width: 100%;
+}
+
+.c25 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c27 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c39 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c29 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  border-color: #999999;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 160px;
+}
+
+.c30 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  margin-right: 8px;
+  color: #999999;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  max-width: 240px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.c31 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+}
+
+.c32 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  border-bottom: 1px solid;
+  border-color: #EFF3FD;
+  border-top-left-radius: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 80px;
+  width: 100%;
+}
+
+.c33 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: absolute;
+  left: -24px;
+  bottom: -24px;
+  z-index: 99;
+  border-radius: 32px;
+  padding-bottom: 4px;
+  background-color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-family: "system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+
+.c36 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 80px;
+}
+
+.c9 {
+  font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+.c40 {
+  cursor: pointer;
+  border: 1px solid #262626;
+  background-color: transparent;
+  border-color: #262626;
+  color: #262626;
+  font-size: 1.125rem;
+  -webkit-transition: 0.18s ease-in-out;
+  transition: 0.18s ease-in-out;
+  border-radius: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  height: 48px;
+  border-width: 1px;
+  border-radius: 4px;
+}
+
+.c40:hover {
+  opacity: 0.8;
+}
+
+.c41 {
+  cursor: not-allowed;
+  border: 1px solid #C4C4C4;
+  background-color: #C4C4C4;
+  border-color: #C4C4C4;
+  font-size: 1.125rem;
+  -webkit-transition: 0.18s ease-in-out;
+  transition: 0.18s ease-in-out;
+  border-radius: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  height: 48px;
+  border-width: 1px;
+  border-radius: 4px;
+}
+
+.c41:hover {
+  opacity: 1;
+}
+
+.c1 {
+  width: 24;
+  height: 24;
+}
+
+.c10 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.2;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c12 {
+  color: #262626;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin-right: 8px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c16 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  text-align: center;
+}
+
+.c22 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c26 {
+  color: #262626;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c28 {
+  min-width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 1px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  font-size: 1.125rem;
+  text-align: right;
+  cursor: text;
+  background: transparent;
+  padding-left: 16px;
+  padding-right: 16px;
+  display: inline-block;
+  height: 48px;
+  width: 100%;
+  border-radius: 4px;
+  border: 0;
+  border-color: #999999;
+}
+
+.c28:hover {
+  background: transparent;
+  cursor: initial;
+}
+
+.c28:focus {
+  box-shadow: 0;
+  outline: 0;
+  background: #bacbf7;
+}
+
+.c24 {
+  display: inline-block;
+  width: 100%;
+  border-radius: 1px;
+}
+
+.c35 {
+  min-width: 0;
+  box-sizing: border-box;
+  top: 0px;
+  left: 0px;
+  border-top-right-radius: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  color: #5E26FF;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  min-width: 64px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  text-align: center;
+  position: relative;
+  background: #d1ddfa;
+}
+
+.c38 {
+  min-width: 0;
+  box-sizing: border-box;
+  top: 0px;
+  left: 0px;
+  border-bottom-right-radius: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  color: #5E26FF;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  min-width: 64px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  text-align: center;
+  position: relative;
+  background: #d1ddfa;
+}
+
+.c34 {
+  min-width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 1px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  font-size: 1.125rem;
+  text-align: right;
+  cursor: text;
+  background: #d1ddfa;
+  font-size: 2rem;
+  height: 100%;
+  display: inline-block;
+  width: 100%;
+  border-top-left-radius: 4px;
+  border: 0;
+  border-color: #999999;
+  -moz-appearance: textfield;
+}
+
+.c34:hover {
+  background: #bacbf7;
+  cursor: text;
+}
+
+.c34:focus {
+  box-shadow: 0;
+  outline: 0;
+  background: #bacbf7;
+}
+
+.c34::-webkit-outer-spin-button,
+.c34::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.c37 {
+  min-width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 1px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  font-size: 1.125rem;
+  text-align: right;
+  cursor: text;
+  background: #d1ddfa;
+  font-size: 2rem;
+  height: 100%;
+  display: inline-block;
+  width: 100%;
+  border-bottom-left-radius: 4px;
+  border: 0;
+  border-color: #999999;
+  -moz-appearance: textfield;
+}
+
+.c37:hover {
+  background: #bacbf7;
+  cursor: text;
+}
+
+.c37:focus {
+  box-shadow: 0;
+  outline: 0;
+  background: #bacbf7;
+}
+
+.c37::-webkit-outer-spin-button,
+.c37::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.c2 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  border-color: silver;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c7 {
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c0 {
+  outline: 0;
+  border: 0;
+  background: transparent;
+  -webkit-transition: 0.24s ease-in-out;
+  transition: 0.24s ease-in-out;
+  cursor: pointer;
+  display: inline-block;
+  position: fixed;
+  top: 16px;
+  right: 16px;
+}
+
+.c0:hover {
+  -webkit-transform: scale(1.25);
+  -ms-transform: scale(1.25);
+  transform: scale(1.25);
+}
+
+<div>
+  <button
+    class="c0"
+    display="inline-block"
+    role="button"
+    type="button"
+  >
+    <svg
+      class="c1"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
+        fill="#5E26FF"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+  <form
+    class="c2"
+  >
     <div
-      class="c13"
+      class="c3"
+      display="flex"
+      width="13"
     >
       <div
-        class="c14"
+        class="c4"
       >
-        <div
-          class="c15"
+        <ul
+          class="c5"
+          display="flex"
+          width="100%"
         >
           <div
-            class="c3"
+            class="c6"
             display="flex"
           >
-            <div
-              class="c16"
+            <li
+              class="c7"
               display="flex"
             >
-              <h4
-                class="c17"
-                color="core.nearblack"
+              <div
+                class="c8"
+                color="#000"
+                display="flex"
+                size="6"
+              >
+                <h3
+                  class="c9"
+                >
+                  Sf
+                </h3>
+              </div>
+            </li>
+            <li
+              class=""
+            >
+              <h2
+                class="c10"
                 font-family="RT-Alias-Grotesk"
-                font-size="2"
+                font-size="4"
                 font-weight="400"
               >
-                Recipient
-              </h4>
-            </div>
+                Sending Filecoin
+              </h2>
+            </li>
+          </div>
+          <li
+            class=""
+          >
             <div
-              class="c18"
+              class="c11"
               display="flex"
             >
-              <input
-                class="c19"
-                display="inline-block"
-                height="6"
-                placeholder="t1..."
-                value=""
-                width="100%"
-              />
-              
+              <p
+                class="c12"
+                color="core.nearblack"
+                font-family="RT-Alias-Grotesk"
+                font-size="2"
+                font-weight="400"
+              >
+                Step 
+                2
+              </p>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
             </div>
-          </div>
-        </div>
-        
+          </li>
+        </ul>
+        <p
+          class="c16"
+          font-family="RT-Alias-Grotesk"
+          font-size="2"
+          font-weight="400"
+        >
+          Next, please choose an amount of FIL you'd like to withdraw.
+        </p>
         <div
-          class="c20"
-          display="flex"
-          label="Amount"
-          name="amount"
+          class="c17"
         >
           <div
-            class="c21"
-            color="input.border"
-            display="flex"
-            width="100%"
-          >
-            <h4
-              class="c17"
-              color="core.nearblack"
-              font-family="RT-Alias-Grotesk"
-              font-size="2"
-              font-weight="400"
-            >
-              Amount
-            </h4>
-          </div>
-          <div
-            class="c22"
-            display="inline-block"
+            class="c18"
+            color="core.white"
             width="100%"
           >
             <div
-              class="c23"
+              class="c19"
               display="flex"
-              height="80px"
-              width="100%"
             >
               <div
-                class="c24"
+                class="c6"
                 display="flex"
-                font-family="sansSerif"
-                font-size="5"
-                size="6"
               >
-                =
+                <div
+                  class="c20"
+                  color="white"
+                  display="flex"
+                  size="6"
+                >
+                  <h3
+                    class="c9"
+                  >
+                    Ms
+                  </h3>
+                </div>
+                <div
+                  class="c21"
+                  display="flex"
+                >
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    From
+                  </p>
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    t1z22 ... 6wgi
+                  </p>
+                </div>
               </div>
-              <input
-                class="c25"
-                display="inline-block"
-                font-size="5"
-                height="100%"
-                label="Amount"
-                name="amount"
-                placeholder="0"
-                step="0.000000000000000001"
-                type="number"
-                value=""
-                width="100%"
-              />
               <div
-                class="c26"
-                color="core.primary"
+                class="c21"
                 display="flex"
-                font-size="3"
-                height="100%"
               >
-                FIL
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Balance
+                </p>
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  1
+                   FIL
+                </p>
               </div>
             </div>
+          </div>
+          <div
+            class="c23"
+            width="100%"
+          >
             <div
-              class="c27"
-              display="flex"
-              height="80px"
+              class="c24"
             >
-              <input
-                class="c28"
-                display="inline-block"
-                font-size="5"
-                height="100%"
-                min="0"
-                placeholder="0"
-                step="0.000000000000000001"
-                type="number"
-                value=""
-                width="100%"
-              />
               <div
-                class="c29"
-                color="core.primary"
+                class="c13"
                 display="flex"
-                font-size="3"
-                height="100%"
               >
-                USD
+                <div
+                  class="c25"
+                  display="flex"
+                >
+                  <h4
+                    class="c26"
+                    color="core.nearblack"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    Recipient
+                  </h4>
+                </div>
+                <div
+                  class="c27"
+                  display="flex"
+                >
+                  <input
+                    class="c28"
+                    disabled=""
+                    display="inline-block"
+                    height="6"
+                    placeholder="t1..."
+                    value="t1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi"
+                    width="100%"
+                  />
+                  
+                </div>
               </div>
             </div>
+            
           </div>
-        </div>
-        <div
-          class="c30"
-          width="100%"
-        >
           <div
-            class="c15"
+            class="c23"
+            width="100%"
           >
             <div
-              class="c3"
+              class="c29"
               display="flex"
+              label="Amount"
+              name="amount"
             >
               <div
-                class="c16"
+                class="c30"
+                color="input.border"
                 display="flex"
+                width="100%"
               >
                 <h4
-                  class="c17"
+                  class="c26"
                   color="core.nearblack"
                   font-family="RT-Alias-Grotesk"
                   font-size="2"
                   font-weight="400"
                 >
-                  Transaction Fee
+                  Amount
                 </h4>
               </div>
               <div
-                class="c18"
-                display="flex"
+                class="c31"
+                display="inline-block"
+                width="100%"
               >
-                <input
-                  class="c31"
-                  disabled=""
-                  display="inline-block"
-                  height="6"
-                  value="< 0.0001"
+                <div
+                  class="c32"
+                  display="flex"
+                  height="80px"
                   width="100%"
-                />
+                >
+                  <div
+                    class="c33"
+                    display="flex"
+                    font-family="sansSerif"
+                    font-size="5"
+                    size="6"
+                  >
+                    =
+                  </div>
+                  <input
+                    class="c34"
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    label="Amount"
+                    name="amount"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value=""
+                    width="100%"
+                  />
+                  <div
+                    class="c35"
+                    color="core.primary"
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    FIL
+                  </div>
+                </div>
                 <div
-                  class="c32"
-                  color="core.primary"
+                  class="c36"
                   display="flex"
-                  font-size="3"
-                  height="7"
+                  height="80px"
                 >
-                  FIL
+                  <input
+                    class="c37"
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    min="0"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value=""
+                    width="100%"
+                  />
+                  <div
+                    class="c38"
+                    color="core.primary"
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    USD
+                  </div>
                 </div>
               </div>
             </div>
@@ -1045,112 +3939,84 @@ exports[`Send Flow snapshots it renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="c33"
+        class="c39"
         display="flex"
+        width="13"
       >
-        <h2
-          class="c34"
-          font-family="RT-Alias-Grotesk"
-          font-size="4"
-          font-weight="400"
+        <button
+          class="c40"
+          font-size="3"
+          height="6"
+          type="button"
         >
-          Total
-        </h2>
-        <div
-          class="c35"
-          display="flex"
+          Back
+        </button>
+        <button
+          class="c41"
+          disabled=""
+          font-size="3"
+          height="6"
+          type="submit"
         >
-          <h2
-            class="c36 c37"
-            color="core.primary"
-            font-family="RT-Alias-Grotesk"
-            font-size="5"
-            font-weight="700"
-          >
-            0
-             
-            FIL
-          </h2>
-          <h2
-            class="c38"
-            color="core.darkgray"
-            font-family="RT-Alias-Grotesk"
-            font-size="4"
-            font-weight="400"
-          >
-            0
-             
-            USD
-          </h2>
-        </div>
+          Next
+        </button>
       </div>
     </div>
-    <div
-      class="c39"
-    >
-      <button
-        class="c40 c41 Sendjs___StyledButton-sc-1crplc1-2 c41"
-        font-size="3"
-        height="6"
-        type="button"
-      >
-        Back
-      </button>
-      <button
-        class="c42 c43 Sendjs___StyledButton2-sc-1crplc1-3 c43"
-        font-size="3"
-        height="6"
-        type="submit"
-      >
-        Send
-      </button>
-    </div>
   </form>
 </div>
 `;
 
-exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
-.c2 {
+exports[`Send Flow snapshots it renders step 3 correctly 1`] = `
+.c3 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.c3 {
+.c4 {
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.c6 {
   min-width: 0;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.c4 {
+.c8 {
   min-width: 0;
   box-sizing: border-box;
   border-width: 0.1875rem;
   border-radius: 8px;
   border-style: solid;
-  border-color: #5E26FF;
-  background-color: #5E26FF;
-  color: #EFF3FD;
+  color: #000;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1167,54 +4033,144 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   justify-content: center;
 }
 
-.c7 {
+.c11 {
   min-width: 0;
   box-sizing: border-box;
-  margin-right: 8px;
+  margin-left: 24px;
+  margin-top: 0;
+  margin-bottom: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c9 {
+.c13 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
   min-width: 0;
   box-sizing: border-box;
   border-radius: 100px;
   margin-left: 4px;
   margin-right: 4px;
-  background-color: #5E26FF;
+  background-color: #1AD08F;
   display: inline-block;
   width: 8px;
   height: 8px;
 }
 
-.c10 {
+.c15 {
   min-width: 0;
   box-sizing: border-box;
   border-radius: 100px;
   margin-left: 4px;
   margin-right: 4px;
-  background-color: #999999;
+  background-color: #C4C4C4;
   display: inline-block;
   width: 8px;
   height: 8px;
 }
 
-.c13 {
+.c17 {
   min-width: 0;
   box-sizing: border-box;
-  margin-top: 32px;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
 }
 
-.c14 {
+.c18 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
+  border: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  padding: 16px;
+  background-color: #5E26FF;
+  color: #ffffff;
+  width: 100%;
 }
 
-.c16 {
+.c19 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c20 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  margin-right: 16px;
+  color: white;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c21 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c23 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  width: 100%;
+}
+
+.c25 {
   min-width: 0;
   box-sizing: border-box;
   margin-right: 16px;
@@ -1232,7 +4188,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c27 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -1249,7 +4205,36 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   align-items: center;
 }
 
-.c22 {
+.c46 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c29 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -1261,7 +4246,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   min-height: 160px;
 }
 
-.c23 {
+.c30 {
   min-width: 0;
   box-sizing: border-box;
   border-radius: 4px;
@@ -1290,14 +4275,14 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   text-align: center;
 }
 
-.c24 {
+.c31 {
   min-width: 0;
   box-sizing: border-box;
   display: inline-block;
   width: 100%;
 }
 
-.c25 {
+.c32 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -1312,7 +4297,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   width: 100%;
 }
 
-.c26 {
+.c33 {
   min-width: 0;
   box-sizing: border-box;
   position: absolute;
@@ -1340,7 +4325,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   font-family: "system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 }
 
-.c29 {
+.c36 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -1352,21 +4337,40 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   height: 80px;
 }
 
-.c32 {
+.c39 {
   min-width: 0;
   box-sizing: border-box;
-  position: relative;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   width: 100%;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c35 {
+.c41 {
   min-width: 0;
   box-sizing: border-box;
-  margin-top: 32px;
-  margin-left: 4px;
-  margin-right: 4px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding-top: 48px;
+  padding-bottom: 16px;
   padding-left: 16px;
   padding-right: 16px;
+  background-color: #EFF3FD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1384,7 +4388,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   justify-content: space-between;
 }
 
-.c37 {
+.c42 {
   min-width: 0;
   box-sizing: border-box;
   padding-left: 24px;
@@ -1398,47 +4402,36 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   text-align: right;
 }
 
-.c20 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-top: 8px;
-  margin-bottom: 0;
-  text-align: right;
-}
-
-.c5 {
+.c9 {
   font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
   font-weight: 700;
   font-size: 1.5rem;
 }
 
-.c42 {
+.c47 {
   cursor: pointer;
-  border: 1px solid core.lightgray;
+  border: 1px solid #262626;
   background-color: transparent;
-  border-color: core.lightgray;
+  border-color: #262626;
   color: #262626;
   font-size: 1.125rem;
   -webkit-transition: 0.18s ease-in-out;
   transition: 0.18s ease-in-out;
-  border-radius: 0;
+  border-radius: 4px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 16px;
   padding-right: 16px;
   height: 48px;
-  border: 0;
-  border-right: 1px solid;
-  border-radius: 0;
-  border-color: #C4C4C4;
   border-width: 1px;
+  border-radius: 4px;
 }
 
-.c42:hover {
+.c47:hover {
   opacity: 0.8;
 }
 
-.c44 {
+.c48 {
   cursor: pointer;
   border: 1px solid #1AD08F;
   background-color: #1AD08F;
@@ -1447,27 +4440,26 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   font-size: 1.125rem;
   -webkit-transition: 0.18s ease-in-out;
   transition: 0.18s ease-in-out;
-  border-radius: 0;
+  border-radius: 4px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 16px;
   padding-right: 16px;
   height: 48px;
-  border: 0;
-  border-radius: 0;
   border-width: 1px;
+  border-radius: 4px;
 }
 
-.c44:hover {
+.c48:hover {
   opacity: 0.8;
 }
 
-.c12 {
+.c1 {
   width: 24;
   height: 24;
 }
 
-.c36 {
+.c10 {
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.2;
@@ -1475,7 +4467,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   margin: 0;
 }
 
-.c38 {
+.c43 {
   color: #5E26FF;
   font-size: 2rem;
   font-weight: 700;
@@ -1484,7 +4476,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   margin: 0;
 }
 
-.c40 {
+.c45 {
   color: #666666;
   font-size: 1.5rem;
   font-weight: 400;
@@ -1493,38 +4485,44 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   margin: 0;
 }
 
-.c6 {
-  color: #5E26FF;
+.c12 {
+  color: #262626;
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.4;
   font-family: RT-Alias-Grotesk;
-  margin-left: 8px;
+  margin-right: 8px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.c8 {
-  color: #5E26FF;
+.c16 {
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.4;
   font-family: RT-Alias-Grotesk;
-  margin-right: 8px;
-  margin-top: 0;
-  margin-bottom: 0;
+  text-align: center;
 }
 
-.c17 {
-  color: #262626;
+.c22 {
   font-size: 1.125rem;
   font-weight: 400;
-  line-height: 1;
+  line-height: 1.4;
   font-family: RT-Alias-Grotesk;
   margin: 0;
 }
 
-.c21 {
-  color: #FC6D6F;
-  text-align: right;
+.c40 {
+  color: #5E26FF;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin-left: 8px;
+}
+
+.c26 {
+  color: #262626;
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1;
@@ -1532,7 +4530,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   margin: 0;
 }
 
-.c33 {
+.c28 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -1557,87 +4555,24 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   border-color: #999999;
 }
 
-.c33:hover {
+.c28:hover {
   background: transparent;
   cursor: initial;
 }
 
-.c33:focus {
+.c28:focus {
   box-shadow: 0;
   outline: 0;
   background: #bacbf7;
 }
 
-.c19 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
-  cursor: text;
-  background: #FC6D6F;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: inline-block;
-  height: 48px;
-  width: 100%;
-  border-radius: 4px;
-  border: 0;
-  border-color: #999999;
-}
-
-.c19:hover {
-  background: #FC6D6F;
-  cursor: text;
-}
-
-.c19:focus {
-  box-shadow: 0;
-  outline: 0;
-  background: #FC6D6F;
-}
-
-.c15 {
+.c24 {
   display: inline-block;
   width: 100%;
   border-radius: 1px;
 }
 
-.c34 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
-  background-color: transparent;
-  color: #5E26FF;
-  height: 64px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 64px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: core.transparent;
-}
-
-.c28 {
+.c35 {
   min-width: 0;
   box-sizing: border-box;
   top: 0px;
@@ -1663,10 +4598,10 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   font-size: 1.25rem;
   text-align: center;
   position: relative;
-  background: #85e0cb;
+  background: transparent;
 }
 
-.c31 {
+.c38 {
   min-width: 0;
   box-sizing: border-box;
   top: 0px;
@@ -1692,10 +4627,10 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   font-size: 1.25rem;
   text-align: center;
   position: relative;
-  background: #85e0cb;
+  background: transparent;
 }
 
-.c27 {
+.c34 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -1709,7 +4644,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   font-size: 1.125rem;
   text-align: right;
   cursor: text;
-  background: #85e0cb;
+  background: transparent;
   font-size: 2rem;
   height: 100%;
   display: inline-block;
@@ -1720,24 +4655,24 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   -moz-appearance: textfield;
 }
 
-.c27:hover {
-  background: #85e0cb;
-  cursor: text;
+.c34:hover {
+  background: transparent;
+  cursor: initial;
 }
 
-.c27:focus {
+.c34:focus {
   box-shadow: 0;
   outline: 0;
-  background: #85e0cb;
+  background: #bacbf7;
 }
 
-.c27::-webkit-outer-spin-button,
-.c27::-webkit-inner-spin-button {
+.c34::-webkit-outer-spin-button,
+.c34::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.c30 {
+.c37 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -1751,7 +4686,7 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   font-size: 1.125rem;
   text-align: right;
   cursor: text;
-  background: #85e0cb;
+  background: transparent;
   font-size: 2rem;
   height: 100%;
   display: inline-block;
@@ -1762,498 +4697,600 @@ exports[`Send Flow snapshots it renders invalid address errors correctly 1`] = `
   -moz-appearance: textfield;
 }
 
-.c30:hover {
-  background: #85e0cb;
-  cursor: text;
+.c37:hover {
+  background: transparent;
+  cursor: initial;
 }
 
-.c30:focus {
+.c37:focus {
   box-shadow: 0;
   outline: 0;
-  background: #85e0cb;
+  background: #bacbf7;
 }
 
-.c30::-webkit-outer-spin-button,
-.c30::-webkit-inner-spin-button {
+.c37::-webkit-outer-spin-button,
+.c37::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.c41 {
-  min-width: 0;
-  box-sizing: border-box;
-  border: 1px solid;
-  border-color: #C4C4C4;
-  background-color: #F6F8FE;
-  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
-  position: fixed;
+.c2 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  bottom: 16px;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  border-radius: 4px;
-  max-width: 560px;
-  width: 40%;
-}
-
-.c11 {
-  outline: 0;
-  border: 0;
-  background: transparent;
-  -webkit-transition: 0.24s ease-in-out;
-  transition: 0.24s ease-in-out;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c11:hover {
-  -webkit-transform: scale(1.25);
-  -ms-transform: scale(1.25);
-  transform: scale(1.25);
 }
 
-.c0 {
+.c5 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-flex: 2;
-  -webkit-flex-grow: 2;
-  -ms-flex-positive: 2;
-  flex-grow: 2;
-  max-width: 560px;
-  min-width: 300px;
+  width: 100%;
+  border-color: silver;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c1 {
-  background-color: #EFF3FD;
-  border: 1px solid;
-  border-radius: 4px;
-  border-color: silver;
-  padding-top: 16px;
-  padding-bottom: 16px;
+.c7 {
+  margin-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.c39 {
-  word-wrap: break-word;
+.c0 {
+  outline: 0;
+  border: 0;
+  background: transparent;
+  -webkit-transition: 0.24s ease-in-out;
+  transition: 0.24s ease-in-out;
+  cursor: pointer;
+  display: inline-block;
+  position: fixed;
+  top: 16px;
+  right: 16px;
 }
 
-.c43 {
-  border-radius: 0px;
+.c0:hover {
+  -webkit-transform: scale(1.25);
+  -ms-transform: scale(1.25);
+  transform: scale(1.25);
 }
 
-.c45 {
-  border-radius: 0px;
+.c44 {
+  word-wrap: break-word;
 }
 
-<div
-  class="c0"
->
+<div>
+  <button
+    class="c0"
+    display="inline-block"
+    role="button"
+    type="button"
+  >
+    <svg
+      class="c1"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
+        fill="#5E26FF"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
   <form
-    autocomplete="off"
-    class="c1"
-    display="flex"
+    class="c2"
   >
     <div
-      class="c2"
+      class="c3"
       display="flex"
+      width="13"
     >
       <div
-        class="c3"
-        display="flex"
-      >
-        <div
-          class="c4"
-          color="background.screen"
-          display="flex"
-          size="6"
-        >
-          <h3
-            class="c5"
-          >
-            To
-          </h3>
-        </div>
-        <p
-          class="c6"
-          color="core.primary"
-          font-family="RT-Alias-Grotesk"
-          font-size="2"
-          font-weight="400"
-        >
-          Sending Filecoin
-        </p>
-      </div>
-      <div
-        class="c3"
-        display="flex"
+        class="c4"
       >
-        <div
-          class="c7"
+        <ul
+          class="c5"
           display="flex"
+          width="100%"
         >
-          <p
-            class="c8"
-            color="core.primary"
-            font-family="RT-Alias-Grotesk"
-            font-size="2"
-            font-weight="400"
-          >
-            Step 
-            1
-          </p>
-          <div
-            class="c3"
-            display="flex"
-          >
-            <div
-              class="c9"
-              display="inline-block"
-              height="2"
-              width="2"
-            />
-          </div>
           <div
-            class="c3"
+            class="c6"
             display="flex"
           >
-            <div
-              class="c10"
-              display="inline-block"
-              height="2"
-              width="2"
-            />
+            <li
+              class="c7"
+              display="flex"
+            >
+              <div
+                class="c8"
+                color="#000"
+                display="flex"
+                size="6"
+              >
+                <h3
+                  class="c9"
+                >
+                  Sf
+                </h3>
+              </div>
+            </li>
+            <li
+              class=""
+            >
+              <h2
+                class="c10"
+                font-family="RT-Alias-Grotesk"
+                font-size="4"
+                font-weight="400"
+              >
+                Sending Filecoin
+              </h2>
+            </li>
           </div>
-        </div>
-        <button
-          class="c11"
-          display="inline-block"
-          role="button"
-          type="button"
-        >
-          <svg
-            class="c12"
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
-              fill="#5E26FF"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="c13"
-    >
-      <div
-        class="c14"
-      >
-        <div
-          class="c15"
-        >
-          <div
-            class="c3"
-            display="flex"
+          <li
+            class=""
           >
             <div
-              class="c16"
+              class="c11"
               display="flex"
             >
-              <h4
-                class="c17"
+              <p
+                class="c12"
                 color="core.nearblack"
                 font-family="RT-Alias-Grotesk"
                 font-size="2"
                 font-weight="400"
               >
-                Recipient
-              </h4>
-            </div>
-            <div
-              class="c18"
-              display="flex"
-            >
-              <input
-                class="c19"
-                display="inline-block"
-                height="6"
-                placeholder="t1..."
-                value="t1z225tguggx4onbauimqvxz"
-                width="100%"
-              />
-              
+                Step 
+                3
+              </p>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c14"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
+              <div
+                class="c13"
+                display="flex"
+              >
+                <div
+                  class="c15"
+                  display="inline-block"
+                  height="2"
+                  width="2"
+                />
+              </div>
             </div>
-          </div>
-        </div>
-        <div
-          class="c20"
+          </li>
+        </ul>
+        <p
+          class="c16"
+          font-family="RT-Alias-Grotesk"
+          font-size="2"
+          font-weight="400"
         >
-          <h4
-            class="c21"
-            color="status.fail.background"
-            font-family="RT-Alias-Grotesk"
-            font-size="2"
-            font-weight="400"
-          >
-            Invalid address.
-          </h4>
-        </div>
+          Please review the transaction details.
+        </p>
         <div
-          class="c22"
-          display="flex"
-          label="Amount"
-          name="amount"
+          class="c17"
         >
           <div
-            class="c23"
-            color="input.border"
-            display="flex"
-            width="100%"
-          >
-            <h4
-              class="c17"
-              color="core.nearblack"
-              font-family="RT-Alias-Grotesk"
-              font-size="2"
-              font-weight="400"
-            >
-              Amount
-            </h4>
-          </div>
-          <div
-            class="c24"
-            display="inline-block"
+            class="c18"
+            color="core.white"
             width="100%"
           >
             <div
-              class="c25"
+              class="c19"
               display="flex"
-              height="80px"
-              width="100%"
             >
               <div
-                class="c26"
+                class="c6"
                 display="flex"
-                font-family="sansSerif"
-                font-size="5"
-                size="6"
               >
-                =
+                <div
+                  class="c20"
+                  color="white"
+                  display="flex"
+                  size="6"
+                >
+                  <h3
+                    class="c9"
+                  >
+                    Ms
+                  </h3>
+                </div>
+                <div
+                  class="c21"
+                  display="flex"
+                >
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    From
+                  </p>
+                  <p
+                    class="c22"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    t1z22 ... 6wgi
+                  </p>
+                </div>
               </div>
-              <input
-                class="c27"
-                display="inline-block"
-                font-size="5"
-                height="100%"
-                label="Amount"
-                name="amount"
-                placeholder="0"
-                step="0.000000000000000001"
-                type="number"
-                value="0.01"
-                width="100%"
-              />
               <div
-                class="c28"
-                color="core.primary"
+                class="c21"
                 display="flex"
-                font-size="3"
-                height="100%"
               >
-                FIL
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Balance
+                </p>
+                <p
+                  class="c22"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  1
+                   FIL
+                </p>
               </div>
             </div>
+          </div>
+          <div
+            class="c23"
+            width="100%"
+          >
             <div
-              class="c29"
-              display="flex"
-              height="80px"
+              class="c24"
             >
-              <input
-                class="c30"
-                display="inline-block"
-                font-size="5"
-                height="100%"
-                min="0"
-                placeholder="0"
-                step="0.000000000000000001"
-                type="number"
-                value="0.05"
-                width="100%"
-              />
               <div
-                class="c31"
-                color="core.primary"
+                class="c13"
                 display="flex"
-                font-size="3"
-                height="100%"
               >
-                USD
+                <div
+                  class="c25"
+                  display="flex"
+                >
+                  <h4
+                    class="c26"
+                    color="core.nearblack"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    Recipient
+                  </h4>
+                </div>
+                <div
+                  class="c27"
+                  display="flex"
+                >
+                  <input
+                    class="c28"
+                    disabled=""
+                    display="inline-block"
+                    height="6"
+                    placeholder="t1..."
+                    value="t1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi"
+                    width="100%"
+                  />
+                  
+                </div>
               </div>
             </div>
+            
           </div>
-        </div>
-        <div
-          class="c32"
-          width="100%"
-        >
           <div
-            class="c15"
+            class="c23"
+            width="100%"
           >
             <div
-              class="c3"
+              class="c29"
               display="flex"
+              label="Amount"
+              name="amount"
             >
               <div
-                class="c16"
+                class="c30"
+                color="input.border"
                 display="flex"
+                width="100%"
               >
                 <h4
-                  class="c17"
+                  class="c26"
                   color="core.nearblack"
                   font-family="RT-Alias-Grotesk"
                   font-size="2"
                   font-weight="400"
                 >
-                  Transaction Fee
+                  Amount
                 </h4>
               </div>
               <div
-                class="c18"
-                display="flex"
+                class="c31"
+                display="inline-block"
+                width="100%"
               >
-                <input
-                  class="c33"
-                  disabled=""
-                  display="inline-block"
-                  height="6"
-                  value="< 0.0001"
+                <div
+                  class="c32"
+                  display="flex"
+                  height="80px"
                   width="100%"
-                />
+                >
+                  <div
+                    class="c33"
+                    display="flex"
+                    font-family="sansSerif"
+                    font-size="5"
+                    size="6"
+                  >
+                    =
+                  </div>
+                  <input
+                    class="c34"
+                    disabled=""
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    label="Amount"
+                    name="amount"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value="0.01"
+                    width="100%"
+                  />
+                  <div
+                    class="c35"
+                    color="core.primary"
+                    disabled=""
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    FIL
+                  </div>
+                </div>
                 <div
-                  class="c34"
-                  color="core.primary"
+                  class="c36"
                   display="flex"
-                  font-size="3"
-                  height="7"
+                  height="80px"
                 >
-                  FIL
+                  <input
+                    class="c37"
+                    disabled=""
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    min="0"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value="0.05"
+                    width="100%"
+                  />
+                  <div
+                    class="c38"
+                    color="core.primary"
+                    disabled=""
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    USD
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div
+            class="c39"
+            display="flex"
+            width="100%"
+          >
+            <p
+              class="c22"
+              font-family="RT-Alias-Grotesk"
+              font-size="2"
+              font-weight="400"
+            >
+              Transaction Fee
+            </p>
+            <p
+              class="c40"
+              color="core.primary"
+              font-family="RT-Alias-Grotesk"
+              font-size="2"
+              font-weight="400"
+            >
+              &lt; 0.0001 FIL
+            </p>
+          </div>
+          <div
+            class="c41"
+            display="flex"
+          >
+            <h2
+              class="c10"
+              font-family="RT-Alias-Grotesk"
+              font-size="4"
+              font-weight="400"
+            >
+              Total
+            </h2>
+            <div
+              class="c42"
+              display="flex"
+            >
+              <h2
+                class="c43 c44"
+                color="core.primary"
+                font-family="RT-Alias-Grotesk"
+                font-size="5"
+                font-weight="700"
+              >
+                0.01
+                 FIL
+              </h2>
+              <h2
+                class="c45"
+                color="core.darkgray"
+                font-family="RT-Alias-Grotesk"
+                font-size="4"
+                font-weight="400"
+              >
+                0.05
+                 
+                USD
+              </h2>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c35"
+        class="c46"
         display="flex"
+        width="13"
       >
-        <h2
-          class="c36"
-          font-family="RT-Alias-Grotesk"
-          font-size="4"
-          font-weight="400"
+        <button
+          class="c47"
+          font-size="3"
+          height="6"
+          type="button"
         >
-          Total
-        </h2>
-        <div
-          class="c37"
-          display="flex"
+          Back
+        </button>
+        <button
+          class="c48"
+          font-size="3"
+          height="6"
+          type="submit"
         >
-          <h2
-            class="c38 c39"
-            color="core.primary"
-            font-family="RT-Alias-Grotesk"
-            font-size="5"
-            font-weight="700"
-          >
-            0.010000000000122222
-             
-            FIL
-          </h2>
-          <h2
-            class="c40"
-            color="core.darkgray"
-            font-family="RT-Alias-Grotesk"
-            font-size="4"
-            font-weight="400"
-          >
-            0.05
-             
-            USD
-          </h2>
-        </div>
+          Next
+        </button>
       </div>
     </div>
-    <div
-      class="c41"
-    >
-      <button
-        class="c42 c43 Sendjs___StyledButton-sc-1crplc1-2 c43"
-        font-size="3"
-        height="6"
-        type="button"
-      >
-        Back
-      </button>
-      <button
-        class="c44 c45 Sendjs___StyledButton2-sc-1crplc1-3 c45"
-        font-size="3"
-        height="6"
-        type="submit"
-      >
-        Send
-      </button>
-    </div>
   </form>
 </div>
 `;
 
-exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
-.c2 {
+exports[`Send Flow snapshots it renders step 4 correctly 1`] = `
+.c3 {
+  min-width: 0;
+  box-sizing: border-box;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c4 {
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.c7 {
+  min-width: 0;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c11 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2262,34 +5299,55 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
 }
 
-.c3 {
+.c19 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
+}
+
+.c20 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  padding: 16px;
+  background-color: #5E26FF;
+  color: #ffffff;
+  width: 100%;
+}
+
+.c21 {
   min-width: 0;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c4 {
+.c22 {
   min-width: 0;
   box-sizing: border-box;
   border-width: 0.1875rem;
   border-radius: 8px;
   border-style: solid;
-  border-color: #5E26FF;
-  background-color: #5E26FF;
-  color: #EFF3FD;
+  margin-right: 16px;
+  color: white;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2306,54 +5364,32 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   justify-content: center;
 }
 
-.c7 {
+.c23 {
   min-width: 0;
   box-sizing: border-box;
-  margin-right: 8px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
 }
 
-.c9 {
-  min-width: 0;
-  box-sizing: border-box;
-  border-radius: 100px;
-  margin-left: 4px;
-  margin-right: 4px;
-  background-color: #5E26FF;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-}
-
-.c10 {
-  min-width: 0;
-  box-sizing: border-box;
-  border-radius: 100px;
-  margin-left: 4px;
-  margin-right: 4px;
-  background-color: #999999;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-}
-
-.c13 {
-  min-width: 0;
-  box-sizing: border-box;
-  margin-top: 32px;
-}
-
-.c14 {
+.c25 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  width: 100%;
 }
 
-.c16 {
+.c27 {
   min-width: 0;
   box-sizing: border-box;
   margin-right: 16px;
@@ -2371,7 +5407,7 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c29 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -2388,7 +5424,36 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   align-items: center;
 }
 
-.c22 {
+.c49 {
+  min-width: 0;
+  box-sizing: border-box;
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c31 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -2400,7 +5465,7 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   min-height: 160px;
 }
 
-.c23 {
+.c32 {
   min-width: 0;
   box-sizing: border-box;
   border-radius: 4px;
@@ -2429,14 +5494,14 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   text-align: center;
 }
 
-.c24 {
+.c33 {
   min-width: 0;
   box-sizing: border-box;
   display: inline-block;
   width: 100%;
 }
 
-.c25 {
+.c34 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -2451,16 +5516,167 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   width: 100%;
 }
 
-.c26 {
+.c35 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: absolute;
+  left: -24px;
+  bottom: -24px;
+  z-index: 99;
+  border-radius: 32px;
+  padding-bottom: 4px;
+  background-color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 48px;
+  height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-family: "system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+
+.c38 {
+  min-width: 0;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 80px;
+}
+
+.c41 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c43 {
+  min-width: 0;
+  box-sizing: border-box;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding-top: 48px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  background-color: #EFF3FD;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c45 {
+  min-width: 0;
+  box-sizing: border-box;
+  padding-left: 24px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  text-align: right;
+}
+
+.c5 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 4px;
+  border-width: 1px;
+  padding: 16px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  background-color: #D2F5ED;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+  overflow: hidden;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c6 {
+  min-width: 0;
+  box-sizing: border-box;
+  border: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c8 {
   min-width: 0;
   box-sizing: border-box;
-  position: absolute;
-  left: -24px;
-  bottom: -24px;
-  z-index: 99;
-  border-radius: 32px;
-  padding-bottom: 4px;
-  background-color: #ffffff;
+  border-width: 0.1875rem;
+  border-radius: 8px;
+  border-style: solid;
+  border-color: #007056;
+  background-color: #007056;
+  color: #D2F5ED;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2475,109 +5691,67 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  font-size: 2rem;
-  font-family: "system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  text-align: center;
 }
 
-.c29 {
+.c12 {
   min-width: 0;
   box-sizing: border-box;
-  position: relative;
-  border-radius: 4px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 80px;
-}
-
-.c32 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
 }
 
-.c35 {
+.c14 {
   min-width: 0;
   box-sizing: border-box;
-  margin-top: 32px;
+  border-radius: 100px;
   margin-left: 4px;
   margin-right: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c37 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-left: 24px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  text-align: right;
+  background-color: #007056;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
 }
 
-.c20 {
+.c15 {
   min-width: 0;
   box-sizing: border-box;
-  padding-top: 8px;
-  margin-bottom: 0;
-  text-align: right;
+  margin-left: 8px;
+  margin-right: 8px;
+  width: 32px;
 }
 
-.c5 {
+.c9 {
   font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
   font-weight: 700;
   font-size: 1.5rem;
 }
 
-.c42 {
-  cursor: pointer;
-  border: 1px solid core.lightgray;
-  background-color: transparent;
-  border-color: core.lightgray;
-  color: #262626;
+.c50 {
+  cursor: not-allowed;
+  border: 1px solid #C4C4C4;
+  background-color: #C4C4C4;
+  border-color: #C4C4C4;
   font-size: 1.125rem;
   -webkit-transition: 0.18s ease-in-out;
   transition: 0.18s ease-in-out;
-  border-radius: 0;
+  border-radius: 4px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 16px;
   padding-right: 16px;
   height: 48px;
-  border: 0;
-  border-right: 1px solid;
-  border-radius: 0;
-  border-color: #C4C4C4;
   border-width: 1px;
+  border-radius: 4px;
 }
 
-.c42:hover {
-  opacity: 0.8;
+.c50:hover {
+  opacity: 1;
 }
 
-.c44 {
+.c51 {
   cursor: pointer;
   border: 1px solid #1AD08F;
   background-color: #1AD08F;
@@ -2586,27 +5760,26 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   font-size: 1.125rem;
   -webkit-transition: 0.18s ease-in-out;
   transition: 0.18s ease-in-out;
-  border-radius: 0;
+  border-radius: 4px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 16px;
   padding-right: 16px;
   height: 48px;
-  border: 0;
-  border-radius: 0;
   border-width: 1px;
+  border-radius: 4px;
 }
 
-.c44:hover {
+.c51:hover {
   opacity: 0.8;
 }
 
-.c12 {
+.c1 {
   width: 24;
   height: 24;
 }
 
-.c36 {
+.c44 {
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.2;
@@ -2614,7 +5787,7 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   margin: 0;
 }
 
-.c38 {
+.c46 {
   color: #5E26FF;
   font-size: 2rem;
   font-weight: 700;
@@ -2623,7 +5796,7 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   margin: 0;
 }
 
-.c40 {
+.c48 {
   color: #666666;
   font-size: 1.5rem;
   font-weight: 400;
@@ -2632,7 +5805,15 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   margin: 0;
 }
 
-.c6 {
+.c24 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin: 0;
+}
+
+.c42 {
   color: #5E26FF;
   font-size: 1.125rem;
   font-weight: 400;
@@ -2641,8 +5822,17 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   margin-left: 8px;
 }
 
-.c8 {
-  color: #5E26FF;
+.c10 {
+  color: #007056;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+  margin-left: 8px;
+}
+
+.c13 {
+  color: #007056;
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.4;
@@ -2652,18 +5842,23 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   margin-bottom: 0;
 }
 
-.c17 {
+.c16 {
   color: #262626;
   font-size: 1.125rem;
   font-weight: 400;
-  line-height: 1;
+  line-height: 1.4;
   font-family: RT-Alias-Grotesk;
-  margin: 0;
 }
 
-.c21 {
-  color: #FC6D6F;
-  text-align: right;
+.c18 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: RT-Alias-Grotesk;
+}
+
+.c28 {
+  color: #262626;
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1;
@@ -2671,7 +5866,7 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   margin: 0;
 }
 
-.c33 {
+.c30 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -2696,87 +5891,24 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   border-color: #999999;
 }
 
-.c33:hover {
+.c30:hover {
   background: transparent;
   cursor: initial;
 }
 
-.c33:focus {
+.c30:focus {
   box-shadow: 0;
   outline: 0;
   background: #bacbf7;
 }
 
-.c19 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
-  cursor: text;
-  background: #FC6D6F;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: inline-block;
-  height: 48px;
-  width: 100%;
-  border-radius: 4px;
-  border: 0;
-  border-color: #999999;
-}
-
-.c19:hover {
-  background: #FC6D6F;
-  cursor: text;
-}
-
-.c19:focus {
-  box-shadow: 0;
-  outline: 0;
-  background: #FC6D6F;
-}
-
-.c15 {
+.c26 {
   display: inline-block;
   width: 100%;
   border-radius: 1px;
 }
 
-.c34 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
-  background-color: transparent;
-  color: #5E26FF;
-  height: 64px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 64px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: core.transparent;
-}
-
-.c28 {
+.c37 {
   min-width: 0;
   box-sizing: border-box;
   top: 0px;
@@ -2802,10 +5934,10 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   font-size: 1.25rem;
   text-align: center;
   position: relative;
-  background: #85e0cb;
+  background: transparent;
 }
 
-.c31 {
+.c40 {
   min-width: 0;
   box-sizing: border-box;
   top: 0px;
@@ -2831,10 +5963,10 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   font-size: 1.25rem;
   text-align: center;
   position: relative;
-  background: #85e0cb;
+  background: transparent;
 }
 
-.c27 {
+.c36 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -2848,7 +5980,7 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   font-size: 1.125rem;
   text-align: right;
   cursor: text;
-  background: #85e0cb;
+  background: transparent;
   font-size: 2rem;
   height: 100%;
   display: inline-block;
@@ -2859,24 +5991,24 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   -moz-appearance: textfield;
 }
 
-.c27:hover {
-  background: #85e0cb;
-  cursor: text;
+.c36:hover {
+  background: transparent;
+  cursor: initial;
 }
 
-.c27:focus {
+.c36:focus {
   box-shadow: 0;
   outline: 0;
-  background: #85e0cb;
+  background: #bacbf7;
 }
 
-.c27::-webkit-outer-spin-button,
-.c27::-webkit-inner-spin-button {
+.c36::-webkit-outer-spin-button,
+.c36::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.c30 {
+.c39 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -2890,7 +6022,7 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   font-size: 1.125rem;
   text-align: right;
   cursor: text;
-  background: #85e0cb;
+  background: transparent;
   font-size: 2rem;
   height: 100%;
   display: inline-block;
@@ -2901,56 +6033,42 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   -moz-appearance: textfield;
 }
 
-.c30:hover {
-  background: #85e0cb;
-  cursor: text;
+.c39:hover {
+  background: transparent;
+  cursor: initial;
 }
 
-.c30:focus {
+.c39:focus {
   box-shadow: 0;
   outline: 0;
-  background: #85e0cb;
+  background: #bacbf7;
 }
 
-.c30::-webkit-outer-spin-button,
-.c30::-webkit-inner-spin-button {
+.c39::-webkit-outer-spin-button,
+.c39::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.c41 {
-  min-width: 0;
-  box-sizing: border-box;
-  border: 1px solid;
-  border-color: #C4C4C4;
-  background-color: #F6F8FE;
-  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
-  position: fixed;
+.c2 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  bottom: 16px;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  border-radius: 4px;
-  max-width: 560px;
-  width: 40%;
 }
 
-.c11 {
+.c0 {
   outline: 0;
   border: 0;
   background: transparent;
@@ -2958,431 +6076,526 @@ exports[`Send Flow snapshots it renders invalid value errors correctly 1`] = `
   transition: 0.24s ease-in-out;
   cursor: pointer;
   display: inline-block;
+  position: fixed;
+  top: 16px;
+  right: 16px;
 }
 
-.c11:hover {
+.c0:hover {
   -webkit-transform: scale(1.25);
   -ms-transform: scale(1.25);
   transform: scale(1.25);
 }
 
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-flex: 2;
-  -webkit-flex-grow: 2;
-  -ms-flex-positive: 2;
-  flex-grow: 2;
-  max-width: 560px;
-  min-width: 300px;
-}
-
-.c1 {
-  background-color: #EFF3FD;
-  border: 1px solid;
-  border-radius: 4px;
-  border-color: silver;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+.c17 {
+  font-size: 1.25rem;
+  font-weight: 600;
 }
 
-.c39 {
+.c47 {
   word-wrap: break-word;
 }
 
-.c43 {
-  border-radius: 0px;
-}
-
-.c45 {
-  border-radius: 0px;
-}
-
-<div
-  class="c0"
->
+<div>
+  <button
+    class="c0"
+    display="inline-block"
+    role="button"
+    type="button"
+  >
+    <svg
+      class="c1"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
+        fill="#5E26FF"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
   <form
-    autocomplete="off"
-    class="c1"
-    display="flex"
+    class="c2"
   >
     <div
-      class="c2"
+      class="c3"
       display="flex"
+      width="13"
     >
       <div
-        class="c3"
-        display="flex"
-      >
-        <div
-          class="c4"
-          color="background.screen"
-          display="flex"
-          size="6"
-        >
-          <h3
-            class="c5"
-          >
-            To
-          </h3>
-        </div>
-        <p
-          class="c6"
-          color="core.primary"
-          font-family="RT-Alias-Grotesk"
-          font-size="2"
-          font-weight="400"
-        >
-          Sending Filecoin
-        </p>
-      </div>
-      <div
-        class="c3"
-        display="flex"
+        class="c4"
       >
         <div
-          class="c7"
+          class="c5"
           display="flex"
-        >
-          <p
-            class="c8"
-            color="core.primary"
-            font-family="RT-Alias-Grotesk"
-            font-size="2"
-            font-weight="400"
-          >
-            Step 
-            1
-          </p>
-          <div
-            class="c3"
-            display="flex"
-          >
-            <div
-              class="c9"
-              display="inline-block"
-              height="2"
-              width="2"
-            />
-          </div>
-          <div
-            class="c3"
-            display="flex"
-          >
-            <div
-              class="c10"
-              display="inline-block"
-              height="2"
-              width="2"
-            />
-          </div>
-        </div>
-        <button
-          class="c11"
-          display="inline-block"
-          role="button"
-          type="button"
-        >
-          <svg
-            class="c12"
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
-              fill="#5E26FF"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="c13"
-    >
-      <div
-        class="c14"
-      >
-        <div
-          class="c15"
+          overflow="hidden"
+          width="auto"
         >
           <div
-            class="c3"
+            class="c6"
             display="flex"
+            width="auto"
           >
             <div
-              class="c16"
+              class="c7"
               display="flex"
             >
-              <h4
-                class="c17"
-                color="core.nearblack"
+              <div
+                class="c8"
+                color="card.confirmation.background"
+                display="flex"
+                size="6"
+              >
+                <h3
+                  class="c9"
+                >
+                  Cf
+                </h3>
+              </div>
+              <p
+                class="c10"
+                color="card.confirmation.foreground"
                 font-family="RT-Alias-Grotesk"
                 font-size="2"
                 font-weight="400"
               >
-                Recipient
-              </h4>
+                Confirmation
+              </p>
             </div>
             <div
-              class="c18"
+              class="c11"
               display="flex"
             >
-              <input
-                class="c19"
-                display="inline-block"
-                height="6"
-                placeholder="t1..."
-                value=""
-                width="100%"
+              <div
+                class="c12"
+                display="flex"
+              >
+                <p
+                  class="c13"
+                  color="card.confirmation.foreground"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Step 
+                  4
+                </p>
+                <div
+                  class="c11"
+                  display="flex"
+                >
+                  <div
+                    class="c14"
+                    display="inline-block"
+                    height="2"
+                    width="2"
+                  />
+                </div>
+                <div
+                  class="c11"
+                  display="flex"
+                >
+                  <div
+                    class="c14"
+                    display="inline-block"
+                    height="2"
+                    width="2"
+                  />
+                </div>
+                <div
+                  class="c11"
+                  display="flex"
+                >
+                  <div
+                    class="c14"
+                    display="inline-block"
+                    height="2"
+                    width="2"
+                  />
+                </div>
+                <div
+                  class="c11"
+                  display="flex"
+                >
+                  <div
+                    class="c14"
+                    display="inline-block"
+                    height="2"
+                    width="2"
+                  />
+                </div>
+              </div>
+              <div
+                class="c15"
+                width="5"
               />
-              
             </div>
           </div>
-        </div>
-        <div
-          class="c20"
-        >
-          <h4
-            class="c21"
-            color="status.fail.background"
+          <p
+            class="c16"
+            color="core.nearblack"
+            font-family="RT-Alias-Grotesk"
+            font-size="2"
+            font-weight="400"
+          >
+            To complete the transaction, please review the
+             
+            <span
+              class="c17"
+              font-size="3"
+              font-weight="2"
+            >
+              recipient
+            </span>
+             and
+             
+            <span
+              class="c17"
+              font-size="3"
+              font-weight="2"
+            >
+              amount
+            </span>
+             and click ”Send” at the bottom of the page.
+          </p>
+          <p
+            class="c18"
             font-family="RT-Alias-Grotesk"
             font-size="2"
             font-weight="400"
           >
-            Invalid address.
-          </h4>
+            <span
+              class="c17"
+              font-size="3"
+              font-weight="2"
+            >
+              Remember:
+            </span>
+             Transactions are
+             
+            <span
+              class="c17"
+              font-size="3"
+              font-weight="2"
+            >
+              final once sent.
+            </span>
+          </p>
         </div>
         <div
-          class="c22"
-          display="flex"
-          label="Amount"
-          name="amount"
+          class="c19"
         >
           <div
-            class="c23"
-            color="input.border"
-            display="flex"
-            width="100%"
-          >
-            <h4
-              class="c17"
-              color="core.nearblack"
-              font-family="RT-Alias-Grotesk"
-              font-size="2"
-              font-weight="400"
-            >
-              Amount
-            </h4>
-          </div>
-          <div
-            class="c24"
-            display="inline-block"
+            class="c20"
+            color="core.white"
             width="100%"
           >
             <div
-              class="c25"
+              class="c21"
               display="flex"
-              height="80px"
-              width="100%"
             >
               <div
-                class="c26"
+                class="c7"
                 display="flex"
-                font-family="sansSerif"
-                font-size="5"
-                size="6"
               >
-                =
+                <div
+                  class="c22"
+                  color="white"
+                  display="flex"
+                  size="6"
+                >
+                  <h3
+                    class="c9"
+                  >
+                    Ms
+                  </h3>
+                </div>
+                <div
+                  class="c23"
+                  display="flex"
+                >
+                  <p
+                    class="c24"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    From
+                  </p>
+                  <p
+                    class="c24"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    t1z22 ... 6wgi
+                  </p>
+                </div>
               </div>
-              <input
-                class="c27"
-                display="inline-block"
-                font-size="5"
-                height="100%"
-                label="Amount"
-                name="amount"
-                placeholder="0"
-                step="0.000000000000000001"
-                type="number"
-                value="0.01"
-                width="100%"
-              />
               <div
-                class="c28"
-                color="core.primary"
+                class="c23"
                 display="flex"
-                font-size="3"
-                height="100%"
               >
-                FIL
+                <p
+                  class="c24"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Balance
+                </p>
+                <p
+                  class="c24"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  1
+                   FIL
+                </p>
               </div>
             </div>
+          </div>
+          <div
+            class="c25"
+            width="100%"
+          >
             <div
-              class="c29"
-              display="flex"
-              height="80px"
+              class="c26"
             >
-              <input
-                class="c30"
-                display="inline-block"
-                font-size="5"
-                height="100%"
-                min="0"
-                placeholder="0"
-                step="0.000000000000000001"
-                type="number"
-                value="0.05"
-                width="100%"
-              />
               <div
-                class="c31"
-                color="core.primary"
+                class="c11"
                 display="flex"
-                font-size="3"
-                height="100%"
               >
-                USD
+                <div
+                  class="c27"
+                  display="flex"
+                >
+                  <h4
+                    class="c28"
+                    color="core.nearblack"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    Recipient
+                  </h4>
+                </div>
+                <div
+                  class="c29"
+                  display="flex"
+                >
+                  <input
+                    class="c30"
+                    disabled=""
+                    display="inline-block"
+                    height="6"
+                    placeholder="t1..."
+                    value="t1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi"
+                    width="100%"
+                  />
+                  
+                </div>
               </div>
             </div>
+            
           </div>
-        </div>
-        <div
-          class="c32"
-          width="100%"
-        >
           <div
-            class="c15"
+            class="c25"
+            width="100%"
           >
             <div
-              class="c3"
+              class="c31"
               display="flex"
+              label="Amount"
+              name="amount"
             >
               <div
-                class="c16"
+                class="c32"
+                color="input.border"
                 display="flex"
+                width="100%"
               >
                 <h4
-                  class="c17"
+                  class="c28"
                   color="core.nearblack"
                   font-family="RT-Alias-Grotesk"
                   font-size="2"
                   font-weight="400"
                 >
-                  Transaction Fee
+                  Amount
                 </h4>
               </div>
               <div
-                class="c18"
-                display="flex"
+                class="c33"
+                display="inline-block"
+                width="100%"
               >
-                <input
-                  class="c33"
-                  disabled=""
-                  display="inline-block"
-                  height="6"
-                  value="< 0.0001"
-                  width="100%"
-                />
                 <div
                   class="c34"
-                  color="core.primary"
                   display="flex"
-                  font-size="3"
-                  height="7"
+                  height="80px"
+                  width="100%"
+                >
+                  <div
+                    class="c35"
+                    display="flex"
+                    font-family="sansSerif"
+                    font-size="5"
+                    size="6"
+                  >
+                    =
+                  </div>
+                  <input
+                    class="c36"
+                    disabled=""
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    label="Amount"
+                    name="amount"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value="0.01"
+                    width="100%"
+                  />
+                  <div
+                    class="c37"
+                    color="core.primary"
+                    disabled=""
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    FIL
+                  </div>
+                </div>
+                <div
+                  class="c38"
+                  display="flex"
+                  height="80px"
                 >
-                  FIL
+                  <input
+                    class="c39"
+                    disabled=""
+                    display="inline-block"
+                    font-size="5"
+                    height="100%"
+                    min="0"
+                    placeholder="0"
+                    step="0.000000000000000001"
+                    type="number"
+                    value="0.05"
+                    width="100%"
+                  />
+                  <div
+                    class="c40"
+                    color="core.primary"
+                    disabled=""
+                    display="flex"
+                    font-size="3"
+                    height="100%"
+                  >
+                    USD
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div
+            class="c41"
+            display="flex"
+            width="100%"
+          >
+            <p
+              class="c24"
+              font-family="RT-Alias-Grotesk"
+              font-size="2"
+              font-weight="400"
+            >
+              Transaction Fee
+            </p>
+            <p
+              class="c42"
+              color="core.primary"
+              font-family="RT-Alias-Grotesk"
+              font-size="2"
+              font-weight="400"
+            >
+              &lt; 0.0001 FIL
+            </p>
+          </div>
+          <div
+            class="c43"
+            display="flex"
+          >
+            <h2
+              class="c44"
+              font-family="RT-Alias-Grotesk"
+              font-size="4"
+              font-weight="400"
+            >
+              Total
+            </h2>
+            <div
+              class="c45"
+              display="flex"
+            >
+              <h2
+                class="c46 c47"
+                color="core.primary"
+                font-family="RT-Alias-Grotesk"
+                font-size="5"
+                font-weight="700"
+              >
+                0.01
+                 FIL
+              </h2>
+              <h2
+                class="c48"
+                color="core.darkgray"
+                font-family="RT-Alias-Grotesk"
+                font-size="4"
+                font-weight="400"
+              >
+                0.05
+                 
+                USD
+              </h2>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c35"
+        class="c49"
         display="flex"
+        width="13"
       >
-        <h2
-          class="c36"
-          font-family="RT-Alias-Grotesk"
-          font-size="4"
-          font-weight="400"
+        <button
+          class="c50"
+          disabled=""
+          font-size="3"
+          height="6"
+          type="button"
         >
-          Total
-        </h2>
-        <div
-          class="c37"
-          display="flex"
+          Back
+        </button>
+        <button
+          class="c51"
+          font-size="3"
+          height="6"
+          type="submit"
         >
-          <h2
-            class="c38 c39"
-            color="core.primary"
-            font-family="RT-Alias-Grotesk"
-            font-size="5"
-            font-weight="700"
-          >
-            0.010000000000122222
-             
-            FIL
-          </h2>
-          <h2
-            class="c40"
-            color="core.darkgray"
-            font-family="RT-Alias-Grotesk"
-            font-size="4"
-            font-weight="400"
-          >
-            0.05
-             
-            USD
-          </h2>
-        </div>
+          Send
+        </button>
       </div>
     </div>
-    <div
-      class="c41"
-    >
-      <button
-        class="c42 c43 Sendjs___StyledButton-sc-1crplc1-2 c43"
-        font-size="3"
-        height="6"
-        type="button"
-      >
-        Back
-      </button>
-      <button
-        class="c44 c45 Sendjs___StyledButton2-sc-1crplc1-3 c45"
-        font-size="3"
-        height="6"
-        type="submit"
-      >
-        Send
-      </button>
-    </div>
   </form>
 </div>
 `;
diff --git a/components/Wallet/Send.js/index.jsx b/components/Wallet/Send.js/index.jsx
index ff0e7e8ee..3e6affe5d 100644
--- a/components/Wallet/Send.js/index.jsx
+++ b/components/Wallet/Send.js/index.jsx
@@ -1,29 +1,26 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import dayjs from 'dayjs'
-import { border, layout, space, flexbox, position } from 'styled-system'
 import { useDispatch } from 'react-redux'
 import { FilecoinNumber } from '@openworklabs/filecoin-number'
 import { validateAddressString } from '@openworklabs/filecoin-address'
 import { Message } from '@openworklabs/filecoin-message'
 import makeFriendlyBalance from '../../../utils/makeFriendlyBalance'
-import noop from '../../../utils/noop'
 
 import {
   Box,
   Input,
-  Glyph,
   Text,
   Num,
   Button,
   ButtonClose,
-  FloatingContainer,
-  Title as Total,
-  ContentContainer as SendContainer,
-  Stepper
+  StepHeader,
+  Title,
+  Form
 } from '../../Shared'
+import { CardHeader } from '../../Msig/Shared'
 import ConfirmationCard from './ConfirmationCard'
+import HeaderText from './HeaderText'
 import ErrorCard from './ErrorCard'
 import { useWalletProvider } from '../../../WalletProvider'
 import useWallet from '../../../WalletProvider/useWallet'
@@ -34,25 +31,6 @@ import { confirmMessage } from '../../../store/actions'
 import { useConverter } from '../../../lib/Converter'
 import reportError from '../../../utils/reportError'
 
-const SendCardForm = styled.form.attrs(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  py: 3,
-  border: 1,
-  borderRadius: 2,
-  borderColor: 'silver',
-  spellcheck: false
-}))`
-  background-color: ${props => props.theme.colors.background.screen};
-  /* box-shadow: ${props => props.theme.shadows[2]}; */
-  ${position}
-  ${border}
-  ${space}
-  ${layout}
-  ${flexbox}
-`
-
 // this is a bit confusing, sometimes the form can report errors, so we check those here too
 const isValidAmount = (value, balance, errorFromForms) => {
   const valueFieldFilledOut = value && value.isGreaterThan(0)
@@ -98,7 +76,7 @@ const Send = ({ close }) => {
   const [step, setStep] = useState(1)
   const [attemptingTx, setAttemptingTx] = useState(false)
 
-  const submitMsg = async () => {
+  const send = async () => {
     let provider = walletProvider
     // attempt to establish a new connection with the ledger device if the user selected ledger
     if (wallet.type === LEDGER) {
@@ -142,19 +120,41 @@ const Send = ({ close }) => {
   }
 
   const sendMsg = async () => {
-    const message = await submitMsg()
-    if (message) {
-      dispatch(confirmMessage(toLowerCaseMsgFields(message)))
-      setValue(new FilecoinNumber('0', 'fil'))
+    try {
+      const message = await send()
+      if (message) {
+        dispatch(confirmMessage(toLowerCaseMsgFields(message)))
+        setValue(new FilecoinNumber('0', 'fil'))
+        close()
+      }
+    } catch (err) {
+      reportError(9, false, err.message, err.stack)
+      setUncaughtError(err.message)
+      setStep(3)
+    } finally {
       setAttemptingTx(false)
-      close()
     }
   }
 
+  const populateErrors = () => {
+    if (!isValidAddress(toAddress, toAddressError))
+      setToAddressError('Invalid address.')
+    if (!isValidAmount(value, wallet.balance, valueError))
+      setValueError(
+        'Please enter a valid amount that is less than your Filecoin balance.'
+      )
+  }
+
   const onSubmit = async e => {
     e.preventDefault()
-    setAttemptingTx(true)
-    if (
+    if (step === 1 && validateAddressString(toAddress)) {
+      setStep(2)
+    } else if (step === 1 && !validateAddressString(toAddress)) {
+      setToAddressError('Invalid to address')
+    } else if (step === 2 && !valueError) {
+      setStep(3)
+    } else if (
+      step === 3 &&
       !isValidForm(
         toAddress,
         value,
@@ -164,47 +164,36 @@ const Send = ({ close }) => {
         uncaughtError
       )
     ) {
-      if (!isValidAddress(toAddress, toAddressError))
-        setToAddressError('Invalid address.')
-      if (!isValidAmount(value, wallet.balance, valueError))
-        setValueError(
-          'Please enter a valid amount that is less than your Filecoin balance.'
-        )
-      return
-    }
-
-    if (wallet.type === LEDGER) {
-      setStep(2)
-      try {
+      populateErrors()
+    } else if (step === 3) {
+      setStep(4)
+      setAttemptingTx(true)
+      // confirmation step happens on ledger device, so we send message one step earlier
+      if (wallet.type === LEDGER) {
         await sendMsg()
-      } catch (err) {
-        reportError(9, false, err.message, err.stack)
-        setUncaughtError(err.message)
-        setStep(1)
-      }
-    } else {
-      // handle all other wallet types, this is easier to read than pleasing the linter
-      /* eslint-disable no-lonely-if */
-      if (step === 1) {
-        setStep(2)
-      } else {
-        setStep(3)
-        try {
-          await sendMsg()
-        } catch (err) {
-          reportError(10, false, err.message, err.stack)
-          setUncaughtError(err.message || err)
-          setStep(2)
-        }
       }
+    } else if (
+      step === 4 &&
+      !isValidForm(
+        toAddress,
+        value,
+        wallet.balance,
+        toAddressError,
+        valueError,
+        uncaughtError
+      )
+    ) {
+      populateErrors()
+    } else if (step === 4) {
+      setStep(5)
+      await sendMsg()
     }
   }
 
   const hasError = () =>
     !!(
-      attemptingTx &&
-      (uncaughtError ||
-        (wallet.type === LEDGER && reportLedgerConfigError(ledger)))
+      uncaughtError ||
+      (wallet.type === LEDGER && reportLedgerConfigError(ledger))
     )
 
   const ledgerError = () =>
@@ -212,194 +201,215 @@ const Send = ({ close }) => {
 
   const { converter, converterError } = useConverter()
 
+  const isSubmitBtnDisabled = () => {
+    if (uncaughtError) return false
+    if (step === 1 && !toAddress) return true
+    if (step === 2 && !isValidAmount(value, wallet.balance, valueError))
+      return true
+    if (step === 4 && wallet.type === LEDGER) return true
+    if (step > 4) return true
+  }
+
+  const submitBtnText = () => {
+    if (step === 4 && wallet.type !== LEDGER) return 'Send'
+    if (step === 4 && wallet.type === LEDGER) return 'Confirm on device.'
+    if (step < 4) return 'Next'
+    if (step > 4) return 'Send'
+  }
+
   return (
     <>
-      <SendContainer>
-        {hasError() && (
-          <ErrorCard
-            error={ledgerError() || uncaughtError}
-            reset={() => {
-              setAttemptingTx(false)
-              setUncaughtError('')
-              resetLedgerState()
-              setStep(1)
-            }}
-          />
-        )}
-        {(step === 2 || step === 3) && !hasError() && (
-          <ConfirmationCard walletType={wallet.type} />
-        )}
-        <SendCardForm onSubmit={onSubmit} autoComplete='off'>
-          <Box
-            display='flex'
-            alignItems='center'
-            justifyContent='space-between'
-            px={3}
-          >
-            <Box display='flex' alignItems='center'>
-              <Glyph
-                acronym='To'
-                color='background.screen'
-                borderColor='core.primary'
-                backgroundColor='core.primary'
-              />
-              <Text color='core.primary' ml={2}>
-                Sending Filecoin
-              </Text>
-            </Box>
-            <Box display='flex' alignItems='center'>
-              <Stepper
-                textColor='core.primary'
-                completedDotColor='core.primary'
-                incompletedDotColor='core.silver'
-                step={1}
-                totalSteps={2}
-                mr={2}
-              />
-              <ButtonClose
-                role='button'
-                type='button'
-                onClick={() => {
+      <ButtonClose
+        role='button'
+        type='button'
+        position='fixed'
+        top='3'
+        right='3'
+        onClick={() => {
+          setAttemptingTx(false)
+          setUncaughtError('')
+          resetLedgerState()
+          close()
+        }}
+      />
+      <Form onSubmit={onSubmit}>
+        <Box
+          maxWidth={14}
+          width={13}
+          minWidth={12}
+          display='flex'
+          flex='1'
+          flexDirection='column'
+          justifyContent='space-between'
+        >
+          <Box>
+            {hasError() && (
+              <ErrorCard
+                error={ledgerError() || uncaughtError}
+                reset={() => {
                   setAttemptingTx(false)
                   setUncaughtError('')
                   resetLedgerState()
-                  close()
+                  setStep(step - 1)
                 }}
               />
-            </Box>
-          </Box>
-          <Box mt={5}>
-            <Box px={3}>
-              <Input.Address
-                name='recipient'
-                onChange={e => setToAddress(e.target.value)}
-                value={toAddress}
-                label='Recipient'
-                placeholder='t1...'
-                error={toAddressError}
-                setError={setToAddressError}
-                disabled={step === 2 && !hasError()}
-                valid={validateAddressString(toAddress)}
-                onBlur={() => {
-                  const isValidAddress = validateAddressString(toAddress)
-                  if (toAddress && !isValidAddress)
-                    setToAddressError(`Invalid Recipient address.`)
-                }}
-                onFocus={() => {
-                  if (toAddressError) setToAddressError('')
-                }}
+            )}
+            {!hasError() && attemptingTx && (
+              <ConfirmationCard
+                walletType={wallet.type}
+                currentStep={4}
+                totalSteps={4}
               />
-              <Input.Funds
-                name='amount'
-                label='Amount'
-                amount={value.toAttoFil()}
-                onAmountChange={setValue}
+            )}
+            {!hasError() && !attemptingTx && (
+              <>
+                <StepHeader
+                  title='Sending Filecoin'
+                  currentStep={step}
+                  totalSteps={4}
+                  glyphAcronym='Sf'
+                />
+                <HeaderText
+                  step={step}
+                  customizingGas={false}
+                  walletType={wallet.type}
+                />
+              </>
+            )}
+            <Box boxShadow={2} borderRadius={4}>
+              <CardHeader
+                address={wallet.address}
                 balance={wallet.balance}
-                error={valueError}
-                setError={setValueError}
-                estimatedTransactionFee={estimatedTransactionFee}
-                disabled={step === 2 && !hasError()}
-                valid={isValidAmount(value, wallet.balance, valueError)}
+                customizingGas={false}
               />
-              <Box position='relative' width='100%'>
-                <Input.Text
-                  onChange={noop}
-                  denom='FIL'
-                  label='Transaction Fee'
-                  value='< 0.0001'
-                  disabled
+
+              <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 > 1}
+                  placeholder='t1...'
+                  onFocus={() => {
+                    if (toAddressError) setToAddressError('')
+                  }}
                 />
               </Box>
-            </Box>
-            <Box
-              display='flex'
-              flexDirection='row'
-              alignItems='flex-start'
-              justifyContent='space-between'
-              mt={5}
-              mx={1}
-              px={3}
-            >
-              <Total fontSize={4} alignSelf='flex-start'>
-                Total
-              </Total>
-              <Box
-                display='flex'
-                flexDirection='column'
-                textAlign='right'
-                pl={4}
-              >
-                <Num
-                  size='l'
-                  css={`
-                    word-wrap: break-word;
-                  `}
-                  color='core.primary'
-                >
-                  {value.isGreaterThan(0)
-                    ? `${value.plus(estimatedTransactionFee).toString()}`
-                    : '0'}{' '}
-                  FIL
-                </Num>
-                <Num size='m' color='core.darkgray'>
-                  {!converterError && value.isGreaterThan(0)
-                    ? `${makeFriendlyBalance(
-                        converter.fromFIL(value.plus(estimatedTransactionFee)),
-                        2
-                      )}`
-                    : '0'}{' '}
-                  USD
-                </Num>
-              </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={wallet.balance}
+                    error={valueError}
+                    setError={setValueError}
+                    estimatedTransactionFee={estimatedTransactionFee}
+                    disabled={step > 2 && !hasError()}
+                  />
+                </Box>
+              )}
+              {step > 2 && (
+                <>
+                  <Box
+                    display='flex'
+                    flexDirection='row'
+                    alignItems='center'
+                    justifyContent='space-between'
+                    width='100%'
+                    p={3}
+                    border={0}
+                    bg='background.screen'
+                  >
+                    <Text margin={0}>Transaction Fee</Text>
+                    <Text ml={2} color='core.primary'>
+                      {'< 0.0001 FIL'}
+                    </Text>
+                  </Box>
+
+                  <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}
+                    >
+                      <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>
-          <FloatingContainer>
-            {step === 2 && wallet.type === LEDGER && !hasError() ? (
-              <Text width='100%' textAlign='center' px={4}>
-                Confirm or reject the transaction on your Ledger Device.
-              </Text>
-            ) : (
-              <>
-                <Button
-                  type='button'
-                  title='Back'
-                  variant='secondary'
-                  border={0}
-                  borderRight={1}
-                  borderRadius={0}
-                  borderColor='core.lightgray'
-                  onClick={() => {
-                    setAttemptingTx(false)
-                    setUncaughtError('')
-                    resetLedgerState()
-                    if (step === 1) {
-                      close()
-                    } else {
-                      setStep(step - 1)
-                    }
-                  }}
-                  css={`
-                    /* 'css' operation is used here to override its inherited border-radius property */
-                    border-radius: 0px;
-                  `}
-                />
-                <Button
-                  border={0}
-                  borderRadius={0}
-                  type='submit'
-                  title={step === 1 ? 'Send' : 'Confirm'}
-                  variant='primary'
-                  onClick={noop}
-                  css={`
-                    /* 'css' operation is used here to override its inherited border-radius property */
-                    border-radius: 0px;
-                  `}
-                />
-              </>
-            )}
-          </FloatingContainer>
-        </SendCardForm>
-      </SendContainer>
+          <Box
+            display='flex'
+            flex='1'
+            flexDirection='row'
+            justifyContent='space-between'
+            alignItems='flex-end'
+            margin='auto'
+            maxWidth={14}
+            width={13}
+            minWidth={12}
+            my={3}
+          >
+            <Button
+              title='Back'
+              variant='secondary'
+              onClick={() => {
+                setAttemptingTx(false)
+                setUncaughtError('')
+                resetLedgerState()
+                if (step === 1) {
+                  close()
+                } else {
+                  setStep(step - 1)
+                }
+              }}
+              disabled={attemptingTx}
+            />
+            <Button
+              variant='primary'
+              title={submitBtnText()}
+              disabled={isSubmitBtnDisabled()}
+              type='submit'
+            />
+          </Box>
+        </Box>
+      </Form>
     </>
   )
 }
diff --git a/components/Wallet/Send.js/index.test.jsx b/components/Wallet/Send.js/index.test.jsx
index aff113404..2625b50c2 100644
--- a/components/Wallet/Send.js/index.test.jsx
+++ b/components/Wallet/Send.js/index.test.jsx
@@ -32,17 +32,23 @@ describe('Send Flow', () => {
           </Tree>
         )
         fireEvent.change(screen.getByPlaceholderText(/t1.../), {
-          target: { value: address }
+          target: { value: address },
+          preventDefault: () => {}
         })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
         fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
           target: { value: filAmount }
         })
         await flushPromises()
         fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
         await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
-        fireEvent.click(screen.getByText('Confirm'))
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
+        fireEvent.click(screen.getByText('Send'))
         await flushPromises()
       })
       expect(walletProvider.getNonce).toHaveBeenCalledWith(address)
@@ -64,7 +70,6 @@ describe('Send Flow', () => {
     test('it does not allow a user to send a message if address is poorly formed', async () => {
       const { Tree, store, walletProvider } = composeMockAppTree('postOnboard')
       const badAddress = 't1z225tguggx4onbauimqvxz'
-      const filAmount = new FilecoinNumber('.01', 'fil')
       await act(async () => {
         render(
           <Tree>
@@ -72,42 +77,36 @@ describe('Send Flow', () => {
           </Tree>
         )
         fireEvent.change(screen.getByPlaceholderText(/t1.../), {
-          target: { value: badAddress }
-        })
-        fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
-          target: { value: filAmount }
+          target: { value: badAddress },
+          preventDefault: () => {}
         })
         await flushPromises()
-        fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
-        await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
       })
-      expect(screen.getByText(/Invalid address/)).toBeInTheDocument()
+      expect(screen.getByText(/Invalid to address/)).toBeInTheDocument()
       expect(walletProvider.getNonce).not.toHaveBeenCalled()
       expect(walletProvider.wallet.sign).not.toHaveBeenCalled()
       expect(store.getState().messages.pending.length).toBe(0)
     })
 
-    test('it does not allow a user to send a message if address is left blank', async () => {
+    test('it does not allow a user to proceed if address is left blank', async () => {
       const { Tree, store, walletProvider } = composeMockAppTree('postOnboard')
-      const filAmount = new FilecoinNumber('.01', 'fil')
       await act(async () => {
         render(
           <Tree>
             <Send close={close} />
           </Tree>
         )
-        fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
-          target: { value: filAmount }
+        fireEvent.change(screen.getByPlaceholderText(/t1.../), {
+          target: { value: '' },
+          preventDefault: () => {}
         })
         await flushPromises()
-        fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
-        await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
       })
-      expect(screen.getByText(/Invalid address/)).toBeInTheDocument()
+      expect(screen.getByText(/Step 1/)).toBeInTheDocument()
       expect(walletProvider.getNonce).not.toHaveBeenCalled()
       expect(walletProvider.wallet.sign).not.toHaveBeenCalled()
       expect(store.getState().messages.pending.length).toBe(0)
@@ -129,20 +128,26 @@ describe('Send Flow', () => {
         )
 
         fireEvent.change(screen.getByPlaceholderText(/t1.../), {
-          target: { value: address }
+          target: { value: address },
+          preventDefault: () => {}
         })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
         fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
           target: { value: filAmount }
         })
         await flushPromises()
         fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
         await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
       })
-      // expect(
-      //   screen.getByText(/Please enter a valid amount/)
-      // ).toBeInTheDocument()
+      expect(
+        screen.getByText(
+          /The amount must be smaller than this account's balance/
+        )
+      ).toBeInTheDocument()
       expect(walletProvider.getNonce).not.toHaveBeenCalled()
       expect(walletProvider.wallet.sign).not.toHaveBeenCalled()
       expect(store.getState().messages.pending.length).toBe(0)
@@ -160,15 +165,19 @@ describe('Send Flow', () => {
           </Tree>
         )
         fireEvent.change(screen.getByPlaceholderText(/t1.../), {
-          target: { value: address }
+          target: { value: address },
+          preventDefault: () => {}
         })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
         fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
           target: { value: filAmount }
         })
         await flushPromises()
         fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
         await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
       })
       expect(
@@ -308,25 +317,32 @@ describe('Send Flow', () => {
           </Tree>
         )
         fireEvent.change(screen.getByPlaceholderText(/t1.../), {
-          target: { value: address }
+          target: { value: address },
+          preventDefault: () => {}
         })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
         fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
           target: { value: filAmount }
         })
         await flushPromises()
         fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
         await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
-        fireEvent.click(screen.getByText('Confirm'))
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
+        fireEvent.click(screen.getByText('Send'))
         await flushPromises()
       })
       await flushPromises()
-      expect()
+      expect(close).toHaveBeenCalled()
     })
   })
 
   describe('snapshots', () => {
+    afterEach(cleanup)
     test('it renders correctly', async () => {
       const { Tree } = composeMockAppTree('postOnboard')
       let res
@@ -337,12 +353,35 @@ describe('Send Flow', () => {
           </Tree>
         )
       })
-      expect(res.container.firstChild).toMatchSnapshot()
+      expect(res.container).toMatchSnapshot()
     })
-    test('it renders invalid address errors correctly', async () => {
+
+    test('it renders step 2 correctly', async () => {
+      const address = 't1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi'
       const { Tree } = composeMockAppTree('postOnboard')
-      const badAddress = 't1z225tguggx4onbauimqvxz'
+      let res
+      await act(async () => {
+        res = render(
+          <Tree>
+            <Send close={close} />
+          </Tree>
+        )
+        fireEvent.change(screen.getByPlaceholderText(/t1.../), {
+          target: { value: address },
+          preventDefault: () => {}
+        })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
+      })
+      expect(res.container).toMatchSnapshot()
+    })
+
+    test('it renders step 3 correctly', async () => {
+      const address = 't1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi'
       const filAmount = new FilecoinNumber('.01', 'fil')
+
+      const { Tree } = composeMockAppTree('postOnboard')
       let res
       await act(async () => {
         res = render(
@@ -351,22 +390,83 @@ describe('Send Flow', () => {
           </Tree>
         )
         fireEvent.change(screen.getByPlaceholderText(/t1.../), {
-          target: { value: badAddress }
+          target: { value: address },
+          preventDefault: () => {}
         })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
         fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
           target: { value: filAmount }
         })
         await flushPromises()
         fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
         await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
       })
-      expect(res.container.firstChild).toMatchSnapshot()
+      expect(screen.getByText(/Step 3/)).toBeInTheDocument()
+      expect(res.container).toMatchSnapshot()
+    })
+
+    test('it renders step 4 correctly', async () => {
+      const address = 't1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi'
+      const filAmount = new FilecoinNumber('.01', 'fil')
+
+      const { Tree } = composeMockAppTree('postOnboard')
+      let res
+      await act(async () => {
+        res = render(
+          <Tree>
+            <Send close={close} />
+          </Tree>
+        )
+        fireEvent.change(screen.getByPlaceholderText(/t1.../), {
+          target: { value: address },
+          preventDefault: () => {}
+        })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
+        fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
+          target: { value: filAmount }
+        })
+        await flushPromises()
+        fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
+      })
+      expect(screen.getByText(/Step 4/)).toBeInTheDocument()
+      expect(res.container).toMatchSnapshot()
+    })
+
+    test('it renders invalid address errors correctly', async () => {
+      const { Tree } = composeMockAppTree('postOnboard')
+      const badAddress = 't1z225tguggx4onbauimqvxz'
+      let res
+      await act(async () => {
+        res = render(
+          <Tree>
+            <Send close={close} />
+          </Tree>
+        )
+        fireEvent.change(screen.getByPlaceholderText(/t1.../), {
+          target: { value: badAddress },
+          preventDefault: () => {}
+        })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
+      })
+      expect(res.container).toMatchSnapshot()
     })
 
     test('it renders invalid value errors correctly', async () => {
       const { Tree } = composeMockAppTree('postOnboard')
+      const address = 't1z225tguggx4onbauimqvxzutopzdr2m4s6z6wgi'
       const filAmount = new FilecoinNumber('.01', 'fil')
       let res
       await act(async () => {
@@ -375,16 +475,23 @@ describe('Send Flow', () => {
             <Send close={close} />
           </Tree>
         )
+        fireEvent.change(screen.getByPlaceholderText(/t1.../), {
+          target: { value: address },
+          preventDefault: () => {}
+        })
+        await flushPromises()
+        fireEvent.click(screen.getByText('Next'))
+        await flushPromises()
         fireEvent.change(screen.getAllByPlaceholderText('0')[0], {
           target: { value: filAmount }
         })
         await flushPromises()
         fireEvent.blur(screen.getAllByPlaceholderText('0')[0])
         await flushPromises()
-        fireEvent.click(screen.getByText('Send'))
+        fireEvent.click(screen.getByText('Next'))
         await flushPromises()
       })
-      expect(res.container.firstChild).toMatchSnapshot()
+      expect(res.container).toMatchSnapshot()
     })
 
     test.skip('it renders the gas customization view', async () => {
diff --git a/components/Wallet/__snapshots__/index.test.js.snap b/components/Wallet/__snapshots__/index.test.js.snap
index 4f128c76b..47ab12de9 100644
--- a/components/Wallet/__snapshots__/index.test.js.snap
+++ b/components/Wallet/__snapshots__/index.test.js.snap
@@ -858,7 +858,8 @@ exports[`WalletView it renders correctly 1`] = `
   -ms-flex-positive: 999;
   flex-grow: 999;
   padding-top: 16px;
-  margin: 0 0.5rem 6rem 0.5rem;
+  margin: 0 0.5rem 0.5rem 0.5rem;
+  min-height: 100vh;
   min-width: 53%;
 }
 
@@ -3763,36 +3764,20 @@ exports[`WalletView it renders correctly 1`] = `
 </div>
 `;
 
-exports[`WalletView it renders the send flow when a user clicks send 1`] = `
-.c1 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
+exports[`WalletView it renders the send page when the user goes to the send screen 1`] = `
 .c5 {
   min-width: 0;
   box-sizing: border-box;
-  border-radius: 8px;
-  padding: 16px;
-  margin-bottom: 8px;
-  color: purple;
-  background-color: #5E26FF;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 300px;
-  height: 300px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -3800,35 +3785,36 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  box-shadow: 0 0.7px 2.2px -8px rgba(0,0,0,0.18),0 1.7px 5.4px rgba(0,0,0,0.129),0 3.1px 10.1px rgba(0,0,0,0.107),0 5.6px 18.1px rgba(0,0,0,0.09),0 10.4px 33.8px rgba(0,0,0,0.073),0 25px 81px rgba(0,0,0,0.051);
 }
 
 .c6 {
   min-width: 0;
   box-sizing: border-box;
-  color: #E0D7FE;
+}
+
+.c8 {
+  min-width: 0;
+  box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
 }
 
-.c7 {
+.c10 {
   min-width: 0;
   box-sizing: border-box;
   border-width: 0.1875rem;
   border-radius: 8px;
   border-style: solid;
-  margin-right: 16px;
-  color: #E0D7FE;
+  color: #000;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3845,108 +3831,84 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   justify-content: center;
 }
 
-.c10 {
-  min-width: 0;
-  box-sizing: border-box;
-  color: #E0D7FE;
-}
-
-.c12 {
-  min-width: 0;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c20 {
+.c13 {
   min-width: 0;
   box-sizing: border-box;
+  margin-left: 24px;
+  margin-top: 0;
+  margin-bottom: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c22 {
+.c15 {
   min-width: 0;
   box-sizing: border-box;
-  border: 1px solid;
-  border-radius: 8px;
-  padding: 16px;
-  background-color: transparent;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 300px;
-  min-height: 300px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-.c23 {
+.c16 {
   min-width: 0;
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #1AD08F;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
 }
 
-.c27 {
+.c17 {
   min-width: 0;
   box-sizing: border-box;
+  border-radius: 100px;
+  margin-left: 4px;
+  margin-right: 4px;
+  background-color: #C4C4C4;
+  display: inline-block;
   width: 8px;
+  height: 8px;
 }
 
-.c29 {
+.c19 {
   min-width: 0;
   box-sizing: border-box;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
 }
 
-.c33 {
+.c20 {
   min-width: 0;
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  border: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  padding: 16px;
+  background-color: #5E26FF;
+  color: #ffffff;
+  width: 100%;
 }
 
-.c39 {
+.c21 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3957,15 +3919,14 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   justify-content: space-between;
 }
 
-.c40 {
+.c22 {
   min-width: 0;
   box-sizing: border-box;
   border-width: 0.1875rem;
   border-radius: 8px;
   border-style: solid;
-  border-color: #5E26FF;
-  background-color: #5E26FF;
-  color: #EFF3FD;
+  margin-right: 16px;
+  color: white;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3982,54 +3943,32 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   justify-content: center;
 }
 
-.c42 {
+.c23 {
   min-width: 0;
   box-sizing: border-box;
-  margin-right: 8px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
 }
 
-.c44 {
-  min-width: 0;
-  box-sizing: border-box;
-  border-radius: 100px;
-  margin-left: 4px;
-  margin-right: 4px;
-  background-color: #5E26FF;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-}
-
-.c45 {
-  min-width: 0;
-  box-sizing: border-box;
-  border-radius: 100px;
-  margin-left: 4px;
-  margin-right: 4px;
-  background-color: #999999;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-}
-
-.c47 {
-  min-width: 0;
-  box-sizing: border-box;
-  margin-top: 32px;
-}
-
-.c48 {
+.c25 {
   min-width: 0;
   box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
+  border: 0;
+  padding: 16px;
+  background-color: #EFF3FD;
+  width: 100%;
 }
 
-.c50 {
+.c27 {
   min-width: 0;
   box-sizing: border-box;
   margin-right: 16px;
@@ -4047,7 +3986,7 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   align-items: center;
 }
 
-.c52 {
+.c29 {
   min-width: 0;
   box-sizing: border-box;
   position: relative;
@@ -4064,188 +4003,65 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   align-items: center;
 }
 
-.c54 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: relative;
-  border-color: #999999;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-height: 160px;
-}
-
-.c55 {
+.c31 {
   min-width: 0;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding-left: 8px;
-  padding-right: 8px;
-  margin-right: 8px;
-  color: #999999;
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
-  max-width: 240px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: center;
+  max-width: 640px;
+  width: 560px;
+  min-width: 480px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
 }
 
-.c56 {
-  min-width: 0;
-  box-sizing: border-box;
-  display: inline-block;
-  width: 100%;
+.c11 {
+  font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
+  font-weight: 700;
+  font-size: 1.5rem;
 }
 
-.c57 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: relative;
-  border-bottom: 1px solid;
-  border-color: #EFF3FD;
-  border-top-left-radius: 4px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 80px;
-  width: 100%;
-}
-
-.c58 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: absolute;
-  left: -24px;
-  bottom: -24px;
-  z-index: 99;
-  border-radius: 32px;
-  padding-bottom: 4px;
-  background-color: #ffffff;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 48px;
-  height: 48px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 2rem;
-  font-family: "system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-}
-
-.c61 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 4px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 80px;
-}
-
-.c64 {
-  min-width: 0;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-}
-
-.c67 {
-  min-width: 0;
-  box-sizing: border-box;
-  margin-top: 32px;
-  margin-left: 4px;
-  margin-right: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c69 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-left: 24px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  text-align: right;
-}
-
-.c8 {
-  font-family: "RT-Alias-Medium","system-ui","Segoe UI","Roboto",Helvetica;
-  font-weight: 700;
-  font-size: 1.5rem;
-}
-
-.c21 {
+.c32 {
   cursor: pointer;
-  border: 1px solid #E0D7FE;
+  border: 1px solid #262626;
   background-color: transparent;
-  border-color: #E0D7FE;
-  color: #E0D7FE;
+  border-color: #262626;
+  color: #262626;
   font-size: 1.125rem;
   -webkit-transition: 0.18s ease-in-out;
   transition: 0.18s ease-in-out;
   border-radius: 4px;
-  padding: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 16px;
   padding-right: 16px;
-  height: -webkit-max-content;
-  height: -moz-max-content;
-  height: max-content;
+  height: 48px;
   border-width: 1px;
   border-radius: 4px;
 }
 
-.c21:hover {
+.c32:hover {
   opacity: 0.8;
 }
 
-.c34 {
+.c33 {
   cursor: not-allowed;
   border: 1px solid #C4C4C4;
   background-color: #C4C4C4;
@@ -4259,152 +4075,29 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   height: 48px;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
   border-width: 1px;
   border-radius: 4px;
 }
 
-.c34:hover {
+.c33:hover {
   opacity: 1;
 }
 
-.c74 {
-  cursor: pointer;
-  border: 1px solid core.lightgray;
-  background-color: transparent;
-  border-color: core.lightgray;
-  color: #262626;
-  font-size: 1.125rem;
-  -webkit-transition: 0.18s ease-in-out;
-  transition: 0.18s ease-in-out;
-  border-radius: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
-  height: 48px;
-  border: 0;
-  border-right: 1px solid;
-  border-radius: 0;
-  border-color: #C4C4C4;
-  border-width: 1px;
-}
-
-.c74:hover {
-  opacity: 0.8;
-}
-
-.c76 {
-  cursor: pointer;
-  border: 1px solid #1AD08F;
-  background-color: #1AD08F;
-  border-color: #1AD08F;
-  color: #08442F;
-  font-size: 1.125rem;
-  -webkit-transition: 0.18s ease-in-out;
-  transition: 0.18s ease-in-out;
-  border-radius: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
-  height: 48px;
-  border: 0;
-  border-radius: 0;
-  border-width: 1px;
-}
-
-.c76:hover {
-  opacity: 0.8;
-}
-
-.c16 {
+.c3 {
   width: 24;
   height: 24;
 }
 
-.c13 {
+.c12 {
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.2;
   font-family: RT-Alias-Grotesk;
-  overflow: hidden;
   margin: 0;
 }
 
-.c30 {
+.c14 {
   color: #262626;
-  font-size: 3rem;
-  font-weight: 700;
-  line-height: 1;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c32 {
-  color: #666666;
-  font-size: 2rem;
-  font-weight: 700;
-  line-height: 1.2;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c68 {
-  font-size: 1.5rem;
-  font-weight: 400;
-  line-height: 1.2;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c70 {
-  color: #5E26FF;
-  font-size: 2rem;
-  font-weight: 700;
-  line-height: 1.2;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c72 {
-  color: #666666;
-  font-size: 1.5rem;
-  font-weight: 400;
-  line-height: 1.2;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c9 {
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.4;
-  font-family: RT-Alias-Grotesk;
-}
-
-.c11 {
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.4;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c41 {
-  color: #5E26FF;
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.4;
-  font-family: RT-Alias-Grotesk;
-  margin-left: 8px;
-}
-
-.c43 {
-  color: #5E26FF;
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.4;
@@ -4415,43 +4108,22 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
 }
 
 .c18 {
-  color: #E0D7FE;
   font-size: 1.125rem;
   font-weight: 400;
-  line-height: 1;
+  line-height: 1.4;
   font-family: RT-Alias-Grotesk;
-  margin: 0;
-  margin-top: 0;
-  margin-left: 4px;
+  text-align: center;
 }
 
 .c24 {
   font-size: 1.125rem;
   font-weight: 400;
-  line-height: 1;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c25 {
-  color: #000;
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1;
+  line-height: 1.4;
   font-family: RT-Alias-Grotesk;
   margin: 0;
 }
 
 .c28 {
-  color: #666666;
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1;
-  font-family: RT-Alias-Grotesk;
-  margin: 0;
-}
-
-.c51 {
   color: #262626;
   font-size: 1.125rem;
   font-weight: 400;
@@ -4460,76 +4132,7 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   margin: 0;
 }
 
-.c15 {
-  cursor: pointer;
-  border: 1px solid #1AD08F;
-  background-color: #1AD08F;
-  border-color: #1AD08F;
-  color: #08442F;
-  font-size: 1.125rem;
-  -webkit-transition: 0.18s ease-in-out;
-  transition: 0.18s ease-in-out;
-  border-radius: 4px;
-  margin-left: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 48px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-width: 1px;
-  border-radius: 4px;
-  height: auto;
-  opacity: 1 !important;
-  border: 0;
-  background: transparent;
-  padding: 0;
-  outline: none;
-}
-
-.c15:hover {
-  opacity: 0.8;
-}
-
-.c17 {
-  -webkit-transition: 0.24s ease-in-out;
-  transition: 0.24s ease-in-out;
-}
-
-.c14:hover .c17 {
-  -webkit-transform: scale(1.25);
-  -ms-transform: scale(1.25);
-  transform: scale(1.25);
-}
-
-.c19 {
-  -webkit-transition: 0.18s ease-in;
-  transition: 0.18s ease-in;
-  opacity: 0;
-}
-
-.c14:hover .c19 {
-  opacity: 1;
-}
-
-.c26:hover {
-  cursor: pointer;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c31 {
-  word-wrap: break-word;
-}
-
-.c53 {
+.c30 {
   min-width: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -4554,1074 +4157,402 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
   border-color: #999999;
 }
 
-.c53:hover {
-  background: #bacbf7;
-  cursor: text;
-}
-
-.c53:focus {
-  box-shadow: 0;
-  outline: 0;
+.c30:hover {
   background: #bacbf7;
-}
-
-.c65 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
   cursor: text;
-  background: transparent;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: inline-block;
-  height: 48px;
-  width: 100%;
-  border-radius: 4px;
-  border: 0;
-  border-color: #999999;
-}
-
-.c65:hover {
-  background: transparent;
-  cursor: initial;
 }
 
-.c65:focus {
+.c30:focus {
   box-shadow: 0;
   outline: 0;
   background: #bacbf7;
 }
 
-.c49 {
+.c26 {
   display: inline-block;
   width: 100%;
   border-radius: 1px;
 }
 
-.c60 {
-  min-width: 0;
-  box-sizing: border-box;
-  top: 0px;
-  left: 0px;
-  border-top-right-radius: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  color: #5E26FF;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  min-width: 64px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: #d1ddfa;
-}
-
-.c63 {
-  min-width: 0;
-  box-sizing: border-box;
-  top: 0px;
-  left: 0px;
-  border-bottom-right-radius: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  color: #5E26FF;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  min-width: 64px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: #d1ddfa;
-}
-
-.c66 {
-  min-width: 0;
-  box-sizing: border-box;
-  padding-left: 16px;
-  padding-right: 16px;
-  background-color: transparent;
-  color: #5E26FF;
-  height: 64px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 64px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  text-align: center;
-  position: relative;
-  background: core.transparent;
-}
-
-.c59 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
-  cursor: text;
-  background: #d1ddfa;
-  font-size: 2rem;
-  height: 100%;
-  display: inline-block;
-  width: 100%;
-  border-top-left-radius: 4px;
-  border: 0;
-  border-color: #999999;
-  -moz-appearance: textfield;
-}
-
-.c59:hover {
-  background: #bacbf7;
-  cursor: text;
-}
-
-.c59:focus {
-  box-shadow: 0;
-  outline: 0;
-  background: #bacbf7;
-}
-
-.c59::-webkit-outer-spin-button,
-.c59::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c62 {
-  min-width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 1px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  font-size: 1.125rem;
-  text-align: right;
-  cursor: text;
-  background: #d1ddfa;
-  font-size: 2rem;
-  height: 100%;
-  display: inline-block;
+.c4 {
   width: 100%;
-  border-bottom-left-radius: 4px;
-  border: 0;
-  border-color: #999999;
-  -moz-appearance: textfield;
-}
-
-.c62:hover {
-  background: #bacbf7;
-  cursor: text;
-}
-
-.c62:focus {
-  box-shadow: 0;
-  outline: 0;
-  background: #bacbf7;
-}
-
-.c62::-webkit-outer-spin-button,
-.c62::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c73 {
-  min-width: 0;
-  box-sizing: border-box;
-  border: 1px solid;
-  border-color: #C4C4C4;
-  background-color: #F6F8FE;
-  box-shadow: rgba(0,0,0,0.10) 0px 0.7px 2.2px -8px,rgba(0,0,0,0.04) 0px 1.7px 2.4px,rgba(0,0,0,0.106) 0px 3.1px 8.1px,rgba(0,0,0,0.04) 0px 5.6px 12.1px,rgba(0,0,0,0.045) 0px 4.4px 4.8px,rgba(0,0,0,0.05) 0px 15px 41px;
-  position: fixed;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  bottom: 16px;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  border-radius: 4px;
-  max-width: 560px;
-  width: 40%;
-}
-
-.c2 {
-  background: #1AD08F;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  outline: none;
-  border: 0;
-  border-radius: 16px;
-  font-size: 1.125rem;
-  font-weight: 400;
-  font-family: RT-Alias-Grotesk;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding-left: 24px;
-  padding-right: 24px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.c2:first-child {
-  margin-right: 8px;
-}
-
-.c2:hover {
-  cursor: pointer;
-  background: true;
-}
-
-.c3 {
-  background: #C4C4C4;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  outline: none;
-  border: 0;
-  border-radius: 16px;
-  font-size: 1.125rem;
-  font-weight: 400;
-  font-family: RT-Alias-Grotesk;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding-left: 24px;
-  padding-right: 24px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.c3:first-child {
-  margin-right: 8px;
-}
-
-.c3:hover {
-  background: #C4C4C4;
-}
-
-.c46 {
-  outline: 0;
-  border: 0;
-  background: transparent;
-  -webkit-transition: 0.24s ease-in-out;
-  transition: 0.24s ease-in-out;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c46:hover {
-  -webkit-transform: scale(1.25);
-  -ms-transform: scale(1.25);
-  transform: scale(1.25);
-}
-
-.c4 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  margin: 0 0.5rem 0.5rem 0.5rem;
-}
-
-.c36 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-basis: 0;
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-  -webkit-box-flex: 999;
-  -webkit-flex-grow: 999;
-  -ms-flex-positive: 999;
-  flex-grow: 999;
-  padding-top: 16px;
-  margin: 0 0.5rem 6rem 0.5rem;
-  min-width: 53%;
-}
-
-.c37 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-flex: 2;
-  -webkit-flex-grow: 2;
-  -ms-flex-positive: 2;
-  flex-grow: 2;
-  max-width: 560px;
-  min-width: 300px;
-}
-
-.c38 {
-  background-color: #EFF3FD;
-  border: 1px solid;
-  border-radius: 4px;
-  border-color: silver;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c71 {
-  word-wrap: break-word;
-}
-
-.c75 {
-  border-radius: 0px;
-}
-
-.c77 {
-  border-radius: 0px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  max-width: 1440px;
-  margin: 0 auto;
-}
-
-.c35 {
-  cursor: pointer;
-  border: 1px solid #262626;
-  background-color: transparent;
-  border-color: #262626;
-  color: #262626;
-  font-size: 1.125rem;
-  -webkit-transition: 0.18s ease-in-out;
-  transition: 0.18s ease-in-out;
-  border-radius: 4px;
-  margin-top: 24px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 48px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-width: 1px;
-  border-radius: 4px;
-  background-color: #E0D7FE00;
-}
-
-.c35:hover {
-  opacity: 0.8;
-}
-
-.c35:hover {
-  background-color: #E0D7FE;
-}
-
-@media screen and (min-width:40em) {
-
-}
-
-@media screen and (min-width:52em) {
-
-}
-
-<div
-  class="SidebarLayout__Wrapper-gwfrwp-0 c0"
->
-  <div
-    class="c1"
-    display="flex"
-    width="100%"
-  >
-    <button
-      class="c2"
-      display="flex"
-      font-family="RT-Alias-Grotesk"
-      font-size="2"
-      font-weight="1"
-    >
-      Testnet
-    </button>
-    <button
-      class="c3"
-      disabled=""
-      display="flex"
-      font-family="RT-Alias-Grotesk"
-      font-size="2"
-      font-weight="1"
-    >
-      Mainnet
-    </button>
-  </div>
-  <div
-    class="c4"
-    height="100vh"
-  >
-    <div
-      class="c5"
-      color="purple"
-      display="flex"
-      height="300px"
-      width="300px"
-    >
-      <div
-        class="c6"
-        color="card.account.color"
-        display="flex"
-      >
-        <div
-          class="c7"
-          color="card.account.color"
-          display="flex"
-          size="6"
-        >
-          <h3
-            class="c8"
-          >
-            Ac
-          </h3>
-        </div>
-        <p
-          class="c9"
-          font-family="RT-Alias-Grotesk"
-          font-size="2"
-          font-weight="400"
-        >
-          Account
-        </p>
-      </div>
-      <div
-        class="c10"
-        color="card.account.color"
-      >
-        <p
-          class="c11"
-          font-family="RT-Alias-Grotesk"
-          font-size="2"
-          font-weight="400"
-        >
-          Your Address
-        </p>
-        <div
-          class="c12"
-          display="flex"
-        >
-          <h2
-            class="c13"
-            font-family="RT-Alias-Grotesk"
-            font-size="4"
-            font-weight="1"
-            overflow="hidden"
-          >
-            t1z22 ... 6wgi
-          </h2>
-          <button
-            class="c14 c15"
-            display="flex"
-            font-size="3"
-            height="6"
-          >
-            <svg
-              class="c16 c17"
-              fill="none"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                fill="#1A0066"
-                height="12"
-                width="12"
-                x="8"
-                y="4"
-              />
-              <rect
-                fill="#E0D7FE"
-                height="12"
-                width="12"
-                x="4"
-                y="8"
-              />
-            </svg>
-            <h4
-              class="c18 c19"
-              color="core.secondary"
-              font-family="RT-Alias-Grotesk"
-              font-size="2"
-              font-weight="400"
-            >
-              Copy
-            </h4>
-          </button>
-        </div>
-      </div>
-      <div
-        class="c20"
-        display="flex"
-      >
-        <button
-          class="c21"
-          font-size="3"
-          height="max-content"
-          type="button"
-        >
-          Switch
-        </button>
-      </div>
-    </div>
-    <div
-      class="c22"
-      display="flex"
-      width="300px"
-    >
-      <div
-        class="c23"
-        display="flex"
-      >
-        <h4
-          class="c24"
-          font-family="RT-Alias-Grotesk"
-          font-size="2"
-          font-weight="400"
-        >
-          Balance
-        </h4>
-        <div
-          class="c23"
-          display="flex"
-        >
-          <h4
-            class="c25 c26"
-            color="core.black"
-            font-family="RT-Alias-Grotesk"
-            font-size="2"
-            font-weight="400"
-          >
-            Approx.
-          </h4>
-          <div
-            class="c27"
-            width="2"
-          />
-          <h4
-            class="c28 c26"
-            color="core.darkgray"
-            font-family="RT-Alias-Grotesk"
-            font-size="2"
-            font-weight="400"
-          >
-            Exact
-          </h4>
-        </div>
-      </div>
-      <div
-        class="c29"
-        overflow="hidden"
-      >
-        <h2
-          class="c30 c31"
-          color="card.balance.color"
-          font-family="RT-Alias-Grotesk"
-          font-size="6"
-          font-weight="700"
-        >
-          1
-           FIL
-        </h2>
-        <h2
-          class="c32"
-          color="core.darkgray"
-          font-family="RT-Alias-Grotesk"
-          font-size="5"
-          font-weight="700"
-        >
-          5 USD
-        </h2>
-      </div>
-      <div
-        class="c33"
-        display="flex"
-      >
-        <button
-          class="c34"
-          disabled=""
-          font-size="3"
-          height="6"
-          type="button"
-        >
-          Send
-        </button>
-      </div>
-    </div>
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  border-color: silver;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c9 {
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c2 {
+  outline: 0;
+  border: 0;
+  background: transparent;
+  -webkit-transition: 0.24s ease-in-out;
+  transition: 0.24s ease-in-out;
+  cursor: pointer;
+  display: inline-block;
+  position: fixed;
+  top: 16px;
+  right: 16px;
+}
+
+.c2:hover {
+  -webkit-transform: scale(1.25);
+  -ms-transform: scale(1.25);
+  transform: scale(1.25);
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -webkit-box-flex: 999;
+  -webkit-flex-grow: 999;
+  -ms-flex-positive: 999;
+  flex-grow: 999;
+  padding-top: 16px;
+  margin: 0 0.5rem 0.5rem 0.5rem;
+  min-height: 100vh;
+  min-width: 53%;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+<div
+  class="SidebarLayout__Wrapper-gwfrwp-0 c0"
+>
+  <div
+    class="c1"
+  >
     <button
-      class="c35"
-      display="flex"
-      font-size="3"
-      height="6"
-      width="100%"
+      class="c2"
+      display="inline-block"
+      role="button"
+      type="button"
     >
-      Logout
+      <svg
+        class="c3"
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
+          fill="#5E26FF"
+          fill-rule="evenodd"
+        />
+      </svg>
     </button>
-  </div>
-  <div
-    class="c36"
-  >
-    <div
-      class="c37"
+    <form
+      class="c4"
     >
-      <form
-        autocomplete="off"
-        class="c38"
+      <div
+        class="c5"
         display="flex"
+        width="13"
       >
         <div
-          class="c39"
-          display="flex"
+          class="c6"
         >
-          <div
-            class="c12"
-            display="flex"
-          >
-            <div
-              class="c40"
-              color="background.screen"
-              display="flex"
-              size="6"
-            >
-              <h3
-                class="c8"
-              >
-                To
-              </h3>
-            </div>
-            <p
-              class="c41"
-              color="core.primary"
-              font-family="RT-Alias-Grotesk"
-              font-size="2"
-              font-weight="400"
-            >
-              Sending Filecoin
-            </p>
-          </div>
-          <div
-            class="c12"
+          <ul
+            class="c7"
             display="flex"
+            width="100%"
           >
             <div
-              class="c42"
+              class="c8"
               display="flex"
             >
-              <p
-                class="c43"
-                color="core.primary"
-                font-family="RT-Alias-Grotesk"
-                font-size="2"
-                font-weight="400"
-              >
-                Step 
-                1
-              </p>
-              <div
-                class="c12"
+              <li
+                class="c9"
                 display="flex"
               >
                 <div
-                  class="c44"
-                  display="inline-block"
-                  height="2"
-                  width="2"
-                />
-              </div>
-              <div
-                class="c12"
-                display="flex"
+                  class="c10"
+                  color="#000"
+                  display="flex"
+                  size="6"
+                >
+                  <h3
+                    class="c11"
+                  >
+                    Sf
+                  </h3>
+                </div>
+              </li>
+              <li
+                class=""
               >
-                <div
-                  class="c45"
-                  display="inline-block"
-                  height="2"
-                  width="2"
-                />
-              </div>
+                <h2
+                  class="c12"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="4"
+                  font-weight="400"
+                >
+                  Sending Filecoin
+                </h2>
+              </li>
             </div>
-            <button
-              class="c46"
-              display="inline-block"
-              role="button"
-              type="button"
-            >
-              <svg
-                class="c16"
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M19.7333 4.2669C19.3776 3.91103 18.801 3.91103 18.4453 4.2669L11.9994 10.7166L5.55552 4.26885C5.19986 3.91299 4.62323 3.91299 4.26757 4.26885C3.91191 4.62472 3.91191 5.20169 4.26757 5.55756L10.7115 12.0053L4.27793 18.4426C3.92228 18.7985 3.92228 19.3755 4.27793 19.7313C4.63359 20.0872 5.21022 20.0872 5.56587 19.7313L11.9994 13.294L18.435 19.7333C18.7906 20.0892 19.3672 20.0892 19.7229 19.7333C20.0786 19.3774 20.0786 18.8005 19.7229 18.4446L13.2874 12.0053L19.7333 5.5556C20.0889 5.19974 20.0889 4.62276 19.7333 4.2669Z"
-                  fill="#5E26FF"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="c47"
-        >
-          <div
-            class="c48"
-          >
-            <div
-              class="c49"
+            <li
+              class=""
             >
               <div
-                class="c12"
+                class="c13"
                 display="flex"
               >
+                <p
+                  class="c14"
+                  color="core.nearblack"
+                  font-family="RT-Alias-Grotesk"
+                  font-size="2"
+                  font-weight="400"
+                >
+                  Step 
+                  1
+                </p>
                 <div
-                  class="c50"
+                  class="c15"
                   display="flex"
                 >
-                  <h4
-                    class="c51"
-                    color="core.nearblack"
-                    font-family="RT-Alias-Grotesk"
-                    font-size="2"
-                    font-weight="400"
-                  >
-                    Recipient
-                  </h4>
+                  <div
+                    class="c16"
+                    display="inline-block"
+                    height="2"
+                    width="2"
+                  />
                 </div>
                 <div
-                  class="c52"
+                  class="c15"
+                  display="flex"
+                >
+                  <div
+                    class="c17"
+                    display="inline-block"
+                    height="2"
+                    width="2"
+                  />
+                </div>
+                <div
+                  class="c15"
+                  display="flex"
+                >
+                  <div
+                    class="c17"
+                    display="inline-block"
+                    height="2"
+                    width="2"
+                  />
+                </div>
+                <div
+                  class="c15"
                   display="flex"
                 >
-                  <input
-                    class="c53"
+                  <div
+                    class="c17"
                     display="inline-block"
-                    height="6"
-                    placeholder="t1..."
-                    value=""
-                    width="100%"
+                    height="2"
+                    width="2"
                   />
-                  
                 </div>
               </div>
-            </div>
-            
+            </li>
+          </ul>
+          <p
+            class="c18"
+            font-family="RT-Alias-Grotesk"
+            font-size="2"
+            font-weight="400"
+          >
+            First, please confirm the account you're sending from, and the recipient you want to send to.
+          </p>
+          <div
+            class="c19"
+          >
             <div
-              class="c54"
-              display="flex"
-              label="Amount"
-              name="amount"
+              class="c20"
+              color="core.white"
+              width="100%"
             >
               <div
-                class="c55"
-                color="input.border"
+                class="c21"
                 display="flex"
-                width="100%"
-              >
-                <h4
-                  class="c51"
-                  color="core.nearblack"
-                  font-family="RT-Alias-Grotesk"
-                  font-size="2"
-                  font-weight="400"
-                >
-                  Amount
-                </h4>
-              </div>
-              <div
-                class="c56"
-                display="inline-block"
-                width="100%"
               >
                 <div
-                  class="c57"
+                  class="c8"
                   display="flex"
-                  height="80px"
-                  width="100%"
                 >
                   <div
-                    class="c58"
+                    class="c22"
+                    color="white"
                     display="flex"
-                    font-family="sansSerif"
-                    font-size="5"
                     size="6"
                   >
-                    =
+                    <h3
+                      class="c11"
+                    >
+                      Ms
+                    </h3>
                   </div>
-                  <input
-                    class="c59"
-                    display="inline-block"
-                    font-size="5"
-                    height="100%"
-                    label="Amount"
-                    name="amount"
-                    placeholder="0"
-                    step="0.000000000000000001"
-                    type="number"
-                    value=""
-                    width="100%"
-                  />
                   <div
-                    class="c60"
-                    color="core.primary"
+                    class="c23"
                     display="flex"
-                    font-size="3"
-                    height="100%"
                   >
-                    FIL
+                    <p
+                      class="c24"
+                      font-family="RT-Alias-Grotesk"
+                      font-size="2"
+                      font-weight="400"
+                    >
+                      From
+                    </p>
+                    <p
+                      class="c24"
+                      font-family="RT-Alias-Grotesk"
+                      font-size="2"
+                      font-weight="400"
+                    >
+                      t1z22 ... 6wgi
+                    </p>
                   </div>
                 </div>
                 <div
-                  class="c61"
+                  class="c23"
                   display="flex"
-                  height="80px"
                 >
-                  <input
-                    class="c62"
-                    display="inline-block"
-                    font-size="5"
-                    height="100%"
-                    min="0"
-                    placeholder="0"
-                    step="0.000000000000000001"
-                    type="number"
-                    value=""
-                    width="100%"
-                  />
-                  <div
-                    class="c63"
-                    color="core.primary"
-                    display="flex"
-                    font-size="3"
-                    height="100%"
+                  <p
+                    class="c24"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
                   >
-                    USD
-                  </div>
+                    Balance
+                  </p>
+                  <p
+                    class="c24"
+                    font-family="RT-Alias-Grotesk"
+                    font-size="2"
+                    font-weight="400"
+                  >
+                    1
+                     FIL
+                  </p>
                 </div>
               </div>
             </div>
             <div
-              class="c64"
+              class="c25"
               width="100%"
             >
               <div
-                class="c49"
+                class="c26"
               >
                 <div
-                  class="c12"
+                  class="c15"
                   display="flex"
                 >
                   <div
-                    class="c50"
+                    class="c27"
                     display="flex"
                   >
                     <h4
-                      class="c51"
+                      class="c28"
                       color="core.nearblack"
                       font-family="RT-Alias-Grotesk"
                       font-size="2"
                       font-weight="400"
                     >
-                      Transaction Fee
+                      Recipient
                     </h4>
                   </div>
                   <div
-                    class="c52"
+                    class="c29"
                     display="flex"
                   >
                     <input
-                      class="c65"
-                      disabled=""
+                      class="c30"
                       display="inline-block"
                       height="6"
-                      value="< 0.0001"
+                      placeholder="t1..."
+                      value=""
                       width="100%"
                     />
-                    <div
-                      class="c66"
-                      color="core.primary"
-                      display="flex"
-                      font-size="3"
-                      height="7"
-                    >
-                      FIL
-                    </div>
+                    
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="c67"
-            display="flex"
-          >
-            <h2
-              class="c68"
-              font-family="RT-Alias-Grotesk"
-              font-size="4"
-              font-weight="400"
-            >
-              Total
-            </h2>
-            <div
-              class="c69"
-              display="flex"
-            >
-              <h2
-                class="c70 c71"
-                color="core.primary"
-                font-family="RT-Alias-Grotesk"
-                font-size="5"
-                font-weight="700"
-              >
-                0
-                 
-                FIL
-              </h2>
-              <h2
-                class="c72"
-                color="core.darkgray"
-                font-family="RT-Alias-Grotesk"
-                font-size="4"
-                font-weight="400"
-              >
-                0
-                 
-                USD
-              </h2>
+              
             </div>
           </div>
         </div>
         <div
-          class="c73"
+          class="c31"
+          display="flex"
+          width="13"
         >
           <button
-            class="c74 c75 Sendjs___StyledButton-sc-1crplc1-2 c75"
+            class="c32"
             font-size="3"
             height="6"
             type="button"
@@ -5629,16 +4560,17 @@ exports[`WalletView it renders the send flow when a user clicks send 1`] = `
             Back
           </button>
           <button
-            class="c76 c77 Sendjs___StyledButton2-sc-1crplc1-3 c77"
+            class="c33"
+            disabled=""
             font-size="3"
             height="6"
             type="submit"
           >
-            Send
+            Next
           </button>
         </div>
-      </form>
-    </div>
+      </div>
+    </form>
   </div>
 </div>
 `;
diff --git a/components/Wallet/index.jsx b/components/Wallet/index.jsx
index 49ab20180..22926a4fb 100644
--- a/components/Wallet/index.jsx
+++ b/components/Wallet/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useRouter } from 'next/router'
 import {
   AccountCard,
@@ -19,18 +19,30 @@ import {
 } from '../../utils/ledger/reportLedgerConfigError'
 import MsgConfirmer from '../../lib/confirm-message'
 import useWallet from '../../WalletProvider/useWallet'
-import { MESSAGE_HISTORY, SEND, RECEIVE } from './views'
+import { MESSAGE_HISTORY, SEND } from './views'
 import reportError from '../../utils/reportError'
 
 export default () => {
   const wallet = useWallet()
-  const [childView, setChildView] = useState(MESSAGE_HISTORY)
+  const router = useRouter()
+  const childView = router.pathname.includes('home') ? MESSAGE_HISTORY : SEND
   const { ledger, connectLedger } = useWalletProvider()
   const [uncaughtError, setUncaughtError] = useState('')
   const [showLedgerError, setShowLedgerError] = useState(false)
   const [ledgerBusy, setLedgerBusy] = useState(false)
 
-  const router = useRouter()
+  const setChildView = useCallback(
+    view => {
+      const params = new URLSearchParams(router.query)
+      if (view === MESSAGE_HISTORY) {
+        router.push(`/home?${params.toString()}`)
+      } else if (view === SEND) {
+        router.push(`/send?${params.toString()}`)
+      }
+    },
+    [router]
+  )
+
   const onAccountSwitch = () => {
     const params = new URLSearchParams(router.query)
     router.push(`/home/accounts?${params.toString()}`)
@@ -63,62 +75,64 @@ export default () => {
           margin: 0 auto;
         `}
       >
-        <NetworkSwitcherGlyph />
-
-        <Sidebar height='100vh'>
-          {hasLedgerError({ ...ledger, otherError: uncaughtError }) &&
-          showLedgerError ? (
-            <AccountError
-              onTryAgain={onShowOnLedger}
-              errorMsg={reportLedgerConfigError({
-                ...ledger,
-                otherError: uncaughtError
-              })}
-              mb={2}
-            />
-          ) : (
-            <AccountCard
-              onAccountSwitch={onAccountSwitch}
-              color='purple'
-              address={wallet.address}
-              walletType={wallet.type}
-              onShowOnLedger={onShowOnLedger}
-              ledgerBusy={ledgerBusy}
-              mb={2}
-            />
-          )}
-          <BalanceCard
-            balance={wallet.balance}
-            onReceive={() => onViewChange(RECEIVE)}
-            onSend={() => onViewChange(SEND)}
-            disableButtons={childView === SEND}
-          />
-          <ButtonLogout
-            variant='secondary'
-            width='100%'
-            mt={4}
-            display='flex'
-            alignItems='center'
-            css={`
-              background-color: ${({ theme }) => theme.colors.core.secondary}00;
-              &:hover {
-                background-color: ${({ theme }) => theme.colors.core.secondary};
-              }
-            `}
-            onClick={() => window.location.reload()}
-          >
-            Logout
-          </ButtonLogout>
-        </Sidebar>
-        <Content>
-          {childView === MESSAGE_HISTORY && <MessageView />}
-          {childView === SEND && (
-            <Send
-              close={() => setChildView(MESSAGE_HISTORY)}
-              setSending={() => setChildView(SEND)}
-            />
-          )}
-        </Content>
+        {childView === SEND ? (
+          <Content>
+            <Send close={() => setChildView(MESSAGE_HISTORY)} />
+          </Content>
+        ) : (
+          <>
+            <NetworkSwitcherGlyph />
+            <Sidebar height='100vh'>
+              {hasLedgerError({ ...ledger, otherError: uncaughtError }) &&
+              showLedgerError ? (
+                <AccountError
+                  onTryAgain={onShowOnLedger}
+                  errorMsg={reportLedgerConfigError({
+                    ...ledger,
+                    otherError: uncaughtError
+                  })}
+                  mb={2}
+                />
+              ) : (
+                <AccountCard
+                  onAccountSwitch={onAccountSwitch}
+                  color='purple'
+                  address={wallet.address}
+                  walletType={wallet.type}
+                  onShowOnLedger={onShowOnLedger}
+                  ledgerBusy={ledgerBusy}
+                  mb={2}
+                />
+              )}
+              <BalanceCard
+                balance={wallet.balance}
+                onSend={() => onViewChange(SEND)}
+                disableButtons={childView === SEND}
+              />
+              <ButtonLogout
+                variant='secondary'
+                width='100%'
+                mt={4}
+                display='flex'
+                alignItems='center'
+                css={`
+                  background-color: ${({ theme }) =>
+                    theme.colors.core.secondary}00;
+                  &:hover {
+                    background-color: ${({ theme }) =>
+                      theme.colors.core.secondary};
+                  }
+                `}
+                onClick={() => window.location.reload()}
+              >
+                Logout
+              </ButtonLogout>
+            </Sidebar>
+            <Content>
+              {childView === MESSAGE_HISTORY && <MessageView />}
+            </Content>
+          </>
+        )}
       </Wrapper>
     </>
   )
diff --git a/components/Wallet/index.test.js b/components/Wallet/index.test.js
index 35fc7323c..65f1f6677 100644
--- a/components/Wallet/index.test.js
+++ b/components/Wallet/index.test.js
@@ -5,6 +5,7 @@ import composeMockAppTree from '../../test-utils/composeMockAppTree'
 
 import { filscoutMockData } from '../../test-utils/mockData'
 import { formatFilscoutMessages } from './Message/formatMessages'
+import { flushPromises } from '../../test-utils'
 
 jest.mock('@openworklabs/filecoin-wallet-provider')
 const spy = jest.spyOn(require('./Message/useTransactionHistory.js'), 'default')
@@ -25,12 +26,19 @@ const mockTxHistory = {
 
 spy.mockReturnValue(mockTxHistory)
 
+const useRouter = jest.spyOn(require('next/router'), 'useRouter')
+
 describe('WalletView', () => {
   afterEach(cleanup)
   beforeEach(() => {
     jest.clearAllMocks()
   })
+
   test('it renders correctly', () => {
+    useRouter.mockImplementation(() => ({
+      pathname: 'home'
+    }))
+
     const { Tree } = composeMockAppTree('postOnboard')
     const { container } = render(
       <Tree>
@@ -42,7 +50,10 @@ describe('WalletView', () => {
     expect(spy).toHaveBeenCalled()
   })
 
-  test('it renders the message history view by default', () => {
+  test('it renders the message history view when the pathname is home', () => {
+    useRouter.mockImplementation(() => ({
+      pathname: 'home'
+    }))
     const { Tree } = composeMockAppTree('postOnboard')
     render(
       <Tree>
@@ -53,7 +64,13 @@ describe('WalletView', () => {
     expect(screen.getByText('Transaction History')).toBeInTheDocument()
   })
 
-  test('it renders the send flow when a user clicks send', async () => {
+  test('it sends the user to the send page when the user clicks send', async () => {
+    const mockRouterPush = jest.fn()
+    useRouter.mockImplementation(() => ({
+      push: mockRouterPush,
+      query: 'network=t',
+      pathname: 'home'
+    }))
     const { Tree } = composeMockAppTree('postOnboard')
 
     let res
@@ -65,9 +82,24 @@ describe('WalletView', () => {
         </Tree>
       )
       fireEvent.click(screen.getByText('Send'))
+      await flushPromises()
     })
+    expect(mockRouterPush).toHaveBeenCalledWith('/send?network=t')
+  })
 
-    expect(screen.getByText('Sending Filecoin')).toBeInTheDocument()
-    expect(res.container.firstChild).toMatchSnapshot()
+  test('it renders the send page when the user goes to the send screen', async () => {
+    const mockRouterPush = jest.fn()
+    useRouter.mockImplementation(() => ({
+      push: mockRouterPush,
+      query: 'network=t',
+      pathname: 'send'
+    }))
+    const { Tree } = composeMockAppTree('postOnboard')
+    const { container } = render(
+      <Tree>
+        <WalletView />
+      </Tree>
+    )
+    expect(container.firstChild).toMatchSnapshot()
   })
 })
diff --git a/components/Wallet/views.js b/components/Wallet/views.js
index 99a5503b8..689ae56fd 100644
--- a/components/Wallet/views.js
+++ b/components/Wallet/views.js
@@ -1,3 +1,2 @@
 export const MESSAGE_HISTORY = 'MESSAGE_HISTORY'
 export const SEND = 'SEND'
-export const RECEIVE = 'RECEIVE'
diff --git a/pages/send.jsx b/pages/send.jsx
new file mode 100644
index 000000000..77c5a9508
--- /dev/null
+++ b/pages/send.jsx
@@ -0,0 +1,13 @@
+import { WalletView } from '../components'
+
+import RenderChildrenIfWalletConnected from '../lib/RequireWallet'
+import useDesktopBrowser from '../lib/useDesktopBrowser'
+
+export default () => {
+  useDesktopBrowser()
+  return (
+    <RenderChildrenIfWalletConnected>
+      <WalletView />
+    </RenderChildrenIfWalletConnected>
+  )
+}
diff --git a/test-utils/mocks/mock-routing.js b/test-utils/mocks/mock-routing.js
index dbc6990f2..9de60d054 100644
--- a/test-utils/mocks/mock-routing.js
+++ b/test-utils/mocks/mock-routing.js
@@ -4,7 +4,8 @@ export const mockRouterPush = jest.fn(() => {})
 export const useRouter = jest.fn().mockImplementation(() => ({
   query: 'network=t',
   push: mockRouterPush,
-  replace: mockRouterReplace
+  replace: mockRouterReplace,
+  pathname: ''
 }))
 
 export default {