-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #569 from Concordium/x-rejected-id-card
Show rejected ID cards
- Loading branch information
Showing
10 changed files
with
160 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 13 additions & 61 deletions
74
packages/browser-wallet/src/popup/popupX/shared/IdCard/IdCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,26 @@ | ||
| import React, { ReactNode } from 'react'; | ||
| import Card from '@popup/popupX/shared/Card'; | ||
| import Text from '@popup/popupX/shared/Text'; | ||
| import Button from '@popup/popupX/shared/Button'; | ||
| import useEditableValue from '@popup/popupX/shared/EditableValue'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| export type IdCardAttributeInfo = { | ||
| key: string; | ||
| value: string | ReactNode; | ||
| export type IdCardBaseProps = { | ||
| title: ReactNode; | ||
| subtitle: ReactNode; | ||
| titleAction?: ReactNode; | ||
| children?: ReactNode; | ||
| }; | ||
|
|
||
| export type IdCardAccountInfo = { | ||
| address: string; | ||
| amount: ReactNode; | ||
| }; | ||
|
|
||
| export type IdCardProps = { | ||
| idProviderName: string; | ||
| identityName: string; | ||
| rowsIdInfo?: IdCardAttributeInfo[]; | ||
| rowsConnectedAccounts?: IdCardAccountInfo[]; | ||
| onNewName?: (newName: string) => void; | ||
| identityNameFallback?: string; | ||
| }; | ||
|
|
||
| export default function IdCard({ | ||
| idProviderName, | ||
| identityName, | ||
| rowsIdInfo, | ||
| rowsConnectedAccounts, | ||
| onNewName, | ||
| identityNameFallback, | ||
| }: IdCardProps) { | ||
| const editable = useEditableValue(identityName, identityNameFallback ?? '', onNewName ?? (() => {})); | ||
| const { t } = useTranslation('x', { keyPrefix: 'sharedX' }); | ||
|
|
||
| export default function IdCard({ title, subtitle, titleAction, children }: IdCardBaseProps) { | ||
| return ( | ||
| <Card type="gradient" className="id-card-x"> | ||
| <span className="title-row"> | ||
| <Text.Main>{editable.value}</Text.Main> | ||
| {editable.isEditing ? ( | ||
| <> | ||
| <Button.Secondary label={t('idCard.name.save')} onClick={editable.onComplete} /> | ||
| <Button.Secondary label={t('idCard.name.abort')} onClick={editable.onAbort} /> | ||
| </> | ||
| ) : ( | ||
| onNewName && <Button.Secondary label={t('idCard.name.edit')} onClick={editable.onEdit} /> | ||
| )} | ||
| <Text.Main>{title}</Text.Main> | ||
| {titleAction} | ||
| </span> | ||
| <Text.Capture>{t('idCard.verifiedBy', { idProviderName })}</Text.Capture> | ||
| {rowsIdInfo && ( | ||
| <Card> | ||
| {rowsIdInfo.map((info) => ( | ||
| <Card.Row key={info.key}> | ||
| <Text.MainRegular>{info.key}</Text.MainRegular> | ||
| <Text.MainMedium>{info.value}</Text.MainMedium> | ||
| </Card.Row> | ||
| ))} | ||
| </Card> | ||
| )} | ||
| {rowsConnectedAccounts && ( | ||
| <Card> | ||
| {rowsConnectedAccounts.map((account) => ( | ||
| <Card.Row key={account.address}> | ||
| <Text.MainRegular>{account.address}</Text.MainRegular> | ||
| <Text.MainMedium>{account.amount}</Text.MainMedium> | ||
| </Card.Row> | ||
| ))} | ||
| </Card> | ||
| )} | ||
| <Text.Capture>{subtitle}</Text.Capture> | ||
| {children} | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| IdCard.Content = Card; | ||
| IdCard.ContentRow = Card.Row; |
29 changes: 29 additions & 0 deletions
29
packages/browser-wallet/src/popup/popupX/shared/IdCard/RejectedIdCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from 'react'; | ||
| import Close from '@assets/svgX/close.svg'; | ||
| import { identityProvidersAtom } from '@popup/store/identity'; | ||
| import { useAtomValue } from 'jotai'; | ||
| import { RejectedIdentity } from '@shared/storage/types'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import Text from '@popup/popupX/shared/Text'; | ||
| import IdCard from './IdCard'; | ||
|
|
||
| export type RejectedIdentityProps = { | ||
| /** Identity to show. */ | ||
| identity: RejectedIdentity; | ||
| }; | ||
|
|
||
| export default function RejectedIdCard({ identity }: RejectedIdentityProps) { | ||
| const { t } = useTranslation('x', { keyPrefix: 'sharedX' }); | ||
| const providers = useAtomValue(identityProvidersAtom); | ||
| const provider = providers.find((p) => p.ipInfo.ipIdentity === identity.providerIndex); | ||
| const idProviderName = provider?.ipInfo.ipDescription.name ?? 'Unknown'; | ||
| return ( | ||
| <IdCard title={identity.name} subtitle={t('idCard.rejectedBy', { idProviderName })}> | ||
| <IdCard.Content className="rejected"> | ||
| <Close className="icon-rejected" /> | ||
| <Text.MainRegular>{t('idCard.itentityRejected')}</Text.MainRegular> | ||
| <Text.MainMedium>{identity.error}</Text.MainMedium> | ||
| </IdCard.Content> | ||
| </IdCard> | ||
| ); | ||
| } |
1 change: 1 addition & 0 deletions
1
packages/browser-wallet/src/popup/popupX/shared/IdCard/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export { default } from './IdCard'; | ||
| export { default as ConfirmedIdCard } from './ConfirmedIdCard'; | ||
| export { default as RejectedIdCard } from './RejectedIdCard'; |
28 changes: 28 additions & 0 deletions
28
packages/browser-wallet/src/popup/popupX/shared/IdCard/useEditableName.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import React from 'react'; | ||
| import { BaseIdentity } from '@shared/storage/types'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import useEditableValue from '@popup/popupX/shared/EditableValue'; | ||
| import Button from '@popup/popupX/shared/Button'; | ||
|
|
||
| function fallbackIdentityName(index: number) { | ||
| return `Identity ${index + 1}`; | ||
| } | ||
|
|
||
| export type NewNameHandler = (name: string) => void; | ||
|
|
||
| export default function useEditableName(identity: BaseIdentity, onNewName?: NewNameHandler) { | ||
| const { t } = useTranslation('x', { keyPrefix: 'sharedX' }); | ||
| const editable = useEditableValue(identity.name, fallbackIdentityName(identity.index), onNewName ?? (() => {})); | ||
| const editNameAction = editable.isEditing ? ( | ||
| <> | ||
| <Button.Secondary label={t('idCard.name.save')} onClick={editable.onComplete} /> | ||
| <Button.Secondary label={t('idCard.name.abort')} onClick={editable.onAbort} /> | ||
| </> | ||
| ) : ( | ||
| onNewName && <Button.Secondary label={t('idCard.name.edit')} onClick={editable.onEdit} /> | ||
| ); | ||
| return { | ||
| value: editable.value, | ||
| actions: editNameAction, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters