+
+
+ {title}
+ {tooltipContent && (
+
+
+
+ )}
+
+
+
+ {isVisible && (
+
+ {lists.map((list, idx) => (
+
+ 0 })} />
+ {lists.length > 1 && (
+
+
{`${subTitle} ${idx + 1}`}
+
+ )}
+
translations={translations} testId={testId} list={list} />
+
+ ))}
+
+ );
+};
diff --git a/packages/core/src/ui/components/ActivityDetail/components/DetailRow.module.scss b/packages/core/src/ui/components/ActivityDetail/components/DetailRow.module.scss
new file mode 100644
index 0000000000..83b9354ec2
--- /dev/null
+++ b/packages/core/src/ui/components/ActivityDetail/components/DetailRow.module.scss
@@ -0,0 +1,45 @@
+@import '../../../styles/theme.scss';
+@import '../../../../../../common/src/ui/styles/abstracts/typography';
+
+.details {
+ color: var(--text-color-primary, #ffffff);
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: size_unit(4);
+ width: 100%;
+
+ .title {
+ align-items: center;
+ gap: 8px;
+ display: flex;
+ flex: 0 0 50%;
+ align-self: baseline;
+ color: var(--text-color-primary, #ffffff);
+ @include text-body-semi-bold;
+ }
+
+ .detail {
+ align-items: end;
+ display: flex;
+ flex-direction: column;
+ gap: size_unit(2);
+ color: var(--text-color-primary, #ffffff);
+ text-align: right;
+ word-break: break-all;
+ @include text-body-medium;
+
+ @media (max-width: $breakpoint-popup) {
+ flex-direction: column;
+ }
+
+ .subitems {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ align-items: flex-end;
+ .subitem {
+ color: var(--text-color-secondary, #878e9e);
+ }
+ }
+ }
+}
diff --git a/packages/core/src/ui/components/ActivityDetail/components/DetailRow.tsx b/packages/core/src/ui/components/ActivityDetail/components/DetailRow.tsx
new file mode 100644
index 0000000000..c70d7c85b3
--- /dev/null
+++ b/packages/core/src/ui/components/ActivityDetail/components/DetailRow.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import styles from './DetailRow.module.scss';
+import { DetailRowSubitems } from './DetailRowSubitems';
+import { InfoItem } from './InfoItem';
+
+type DetailsRowProps = {
+ title: string;
+ info?: string;
+ dataTestId?: string;
+ details: (string | [string, string])[];
+};
+
+// TODO: add proper data mappers, eg: strings, urls, elements, arrays etc
+export const DetailRow = ({ title, info, details, dataTestId }: DetailsRowProps): React.ReactElement => (
+
+
+ {title}
+ {info && }
+
+
+ {details.map((detail, idx) => (
+
+ {typeof detail === 'string' && detail}
+ {typeof detail === 'object' &&
+ (detail.length === 2 ? : detail)}
+
+ ))}
+
+
+);
diff --git a/packages/core/src/ui/components/ActivityDetail/components/DetailRowSubitems.tsx b/packages/core/src/ui/components/ActivityDetail/components/DetailRowSubitems.tsx
new file mode 100644
index 0000000000..3adf723831
--- /dev/null
+++ b/packages/core/src/ui/components/ActivityDetail/components/DetailRowSubitems.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './DetailRow.module.scss';
+
+export interface DetailRowSubitems {
+ item: string;
+ subitem: string;
+ dataTestId?: string;
+}
+export const DetailRowSubitems = ({ item, subitem, dataTestId }: DetailRowSubitems): React.ReactElement => (
+
+ {item}
+
+ {subitem}
+
+
+);
diff --git a/packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx b/packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx
new file mode 100644
index 0000000000..8292e41589
--- /dev/null
+++ b/packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import cn from 'classnames';
+import { DetailRow } from './DetailRow';
+import { TxDetails } from '../types';
+import { TranslationsFor } from '@src/ui/utils/types';
+import styles from '../TransactionInputOutput.module.scss';
+
+type DetailRowsProps
= {
+ list: TxDetails;
+ testId: string;
+ translations: TranslationsFor;
+};
+
+export const DetailRows = function DetailRows({
+ list,
+ testId,
+ translations
+}: DetailRowsProps): React.ReactElement {
+ return (
+ <>
+ {list?.map((item, index) =>
+ 'title' in item ? (
+
+ ) : (
+ <>
+ 0 })}
+ >
+
{translations[item.header]}
+
+
+ |
+ {metadata.url && (
+
+
+ |
+ )}
+ {metadata.hash && (
+
+
+ |
+ )}
+
+
+ |
+
+
+ |
+
+
+);
diff --git a/packages/core/src/ui/components/ConfirmDRepRegistration/index.ts b/packages/core/src/ui/components/ConfirmDRepRegistration/index.ts
new file mode 100644
index 0000000000..cf5bded0ee
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmDRepRegistration/index.ts
@@ -0,0 +1 @@
+export { ConfirmDRepRegistration } from './ConfirmDRepRegistration';
diff --git a/packages/core/src/ui/components/ConfirmDRepRetirement/ConfirmDRepRetirement.stories.tsx b/packages/core/src/ui/components/ConfirmDRepRetirement/ConfirmDRepRetirement.stories.tsx
new file mode 100644
index 0000000000..594a6fcc5f
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmDRepRetirement/ConfirmDRepRetirement.stories.tsx
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmDRepRetirement } from './ConfirmDRepRetirement';
+import { ComponentProps } from 'react';
+
+const customViewports = {
+ popup: {
+ name: 'Popup',
+ styles: {
+ width: '360px',
+ height: '600'
+ }
+ }
+};
+
+const meta: Meta = {
+ title: 'Sanchonet/Certificates/ConfirmDRepRetirement',
+ component: ConfirmDRepRetirement,
+ parameters: {
+ layout: 'centered',
+ viewport: {
+ viewports: customViewports,
+ defaultViewport: 'popup'
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+const data: ComponentProps = {
+ dappInfo: {
+ logo: 'https://cdn.mint.handle.me/favicon.png',
+ name: 'Mint',
+ url: 'https://preprod.mint.handle.me'
+ },
+ translations: {
+ labels: {
+ depositReturned: 'Deposit paid',
+ drepId: 'DRep ID'
+ },
+ metadata: 'Metadata'
+ },
+ metadata: {
+ depositReturned: '0.35 ADA',
+ drepId: '65ge6g54g5dd5'
+ }
+};
+
+export const Overview: Story = {
+ args: {
+ ...data
+ }
+};
+export const WithError: Story = {
+ args: {
+ ...data,
+ errorMessage: 'Something went wrong'
+ }
+};
diff --git a/packages/core/src/ui/components/ConfirmDRepRetirement/ConfirmDRepRetirement.tsx b/packages/core/src/ui/components/ConfirmDRepRetirement/ConfirmDRepRetirement.tsx
new file mode 100644
index 0000000000..59219813a8
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmDRepRetirement/ConfirmDRepRetirement.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Cell, Grid, TransactionSummary, Flex } from '@lace/ui';
+import { DappInfo, DappInfoProps } from '../DappInfo';
+import { ErrorPane } from '@lace/common';
+
+interface Props {
+ dappInfo: Omit;
+ errorMessage?: string;
+ translations: {
+ labels: {
+ drepId: string;
+ depositReturned: string;
+ };
+ metadata: string;
+ };
+ metadata: {
+ drepId: string;
+ depositReturned: string;
+ };
+}
+
+export const ConfirmDRepRetirement = ({ dappInfo, errorMessage, translations, metadata }: Props): JSX.Element => (
+
+
+
+
+ {errorMessage && (
+
+
+
+ )}
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+);
diff --git a/packages/core/src/ui/components/ConfirmDRepRetirement/index.ts b/packages/core/src/ui/components/ConfirmDRepRetirement/index.ts
new file mode 100644
index 0000000000..cb0e8d0d15
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmDRepRetirement/index.ts
@@ -0,0 +1 @@
+export { ConfirmDRepRetirement } from './ConfirmDRepRetirement';
diff --git a/packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.stories.tsx b/packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.stories.tsx
new file mode 100644
index 0000000000..5a72d541f7
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmDRepUpdate } from './ConfirmDRepUpdate';
+import { ComponentProps } from 'react';
+
+const customViewports = {
+ popup: {
+ name: 'Popup',
+ styles: {
+ width: '360px',
+ height: '600'
+ }
+ }
+};
+
+const meta: Meta = {
+ title: 'Sanchonet/Certificates/ConfirmDRepUpdate',
+ component: ConfirmDRepUpdate,
+ parameters: {
+ layout: 'centered',
+ viewport: {
+ viewports: customViewports,
+ defaultViewport: 'popup'
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+const data: ComponentProps = {
+ dappInfo: {
+ logo: 'https://cdn.mint.handle.me/favicon.png',
+ name: 'Mint',
+ url: 'https://preprod.mint.handle.me'
+ },
+ translations: {
+ labels: {
+ drepId: 'DRep ID',
+ hash: 'Hash',
+ url: 'URL'
+ },
+ metadata: 'Metadata'
+ },
+ metadata: {
+ drepId: '65ge6g54g5dd5',
+ hash: '9bba8233cdd086f0325daba465d568a88970d42536f9e71e92a80d5922ded885',
+ url: 'https://raw.githubusercontent.com/Ryun1/gov-metadata/main/governace-action/metadata.jsonldr1q99...uqvzlalu'
+ }
+};
+
+export const Overview: Story = {
+ args: {
+ ...data
+ }
+};
+
+export const Empty: Story = {
+ args: {
+ ...data,
+ metadata: {
+ drepId: '65ge6g54g5dd5'
+ }
+ }
+};
+
+export const WithError: Story = {
+ args: {
+ ...data,
+ errorMessage: 'Something went wrong'
+ }
+};
diff --git a/packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.tsx b/packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.tsx
new file mode 100644
index 0000000000..e86ee2b772
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Box, Cell, Grid, TransactionSummary, Flex } from '@lace/ui';
+import { DappInfo, DappInfoProps } from '../DappInfo';
+import { ErrorPane } from '@lace/common';
+
+interface Props {
+ dappInfo: Omit;
+ errorMessage?: string;
+ translations: {
+ labels: {
+ url: string;
+ hash: string;
+ drepId: string;
+ };
+ metadata: string;
+ };
+ metadata: {
+ url?: string;
+ hash?: string;
+ drepId: string;
+ };
+}
+
+export const ConfirmDRepUpdate = ({ dappInfo, errorMessage, translations, metadata }: Props): JSX.Element => (
+
+
+
+
+ {errorMessage && (
+
+
+
+ )}
+
+
+
+ |
+ {metadata.url && (
+
+
+ |
+ )}
+ {metadata.hash && (
+
+
+ |
+ )}
+
+
+ |
+
+
+);
diff --git a/packages/core/src/ui/components/ConfirmDRepUpdate/index.ts b/packages/core/src/ui/components/ConfirmDRepUpdate/index.ts
new file mode 100644
index 0000000000..1017f7880e
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmDRepUpdate/index.ts
@@ -0,0 +1 @@
+export { ConfirmDRepUpdate } from './ConfirmDRepUpdate';
diff --git a/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/ConfirmStakeRegistrationDelegation.stories.tsx b/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/ConfirmStakeRegistrationDelegation.stories.tsx
new file mode 100644
index 0000000000..68e9b704b6
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/ConfirmStakeRegistrationDelegation.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmStakeRegistrationDelegation } from './ConfirmStakeRegistrationDelegation';
+import { ComponentProps } from 'react';
+
+const customViewports = {
+ popup: {
+ name: 'Popup',
+ styles: {
+ width: '360px',
+ height: '600'
+ }
+ }
+};
+
+const meta: Meta = {
+ title: 'Sanchonet/Certificates/ConfirmStakeRegistrationDelegation',
+ component: ConfirmStakeRegistrationDelegation,
+ parameters: {
+ layout: 'centered',
+ viewport: {
+ viewports: customViewports,
+ defaultViewport: 'popup'
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+const data: ComponentProps = {
+ dappInfo: {
+ logo: 'https://cdn.mint.handle.me/favicon.png',
+ name: 'Mint',
+ url: 'https://preprod.mint.handle.me'
+ },
+ translations: {
+ labels: {
+ stakeKeyHash: 'Stake key hash',
+ poolId: 'Pool Id',
+ depositPaid: 'Deposit paid'
+ },
+ metadata: 'Metadata'
+ },
+ metadata: {
+ stakeKeyHash: '13cf55d175ea848b87deb3e914febd7e028e2bf6534475d52fb9c3d0',
+ poolId: 'pool1zuevzm3xlrhmwjw87ec38mzs02tlkwec9wxpgafcaykmwg7efhh',
+ depositPaid: '0.35 ADA'
+ }
+};
+
+export const Overview: Story = {
+ args: {
+ ...data
+ }
+};
+export const WithError: Story = {
+ args: {
+ ...data,
+ errorMessage: 'Something went wrong'
+ }
+};
diff --git a/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/ConfirmStakeRegistrationDelegation.tsx b/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/ConfirmStakeRegistrationDelegation.tsx
new file mode 100644
index 0000000000..ada22bfaf3
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/ConfirmStakeRegistrationDelegation.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Box, Cell, Grid, TransactionSummary, Flex } from '@lace/ui';
+import { DappInfo, DappInfoProps } from '../DappInfo';
+import { ErrorPane } from '@lace/common';
+
+interface Props {
+ dappInfo: Omit;
+ errorMessage?: string;
+ translations: {
+ labels: {
+ poolId: string;
+ stakeKeyHash: string;
+ depositPaid: string;
+ };
+ metadata: string;
+ };
+ metadata: {
+ poolId: string;
+ stakeKeyHash: string;
+ depositPaid: string;
+ };
+}
+
+export const ConfirmStakeRegistrationDelegation = ({
+ dappInfo,
+ errorMessage,
+ translations,
+ metadata
+}: Props): JSX.Element => (
+
+
+
+
+ {errorMessage && (
+
+
+
+ )}
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+);
diff --git a/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/index.ts b/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/index.ts
new file mode 100644
index 0000000000..78be311a96
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeRegistrationDelegation/index.ts
@@ -0,0 +1 @@
+export { ConfirmStakeRegistrationDelegation } from './ConfirmStakeRegistrationDelegation';
diff --git a/packages/core/src/ui/components/ConfirmStakeVoteDelegation/ConfirmStakeVoteDelegation.stories.tsx b/packages/core/src/ui/components/ConfirmStakeVoteDelegation/ConfirmStakeVoteDelegation.stories.tsx
new file mode 100644
index 0000000000..c044156a49
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeVoteDelegation/ConfirmStakeVoteDelegation.stories.tsx
@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmStakeVoteDelegation } from './ConfirmStakeVoteDelegation';
+import { ComponentProps } from 'react';
+
+const customViewports = {
+ popup: {
+ name: 'Popup',
+ styles: {
+ width: '360px',
+ height: '600'
+ }
+ }
+};
+
+const meta: Meta = {
+ title: 'Sanchonet/Certificates/ConfirmStakeVoteDelegation',
+ component: ConfirmStakeVoteDelegation,
+ parameters: {
+ layout: 'centered',
+ viewport: {
+ viewports: customViewports,
+ defaultViewport: 'popup'
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+const data: ComponentProps = {
+ dappInfo: {
+ logo: 'https://cdn.mint.handle.me/favicon.png',
+ name: 'Mint',
+ url: 'https://preprod.mint.handle.me'
+ },
+ translations: {
+ labels: {
+ drepId: 'DRep ID',
+ alwaysAbstain: 'Abstain',
+ alwaysNoConfidence: 'No Confidence',
+ stakeKeyHash: 'Stake key hash',
+ poolId: 'Pool Id'
+ },
+ option: 'Yes',
+ metadata: 'Metadata'
+ },
+ metadata: {
+ drepId: 'drep1ruvgm0auzdplfn7g2jf3kcnpnw5mlhwxaxj8crag8h6t2ye9y9g',
+ alwaysAbstain: false,
+ alwaysNoConfidence: false,
+ stakeKeyHash: '13cf55d175ea848b87deb3e914febd7e028e2bf6534475d52fb9c3d0',
+ poolId: 'pool1zuevzm3xlrhmwjw87ec38mzs02tlkwec9wxpgafcaykmwg7efhh'
+ }
+};
+
+export const Overview: Story = {
+ args: {
+ ...data
+ }
+};
+export const WithError: Story = {
+ args: {
+ ...data,
+ errorMessage: 'Something went wrong'
+ }
+};
+
+export const WithAbstain: Story = {
+ args: {
+ ...data,
+ metadata: {
+ ...data.metadata,
+ drepId: undefined,
+ alwaysAbstain: true,
+ alwaysNoConfidence: false
+ }
+ }
+};
+
+export const WithNoConfidence: Story = {
+ args: {
+ ...data,
+ metadata: {
+ ...data.metadata,
+ drepId: undefined,
+ alwaysAbstain: false,
+ alwaysNoConfidence: true
+ }
+ }
+};
diff --git a/packages/core/src/ui/components/ConfirmStakeVoteDelegation/ConfirmStakeVoteDelegation.tsx b/packages/core/src/ui/components/ConfirmStakeVoteDelegation/ConfirmStakeVoteDelegation.tsx
new file mode 100644
index 0000000000..77cfd32434
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeVoteDelegation/ConfirmStakeVoteDelegation.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Cell, Grid, TransactionSummary, Flex } from '@lace/ui';
+import { DappInfo, DappInfoProps } from '../DappInfo';
+import { ErrorPane } from '@lace/common';
+
+interface Props {
+ dappInfo: Omit;
+ errorMessage?: string;
+ translations: {
+ labels: {
+ poolId: string;
+ stakeKeyHash: string;
+ drepId: string;
+ alwaysAbstain: string;
+ alwaysNoConfidence: string;
+ };
+ option: string;
+ metadata: string;
+ };
+ metadata: {
+ poolId: string;
+ stakeKeyHash: string;
+ drepId?: string;
+ alwaysAbstain: boolean;
+ alwaysNoConfidence: boolean;
+ };
+}
+
+export const ConfirmStakeVoteDelegation = ({ dappInfo, errorMessage, translations, metadata }: Props): JSX.Element => (
+
+
+
+
+ {errorMessage && (
+
+
+
+ )}
+
+
+
+ |
+ {metadata.drepId && (
+
+
+ |
+ )}
+ {metadata.alwaysAbstain && (
+
+
+ |
+ )}
+ {metadata.alwaysNoConfidence && (
+
+
+ |
+ )}
+
+
+ |
+
+
+ |
+
+
+);
diff --git a/packages/core/src/ui/components/ConfirmStakeVoteDelegation/index.ts b/packages/core/src/ui/components/ConfirmStakeVoteDelegation/index.ts
new file mode 100644
index 0000000000..d532c9b448
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeVoteDelegation/index.ts
@@ -0,0 +1 @@
+export { ConfirmStakeVoteDelegation } from './ConfirmStakeVoteDelegation';
diff --git a/packages/core/src/ui/components/ConfirmStakeVoteRegistrationDelegation/ConfirmStakeVoteRegistrationDelegation.stories.tsx b/packages/core/src/ui/components/ConfirmStakeVoteRegistrationDelegation/ConfirmStakeVoteRegistrationDelegation.stories.tsx
new file mode 100644
index 0000000000..c5f8e313bb
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeVoteRegistrationDelegation/ConfirmStakeVoteRegistrationDelegation.stories.tsx
@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmStakeVoteRegistrationDelegation } from './ConfirmStakeVoteRegistrationDelegation';
+import { ComponentProps } from 'react';
+
+const customViewports = {
+ popup: {
+ name: 'Popup',
+ styles: {
+ width: '360px',
+ height: '600'
+ }
+ }
+};
+
+const meta: Meta = {
+ title: 'Sanchonet/Certificates/ConfirmStakeVoteRegistrationDelegation',
+ component: ConfirmStakeVoteRegistrationDelegation,
+ parameters: {
+ layout: 'centered',
+ viewport: {
+ viewports: customViewports,
+ defaultViewport: 'popup'
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+const data: ComponentProps = {
+ dappInfo: {
+ logo: 'https://cdn.mint.handle.me/favicon.png',
+ name: 'Mint',
+ url: 'https://preprod.mint.handle.me'
+ },
+ translations: {
+ labels: {
+ drepId: 'DRep ID',
+ alwaysAbstain: 'Abstain',
+ alwaysNoConfidence: 'No Confidence',
+ stakeKeyHash: 'Stake key hash',
+ poolId: 'Pool Id',
+ depositPaid: 'Deposit paid'
+ },
+ option: 'Yes',
+ metadata: 'Metadata'
+ },
+ metadata: {
+ drepId: 'drep1ruvgm0auzdplfn7g2jf3kcnpnw5mlhwxaxj8crag8h6t2ye9y9g',
+ alwaysAbstain: false,
+ alwaysNoConfidence: false,
+ stakeKeyHash: '13cf55d175ea848b87deb3e914febd7e028e2bf6534475d52fb9c3d0',
+ poolId: 'pool1zuevzm3xlrhmwjw87ec38mzs02tlkwec9wxpgafcaykmwg7efhh',
+ depositPaid: '0.35 ADA'
+ }
+};
+
+export const Overview: Story = {
+ args: {
+ ...data
+ }
+};
+export const WithError: Story = {
+ args: {
+ ...data,
+ errorMessage: 'Something went wrong'
+ }
+};
+
+export const WithAbstain: Story = {
+ args: {
+ ...data,
+ metadata: {
+ ...data.metadata,
+ drepId: undefined,
+ alwaysAbstain: true,
+ alwaysNoConfidence: false
+ }
+ }
+};
+
+export const WithNoConfidence: Story = {
+ args: {
+ ...data,
+ metadata: {
+ ...data.metadata,
+ drepId: undefined,
+ alwaysAbstain: false,
+ alwaysNoConfidence: true
+ }
+ }
+};
diff --git a/packages/core/src/ui/components/ConfirmStakeVoteRegistrationDelegation/ConfirmStakeVoteRegistrationDelegation.tsx b/packages/core/src/ui/components/ConfirmStakeVoteRegistrationDelegation/ConfirmStakeVoteRegistrationDelegation.tsx
new file mode 100644
index 0000000000..a8e0789e42
--- /dev/null
+++ b/packages/core/src/ui/components/ConfirmStakeVoteRegistrationDelegation/ConfirmStakeVoteRegistrationDelegation.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box, Cell, Grid, TransactionSummary, Flex } from '@lace/ui';
+import { DappInfo, DappInfoProps } from '../DappInfo';
+import { ErrorPane } from '@lace/common';
+
+interface Props {
+ dappInfo: Omit;
+ errorMessage?: string;
+ translations: {
+ labels: {
+ poolId: string;
+ stakeKeyHash: string;
+ drepId: string;
+ alwaysAbstain: string;
+ alwaysNoConfidence: string;
+ depositPaid: string;
+ };
+ option: string;
+ metadata: string;
+ };
+ metadata: {
+ poolId: string;
+ stakeKeyHash: string;
+ drepId?: string;
+ alwaysAbstain: boolean;
+ alwaysNoConfidence: boolean;
+ depositPaid: string;
+ };
+}
+
+export const ConfirmStakeVoteRegistrationDelegation = ({
+ dappInfo,
+ errorMessage,
+ translations,
+ metadata
+}: Props): JSX.Element => (
+
+
+