chore(merge): development

.storybook/main.js

@@ -1,19 +1,10 @@
 module.exports = {
-  stories: ['../packages/blockchain-wallet-v4-frontend/src/components/**/*.stories.@(tsx)'],
+  stories: ['../packages/blockchain-wallet-v4-frontend/src/components/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-dark-mode'
   ],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
-    }
-  },
   refs: {
     'new-core': {
       title: 'New Core Components',

.storybook/preview.js

@@ -31,3 +31,13 @@ const withIconsAndFonts = () => (story) => {
 }
 addDecorator(withTheme())
 addDecorator(withIconsAndFonts())
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

config/mocks/wallet-options-v4.json

@@ -11,6 +11,7 @@
           "wallet": {}
         }
       },
+      "coinListing": "",
       "erc20s": ["AAVE", "PAX", "USDC", "USDT", "WDGLD", "YFI"],
       "sift": {
         "apiKey": "0ecd212038",
@@ -23,7 +24,9 @@
         "legacyMagicEmailLink": true,
         "legacyMobilePairing": false,
         "legacyWalletRecovery": false,
-        "recurringBuys": true
+        "recurringBuys": true,
+        "signupCountry": false,
+        "eddInterestFileUpload": false
       }
     }
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blockchain-wallet-v4",
-  "version": "4.54.2",
+  "version": "4.55.0",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "author": {

packages/blockchain-info-components/index.d.ts

@@ -262,7 +262,7 @@ export const Toast: FunctionComponent<{
   persist?: boolean
   timeout?: number
 }>
-export const Tooltip: FunctionComponent<{ id: string; offset?: any }>
+export const Tooltip: FunctionComponent<{ id: string; offset?: any, maxWidth?: string, place?: 'top' | 'right' | 'bottom' | 'left' }>
 export const TooltipHost: FunctionComponent<{ id: string }>
 export const TooltipIcon: FunctionComponent<{
   color?: keyof DefaultTheme

packages/blockchain-info-components/src/Images/Images.ts

@@ -38,6 +38,7 @@ import blockchainIcon from './img/bc-icon.svg'
 import blockchainLogo from './img/bc-logo.svg'
 import blockchainLogoCircle from './img/bc-logo-circle.svg'
 import bgBannerPattern from './img/bg-banner-pattern.svg'
+import bgBannerPatternLg from './img/bg-banner-pattern-lg.svg'
 import bgPattern from './img/bg-pattern.svg'
 import bitpayLogo from './img/bitpay-logo.svg'
 import blankCard from './img/blank-card.svg'
@@ -190,6 +191,7 @@ const Images = {
   'bank-rejected': bankRejected,
   'bank-success': bankSuccess,
   'bg-banner-pattern': bgBannerPattern,
+  'bg-banner-pattern-lg': bgBannerPatternLg,
   'bg-pattern': bgPattern,
   'bitpay-logo': bitpayLogo,
   'blank-card': blankCard,

packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json

@@ -100,6 +100,7 @@
   "components.alerts.currency_update_success": "Currency has been successfully updated",
   "components.alerts.deauthorize_browser_error": "Failed to deauthorize this browser.",
   "components.alerts.deauthorize_browser_success": "Browser was successfully deauthorized.",
+  "components.alerts.devicemismatch": "Link must be opened in original browser.",
   "components.alerts.document_upload_error": "Failed to upload document.",
   "components.alerts.email_code_sent_success": "Confirmation code has been sent.",
   "components.alerts.email_update_error": "Failed to update email address.",
@@ -294,6 +295,7 @@
   "components.txlistitem.sentfrom": "Sent From",
   "components.txlistitem.status": "Status",
   "components.txlistitem.valueattime": "Value When {type}",
+  "copy.above_max": "Amount is above Max",
   "copy.above_swap_max": "You can swap up to {value}",
   "copy.above_swap_max_silver": "Upgrade your profile to swap this amount.",
   "copy.account": "Account",
@@ -321,7 +323,9 @@
   "copy.bank_linked_error_title_failedconnection": "Failed Connection Request",
   "copy.bank_linked_error_title_yourbank": "Is this your bank?",
   "copy.bank_linked_error_yourbank": "We noticed the names don’t match. The bank you link must have a matching legal first & last name as your Blockchain.com Account.",
+  "copy.below_min": "Amount is below Min",
   "copy.below_swap_min": "Minimum Swap is {value}",
+  "copy.buy": "Buy",
   "copy.buy_amount_change_disclaimer": "The amounts you send and receive may change slightly due to market activity. Once an order starts, we are unable to stop it.",
   "copy.cancel": "Cancel",
   "copy.canceled": "Canceled",
@@ -365,6 +369,7 @@
   "copy.instantly_available": "Instantly Available",
   "copy.instantly_exchange": "Instantly exchange your crypto into any currency we offer in your wallet.",
   "copy.instantly_fund": "Send, Receive and instantly fund your trades using the Trading Account.",
+  "copy.invalid_addr": "Invalid Address",
   "copy.learn_more": "Learn more",
   "copy.loading": "Loading...",
   "copy.max": "Max",
@@ -379,7 +384,6 @@
   "copy.network_fees": "Network Fees",
   "copy.network_fees_set": "Network fees are set by the",
   "copy.networks": "networks",
-  "copy.new": "New",
   "copy.new_password": "New Password",
   "copy.new_swap": "New Swap",
   "copy.next": "Next",
@@ -388,7 +392,7 @@
   "copy.no_payment_methods": "No payment methods available.",
   "copy.not_enough_eth1": "ETH is required to send {coin}. You do not have enough ETH in your Ether Wallet to perform a transaction. Note, ETH must be held in your Ether Wallet for this transaction, not Ether Trading Account.",
   "copy.not_now": "Not Now",
-  "copy.now": "Now",
+  "copy.now_trading": "is Now Trading",
   "copy.number_of_business_days": "{first} to {second} Business Days",
   "copy.ok": "Ok",
   "copy.on_chain_txs": "On-chain transactions only",
@@ -410,9 +414,12 @@
   "copy.refunded": "Refunded",
   "copy.reset": "Reset",
   "copy.reset_now": "Reset Now",
+  "copy.retry": "Retry",
   "copy.saved": "Saved",
   "copy.schdule": "Schedule",
   "copy.select_swap_wallets": "Select the Wallet you want to Swap from and the crypto you want to receive.",
+  "copy.send": "Send",
+  "copy.sent": "Sent",
   "copy.sold": "Sold",
   "copy.suggested": "Suggested",
   "copy.swap": "Swap",
@@ -448,13 +455,13 @@
   "copy.to": "To",
   "copy.to:": "To:",
   "copy.total": "Total",
-  "copy.trade": "Trade",
   "copy.trade_and_fund": "Send, Receive, Buy and Swap cryptocurrencies with your Trading Account.",
   "copy.trading_account_access": "Get Trading Account access",
   "copy.trading_get_access": "Get access to the Trading Account in seconds by completing your profile and getting Silver access.",
   "copy.trading_start": "Use the Trading Account",
   "copy.trading_verify_email": "Verify to use the Trading Account",
   "copy.transaction_fee": "Transaction Fee",
+  "copy.try_again": "Try Again",
   "copy.twice_a_month": "Twice a Month",
   "copy.unknown_error": "An unknown error has occurred.",
   "copy.unkown_error": "An unknown error has occurred.",
@@ -563,7 +570,7 @@
   "layouts.wallet.header.announcements.emailreminder.change": "Change Email",
   "layouts.wallet.header.announcements.emailreminder.emailsent": "- An email was sent to {email}",
   "layouts.wallet.header.announcements.emailreminder.resend": "Resend Email",
-  "layouts.wallet.header.announcements.newcoin.description": "Wrapped Digital Gold (wDGLD) is an ERC-20 tokenized version of DGLD.",
+  "layouts.wallet.header.announcements.newcoin.description_1": "Buy, sell, swap, send, receive and store {coin} in your Blockchain.com Wallet.",
   "layouts.wallet.header.general": "General",
   "layouts.wallet.header.preferences": "Preferences",
   "layouts.wallet.header.tradinglimits": "Trading Limits",
@@ -1042,14 +1049,15 @@
   "modals.recurringbuys.notification.page_1.title": "Instead of timing the market, many smart investors use",
   "modals.recurringbuys.notification.page_2.description": "Invest the same amount every week",
   "modals.recurringbuys.notification.page_2.title": "The strategy is pretty simple",
-  "modals.recurringbuys.notification.page_3.description": "You’ll buy more crypto.",
-  "modals.recurringbuys.notification.page_3.title": "When the price goes down,",
-  "modals.recurringbuys.notification.page_4.description": "You’ll buy less.",
-  "modals.recurringbuys.notification.page_4.title": "When the price goes up,",
+  "modals.recurringbuys.notification.page_3.description": "You’ll buy more crypto",
+  "modals.recurringbuys.notification.page_3.title": "When the price goes down",
+  "modals.recurringbuys.notification.page_4.description": "You’ll buy less",
+  "modals.recurringbuys.notification.page_4.title": "When the price goes up",
   "modals.recurringbuys.notification.page_5.description": "Over the past 5 years, buying Bitcoin every week performed better than timing the market",
   "modals.recurringbuys.notification.page_5.disclaimer": "82% of the time.",
   "modals.recurringbuys.notification.page_5.title": "But does it work?",
   "modals.recurringbuys.notification.title": "Recurring buys",
+  "modals.recurringbuys.period_fetch_error": "There was an error fetching recurring buy frequency options. Please try again.",
   "modals.recurringbuys.recurring_buy_started": "Recurring Buy Started",
   "modals.recurringbuys.select_a_frequency": "Select a Frequency",
   "modals.recurringbuys.time_options.bi_weekly": "Twice a Month",
@@ -1142,6 +1150,10 @@
   "modals.sendbtc.secondstep.send": "Send Bitcoin",
   "modals.sendbtc.secondstep.to": "To:",
   "modals.sendbtc.secontstep.sendtotal": "Total:",
+  "modals.sendcrypto.coinselect.noaccounts": "Currently there are no accounts for the selected crypto.",
+  "modals.sendcrypto.coinselect.subtitle": "Select the wallet you want to send from.",
+  "modals.sendcrypto.coinselect.title": "Send Crypto",
+  "modals.sendcrypto.enteramount.title": "Send",
   "modals.sendeth.amountnotzeromessage": "Invalid amount",
   "modals.sendeth.cointitle": "Send {coinDisplayName}",
   "modals.sendeth.firststep.browserwarn": "Sending Ether from Lockbox can only be done while using the Brave, Chrome, Firefox or Opera browsers.",
@@ -1357,6 +1369,7 @@
   "modals.simplebuy.transactionfeed.canceled": "{type} Canceled",
   "modals.simplebuy.transactionfeed.complete": "{type} Completed",
   "modals.simplebuy.transactionfeed.failed": "{type} Failed",
+  "modals.simplebuy.transactionfeed.low_balance": "Low Balance",
   "modals.simplebuy.transactionfeed.unknown": "Unknown Status",
   "modals.simplebuy.transactionfeed.waitingondepo": "Pending Deposit",
   "modals.simplebuy.transactionlist.viewdetails": "View Details",
@@ -1783,8 +1796,7 @@
   "scenes.recover.secondstep.funds": "Recover Funds",
   "scenes.recover.secondstep.password": "Password",
   "scenes.recover.secondstep.recover": "Recover Funds",
-  "scenes.recovery.cloud_backup.instructions_one": "Scan this QR code with your Blockchain.com mobile app.",
-  "scenes.recovery.cloud_backup.subtitle": "It seems like your wallet had at one point been backed up to the cloud.",
+  "scenes.recovery.cloud_backup.subtitle": "If your wallet has been backed up to the cloud, scan this QR code with your Blockchain.com mobile app.",
   "scenes.recovery.email": "Recovering {email}",
   "scenes.recovery.import.body": "There’s no account associated with the seed phrase you entered. You can import and manage your wallet instead.",
   "scenes.recovery.import.title": "Import Your Wallet",

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -114,7 +114,7 @@ type MessagesType = {
   'components.alerts.currency_update_success': 'Currency has been successfully updated'
   'components.alerts.deauthorize_browser_error': 'Failed to deauthorize this browser.'
   'components.alerts.deauthorize_browser_success': 'Browser was successfully deauthorized.'
-  'components.alerts.device_mismatch': 'Device mismatch.'
+  'components.alerts.devicemismatch': 'Link must be opened in original browser..'
   'components.alerts.document_upload_error': 'Failed to upload document.'
   'components.alerts.email_code_sent_success': 'Confirmation code has been sent.'
   'components.alerts.email_update_error': 'Failed to update email address.'
@@ -417,6 +417,7 @@ type MessagesType = {
   'copy.receive_to': 'Receive to'
   'copy.refund_policy': 'Refund Policy'
   'copy.reset': 'Reset'
+  'copy.retry': 'Retry'
   'copy.recurring_buy': 'Recurring Buy'
   'copy.reset_now': 'Reset Now'
   'copy.max': 'Max'
@@ -990,10 +991,11 @@ type MessagesType = {
   'modals.interest.withdrawal.progress': 'In Progress'
   'modals.interest.withdrawal.progressmsg': 'Requesting a withdrawal from your Interest Account'
   'modals.interest.withdrawal.edd_need': 'This amount requires further information. Confirm the withdrawal and follow the instructions on the next screen.'
+  'modals.interest.withdrawal.edd_need_further_information': 'We will need to further verify your identity to make this withdrawal.'
   'modals.interest.withdrawal.success': 'Waiting on your withdrawal to be confirmed by our team. It may take a few moments to show in your Interest Account History. No action is required at this time.'
-  'modals.interest.withdrawal.supply_information_description_1': "You've requested a withdrawal for an amount that requires further verification for legal and compliance reasons."
-  'modals.interest.withdrawal.supply_information_description_2': 'Your funds are safe with us. Please submit the additional information so we can start processing your withdrawal.'
-  'modals.interest.supply_information_disclaimer': 'Our Support team may contact you if further clarification is needed.'
+  'modals.interest.withdrawal.supply_information_title': 'More Info Needed'
+  'modals.interest.withdrawal.supply_information_description_1': 'Your recent withdrawal of {amount} requires further verification for legal and compliance reasons.'
+  'modals.interest.withdrawal.supply_information_description_2': 'Please submit the additional information so we can start processing your withdrawal.'
   'modals.interest.withdrawal.totalinterest': 'Total Interest Earned'
   'modals.interest.withdrawal.warning': 'In the last month you have earned {pendingInterestCrypto} in interest. Once you withdraw {withdrawalAmount} ({withdrawalAmountCrypto}), you will continue to earn interest on the remaining balance.'
   'modals.interestpromo.button': 'Start Earning Now'
@@ -1232,11 +1234,11 @@ type MessagesType = {
   'modals.recurringbuys.notification.page_2.title': 'The strategy is pretty simple'
   'modals.recurringbuys.notification.page_2.description': 'Invest the same amount every week'
 
-  'modals.recurringbuys.notification.page_3.title': 'When the price goes down,'
-  'modals.recurringbuys.notification.page_3.description': 'You’ll buy more crypto.'
+  'modals.recurringbuys.notification.page_3.title': 'When the price goes down'
+  'modals.recurringbuys.notification.page_3.description': 'You’ll buy more crypto'
 
-  'modals.recurringbuys.notification.page_4.title': 'When the price goes up,'
-  'modals.recurringbuys.notification.page_4.description': 'You’ll buy less.'
+  'modals.recurringbuys.notification.page_4.title': 'When the price goes up'
+  'modals.recurringbuys.notification.page_4.description': 'You’ll buy less'
 
   'modals.recurringbuys.notification.page_5.title': 'But does it work?'
   'modals.recurringbuys.notification.page_5.description': 'Over the past 5 years, buying Bitcoin every week performed better than timing the market'
@@ -1247,11 +1249,15 @@ type MessagesType = {
   'modals.recurringbuys.timeframe.2_weeks': 'Every 2 weeks'
   'modals.recurringbuys.timeframe.every_month': 'Every month'
 
+  'modals.recurringbuys.period_fetch_error': 'There was an error fetching recurring buy frequency options. Please try again.'
+  'modals.recurringbuys.time_options.one_time': 'One Time'
   'modals.recurringbuys.time_options.daily': 'Daily'
   'modals.recurringbuys.time_options.weekly': 'Weekly'
   'modals.recurringbuys.time_options.bi_weekly': 'Twice a Month'
   'modals.recurringbuys.time_options.monthly': 'Monthly'
 
+  'modals.recurringbuys.frequency_disabled': '{period} recurring buys are unavailable for your payment method at this time.'
+
   'modals.recurringbuys.get_started.title': 'Set Up a Recurring Buy'
   'modals.recurringbuys.get_started.description': 'Buy {amount} of {outputCurrency} every day, week or month with a Recurring Buy. No need to ever time the market.'
   'modals.recurringbuys.get_started.buy_amount_of_currency': 'Buy {amount} of {currency}'
@@ -1261,6 +1267,8 @@ type MessagesType = {
   'modals.recurringbuys.get_started.get_started': 'Get Started'
   'modals.recurringbuys.get_started.maybe_later': 'Maybe Later'
 
+  'modals.recurringbuys.available_methods_tool_tip': 'Recurring Buys are only available for these methods at this time: {methods}'
+
   'modals.recurringbuys.recurring_buy_started': 'Recurring Buy Started!'
   'modals.recurringbuys.select_a_frequency': 'Select a Frequency'
   'modals.recurringbuys.we_will_buy': 'We will buy {fiatAmount} of {coin} {period} at that moment’s market price. Cancel this recurring buy at anytime.'
@@ -1716,7 +1724,7 @@ type MessagesType = {
   'modals.swapgetstarted.later': "I'll do this later"
   'modals.swapgetstarted.trading_your_crypto': "Trading your crypto doesn't mean trading away control."
   'modals.swap.unsuported.title': 'SWAP crypto coming soon to your region.'
-  'modals.swap.unsuported.subcontent': "We don’t support swapping crypto yet for your region. We’ll let you know as soon as we do."
+  'modals.swap.unsuported.subcontent': 'We don’t support swapping crypto yet for your region. We’ll let you know as soon as we do.'
   'modals.transactions.report.download': 'Download Report'
   'modals.transactions.report.enddate': 'end date'
   'modals.transactions.report.generate': 'Generate Report'
@@ -2233,7 +2241,7 @@ type MessagesType = {
   'scenes.login.qrcodelogin_success': 'Success! Logging in...'
   'scenes.login.qrcodelogin_success_confirm': 'Please confirm the login on your mobile device.'
   'scenes.login.recovery_options.title': 'Recovery Options'
-  'scenes.login.recovery_options.cloud_backup.title': "Recover Account with Cloud Backup"
+  'scenes.login.recovery_options.cloud_backup.title': 'Recover Account with Cloud Backup'
   'scenes.login.recovery_options.cloud_backup': 'Restore your account using your phone and the cloud.'
   'scenes.login.recovery_options.phrase.title': 'Recover Account with Recovery Phrase'
   'scenes.login.recovery_options.phrase': 'Restore your account with your 12-word Secret Private key Recovery Phrase.'
@@ -2303,7 +2311,7 @@ type MessagesType = {
   'scenes.recover.import.header': 'Create Your Blockchain.com Account'
   'scenes.recover.import.subheader': 'Create your account to access your imported wallet'
   'scenes.recovery.cloud_backup.title': 'Cloud Backup Recovery'
-  'scenes.recovery.cloud_backup.subtitle': 'It seems like your wallet had at one point been backed up to the cloud.'
+  'scenes.recovery.cloud_backup.subtitle': 'If your wallet has been backed up to the cloud, scan this QR code with your Blockchain.com mobile app.'
   'scenes.recovery.cloud_backup.instructions_one': 'Scan this QR code with your Blockchain.com mobile app.' 
   'scenes.recovery.cloud_backup.instructions_two': 'Tap the QR Code Scanner icon'
   'scenes.recovery.cloud_backup.instructions_three': 'in the top right & point here.'

packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.tsx

@@ -206,8 +206,8 @@ const getAlertContent = (message, data = undefined) => {
     case C.DEVICE_MISMATCH:
       return buildMessageTemplate(
         <FormattedMessage
-          id='components.alerts.device_mismatch'
-          defaultMessage='Device mismatch.'
+          id='components.alerts.devicemismatch'
+          defaultMessage='Link must be opened in original browser.'
         />
       )
     case C.EMAIL_CODE_SENT_SUCCESS: