diff --git a/src/pages/bridge/Issue/Disclaimer.tsx b/src/pages/bridge/Issue/Disclaimer.tsx index 64aadecf..86fe6790 100644 --- a/src/pages/bridge/Issue/Disclaimer.tsx +++ b/src/pages/bridge/Issue/Disclaimer.tsx @@ -2,10 +2,10 @@ import { useCallback, useState } from 'preact/compat'; import BellIcon from '../../../assets/bell'; type Props = { - text: string; + content: JSX.Element; }; -export default function Disclaimer({ text }: Props) { +export default function Disclaimer({ content }: Props) { const [collapseVisibility, setCollapseVisibility] = useState(''); const toggle = useCallback(() => { @@ -30,7 +30,7 @@ export default function Disclaimer({ text }: Props) { Disclaimer -

{text}

+

{content}

); } diff --git a/src/pages/bridge/Issue/index.tsx b/src/pages/bridge/Issue/index.tsx index 6ca07ed7..96799377 100644 --- a/src/pages/bridge/Issue/index.tsx +++ b/src/pages/bridge/Issue/index.tsx @@ -56,13 +56,24 @@ function Issue(props: IssueProps): JSX.Element { return amount ? decimalToStellarNative(amount) : Big(0); }, [amount]); - const disclaimerText = useMemo( - () => - `• Issue Fee: ${issueFee.mul(100)}% of the transaction amount. - • Redeem Fee: ${redeemFee.mul(100)}% of the transaction amount. - • Security deposit: ${issueGriefingCollateral.mul(100)}% of the transaction amount. - • Total issuable amount (in USD): 20,000 USD. - • Estimated time for issuing: 2 mins to 3 hrs (after submitting the Stellar payment to the vault).`, + const disclaimerContent = useMemo( + () => ( + + ), [issueFee, redeemFee, issueGriefingCollateral], ); @@ -175,7 +186,7 @@ function Issue(props: IssueProps): JSX.Element { ) : ( )} - +