diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx index ad400931e3..baf8f70a92 100644 --- a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx +++ b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx @@ -1,11 +1,15 @@ +/* eslint-disable @typescript-eslint/strict-boolean-expressions */ /* eslint-disable @typescript-eslint/prefer-optional-chain */ import React from 'react'; import { ReactComponent as AdaComponent } from '@lace/icons/dist/AdaComponent'; +import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent'; import classNames from 'classnames'; +import { Box } from '../box'; import { Flex } from '../flex'; import { Grid, Cell } from '../grid'; +import { Tooltip } from '../tooltip'; import * as Typography from '../typography'; import * as styles from './dapp-transaction-summary.css'; @@ -17,6 +21,7 @@ type Props = OmitClassName<'div'> & { transactionAmount: string; title?: string; cardanoSymbol?: string; + tooltip?: string; }; export const TransactionSummary = ({ @@ -24,6 +29,7 @@ export const TransactionSummary = ({ transactionAmount, title, cardanoSymbol, + tooltip, ...props }: Readonly): JSX.Element => (
@@ -32,6 +38,15 @@ export const TransactionSummary = ({ {title} + {tooltip && ( + + +
+ +
+
+
+ )} )}
diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts index 70e09012ca..e68d772578 100644 --- a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts +++ b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts @@ -100,3 +100,18 @@ export const assetsContainer = style({ export const txSummaryContainer = style({ paddingTop: '20px', }); + +export const tooltip = style([ + sx({ + color: '$transaction_summary_secondary_label_color', + width: '$24', + height: '$24', + fontSize: '$25', + }), +]); + +export const tooltipText = style([ + sx({ + display: 'flex', + }), +]); diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx index d5a01c37ad..adc2036361 100644 --- a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx +++ b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx @@ -73,6 +73,7 @@ const Example = (): JSX.Element => ( {items.map(value => (