Update disclaimer texts for Amplitude and Pendulum (#538)

* Update disclaimer texts for Amplitude and Pendulum * Change font for 'support' in disclaimer * Change italic to underline
pendulum-chain · Aug 1, 2024 · 723bf7e · 723bf7e
1 parent b1b1731
commit 723bf7e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 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 underline">
+          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/50 underline">
+          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
@@ -17,11 +17,9 @@ import useBridgeSettings from '../../../../hooks/spacewalk/useBridgeSettings';
 import { useCalculateGriefingCollateral } from '../../../../hooks/spacewalk/useCalculateGriefingCollateral';
 import { decimalToStellarNative, nativeToDecimal } from '../../../../shared/parseNumbers/metric';
 import { useAccountBalance } from '../../../../shared/useAccountBalance';
-import { TenantName } from '../../../../models/Tenant';
 import { ToastMessage, showToast } from '../../../../shared/showToast';
 import { isU128Compatible } from '../../../../shared/parseNumbers/isU128Compatible';
 import { USER_INPUT_MAX_DECIMALS } from '../../../../shared/parseNumbers/maxDecimals';
-import { PENDULUM_SUPPORT_CHAT_URL } from '../../../../shared/constants';
 import { PAGES_PATHS } from '../../../../app';
 
 import { FeeBox } from '../FeeBox';
@@ -91,36 +89,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="ml-1 text-primary"
-            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;
@@ -254,7 +222,7 @@ function Issue(props: IssueProps): JSX.Element {
           ) : (
             <OpenWallet />
           )}
-          <Disclaimer content={disclaimerContent} />
+          <Disclaimer tenant={tenantName} />
         </form>
       </div>
     </div>