+
+
-
- {connectionText}
+
-
-
-
);
diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Fullscreen.tsx b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Fullscreen.tsx
index e2c4c173f..efb97ac82 100644
--- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Fullscreen.tsx
+++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Fullscreen.tsx
@@ -1,10 +1,11 @@
import React from 'react';
import { useLocation } from 'react-router-dom';
import { isFullscreenWindow } from '@popup/shared/window-helpers';
-import ArrowsOut from '@assets/svgX/arrows-out-simple.svg';
+import ArrowsOut from '@assets/svgX/UiKit/Arrows/fullscreen-maximize.svg';
import { popupMessageHandler } from '@popup/shared/message-handler';
import { InternalMessageType } from '@messaging';
import { useTranslation } from 'react-i18next';
+import Text from '@popup/popupX/shared/Text';
export default function Fullscreen() {
const { t } = useTranslation('x', { keyPrefix: 'header.fullscreen' });
@@ -26,7 +27,7 @@ export default function Fullscreen() {
return (
diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuButton.tsx b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuButton.tsx
index 2e0dde054..6a6a1bbf2 100644
--- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuButton.tsx
+++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuButton.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import DotsNine from '@assets/svgX/dots-nine.svg';
-import Close from '@assets/svgX/close.svg';
+import DotsNine from '@assets/svgX/UiKit/MenuNavigation/navigation-dots-menu-button.svg';
+import Close from '@assets/svgX/UiKit/Interface/x-cross-close.svg';
import clsx from 'clsx';
import Button from '@popup/popupX/shared/Button';
@@ -14,7 +14,6 @@ export default function MenuButton({ setMenuOpen, menuOpen, hideMenu }: Props) {
return (
:
}
onClick={() => {
setMenuOpen(!menuOpen);
diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/NavButton.tsx b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/NavButton.tsx
index cac4f7691..f2e0cecb1 100644
--- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/NavButton.tsx
+++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/NavButton.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import clsx from 'clsx';
-import ArrowsLeft from '@assets/svgX/arrow-left.svg';
+import ArrowLeft from '@assets/svgX/UiKit/Arrows/arrow-left.svg';
import Button from '@popup/popupX/shared/Button';
import { useTranslation } from 'react-i18next';
import { absoluteRoutes } from '@popup/popupX/constants/routes';
@@ -39,7 +39,7 @@ export default function NavButton({ hideBackArrow, backTitle, navBackSteps }: Na
}
}}
>
-
+
{title}
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
index 2f5521fd2..831e59687 100644
--- 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
@@ -20,16 +20,9 @@ const t = {
sortDesc: 'Sort Z-A',
searchBy: 'Search by name',
},
- connection: {
- siteNotConnected: 'No website connected',
- waiting: 'Waiting',
- tooltip: {
- title: 'Connect dApps',
- text: 'You can connect you wallet to a\ndApp. An active connection will be\nshown here.',
- },
- },
navButton: {
toMain: 'To main page',
+ back: 'Back',
},
fullscreen: { fullscreen: 'Fullscreen' },
};
diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/MainLayout.scss b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/MainLayout.scss
index 8020afeb0..f0f716aa5 100644
--- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/MainLayout.scss
+++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/MainLayout.scss
@@ -17,7 +17,7 @@
.float-section {
position: absolute;
- margin-top: rem(-48px);
+ margin-top: rem(-40px);
.header {
&__nav {
@@ -33,8 +33,18 @@
background: unset;
cursor: pointer;
+ svg {
+ width: $semantic-label-m-line-height;
+ height: $semantic-label-m-line-height;
+
+ path {
+ fill: $semantic-content-primary;
+ }
+ }
+
.text__main_medium {
margin-left: rem(12px);
+ color: $semantic-content-accent-tertiary;
}
}
}
diff --git a/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx b/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx
index 466269abe..edb2b82dd 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx
@@ -1,6 +1,6 @@
import React, { useCallback, useMemo, useState } from 'react';
-import Plus from '@assets/svgX/plus.svg';
-import Arrows from '@assets/svgX/arrows-down-up.svg';
+import Plus from '@assets/svgX/UiKit/Interface/plus-add-buy.svg';
+import Arrows from '@assets/svgX/UiKit/Arrows/up-down-transfer.svg';
import Pencil from '@assets/svgX/pencil-simple.svg';
import Checkmark from '@assets/svgX/checkmark.svg';
import Close from '@assets/svgX/close.svg';
diff --git a/packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccountConfirm.tsx b/packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccountConfirm.tsx
index 38522d74d..01bdfcf25 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccountConfirm.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccountConfirm.tsx
@@ -23,7 +23,7 @@ import { absoluteRoutes } from '@popup/popupX/constants/routes';
/**
* Hook providing function for sending credential deployments.
*/
-function useSendCredentialDeployment() {
+export function useSendCredentialDeployment() {
const providers = useAtomValue(identityProvidersAtom);
const credentials = useAtomValue(credentialsAtom);
const network = useAtomValue(networkConfigurationAtom);
diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/SelfSuspend/SelfSuspend.tsx b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/SelfSuspend/SelfSuspend.tsx
index 32b3d259d..94eff73ec 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/SelfSuspend/SelfSuspend.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/SelfSuspend/SelfSuspend.tsx
@@ -32,7 +32,7 @@ export default function SelfSuspend() {
nav(absoluteRoutes.settings.earn.validator.submit.path, { state: SUSPEND_STATE })}
/>
diff --git a/packages/browser-wallet/src/popup/popupX/pages/IdCards/IdCards.tsx b/packages/browser-wallet/src/popup/popupX/pages/IdCards/IdCards.tsx
index 0d4633fa2..a8575020a 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/IdCards/IdCards.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/IdCards/IdCards.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAtom } from 'jotai';
-import Plus from '@assets/svgX/plus.svg';
+import Plus from '@assets/svgX/UiKit/Interface/plus-add-buy.svg';
import Button from '@popup/popupX/shared/Button';
import Page from '@popup/popupX/shared/Page';
import { identitiesAtom } from '@popup/store/identity';
diff --git a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Failed.tsx b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Failed.tsx
index 39bad57e8..c9c72f8a6 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Failed.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Failed.tsx
@@ -25,7 +25,7 @@ export default function IdIssuanceFailed() {
}, [state.backState]);
return (
-
+
{state.message}
diff --git a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdCardsInfo.tsx b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdCardsInfo.tsx
new file mode 100644
index 000000000..7bfc66e3f
--- /dev/null
+++ b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdCardsInfo.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Page from '@popup/popupX/shared/Page';
+import Text from '@popup/popupX/shared/Text';
+import FullscreenNotice from '@popup/popupX/shared/FullscreenNotice';
+import { useLocation } from 'react-router-dom';
+
+export default function IdCardsInfo() {
+ const { t } = useTranslation('x', { keyPrefix: 'idIssuance.idCardsInfo' });
+
+ return (
+
+
+
+ {t('idDescription')}
+
+
+ );
+}
+
+export function IdCardsInfoNotice({ ...props }: { open: boolean; onClose: () => void }) {
+ const { pathname } = useLocation();
+ const isAtOnboarding = pathname.includes('onboarding');
+ return (
+
+
+
+ );
+}
diff --git a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.scss b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.scss
index 57381c515..561ba70e5 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.scss
+++ b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.scss
@@ -1,27 +1,58 @@
.id-issuance {
+ &__providers-container {
+ margin-top: $semantic-gap-xl;
+ }
+
&__issuer-btn {
display: flex;
- color: $color-white;
align-items: center;
- padding: rem(16px);
- gap: rem(16px);
+ padding: $semantic-padding-m $semantic-padding-l $semantic-padding-m $semantic-padding-m;
+ gap: $semantic-gap-s;
border: unset;
border-radius: rem(12px);
- background: $color-transaction-bg;
width: 100%;
+ @include surface-states-tertiary;
+
&:not(:first-child) {
- margin-top: rem(8px);
+ margin-top: rem(4px);
+ }
+
+ .text__main {
+ color: $semantic-content-primary;
+ font-weight: $t-font-weight-medium;
+ line-height: $semantic-label-l-line-height;
}
.identity-provider-icon {
- width: rem(64px);
- height: rem(32px);
+ width: rem(40px);
+ height: rem(40px);
object-position: center;
object-fit: contain;
- background: $color-white;
- border-radius: rem(4px);
- padding: rem(4px);
+ background: $semantic-surface-primary;
+ border-radius: $semantic-radius-rounded;
}
+
+ svg {
+ width: rem(24px);
+ height: rem(24px);
+ margin-left: auto;
+
+ path {
+ fill: $semantic-content-primary-a40;
+ }
+ }
+ }
+
+ .redirect-info {
+ text-align: center;
+ margin-top: $semantic-gap-l;
+ padding: 0 $semantic-padding-xl;
+ }
+}
+
+.id-issuance-failed {
+ .heading_medium {
+ color: $semantic-content-error-primary;
}
}
diff --git a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.tsx b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.tsx
index 71ac10396..a6236c67b 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/IdIssuance.tsx
@@ -1,4 +1,4 @@
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
@@ -8,13 +8,16 @@ import Button from '@popup/popupX/shared/Button';
import Page from '@popup/popupX/shared/Page';
import Text from '@popup/popupX/shared/Text';
import IdentityProviderIcon from '@popup/shared/IdentityProviderIcon';
+import ExternalLink from '@assets/svgX/UiKit/Interface/external-link.svg';
+import CircleInfo from '@assets/svgX/UiKit/Interface/circled-info-tootlip.svg';
import { getIdentityProviders } from '@popup/shared/utils/wallet-proxy';
import { identitiesAtom, identityProvidersAtom, pendingIdentityAtom } from '@popup/store/identity';
-import { grpcClientAtom, networkConfigurationAtom } from '@popup/store/settings';
+import { grpcClientAtom, hasBeenOnBoardedAtom, networkConfigurationAtom } from '@popup/store/settings';
import { CreationStatus, IdentityProvider, SessionPendingIdentity } from '@shared/storage/types';
import { getGlobal } from '@shared/utils/network-helpers';
import { logErrorMessage } from '@shared/utils/log-helpers';
+import { IdCardsInfoNotice } from './IdCardsInfo';
import { IdIssuanceExternalFlowLocationState } from './util';
export default function IdIssuance() {
@@ -26,6 +29,8 @@ export default function IdIssuance() {
const nav = useNavigate();
const [buttonDisabled, setButtonDisabled] = useState(false);
const [pendingIdentity, setPendingIdentity] = useAtom(pendingIdentityAtom);
+ const [showIdInfo, setShowIdInfo] = useState(false);
+ const setHasBeenOnboarded = useSetAtom(hasBeenOnBoardedAtom);
useEffect(() => {
// TODO: only load once per session?
@@ -37,6 +42,9 @@ export default function IdIssuance() {
const startIssuance = useCallback(
async (provider: IdentityProvider) => {
+ // Component was reused at onboarding. Needs to set value here.
+ setHasBeenOnboarded(true);
+
setButtonDisabled(true);
try {
if (!network) {
@@ -75,33 +83,47 @@ export default function IdIssuance() {
);
return (
-
-
- {pendingIdentity !== undefined ? (
- {t('descriptionOngoing')}
- ) : (
- {t('description')}
- )}
- {pendingIdentity === undefined && (
-
- {providers.map((p) => (
- startIssuance(p)}
- >
-
- {p.metadata.display ?? p.ipInfo.ipDescription.name}
-
- ))}
-
- )}
- {pendingIdentity !== undefined && (
-
- setPendingIdentity(undefined)} />
-
- )}
-
+ <>
+ setShowIdInfo(false)} />
+
+
+ }
+ onClick={() => {
+ setShowIdInfo(true);
+ }}
+ />
+
+ {pendingIdentity !== undefined ? (
+ {t('descriptionOngoing')}
+ ) : (
+ {t('description')}
+ )}
+ {pendingIdentity === undefined && (
+ <>
+
+ {providers.map((p) => (
+ startIssuance(p)}
+ >
+
+ {p.metadata.display ?? p.ipInfo.ipDescription.name}
+
+
+ ))}
+
+ {t('redirectInfo')}
+
+ )}
+ {pendingIdentity !== undefined && (
+
+ setPendingIdentity(undefined)} />
+
+ )}
+
+
);
}
diff --git a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Submitted.tsx b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Submitted.tsx
index 17fa85649..9a835142f 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Submitted.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Submitted.tsx
@@ -1,21 +1,53 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
-import { useAtomValue } from 'jotai';
+import { useSetAtom, useAtomValue } from 'jotai';
import Button from '@popup/popupX/shared/Button';
import { ConfirmedIdCard, RejectedIdCard, PendingIdCard } from '@popup/popupX/shared/IdCard';
import Page from '@popup/popupX/shared/Page';
import Text from '@popup/popupX/shared/Text';
import { identitiesAtomWithLoading } from '@popup/store/identity';
-import { CreationStatus } from '@shared/storage/types';
+import { CreationStatus, Identity } from '@shared/storage/types';
import { absoluteRoutes } from '@popup/popupX/constants/routes';
import { isSpawnedWindow } from '@popup/shared/window-helpers';
import { useNavigate } from 'react-router-dom';
+import { useSendCredentialDeployment } from '@popup/popupX/pages/CreateAccount/CreateAccountConfirm';
+import { creatingCredentialRequestAtom } from '@popup/store/account';
+
+function useSubmitAccountDeployment() {
+ const nav = useNavigate();
+ const deployment = useSendCredentialDeployment();
+ const setCreatingRequest = useSetAtom(creatingCredentialRequestAtom);
+ return (identity: Identity) => {
+ if (identity === undefined || identity.status !== CreationStatus.Confirmed) {
+ throw new Error(`Invalid identity: ${identity}`);
+ } else {
+ setCreatingRequest(true);
+ return deployment
+ .sendCredentialDeployment(identity)
+ .catch(() => {})
+ .then(() => {
+ nav(absoluteRoutes.home.path);
+ })
+ .finally(() => {
+ setCreatingRequest(false);
+ });
+ }
+ };
+}
export default function IdIssuanceSubmitted() {
const { t } = useTranslation('x', { keyPrefix: 'idIssuance.submitted' });
+ const creatingCredentialRequest = useAtomValue(creatingCredentialRequestAtom);
const { loading, value: identities } = useAtomValue(identitiesAtomWithLoading);
+ const identity = identities.slice(-1)[0];
+
const nav = useNavigate();
+ const onCreateAccount = useSubmitAccountDeployment();
+
+ if (loading) {
+ return null;
+ }
const handleDone = () => {
if (isSpawnedWindow) {
@@ -25,11 +57,9 @@ export default function IdIssuanceSubmitted() {
}
};
- if (loading) {
- return null;
- }
-
- const identity = identities.slice(-1)[0];
+ const handleCreateAccount = () => {
+ onCreateAccount(identity).then(() => {});
+ };
return (
@@ -38,10 +68,20 @@ export default function IdIssuanceSubmitted() {
{identity.status === CreationStatus.Pending &&
}
{identity.status === CreationStatus.Rejected &&
}
- {identity.status === CreationStatus.Confirmed &&
}
+ {identity.status === CreationStatus.Confirmed && (
+
+ )}