From 1e0d7707d29b2d395e80cce24c682ebe2fab75a7 Mon Sep 17 00:00:00 2001
From: Ahmed Ibrahim <me@ahmedibrahim.dev>
Date: Thu, 16 Mar 2023 12:52:26 +0200
Subject: [PATCH] Render wallet plate image/text parts

---
 .../create-wallet/AddWalletDetailsStep.js     | 23 ++++++++----
 .../create-wallet/WalletChecksumTipsDialog.js | 36 ++++++++++++++-----
 .../app/i18n/locales/en-US.json               |  4 +--
 3 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/packages/yoroi-extension/app/components/wallet/create-wallet/AddWalletDetailsStep.js b/packages/yoroi-extension/app/components/wallet/create-wallet/AddWalletDetailsStep.js
index ea99cfbfd9..3fd844c6a3 100644
--- a/packages/yoroi-extension/app/components/wallet/create-wallet/AddWalletDetailsStep.js
+++ b/packages/yoroi-extension/app/components/wallet/create-wallet/AddWalletDetailsStep.js
@@ -22,6 +22,7 @@ import { HARD_DERIVATION_START } from '../../../config/numbersConfig';
 import { NUMBER_OF_VERIFIED_ADDRESSES } from '../../../stores/toplevel/WalletRestoreStore';
 import { networks } from '../../../api/ada/lib/storage/database/prepackaged/networks';
 import WalletAccountIcon from '../../topbar/WalletAccountIcon';
