Merge pull request #75 from Psychedelic/christianlaino/ch23210/deposi…

…t-icp-changes deposit icp changes
Psychedelic · Jul 8, 2021 · ea6a765 · ea6a765
2 parents f07096b + 8287b0b
commit ea6a765
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/source/Popup/Views/Deposit/Steps/Step2.jsx b/source/Popup/Views/Deposit/Steps/Step2.jsx
@@ -9,6 +9,7 @@ import { Typography } from '@material-ui/core';
 import shortAddress from '@shared/utils/short-address';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import clsx from 'clsx';
 import useStyles from '../styles';
 import { currencyPropTypes } from '../../../../shared/constants/currencies';
 import { sourcePropTypes } from '../../../../shared/constants/sources';
@@ -58,6 +59,9 @@ const Step2 = ({ selectedSource, selectedAsset }) => {
               <InputBase>
                 <div className={classes.addressContainer}>
                   <Typography variant="h4" style={{ marginRight: 'auto' }}>{shortAddress(principalId)}</Typography>
+                  <div className={clsx(classes.badge, classes.principalBadge)}>
+                    {t('send.principalId')}
+                  </div>
                   <IconQrCode
                     onClick={() => setOpenQr(true)}
                     classes={classes}
@@ -93,6 +97,9 @@ const Step2 = ({ selectedSource, selectedAsset }) => {
               <InputBase>
                 <div className={classes.addressContainer}>
                   <Typography variant="h4" style={{ marginRight: 'auto' }}>{shortAddress(accountId)}</Typography>
+                  <div className={clsx(classes.badge, classes.accountBadge)}>
+                    {t('send.accountId')}
+                  </div>
                   <CopyButton text={accountId} placement="top" />
                 </div>
               </InputBase>

diff --git a/source/Popup/Views/Deposit/styles.js b/source/Popup/Views/Deposit/styles.js
@@ -33,7 +33,7 @@ export default makeStyles((theme) => ({
   iconQrCode: {
     width: 18,
     height: 18,
-    marginRight: 6,
+    marginRight: 12,
     color: '#367FF8',
   },
   orContainer: {
@@ -51,4 +51,18 @@ export default makeStyles((theme) => ({
     borderBottom: '1px solid #D1D5DB',
     flex: 1,
   },
+  badge: {
+    marginRight: 12,
+    borderRadius: 6,
+    width: 'fit-content',
+    padding: '2px 8px',
+  },
+  principalBadge: {
+    background: '#D7FFDC',
+    color: '#009612',
+  },
+  accountBadge: {
+    background: '#D3E1FF',
+    color: '#3574F4',
+  },
 }));
diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
@@ -121,10 +121,10 @@
     "runCommandTitle": "Run the following command",
     "runCommandSubtitle": "To deposit Cycles from a Cycles Wallet you need to run a DFX CLI command.",
     "runCommandButton": "Ok, I ran the command.",
-    "depositIcpTitle1": "1. Deposit Using Principal ID 😎",
-    "depositIcpSubtitle1": "Use when receiving from Plug accounts & users, or other apps that support sending directly to Principal ID's.",
-    "depositIcpTitle2": "2. Deposit Using Account ID 😑",
-    "depositIcpSubtitle2": "Use when receiving from exchanges or other apps that only support sending to Account ID’s.",
+    "depositIcpTitle1": "From another Plug Account",
+    "depositIcpSubtitle1": "Use when receiving from Plug accounts or other apps that support sending directly to Principal ID's.",
+    "depositIcpTitle2": "From Exchange, DFX, or Account ID",
+    "depositIcpSubtitle2": "Use when receiving from exchanges or other apps that only support sending to Account ID's.",
     "scanQrCode": "Scan QR Code"
   },
   "swap": {