feat(usd wallet): improved deposit screen to show details as we use o…

…n exchange
blockchain · Sep 9, 2020 · c909c09 · c909c09
1 parent b1418af
commit c909c09
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 15 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -1240,8 +1240,10 @@ type MessagesType = {
   'modals.simplebuy.transferdetails.account': 'Account Number'
   'modals.simplebuy.transferdetails.agree': 'Terms and Conditions of Modular'
   'modals.simplebuy.transferdetails.amount': 'Amount to Send'
+  'modals.simplebuy.transferdetails.bankAddress': 'Bank Address'
   'modals.simplebuy.transferdetails.bankcountry': 'Bank Country'
   'modals.simplebuy.transferdetails.bankname': 'Bank Name'
+  'modals.simplebuy.transferdetails.referenceID': 'Reference ID (Mandatory)'
   'modals.simplebuy.transferdetails.banktransferinfo': 'Bank Transfer Information'
   'modals.simplebuy.transferdetails.depositagreement': 'By depositing funds to this account, you agree to {ToS}, our banking partner.'
   'modals.simplebuy.transferdetails.estonia': 'Estonia'

diff --git a/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx b/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx
@@ -1,3 +1,4 @@
+import { AgentType } from 'core/types'
 import {
   DisplayIcon,
   DisplaySubTitle,
@@ -77,6 +78,14 @@ const BottomMultiRowContainer = styled.div`
 const Copy = styled.div`
   display: flex;
 `
+const AddressLine = styled.p`
+  margin: 0;
+`
+
+const printAddress = (address: string) => {
+  const lines = address.split(',')
+  return lines.map(line => <AddressLine key={line}>{line}</AddressLine>)
+}
 
 const Success: React.FC<Props> = props => {
   return (
@@ -143,6 +152,22 @@ const Success: React.FC<Props> = props => {
             </TopText>
           </InfoContainer>
         </FlyoutWrapper>
+        {props.fiatCurrency === 'USD' && (
+          <RowCopy>
+            <div>
+              <Title>
+                <FormattedMessage
+                  id='modals.simplebuy.transferdetails.referenceID'
+                  defaultMessage='Reference ID (Mandatory)'
+                />
+              </Title>
+              <Value data-e2e='sbReferenceId'>{props.account.address}</Value>
+            </div>
+            <Copy>
+              <CopyClipboardButton address={props.account.address} />
+            </Copy>
+          </RowCopy>
+        )}
         {(props.fiatCurrency === 'USD' || props.fiatCurrency === 'EUR') && (
           <Row>
             <Title>
@@ -170,53 +195,74 @@ const Success: React.FC<Props> = props => {
             </Copy>
           </RowCopy>
         )}
+        {(props.fiatCurrency === 'USD' || props.fiatCurrency === 'GBP') &&
+          props.account.agent.account !== '' && (
+            <RowCopy>
+              <div>
+                <Title>
+                  <FormattedMessage
+                    id='modals.simplebuy.transferdetails.account'
+                    defaultMessage='Account Number'
+                  />
+                </Title>
+                <Value data-e2e='sbAccountNumber'>
+                  {props.account.agent.account}
+                </Value>
+              </div>
+              <Copy>
+                <CopyClipboardButton address={props.account.agent.account} />
+              </Copy>
+            </RowCopy>
+          )}
         {props.fiatCurrency === 'GBP' && (
           <RowCopy>
             <div>
               <Title>
                 <FormattedMessage
-                  id='modals.simplebuy.transferdetails.account'
-                  defaultMessage='Account Number'
+                  id='modals.simplebuy.transferdetails.sortcode'
+                  defaultMessage='Sort Code'
                 />
               </Title>
-              <Value data-e2e='sbAccountNumber'>
-                {props.account.agent.account}
-              </Value>
+              <Value data-e2e='sbSortCode'>{props.account.agent.code}</Value>
             </div>
             <Copy>
-              <CopyClipboardButton address={props.account.agent.account} />
+              <CopyClipboardButton address={props.account.agent.code} />
             </Copy>
           </RowCopy>
         )}
-        {props.fiatCurrency === 'GBP' && (
+        {props.fiatCurrency === 'EUR' && (
           <RowCopy>
             <div>
               <Title>
                 <FormattedMessage
-                  id='modals.simplebuy.transferdetails.sortcode'
-                  defaultMessage='Sort Code'
+                  id='modals.simplebuy.transferdetails.swift'
+                  defaultMessage='Bank Code (SWIFT / BIC)'
                 />
               </Title>
-              <Value data-e2e='sbSortCode'>{props.account.agent.code}</Value>
+              <Value data-e2e='sbBankCode'>{props.account.agent.code}</Value>
             </div>
             <Copy>
               <CopyClipboardButton address={props.account.agent.code} />
             </Copy>
           </RowCopy>
         )}
-        {props.fiatCurrency === 'EUR' && (
+        {props.fiatCurrency === 'USD' && (
           <RowCopy>
             <div>
               <Title>
                 <FormattedMessage
-                  id='modals.simplebuy.transferdetails.swift'
-                  defaultMessage='Bank Code (SWIFT / BIC)'
+                  id='modals.simplebuy.transferdetails.routingnumber'
+                  defaultMessage='Routing Number'
                 />
               </Title>
-              <Value data-e2e='sbBankCode'>{props.account.agent.code}</Value>
+              <Value data-e2e='sbRoutingNumber'>
+                {(props.account.agent as AgentType).routingNumber}
+              </Value>
             </div>
             <Copy>
-              <CopyClipboardButton address={props.account.agent.code} />
+              <CopyClipboardButton
+                address={(props.account.agent as AgentType).routingNumber}
+              />
             </Copy>
           </RowCopy>
         )}
@@ -231,6 +277,26 @@ const Success: React.FC<Props> = props => {
             {props.userData.firstName} {props.userData.lastName}
           </Value>
         </Row>
+        {props.fiatCurrency === 'USD' && (
+          <RowCopy>
+            <div>
+              <Title>
+                <FormattedMessage
+                  id='modals.simplebuy.transferdetails.bankAddress'
+                  defaultMessage='Bank Address'
+                />
+              </Title>
+              <Value data-e2e='sbRecipientAddress'>
+                {printAddress((props.account.agent as AgentType).address)}
+              </Value>
+            </div>
+            <Copy>
+              <CopyClipboardButton
+                address={(props.account.agent as AgentType).address}
+              />
+            </Copy>
+          </RowCopy>
+        )}
       </div>
       <Bottom>
         <BottomInfoContainer>