Fix: update Bank Details Form copies

[rumzledz]

Description

Secrets setup

Important

If you haven't done the secrets file set up yet, expand this section:

Click to expand and view the secrets setup 👈 🤫

Setting up your local environment

Create a .env.local.secrets file in the parent directory and populate it with the correct environment variables:

echo -e "BSCSCAN_API_KEY=\nETHERSCAN_API_KEY=\nGOOGLE_TAG_MANAGER_ID=\nPINATA_API_KEY=\nPINATA_API_SECRET=\nCOINGECKO_API_KEY=\nCOINGECKO_API_URL=\nPOSTHOG_KEY=\nPOSTHOG_HOST=\nUSDC_LOCAL_ADDRESS=" > .env.local.secrets

Once the .env.local.secrets file is created, open it and you should see the following content. You will need to provide values for POSTHOG_KEY and POSTHOG_HOST so please ask a fellow dev about this.

BSCSCAN_API_KEY=
ETHERSCAN_API_KEY=
GOOGLE_TAG_MANAGER_ID=
PINATA_API_KEY=
PINATA_API_SECRET=
COINGECKO_API_KEY=
COINGECKO_API_URL=
POSTHOG_KEY=
POSTHOG_HOST=
USDC_LOCAL_ADDRESS=

Once you've provided values for POSTHOG_KEY and POSTHOG_HOST, inject them:

npm run prepare

Testing

Important

Open the amplify/backend/function/bridgeXYZMutation/src/index.js file and make sure you enter the right sandbox api key. Otherwise, you won't be able to do the KYC flow:

// Use the sandbox API key instead of 'xxx'
let apiKey = 'xxx';

Enable the Crypto to Fiat tab via our Feature Flag. I'm sure there's a better way to do this but open the src/context/FeatureFlagsContext/FeatureFlagsContextProvider.tsx file and do the following replacement:

// From
[FeatureFlag.CRYPTO_TO_FIAT]: cryptoToFiatFeature,
// To
[FeatureFlag.CRYPTO_TO_FIAT]: { isEnabled: true }

Visit the following URL: http://localhost:9091/account/crypto-to-fiat. It should take you directly to the Crypto to Fiat tab.

Steps	Expected Result
1. Complete the KYC verification flow
2. Click the Add details button
3. Submit the form	Error messages should now be user friendly
4. Set Payout currency to USD and submit the form	Error messages should now be user friendly
5. Set Payout currency to EUR and submit the form the Crypto to fiat tab	Error messages should now be user friendly
6. Enter valid information and submit the form	You should now be in Address details
7. Submit the form	Error messages should now be user friendly

New stuff ✨

A new formErrorMessage convenience function for displaying form error messages. Example usage:

const MSG = defineMessages({
  swiftBicLabel: "SWIFT/BIC"
});

const validationSchema = object({
  // By default, it returns "swiftBic is a required field"
  swiftBic: string().required(),
})

const validationSchema = object({
  // Returns "SWIFT/BIC is a required field"
  swiftBic: string().required(formErrorMessage(MSG.swiftBicLabel, 'required'))
})

This function accepts different validation types, which I tried to intentionally be a 1:1 mapping of Yup's out-of-the-box schema test functions names:

// invalid isn't a Yup function, but it's designed to be used when Yup's `match()` function throws an exception
'required' | 'invalid' | 'min' | 'max' | 'length'

You will be required to pass in a number as the 3rd param if you choose min | max | length
It will throw an error if you pass in a 3rd param but your type is required | invalid

Here are the new translation copies in en.json:

"form.required": "{fieldName} is a required field",
"form.invalid": "Invalid {fieldName} format",
"form.length": "{fieldName} must be exactly {length} characters",
"form.min": "{fieldName} must be at least {length} characters",
"form.max": "{fieldName} must be a maximum of {length} characters",

Resolves #2742

[rumzledz]

Closing in favour of #2798