change content of disclaimer from string to element

make requested changes

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) {
         <BellIcon />
         <strong className="ml-2">Disclaimer</strong>
       </div>
-      <p className="text-sm collapse-content whitespace-pre-line">{text}</p>
+      <p className="text-sm collapse-content whitespace-pre-line">{content}</p>
     </div>
   );
 }

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(
+    () => (
+      <ul>
+        <li>• Bridge Fee: Currently free, transitioning to 0.1% per transaction soon.</li>
+        <li>• Security deposit: 0.5% of the transaction amount locked, returned after successful issue/redeem </li>
+        <li>
+          • Total issuable amount (in USD): 20000 USD. Join our vault operator program, more
+          <a
+            target="_blank"
+            className="text-accent ml-1"
+            href="https://pendulum.gitbook.io/pendulum-docs/build/spacewalk-stellar-bridge/operating-a-vault"
+          >
+            here
+          </a>
+        </li>
+        <li>• Estimated time for issuing: 2 mins to 3 hrs (after submitting the Stellar payment to the vault).`</li>
+      </ul>
+    ),
     [issueFee, redeemFee, issueGriefingCollateral],
   );
 
@@ -175,7 +186,7 @@ function Issue(props: IssueProps): JSX.Element {
           ) : (
             <OpenWallet dAppName={dAppName} />
           )}
-          <Disclaimer text={disclaimerText} />
+          <Disclaimer content={disclaimerContent} />
         </form>
       </div>
     </div>