+import WalletChecksumTipsDialog from './WalletChecksumTipsDialog';
 
 const messages: * = defineMessages({
   description: {
@@ -139,6 +140,15 @@ export default class AddWalletDetailsStep extends Component<Props > {
       Number.parseInt(network.BaseConfig[0].ChainNetworkId, 10)
     );
 
+    const plateImagePart = (
+      <WalletAccountIcon
+        iconSeed={plate.ImagePart}
+        saturationFactor={0}
+        size={6}
+        scalePx={4}
+      />
+    );
+
     return (
       <Stack alignItems='center' justifyContent='center'>
         <Stack direction='column' alignItems='left' justifyContent='center' maxWidth='555px'>
@@ -192,12 +202,7 @@ export default class AddWalletDetailsStep extends Component<Props > {
             mt='-3px'
             mb='90px'
           >
-            <WalletAccountIcon
-              iconSeed={plate.ImagePart}
-              saturationFactor={0}
-              size={6}
-              scalePx={4}
-            />
+            {plateImagePart}
             <Typography variant='body1'>
               {plate.TextPart}
             </Typography>
@@ -220,7 +225,11 @@ export default class AddWalletDetailsStep extends Component<Props > {
           open={shouldShowDialog}
           onClose={hideDialog}
         />
-
+        <WalletChecksumTipsDialog
+          open
+          plateImagePart={plateImagePart}
+          plateTextPart={plate.TextPart}
+        />
       </Stack>
     );
   }
diff --git a/packages/yoroi-extension/app/components/wallet/create-wallet/WalletChecksumTipsDialog.js b/packages/yoroi-extension/app/components/wallet/create-wallet/WalletChecksumTipsDialog.js
index ad212c96f0..420ff3f625 100644
--- a/packages/yoroi-extension/app/components/wallet/create-wallet/WalletChecksumTipsDialog.js
+++ b/packages/yoroi-extension/app/components/wallet/create-wallet/WalletChecksumTipsDialog.js
@@ -2,7 +2,7 @@
 import type { Node, ComponentType } from 'react';
 import InfoDialog from '../../widgets/infoDialog';
 import type { $npm$ReactIntl$IntlShape } from 'react-intl';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import { Typography, Box } from '@mui/material';
 
 const messages: Object = defineMessages({
@@ -11,12 +11,12 @@ const messages: Object = defineMessages({
     defaultMessage: '!!!What is wallet checksum and plate number?',
   },
   firstTip: {
-    id: 'wallet.create.dialog.walletChecksum.firstTip',
-    defaultMessage: '!!!Wallet checksum is a generic Blockie image that is generated to visually distinguish your wallet from others.',
+    id: 'wallet.create.dialog.walletChecksum.firstTip', // todo: update it
+    defaultMessage: '!!!{plateImg} Wallet checksum is a generic Blockie image that is generated to visually distinguish your wallet from others.',
   },
   secondTip: {
     id: 'wallet.create.dialog.walletChecksum.secondTip',
-    defaultMessage: '!!!Plate number {plateNumber} is a auto-generated sign of four letters and four digits.',
+    defaultMessage: '!!!Plate number <strong>{plateText}</strong> is a auto-generated sign of four letters and four digits.',
   },
   thirdTip: {
     id: 'wallet.create.dialog.walletChecksum.thirdTip',
@@ -34,20 +34,40 @@ type Props = {|
 |}
 
 function walletChecksumTipsDialog(props: Props & Intl): Node {
-    const { open, onClose, intl } = props;
+    const { open, onClose, intl, plateImagePart, plateTextPart } = props;
 
     return (
       <InfoDialog open={open} onClose={onClose}>
         <Typography textAlign='center' variant='body1' fontWeight='500' mb='16px'>{intl.formatMessage(messages.title)}</Typography>
         <Box component='ul' sx={{ listStyle: 'outside', px: '24px' }}>
           <Box component='li'>
-            <Typography variant='body1' color='grey.800'>{intl.formatMessage(messages.firstTip)}</Typography>
+            <Typography variant='body1' color='grey.800'>
+              <FormattedMessage
+                {...messages.firstTip}
+                values={{
+                    plateImg: (
+                      <Box component='span' display='inline-block' width='24px' position='relative'>
+                        <Box sx={{ position: 'absolute', top: '-18px', left: '0px' }}>
+                          {plateImagePart}
+                        </Box>
+                      </Box>
+                    )
+                }}
+              />
+            </Typography>
           </Box>
           <Box component='li'>
-            <Typography variant='body1' color='grey.800'>{intl.formatMessage(messages.secondTip)}</Typography>
+            <Typography variant='body1' color='grey.800'>
+              <FormattedHTMLMessage
+                {...messages.secondTip}
+                values={{ plateText: plateTextPart }}
+              />
+            </Typography>
           </Box>
           <Box component='li'>
-            <Typography variant='body1' color='grey.800'>{intl.formatMessage(messages.thirdTip)}</Typography>
+            <Typography variant='body1' color='grey.800'>
+              {intl.formatMessage(messages.thirdTip)}
+            </Typography>
           </Box>
         </Box>
       </InfoDialog>
diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json
index 1805985e6b..6ac7c523b9 100644
--- a/packages/yoroi-extension/app/i18n/locales/en-US.json
+++ b/packages/yoroi-extension/app/i18n/locales/en-US.json
@@ -474,8 +474,8 @@
   "wallet.create.dialog.walletNameAndPassword.whatIsWalletPassword.firstTip": "Password is an additional security layer used to confirm transactions from this device",
   "wallet.create.dialog.walletNameAndPassword.whatIsWalletPassword.secondTip": "Both wallet name and password are stored locally, so you are only person who can change or restore it.",
   "wallet.create.dialog.walletChecksum.title": "What is wallet checksum and plate number?",
-  "wallet.create.dialog.walletChecksum.firstTip": "Wallet checksum is a generic Blockie image that is generated to visually distinguish your wallet from others.",
-  "wallet.create.dialog.walletChecksum.secondTip": "Plate number {plateNumber} is a auto-generated sign of four letters and four digits.",
+  "wallet.create.dialog.walletChecksum.firstTip": "{plateImg} Wallet checksum is a generic Blockie image that is generated to visually distinguish your wallet from others.",
+  "wallet.create.dialog.walletChecksum.secondTip": "Plate number <strong>{plateText}</strong> is a auto-generated sign of four letters and four digits.",
   "wallet.create.dialog.walletChecksum.thirdTip": "Checksum and plate number are unique to your wallet and represent your public key.",
   "wallet.add.page.revamp.subtitle": "Light wallet for Cardano assets",
   "wallet.add.page.revamp.createWallet": "Create new wallet",