Update disclaimer texts for Amplitude and Pendulum

pendulum-chain · Jul 30, 2024 · 0816504 · 0816504
1 parent e9cfee9
commit 0816504
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 39 deletions.
diff --git a/src/pages/spacewalk/bridge/Issue/Disclaimer.tsx b/src/pages/spacewalk/bridge/Issue/Disclaimer.tsx
@@ -1,11 +1,45 @@
 import { useCallback, useState } from 'preact/compat';
 import BellIcon from '../../../../assets/bell';
+import { TenantName } from '../../../../models/Tenant';
+import { PENDULUM_SUPPORT_CHAT_URL } from '../../../../shared/constants';
 
 type Props = {
-  content: JSX.Element;
+  tenant: TenantName;
 };
 
-export default function Disclaimer({ content }: Props) {
+function AmplitudeDisclaimer() {
+  return (
+    <ul className="list-disc pl-4">
+      <li>Bridge Fee: 0.1% of total bridging amount.</li>
+      <li>Security Deposit: 0.5% of the transaction amount in AMPE, returned after successful bridging.</li>
+      <li>
+        Estimated Time: Within a minute after submitting the Stellar transaction. Contact
+        <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
+          support
+        </a>
+        if your transaction is still pending after 10 minutes.
+      </li>
+    </ul>
+  );
+}
+
+function PendulumDisclaimer() {
+  return (
+    <ul className="list-disc pl-4">
+      <li>Bridge Fee: Enjoy zero fees now, 0.1% coming soon.</li>
+      <li>Security Deposit: 0.5% of the transaction amount in PEN, refunded after successful bridging.</li>
+      <li>
+        Estimated Time: Within a minute after submitting the Stellar transaction. Contact
+        <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
+          support
+        </a>
+        if your transaction is still pending after 10 minutes.
+      </li>
+    </ul>
+  );
+}
+
+export default function Disclaimer({ tenant }: Props) {
   const [collapseVisibility, setCollapseVisibility] = useState('');
 
   const toggle = useCallback(() => {
@@ -24,13 +58,15 @@ export default function Disclaimer({ content }: Props) {
     <div
       tabIndex={0}
       onClick={toggle}
-      className={`disclaimer cursor-pointer collapse collapse-arrow bg-base-300 rounded-lg my-4 ${collapseVisibility}`}
+      className={`disclaimer collapse collapse-arrow my-4 cursor-pointer rounded-lg bg-base-300 ${collapseVisibility}`}
     >
       <div className="collapse-title flex flex-row items-center">
         <BellIcon />
-        <strong className="ml-2">Disclaimer</strong>
+        <strong className="ml-2">Bridge Terms</strong>
       </div>
-      <p className="text-sm collapse-content whitespace-pre-line">{content}</p>
+      <p className="collapse-content whitespace-pre-line text-sm">
+        {tenant === TenantName.Pendulum ? <PendulumDisclaimer /> : <AmplitudeDisclaimer />}
+      </p>
     </div>
   );
 }
diff --git a/src/pages/spacewalk/bridge/Issue/index.tsx b/src/pages/spacewalk/bridge/Issue/index.tsx
@@ -91,36 +91,6 @@ function Issue(props: IssueProps): JSX.Element {
 
   const griefingCollateral = useCalculateGriefingCollateral(amountNative, selectedAsset);
 
-  const disclaimerContent = useMemo(
-    () => (
-      <ul className="list-disc pl-4">
-        <li>Bridge Fee: Currently zero fee, 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): {tenantName === TenantName.Pendulum ? 50000 : 20000} USD. Join our vault
-          operator program, more
-          <a
-            target="_blank"
-            className="text-primary ml-1"
-            href="https://pendulum.gitbook.io/pendulum-docs/build/spacewalk-stellar-bridge/operating-a-vault"
-            rel="noreferrer"
-          >
-            here
-          </a>
-          .
-        </li>
-        <li>
-          Estimated time for issuing: In a minute after submitting the Stellar payment to the vault. Contact
-          <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
-            support
-          </a>
-          if your transaction is still pending after 10 minutes.
-        </li>
-      </ul>
-    ),
-    [tenantName],
-  );
-
   const requestIssueExtrinsic = useMemo(() => {
     if (!selectedVault || !api) {
       return undefined;
@@ -194,7 +164,7 @@ function Issue(props: IssueProps): JSX.Element {
   }, [trigger, selectedAsset, maxIssuable]);
 
   return (
-    <div className="flex items-center justify-center h-full space-walk py-4">
+    <div className="space-walk flex h-full items-center justify-center py-4">
       <ConfirmationDialog
         issueRequest={submittedIssueRequest}
         visible={confirmationDialogVisible}
@@ -205,7 +175,7 @@ function Issue(props: IssueProps): JSX.Element {
         }}
       />
       <div className="w-full">
-        <form className="px-5 flex flex-col" onSubmit={handleSubmit(submitRequestIssueExtrinsic, () => undefined)}>
+        <form className="flex flex-col px-5" onSubmit={handleSubmit(submitRequestIssueExtrinsic, () => undefined)}>
           <From
             {...{
               formControl: {
@@ -228,7 +198,7 @@ function Issue(props: IssueProps): JSX.Element {
             }}
           />
           <input type="hidden" {...register('securityDeposit')} />
-          <label className="label flex align-center">
+          <label className="align-center label flex">
             <span className="text-sm">{`Max issuable: ${maxIssuable.toFixed(2)} ${selectedAsset?.code || ''}`}</span>
           </label>
 
@@ -254,7 +224,7 @@ function Issue(props: IssueProps): JSX.Element {
           ) : (
             <OpenWallet />
           )}
-          <Disclaimer content={disclaimerContent} />
+          <Disclaimer tenant={tenantName} />
         </form>
       </div>
     </div>