From 547e860a50205a9387f2313078820cd720bea833 Mon Sep 17 00:00:00 2001 From: IvanMahda Date: Thu, 10 Oct 2024 22:13:43 +0300 Subject: [PATCH] Settings pages update About - page completed Web3Id pages markup --- .../src/popup/popupX/constants/routes.ts | 6 ++ .../Header/components/MenuTiles.tsx | 23 +++-- .../page-layouts/MainLayout/Header/i18n/da.ts | 5 + .../page-layouts/MainLayout/Header/i18n/en.ts | 15 +++ .../src/popup/popupX/pages/About/About.scss | 22 +++++ .../src/popup/popupX/pages/About/About.tsx | 78 +++++++++++++++ .../src/popup/popupX/pages/About/i18n/da.ts | 5 + .../src/popup/popupX/pages/About/i18n/en.ts | 13 +++ .../src/popup/popupX/pages/About/index.ts | 1 + .../pages/NetworkSettings/NetworkSettings.tsx | 49 ++++++++-- .../popupX/pages/NetworkSettings/i18n/en.ts | 2 + .../popupX/pages/PrivateKey/PrivateKey.tsx | 96 ++++++++++++++++++- .../pages/ReceiveFunds/ReceiveFunds.scss | 2 +- .../pages/ReceiveFunds/ReceiveFunds.tsx | 5 +- .../src/popup/popupX/pages/Web3Id/Web3Id.scss | 56 +++++------ .../src/popup/popupX/pages/Web3Id/Web3Id.tsx | 22 ----- .../popupX/pages/Web3Id/Web3IdCredentials.tsx | 26 +++++ .../popupX/pages/Web3Id/Web3IdImport.tsx | 25 +++++ .../src/popup/popupX/pages/Web3Id/i18n/da.ts | 5 + .../src/popup/popupX/pages/Web3Id/i18n/en.ts | 13 +++ .../src/popup/popupX/pages/Web3Id/index.ts | 3 +- .../src/popup/popupX/shared/Card/Card.scss | 1 + .../src/popup/popupX/shared/Text/Text.scss | 14 +++ .../src/popup/popupX/shared/Text/Text.tsx | 13 +++ .../popupX/shared/Web3IdCard/Web3IdCard.scss | 32 +++++++ .../popupX/shared/Web3IdCard/Web3IdCard.tsx | 19 ++++ .../popup/popupX/shared/Web3IdCard/index.ts | 1 + .../src/popup/popupX/shared/utils/helpers.ts | 7 ++ .../src/popup/popupX/shell/Routes.tsx | 9 +- .../src/popup/popupX/styles/_elements.scss | 2 + .../browser-wallet/src/popup/shell/Root.tsx | 2 +- .../src/popup/shell/i18n/locales/en.ts | 18 +++- 32 files changed, 509 insertions(+), 81 deletions(-) create mode 100644 packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/da.ts create mode 100644 packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts create mode 100644 packages/browser-wallet/src/popup/popupX/pages/About/About.scss create mode 100644 packages/browser-wallet/src/popup/popupX/pages/About/About.tsx create mode 100644 packages/browser-wallet/src/popup/popupX/pages/About/i18n/da.ts create mode 100644 packages/browser-wallet/src/popup/popupX/pages/About/i18n/en.ts create mode 100644 packages/browser-wallet/src/popup/popupX/pages/About/index.ts delete mode 100644 packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.tsx create mode 100644 packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdCredentials.tsx create mode 100644 packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdImport.tsx create mode 100644 packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/da.ts create mode 100644 packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/en.ts create mode 100644 packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss create mode 100644 packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx create mode 100644 packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/index.ts create mode 100644 packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts diff --git a/packages/browser-wallet/src/popup/popupX/constants/routes.ts b/packages/browser-wallet/src/popup/popupX/constants/routes.ts index 33fb2619c..9ebcb80f7 100644 --- a/packages/browser-wallet/src/popup/popupX/constants/routes.ts +++ b/packages/browser-wallet/src/popup/popupX/constants/routes.ts @@ -90,6 +90,9 @@ export const relativeRoutes = { idCards: { path: 'idCards', }, + about: { + path: 'about', + }, accounts: { path: 'accounts', connectedSites: { @@ -113,6 +116,9 @@ export const relativeRoutes = { }, web3Id: { path: 'web3Id', + import: { + path: 'import', + }, }, network: { path: 'network', diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx index 50ee45fa8..d85a70117 100644 --- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx +++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx @@ -12,8 +12,11 @@ import IconButton from '@popup/shared/IconButton'; import Text from '@popup/popupX/shared/Text'; import { Link } from 'react-router-dom'; import { relativeRoutes } from '@popup/popupX/constants/routes'; +import { useTranslation } from 'react-i18next'; export default function MenuTiles({ menuOpen, setMenuOpen }) { + const { t } = useTranslation('x', { keyPrefix: 'header.menu' }); + if (!menuOpen) return null; return (
@@ -21,55 +24,55 @@ export default function MenuTiles({ menuOpen, setMenuOpen }) { - Identities + {t('identities')} - Accounts + {t('accounts')} - Seed phrase + {t('seedPhrase')} - Passcode + {t('passcode')} - Web3 ID + {t('web3Id')} - Earn + {t('earn')} - Network + {t('network')} - + - About + {t('about')} - Restore + {t('restore')}
diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/da.ts b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/da.ts new file mode 100644 index 000000000..d4d6c275e --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/da.ts @@ -0,0 +1,5 @@ +import type en from './en'; + +const t: typeof en = {}; + +export default t; diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts new file mode 100644 index 000000000..765c77fb8 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts @@ -0,0 +1,15 @@ +const t = { + menu: { + identities: 'Identities', + accounts: 'Accounts', + seedPhrase: 'Seed phrase', + passcode: 'Passcode', + web3Id: 'Web3 ID', + earn: 'Earn', + network: 'Network', + about: 'About', + restore: 'Restore', + }, +}; + +export default t; diff --git a/packages/browser-wallet/src/popup/popupX/pages/About/About.scss b/packages/browser-wallet/src/popup/popupX/pages/About/About.scss new file mode 100644 index 000000000..f26ef7ade --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/About/About.scss @@ -0,0 +1,22 @@ +.about-x { + .page__main { + .card-x .row { + justify-content: space-between; + } + + .text__main_medium { + color: $color-white; + } + + .heading_medium { + margin-top: rem(24px); + margin-bottom: rem(8px); + } + } + + .page__footer { + .capture__main_small { + text-align: center; + } + } +} diff --git a/packages/browser-wallet/src/popup/popupX/pages/About/About.tsx b/packages/browser-wallet/src/popup/popupX/pages/About/About.tsx new file mode 100644 index 000000000..298276dc7 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/About/About.tsx @@ -0,0 +1,78 @@ +import { useTranslation } from 'react-i18next'; +import Page from '@popup/popupX/shared/Page'; +import Button from '@popup/popupX/shared/Button'; +import ArrowSquare from '@assets/svgX/arrow-square-out.svg'; +import React from 'react'; +import Card from '@popup/popupX/shared/Card'; +import Text from '@popup/popupX/shared/Text'; +import { getVersionName } from '@shared/utils/environment-helpers'; +import { useAtomValue } from 'jotai'; +import { acceptedTermsAtom } from '@popup/store/settings'; +import urls from '@shared/constants/url'; + +// Start saving the URL for the T&C we get from the wallet proxy, +// and use that in the About page link. +function useGetTermsUrl() { + const { loading: loadingAcceptedTerms, value: acceptedTerms } = useAtomValue(acceptedTermsAtom); + + if (loadingAcceptedTerms) { + return ''; + } + + return acceptedTerms?.url || urls.termsAndConditions; +} + +export default function About() { + const { t } = useTranslation('x', { keyPrefix: 'aboutPage' }); + const termsUrl = useGetTermsUrl(); + + return ( + + + + + + {t('documentation')} + + } /> + + + + {t('forum')} + + } /> + + + + {t('website')} + + } /> + + + + {t('termsAndConditions')} + + } /> + + + + {t('licence')} + + } /> + + + + {t('support')} + + {t('supportDescription')} + + support@concordium.software + + + + + {t('version', { version: getVersionName() })} + + + ); +} diff --git a/packages/browser-wallet/src/popup/popupX/pages/About/i18n/da.ts b/packages/browser-wallet/src/popup/popupX/pages/About/i18n/da.ts new file mode 100644 index 000000000..d4d6c275e --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/About/i18n/da.ts @@ -0,0 +1,5 @@ +import type en from './en'; + +const t: typeof en = {}; + +export default t; diff --git a/packages/browser-wallet/src/popup/popupX/pages/About/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/About/i18n/en.ts new file mode 100644 index 000000000..4bdaf802e --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/About/i18n/en.ts @@ -0,0 +1,13 @@ +const t = { + about: 'About', + documentation: 'Concordium documentation', + forum: 'Concordium support forum', + website: 'Visit the Concordium website', + termsAndConditions: 'Terms and conditions', + licence: 'Licence notices', + support: 'Support', + supportDescription: 'If you encountered a problem, or need help with something, you can reach out us via ', + version: 'Version {{ version }}', +}; + +export default t; diff --git a/packages/browser-wallet/src/popup/popupX/pages/About/index.ts b/packages/browser-wallet/src/popup/popupX/pages/About/index.ts new file mode 100644 index 000000000..1ef71b80e --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/About/index.ts @@ -0,0 +1 @@ +export { default } from './About'; diff --git a/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/NetworkSettings.tsx b/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/NetworkSettings.tsx index 589b3cf45..c050a40ad 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/NetworkSettings.tsx +++ b/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/NetworkSettings.tsx @@ -7,24 +7,57 @@ import { useTranslation } from 'react-i18next'; import Card from '@popup/popupX/shared/Card'; import Text from '@popup/popupX/shared/Text'; import Button from '@popup/popupX/shared/Button'; +import { mainnet, stagenet, testnet } from '@shared/constants/networkConfiguration'; +import { isDevelopmentBuild } from '@shared/utils/environment-helpers'; +import { useAtom } from 'jotai'; +import { networkConfigurationAtom } from '@popup/store/settings'; + +function useNetworks() { + const { t } = useTranslation('x', { keyPrefix: 'network' }); + const [currentNetworkConfiguration, setCurrentNetworkConfiguration] = useAtom(networkConfigurationAtom); + + const networks = [mainnet, testnet]; + if (isDevelopmentBuild()) { + networks.push(stagenet); + } + + const updatedNetworks = networks.map((network) => { + const isConnected = network.genesisHash === currentNetworkConfiguration.genesisHash; + const connectLabel = isConnected ? t('connected') : t('connect'); + + return { + ...network, + isConnected, + connectLabel, + }; + }); + + return updatedNetworks; +} export default function NetworkSettings() { const { t } = useTranslation('x', { keyPrefix: 'network' }); + const networks = useNetworks(); + const nav = useNavigate(); const navToConnect = () => nav(relativeRoutes.settings.network.connect.path); + return ( - - Concordium Mainnet - } /> - - - Concordium Testnet - navToConnect()} /> - + {networks.map((network) => ( + + {network.name} + : null} + onClick={() => navToConnect()} + /> + + ))} diff --git a/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/i18n/en.ts index 74cece43c..798451b14 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/i18n/en.ts +++ b/packages/browser-wallet/src/popup/popupX/pages/NetworkSettings/i18n/en.ts @@ -1,5 +1,7 @@ const t = { networkSettings: 'Network settings', + connected: 'Connected', + connect: 'Connect', }; export default t; diff --git a/packages/browser-wallet/src/popup/popupX/pages/PrivateKey/PrivateKey.tsx b/packages/browser-wallet/src/popup/popupX/pages/PrivateKey/PrivateKey.tsx index ddd52dbc4..dd114d874 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/PrivateKey/PrivateKey.tsx +++ b/packages/browser-wallet/src/popup/popupX/pages/PrivateKey/PrivateKey.tsx @@ -5,23 +5,109 @@ import Text from '@popup/popupX/shared/Text'; import Card from '@popup/popupX/shared/Card'; import Button from '@popup/popupX/shared/Button'; import Copy from '@assets/svgX/copy.svg'; +import { useAtomValue } from 'jotai'; +import { selectedAccountAtom } from '@popup/store/account'; +import { useCredential, usePrivateKey, usePublicKey } from '@popup/shared/utils/account-helpers'; +import { networkConfigurationAtom } from '@popup/store/settings'; +import { saveData } from '@popup/shared/utils/file-helpers'; +import { NetworkConfiguration } from '@shared/storage/types'; +import { getNet } from '@shared/utils/network-helpers'; +import { copyToClipboard } from '@popup/popupX/shared/utils/helpers'; + +type CredentialKeys = { + threshold: number; + keys: Record; +}; + +type AccountKeys = { + threshold: number; + keys: Record; +}; + +type AccountExport = { + accountKeys: AccountKeys; + address: string; + credentials: Record; +}; + +type ExportFormat = { + type: 'concordium-browser-wallet-account'; + v: number; + environment: string; // 'testnet' or 'mainnet' + value: AccountExport; +}; + +function createExport( + address: string, + credId: string, + signKey: string, + verifyKey: string, + network: NetworkConfiguration +) { + const docContent: ExportFormat = { + type: 'concordium-browser-wallet-account', + v: 0, + environment: getNet(network).toLowerCase(), + value: { + accountKeys: { + keys: { + '0': { + keys: { + '0': { + signKey, + verifyKey, + }, + }, + threshold: 1, + }, + }, + threshold: 1, + }, + credentials: { + '0': credId, + }, + address, + }, + }; + + return docContent; +} + +function usePrivateKeyData() { + const selectedAccountAddress = useAtomValue(selectedAccountAtom); + const credential = useCredential(selectedAccountAddress); + const privateKey = usePrivateKey(selectedAccountAddress); + const publicKey = usePublicKey(selectedAccountAddress); + const network = useAtomValue(networkConfigurationAtom); + + const isDataExist = selectedAccountAddress && credential && privateKey && publicKey && network; + + const handleExport = () => { + if (isDataExist) { + const data = createExport(selectedAccountAddress, credential.credId, privateKey, publicKey, network); + saveData(data, `${selectedAccountAddress}.export`); + } + }; + + return { privateKey: privateKey || '', handleExport }; +} export default function PrivateKey() { const { t } = useTranslation('x', { keyPrefix: 'privateKey' }); + const { privateKey, handleExport } = usePrivateKeyData(); + return ( {t('keyDescription')} - - 575f0f919c99ed4b7d858df2aea68112292da4eae98e2e69410cd5283f3c727b282caeba754f815dc876d8b84d3339c6f74c4127f238a391891dd23c74892943 - + {privateKey} - } /> + } onClick={() => copyToClipboard(privateKey)} /> - + ); diff --git a/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.scss b/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.scss index 9af84d6f6..fbabec864 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.scss +++ b/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.scss @@ -10,7 +10,7 @@ .text__main { word-wrap: break-word; - margin-top: rem(40px); + margin-top: rem(24px); margin-bottom: rem(16px); color: $color-grey-1; } diff --git a/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.tsx b/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.tsx index d39c686b1..ae24b40ba 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.tsx +++ b/packages/browser-wallet/src/popup/popupX/pages/ReceiveFunds/ReceiveFunds.tsx @@ -7,10 +7,11 @@ import Card from '@popup/popupX/shared/Card'; import { useAtomValue } from 'jotai'; import { selectedAccountAtom } from '@popup/store/account'; import { DisplayAsQR } from 'wallet-common-helpers'; +import { copyToClipboard } from '@popup/popupX/shared/utils/helpers'; export default function ReceiveFunds() { const { t } = useTranslation('x', { keyPrefix: 'receiveFunds' }); - const address = useAtomValue(selectedAccountAtom); + const address = useAtomValue(selectedAccountAtom) || ''; return ( @@ -21,7 +22,7 @@ export default function ReceiveFunds() { {address} - {}} /> + copyToClipboard(address)} /> diff --git a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.scss b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.scss index 3a202703b..831e5ee35 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.scss +++ b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.scss @@ -1,38 +1,38 @@ -.web-id-container { - display: flex; - flex-direction: column; - height: 100%; - padding-bottom: rem(32px); - - .web-id { - &__drop-area { +.web-id-x { + &.credintials { + .page__main { display: flex; flex-direction: column; - align-items: center; - justify-content: center; + gap: rem(8px); + } + } + + &.import { + height: 100%; + + .page__main { height: 100%; - padding-bottom: rem(50px); - margin-top: rem(16px); - border-radius: rem(12px); - border: 1px dashed $color-mineral-1; - background-color: rgba($color-grey-1, 0.5); - .capture__main_small { - text-align: center; - } + .card-x.grey { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + border: 1px dashed $color-mineral-1; + background-color: rgba($color-grey-1, 0.5); - svg { - margin-bottom: rem(32px); - } - } + .capture__main_small { + text-align: center; + } - &__file-select { - display: flex; - justify-content: center; - margin-top: rem(24px); + svg { + margin-bottom: rem(32px); + } + } - .label__main { - margin-left: rem(8px); + .button__icon { + margin-top: rem(24px); } } } diff --git a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.tsx b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.tsx deleted file mode 100644 index 6d95f7689..000000000 --- a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import File from '@assets/svgX/file.svg'; -import FolderOpen from '@assets/svgX/folder-open.svg'; - -export default function Web3Id() { - return ( -
-
- Import Web3 ID Credentials -
-
- - Drag and drop here - your Credentials file here -
-
- - or Select file to import -
-
- ); -} diff --git a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdCredentials.tsx b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdCredentials.tsx new file mode 100644 index 000000000..cdfa13d9e --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdCredentials.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Plus from '@assets/svgX/plus.svg'; +import { useTranslation } from 'react-i18next'; +import Page from '@popup/popupX/shared/Page'; +import Button from '@popup/popupX/shared/Button'; +import Web3IdCard from '@popup/popupX/shared/Web3IdCard'; +import { useNavigate } from 'react-router-dom'; +import { relativeRoutes } from '@popup/popupX/constants/routes'; + +export default function Web3IdCredentials() { + const { t } = useTranslation('x', { keyPrefix: 'web3Id.credentials' }); + const nav = useNavigate(); + const navToImport = () => nav(relativeRoutes.settings.web3Id.import.path); + + return ( + + + } onClick={navToImport} /> + + + + + + + ); +} diff --git a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdImport.tsx b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdImport.tsx new file mode 100644 index 000000000..47605c1c8 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdImport.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import File from '@assets/svgX/file.svg'; +import FolderOpen from '@assets/svgX/folder-open.svg'; +import Page from '@popup/popupX/shared/Page'; +import Button from '@popup/popupX/shared/Button'; +import { useTranslation } from 'react-i18next'; +import Text from '@popup/popupX/shared/Text'; +import Card from '@popup/popupX/shared/Card'; + +export default function Web3IdImport() { + const { t } = useTranslation('x', { keyPrefix: 'web3Id.import' }); + + return ( + + + + + + {t('dragAndDropFile')} + + } label={t('selectFile')} /> + + + ); +} diff --git a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/da.ts b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/da.ts new file mode 100644 index 000000000..d4d6c275e --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/da.ts @@ -0,0 +1,5 @@ +import type en from './en'; + +const t: typeof en = {}; + +export default t; diff --git a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/en.ts new file mode 100644 index 000000000..0a30a6562 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/i18n/en.ts @@ -0,0 +1,13 @@ +const t = { + credentials: { + webId: 'Web3 ID Credentials', + noCredentials: 'There’s no Web3 ID Credentials', + }, + import: { + importWeb3Id: 'Import Web3 ID Credentials', + selectFile: 'or Select file to import', + dragAndDropFile: 'Drag and drop here\nyour Credentials file here', + }, +}; + +export default t; diff --git a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/index.ts b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/index.ts index a56c8b95d..ac6ac312b 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/Web3Id/index.ts +++ b/packages/browser-wallet/src/popup/popupX/pages/Web3Id/index.ts @@ -1 +1,2 @@ -export { default } from './Web3Id'; +export { default as Web3IdCredentials } from './Web3IdCredentials'; +export { default as Web3IdImport } from './Web3IdImport'; diff --git a/packages/browser-wallet/src/popup/popupX/shared/Card/Card.scss b/packages/browser-wallet/src/popup/popupX/shared/Card/Card.scss index fa1dcfa7f..4a0d9419e 100644 --- a/packages/browser-wallet/src/popup/popupX/shared/Card/Card.scss +++ b/packages/browser-wallet/src/popup/popupX/shared/Card/Card.scss @@ -35,6 +35,7 @@ &:first-child { margin-bottom: rem(6px); + opacity: 0.5; color: $color-mineral-3; } } diff --git a/packages/browser-wallet/src/popup/popupX/shared/Text/Text.scss b/packages/browser-wallet/src/popup/popupX/shared/Text/Text.scss index e69de29bb..9f91c4941 100644 --- a/packages/browser-wallet/src/popup/popupX/shared/Text/Text.scss +++ b/packages/browser-wallet/src/popup/popupX/shared/Text/Text.scss @@ -0,0 +1,14 @@ +.external-link { + text-decoration: underline; + + &, + &:hover, + &:visited, + &:active { + color: inherit; + } + + &:hover { + color: $color-white; + } +} diff --git a/packages/browser-wallet/src/popup/popupX/shared/Text/Text.tsx b/packages/browser-wallet/src/popup/popupX/shared/Text/Text.tsx index 27489e3c0..2eddca140 100644 --- a/packages/browser-wallet/src/popup/popupX/shared/Text/Text.tsx +++ b/packages/browser-wallet/src/popup/popupX/shared/Text/Text.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from 'react'; import clsx from 'clsx'; +import { ClassName } from 'wallet-common-helpers'; function TextRoot({ children }: { children: ReactNode }) { return children; @@ -35,6 +36,16 @@ function TextLabelRegular({ className, children }: { className?: string; childre return {children}; } +type Props = ClassName & { path: string; children?: string | ReactNode }; + +function TextExternalLink({ path, children = path, className }: Props) { + return ( + + {children} + + ); +} + const Text = TextRoot as typeof TextRoot & { Heading: typeof TextHeading; Main: typeof TextMain; @@ -44,6 +55,7 @@ const Text = TextRoot as typeof TextRoot & { CaptureAdditional: typeof TextCaptureAdditionalSmall; Label: typeof TextLabelMain; LabelRegular: typeof TextLabelRegular; + ExternalLink: typeof TextExternalLink; }; Text.Heading = TextHeading; Text.Main = TextMain; @@ -53,5 +65,6 @@ Text.Capture = TextCaptureMainSmall; Text.CaptureAdditional = TextCaptureAdditionalSmall; Text.Label = TextLabelMain; Text.LabelRegular = TextLabelRegular; +Text.ExternalLink = TextExternalLink; export default Text; diff --git a/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss new file mode 100644 index 000000000..89520f7ff --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss @@ -0,0 +1,32 @@ +.web-id-card-x { + &.card-x.grey { + padding: rem(8px) rem(0) rem(0) rem(0); + border: rem(1px) solid $color-input-border; + + .row:not(.details) { + display: flex; + align-items: center; + padding: rem(0) rem(14px) rem(8px) rem(14px); + + .text__main_medium { + color: $color-mineral-2; + margin-left: rem(8px); + } + + .capture__additional_small { + margin-left: auto; + color: $color-green-success; + } + } + + .row.details { + margin: rem(0) rem(14px) rem(8px) rem(14px); + padding: rem(0) rem(0) rem(8px) rem(0); + } + } + + svg { + width: rem(16px); + height: rem(16px); + } +} diff --git a/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx new file mode 100644 index 000000000..dec03d91d --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx @@ -0,0 +1,19 @@ +import React, { ReactNode } from 'react'; +import ConcordiumLogo from '@assets/svgX/concordium-logo.svg'; +import Card from '@popup/popupX/shared/Card'; +import Text from '@popup/popupX/shared/Text'; + +export default function Web3IdCard() { + return ( + + + + Title + Active + + + + + + ); +} diff --git a/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/index.ts b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/index.ts new file mode 100644 index 000000000..3e117255a --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/index.ts @@ -0,0 +1 @@ +export { default } from './Web3IdCard'; diff --git a/packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts b/packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts new file mode 100644 index 000000000..c0984c585 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts @@ -0,0 +1,7 @@ +export async function copyToClipboard(text: string): Promise { + try { + await navigator.clipboard.writeText(text); + } catch (e) { + // TODO: logging. + } +} diff --git a/packages/browser-wallet/src/popup/popupX/shell/Routes.tsx b/packages/browser-wallet/src/popup/popupX/shell/Routes.tsx index eb9f5f6b2..65992a671 100644 --- a/packages/browser-wallet/src/popup/popupX/shell/Routes.tsx +++ b/packages/browser-wallet/src/popup/popupX/shell/Routes.tsx @@ -11,9 +11,10 @@ import TokenDetails from '@popup/popupX/pages/TokenDetails'; import IdCards from '@popup/popupX/pages/IdCards'; import Accounts from '@popup/popupX/pages/Accounts'; import SeedPhrase from 'src/popup/popupX/pages/SeedPhrase'; -import Web3Id from '@popup/popupX/pages/Web3Id'; +import { Web3IdCredentials, Web3IdImport } from '@popup/popupX/pages/Web3Id'; import NetworkSettings from '@popup/popupX/pages/NetworkSettings'; import ConnectNetwork from '@popup/popupX/pages/ConnectNetwork'; +import About from '@popup/popupX/pages/About'; import { IdSubmitted, IdCardsInfo, RequestIdentity, SetupPassword, Welcome } from '@popup/popupX/pages/Onboarding'; import ConnectedSites from '@popup/popupX/pages/ConnectedSites'; import EarningRewards from '@popup/popupX/pages/EarningRewards'; @@ -71,11 +72,15 @@ export default function Routes() { } path={relativeRoutes.settings.accounts.privateKey.path} /> } path={relativeRoutes.settings.seedPhrase.path} /> - } path={relativeRoutes.settings.web3Id.path} /> + + } /> + } path={relativeRoutes.settings.web3Id.import.path} /> + } /> } path={relativeRoutes.settings.network.connect.path} /> + } path={relativeRoutes.settings.about.path} /> } /> diff --git a/packages/browser-wallet/src/popup/popupX/styles/_elements.scss b/packages/browser-wallet/src/popup/popupX/styles/_elements.scss index 75a6f7797..36a20a2c3 100644 --- a/packages/browser-wallet/src/popup/popupX/styles/_elements.scss +++ b/packages/browser-wallet/src/popup/popupX/styles/_elements.scss @@ -7,6 +7,7 @@ @import '../pages/PrivateKey/PrivateKey'; @import '../pages/NetworkSettings/NetworkSettings'; @import '../pages/ConnectNetwork/ConnectNetwork'; +@import '../pages/About/About'; @import '../pages/SeedPhrase/SeedPhrase'; @import '../pages/TransactionLog/TransactionLog'; @import '../pages/Web3Id/Web3Id'; @@ -27,6 +28,7 @@ @import '../shared/Page/Page'; @import '../shared/Card/Card'; @import '../shared/IdCard/IdCard'; +@import '../shared/Web3IdCard/Web3IdCard'; @import '../shared/Button/Button'; @import '../shared/IconButton/IconButton'; @import '../shared/ExternalLink/ExternalLink'; diff --git a/packages/browser-wallet/src/popup/shell/Root.tsx b/packages/browser-wallet/src/popup/shell/Root.tsx index c649a1a51..46a4dad43 100644 --- a/packages/browser-wallet/src/popup/shell/Root.tsx +++ b/packages/browser-wallet/src/popup/shell/Root.tsx @@ -108,7 +108,7 @@ export default function Root() { return ( - + diff --git a/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts b/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts index 1569576c8..9fb2d527b 100644 --- a/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts +++ b/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts @@ -38,6 +38,9 @@ import privateKey from '@popup/popupX/pages/PrivateKey/i18n/en'; import seedPhrase from '@popup/popupX/pages/SeedPhrase/i18n/en'; import network from '@popup/popupX/pages/NetworkSettings/i18n/en'; import connect from '@popup/popupX/pages/ConnectNetwork/i18n/en'; +import aboutPage from '@popup/popupX/pages/About/i18n/en'; +import header from '@popup/popupX/page-layouts/MainLayout/Header/i18n/en'; +import web3Id from '@popup/popupX/pages/Web3Id/i18n/en'; const t = { shared, @@ -69,7 +72,20 @@ const t = { verifiableCredentialBackup, ageProofRequest, viewSeedPhrase, - x: { onboarding, receiveFunds, idCards, accounts, connectedSites, privateKey, seedPhrase, network, connect }, + x: { + onboarding, + receiveFunds, + idCards, + accounts, + connectedSites, + privateKey, + seedPhrase, + network, + connect, + aboutPage, + header, + web3Id, + }, }; export default t;