From 0736835c3a1952a81bc7f9d84f6a56b3fbeaad17 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Thu, 12 Sep 2024 12:20:15 +0200
Subject: [PATCH 01/15] Bump api-solang to latest version

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d5049a15..2e166748 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@hookform/resolvers": "^2.9.11",
     "@netlify/functions": "^2.8.1",
     "@pendulum-chain/api": "^0.3.8",
-    "@pendulum-chain/api-solang": "^0.4.0",
+    "@pendulum-chain/api-solang": "^0.6.1",
     "@polkadot/api": "^10.9.1",
     "@polkadot/api-base": "^10.9.1",
     "@polkadot/api-contract": "^10.9.1",
diff --git a/yarn.lock b/yarn.lock
index 3436d92b..bd5cbfe8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3342,9 +3342,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pendulum-chain/api-solang@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "@pendulum-chain/api-solang@npm:0.4.0"
+"@pendulum-chain/api-solang@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "@pendulum-chain/api-solang@npm:0.6.1"
   peerDependencies:
     "@polkadot/api": ^10.0
     "@polkadot/api-contract": ^10.12.1
@@ -3353,7 +3353,7 @@ __metadata:
     "@polkadot/types-codec": ^10.0
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: 10c0/37f0b225b1529dd46b38e050a4fac89acb706bc62b10855db83f4e8658423aeb921f8ad16fadcd21e9aef68aa5ac66274dbdd829247005a3e207a94411ab1cd0
+  checksum: 10c0/9db47f45bad07c33820b73bd0ef0c4573102a6fa11a135f4e31f9381c8a9d76804c5b217433ac63c25ebd17f2126457c50e41cb4867641aeffa027b247811905
   languageName: node
   linkType: hard
 
@@ -13453,7 +13453,7 @@ __metadata:
     "@hookform/resolvers": "npm:^2.9.11"
     "@netlify/functions": "npm:^2.8.1"
     "@pendulum-chain/api": "npm:^0.3.8"
-    "@pendulum-chain/api-solang": "npm:^0.4.0"
+    "@pendulum-chain/api-solang": "npm:^0.6.1"
     "@pendulum-chain/types": "npm:^0.3.8"
     "@polkadot/api": "npm:^10.9.1"
     "@polkadot/api-base": "npm:^10.9.1"

From b3d108bb55c970405c8356f3a374ba6a92e22244 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Thu, 12 Sep 2024 12:21:31 +0200
Subject: [PATCH 02/15] Show button to view nabla transaction on explorer

---
 .../nabla/common/TransactionProgress.tsx      | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/nabla/common/TransactionProgress.tsx b/src/components/nabla/common/TransactionProgress.tsx
index 4a74e95f..90b6e7c0 100644
--- a/src/components/nabla/common/TransactionProgress.tsx
+++ b/src/components/nabla/common/TransactionProgress.tsx
@@ -5,6 +5,8 @@ import { ExecuteMessageResult } from '@pendulum-chain/api-solang';
 
 import Spinner from '../../../assets/spinner';
 import { UseContractWriteResponse } from '../../../hooks/nabla/useContractWrite';
+import { TenantName } from '../../../models/Tenant';
+import { useGlobalState } from '../../../GlobalStateProvider';
 
 export interface TransactionProgressProps {
   mutation: UseContractWriteResponse;
@@ -26,43 +28,64 @@ const getErrorMessage = (data?: ExecuteMessageResult['result']) => {
   }
 };
 
+function getExplorerUrl(tenant: TenantName, data?: ExecuteMessageResult['execution']) {
+  if (tenant === TenantName.Pendulum && data?.type === 'extrinsic') {
+    return `https://pendulum.subscan.io/extrinsic/${data.txHash.toHex()}`;
+  }
+
+  return undefined;
+}
+
 export function TransactionProgress({ mutation, children, onClose }: TransactionProgressProps): JSX.Element | null {
-  if (mutation.isIdle) return null;
+  const { tenantName } = useGlobalState();
   const errorMsg = getErrorMessage(mutation.data?.result);
+
+  const explorerUrl = getExplorerUrl(tenantName, mutation.data?.execution);
+
+  if (mutation.isIdle) return null;
+
   if (mutation.isLoading) {
     const isPending = false; // TODO: currently there is not status for this (waiting confirmation in wallet)
     return (
       <>
-        <div className="flex flex-col items-center justify-center text-center mt-4">
+        <div className="mt-4 flex flex-col items-center justify-center text-center">
           <Spinner size={100} color="#ddd" />
-          <h4 className="text-2xl mt-12 text-[--text]">
+          <h4 className="mt-12 text-2xl text-[--text]">
             {isPending ? 'Waiting for confirmation' : 'Executing transaction'}
           </h4>
           {children}
-          <p className="text-neutral-500 my-5">
+          <p className="my-5 text-neutral-500">
             {isPending ? 'Confirm this transaction in your wallet' : 'Proceed in your wallet'}
           </p>
         </div>
       </>
     );
   }
+
   return (
     <>
       <div className="center mt-6">
         {mutation.isSuccess ? (
-          <CheckCircleIcon className="w-36 h-36 text-green-400" stroke-width={1} />
+          <CheckCircleIcon className="h-36 w-36 text-green-400" stroke-width={1} />
         ) : (
-          <ExclamationCircleIcon className="w-36 h-36 text-red-400" stroke-width={1} />
+          <ExclamationCircleIcon className="h-36 w-36 text-red-400" stroke-width={1} />
         )}
       </div>
-      <div className="text-center mt-4">
+      <div className="mt-4 text-center">
         <h4 className="text-2xl text-[--text]">
           {mutation.isSuccess ? 'Transaction successful' : 'Transaction failed'}
         </h4>
       </div>
-      {!mutation.isSuccess && !!errorMsg && <p className="text-center mt-1">{errorMsg}</p>}
+      {!mutation.isSuccess && !!errorMsg && <p className="mt-1 text-center">{errorMsg}</p>}
+      {!!explorerUrl && (
+        <a href={explorerUrl} target="_blank" rel="noreferrer">
+          <Button color="secondary" className="w-full">
+            View on Explorer
+          </Button>
+        </a>
+      )}
       {!!onClose && (
-        <Button color="primary" className="w-full mt-6" onClick={onClose}>
+        <Button color="primary" className="mt-6 w-full" onClick={onClose}>
           Close
         </Button>
       )}

From 572e5a1edecf3a9a252f005c78c90acce6a04215 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Thu, 12 Sep 2024 12:31:23 +0200
Subject: [PATCH 03/15] Change margin of buttons

---
 src/components/nabla/common/TransactionProgress.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/nabla/common/TransactionProgress.tsx b/src/components/nabla/common/TransactionProgress.tsx
index 90b6e7c0..e6bd86b8 100644
--- a/src/components/nabla/common/TransactionProgress.tsx
+++ b/src/components/nabla/common/TransactionProgress.tsx
@@ -77,6 +77,7 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction
         </h4>
       </div>
       {!mutation.isSuccess && !!errorMsg && <p className="mt-1 text-center">{errorMsg}</p>}
+      <div className="mt-6"></div>
       {!!explorerUrl && (
         <a href={explorerUrl} target="_blank" rel="noreferrer">
           <Button color="secondary" className="w-full">
@@ -85,7 +86,7 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction
         </a>
       )}
       {!!onClose && (
-        <Button color="primary" className="mt-6 w-full" onClick={onClose}>
+        <Button color="primary" className="mt-2 w-full" onClick={onClose}>
           Close
         </Button>
       )}

From ee87ac02b42ce049f6cc02044c62456ae4155434 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Thu, 12 Sep 2024 12:31:38 +0200
Subject: [PATCH 04/15] Enable Nabla on Pendulum (only for testing, to be
 removed)

---
 src/config/apps/nabla.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/config/apps/nabla.ts b/src/config/apps/nabla.ts
index d6d70af7..41011c58 100644
--- a/src/config/apps/nabla.ts
+++ b/src/config/apps/nabla.ts
@@ -1,5 +1,6 @@
 import { TenantName } from '../../models/Tenant';
 import { AppConfigBase } from './types';
+
 export type NablaConfig = AppConfigBase &
   Partial<
     Record<
@@ -13,11 +14,16 @@ export type NablaConfig = AppConfigBase &
   >;
 
 export const nablaConfig: NablaConfig = {
-  tenants: [TenantName.Foucoco],
-  environment: ['staging', 'development'],
+  tenants: [TenantName.Foucoco, TenantName.Pendulum],
+  environment: ['staging', 'development', 'production'],
   foucoco: {
     indexerUrl: 'https://pendulum.squids.live/foucoco-squid/graphql',
     router: '6mYwT4yRrrMK978NszqBvxkvXjYnsmKfs2BkYGJGiR4XY9Sc',
     oracle: '6kqj1tnYUGY3L93YFArXKF2E4tpQ2tUJ4DARwkAjZEyDoof6',
   },
+  pendulum: {
+    indexerUrl: 'https://pendulum.squids.live/pendulum-squid/graphql',
+    router: '6buMJsFCbXpHRyacKTjBn3Jss241b2aA7CZf9tKzKHMJWpcJ',
+    oracle: '6f9uHwN2r5w82Bjrywc4wmZYb6TN64bZH5Ev87qmJ675uFvq',
+  },
 };

From 947235122027b715fb9594f3a71670b56d0169ab Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Wed, 25 Sep 2024 13:26:42 +0100
Subject: [PATCH 05/15] remove unnecessary code

---
 src/components/nabla/common/TransactionProgress.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/nabla/common/TransactionProgress.tsx b/src/components/nabla/common/TransactionProgress.tsx
index e6bd86b8..24441b34 100644
--- a/src/components/nabla/common/TransactionProgress.tsx
+++ b/src/components/nabla/common/TransactionProgress.tsx
@@ -32,11 +32,9 @@ function getExplorerUrl(tenant: TenantName, data?: ExecuteMessageResult['executi
   if (tenant === TenantName.Pendulum && data?.type === 'extrinsic') {
     return `https://pendulum.subscan.io/extrinsic/${data.txHash.toHex()}`;
   }
-
-  return undefined;
 }
 
-export function TransactionProgress({ mutation, children, onClose }: TransactionProgressProps): JSX.Element | null {
+export function TransactionProgress({ mutation, children, onClose }: TransactionProgressProps) {
   const { tenantName } = useGlobalState();
   const errorMsg = getErrorMessage(mutation.data?.result);
 
@@ -79,10 +77,8 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction
       {!mutation.isSuccess && !!errorMsg && <p className="mt-1 text-center">{errorMsg}</p>}
       <div className="mt-6"></div>
       {!!explorerUrl && (
-        <a href={explorerUrl} target="_blank" rel="noreferrer">
-          <Button color="secondary" className="w-full">
-            View on Explorer
-          </Button>
+        <a href={explorerUrl} target="_blank" rel="noreferrer" className="btn btn-primary w-full">
+          View on Explorer
         </a>
       )}
       {!!onClose && (

From 3241f1d84c5fcdbc63883fb9859f6875c6750d02 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Wed, 25 Sep 2024 15:41:02 +0100
Subject: [PATCH 06/15] improve nav responsiveness when multiple collapse
 groups appear

---
 src/components/Layout/Nav.tsx   | 14 +++++++-------
 src/components/Layout/index.tsx | 16 ++++++++--------
 src/index.css                   |  4 ++++
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/Layout/Nav.tsx b/src/components/Layout/Nav.tsx
index 5d13e166..cb1cd04b 100644
--- a/src/components/Layout/Nav.tsx
+++ b/src/components/Layout/Nav.tsx
@@ -1,8 +1,7 @@
-import { memo, useEffect, useMemo, useState } from 'preact/compat';
+import { memo, useEffect, useMemo, useState, useRef } from 'preact/compat';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import { useGlobalState } from '../../GlobalStateProvider';
-import useBoolean from '../../hooks/useBoolean';
 import { createLinks, LinkItem } from './links';
 import { NavCollapseButtonContent } from './NavCollapseButtonContent';
 
@@ -25,17 +24,18 @@ const CollapseMenu = ({
     const paths = path.split('/').filter(Boolean);
     return paths[1] && paths[1].startsWith(link.replace('/', '')) ? true : false;
   }, [link, pathname]);
-  const [isOpen, { toggle }] = useBoolean(isActive);
+
+  const inputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'} ${isOpen ? 'collapse-open' : ''}`}>
+    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'} `}>
+      <input type="checkbox" checked={isActive} ref={inputRef} />
       <button
         type="button"
         className={`nav-item collapse-btn collapse-title ${isActive ? 'active' : ''}`}
-        onClick={() => toggle()}
         aria-controls={ariaControls}
-        aria-expanded={isOpen}
         aria-disabled={disabled}
+        aria-expanded={inputRef.current?.checked}
       >
         {button}
       </button>
@@ -109,7 +109,7 @@ const Nav = memo(({ onClick }: NavProps) => {
               ariaControls="submenu"
               button={<NavCollapseButtonContent item={item} isPlaying={isPlaying} />}
             >
-              <ul className="submenu" id="submenu">
+              <ul className="submenu" id={`submenu-${i}`}>
                 {item.submenu.map((subItem, j) => (
                   <li key={`${i}-${j}`} className="ml-[3px]">
                     <NavItem item={subItem} onClick={onClick} isSubNavItem={true} />
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 98d1a013..d50f3a82 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -38,7 +38,7 @@ export default function Layout(): JSX.Element | null {
       <div id="sidebar-wrapper" className="z-50 flex flex-wrap">
         <aside
           id="sidebar"
-          className={`flex self-start text-center bottom-0 top-0 h-160 pt-8 h-screen transition-all lg:left-0 lg:relative absolute ${bgColor} ${
+          className={`scroll-thin h-160 absolute bottom-0 top-0 flex h-screen self-start pt-8 text-center transition-all lg:relative lg:left-0 ${bgColor} ${
             visible ? 'open left-0' : 'closed -left-full'
           }`}
         >
@@ -57,7 +57,7 @@ export default function Layout(): JSX.Element | null {
             </a>
           </div>
           <Nav onClick={() => setVisible(false)} />
-          <footer className="mx-auto sidebar-footer">
+          <footer className="sidebar-footer mx-auto">
             <NetworkId />
             <SocialAndTermLinks />
           </footer>
@@ -65,12 +65,12 @@ export default function Layout(): JSX.Element | null {
       </div>
       <section className={visible && isMobile ? 'opacity-25' : ''}>
         <header>
-          <div className="flex items-center justify-end gap-2 h-15">
+          <div className="h-15 flex items-center justify-end gap-2">
             <GetToken />
             <ChainSelector />
-            <div className="hidden mr-2 dropdown dropdown-end">
-              <button className="flex items-center py-2 space-x-2 btn no-animation">
-                <span className={`${isPendulum ? 'text-white' : ''}  text-md`}>
+            <div className="dropdown dropdown-end mr-2 hidden">
+              <button className="btn no-animation flex items-center space-x-2 py-2">
+                <span className={`${isPendulum ? 'text-white' : ''} text-md`}>
                   {isPendulum ? 'Pendulum' : 'Amplitude'}
                 </span>
                 <svg
@@ -89,7 +89,7 @@ export default function Layout(): JSX.Element | null {
                   />
                 </svg>
               </button>
-              <ul tabIndex={0} className="p-2 shadow dropdown-content menu bg-base-100 rounded-box w-52">
+              <ul tabIndex={0} className="menu dropdown-content w-52 rounded-box bg-base-100 p-2 shadow">
                 <li>
                   <FooterLink />
                 </li>
@@ -104,7 +104,7 @@ export default function Layout(): JSX.Element | null {
           </div>
         </header>
         <main
-          className="flex-wrap flex-grow w-full px-4 py-4"
+          className="w-full flex-grow flex-wrap px-4 py-4"
           onClick={() => {
             if (visible && isMobile) {
               setVisible(false);
diff --git a/src/index.css b/src/index.css
index 0bfa7bc6..2c75097b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -353,6 +353,10 @@ w3m-modal {
   scrollbar-width: none;
 }
 
+.scroll-thin {
+  scrollbar-width: thin;
+}
+
 :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
   scrollbar-gutter: unset;
 }

From fe379f0650105e75d3f8c9e7f20b26127458b461 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Wed, 25 Sep 2024 15:42:29 +0100
Subject: [PATCH 07/15] fix button class

---
 src/components/nabla/common/TransactionProgress.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/nabla/common/TransactionProgress.tsx b/src/components/nabla/common/TransactionProgress.tsx
index 24441b34..20403b71 100644
--- a/src/components/nabla/common/TransactionProgress.tsx
+++ b/src/components/nabla/common/TransactionProgress.tsx
@@ -77,7 +77,7 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction
       {!mutation.isSuccess && !!errorMsg && <p className="mt-1 text-center">{errorMsg}</p>}
       <div className="mt-6"></div>
       {!!explorerUrl && (
-        <a href={explorerUrl} target="_blank" rel="noreferrer" className="btn btn-primary w-full">
+        <a href={explorerUrl} target="_blank" rel="noreferrer" className="btn btn-secondary w-full">
           View on Explorer
         </a>
       )}

From 293f97b352bb109f300f6dcd77c7af143fc4eafd Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Wed, 25 Sep 2024 15:50:50 +0100
Subject: [PATCH 08/15] change swap footer text

---
 src/components/Layout/Nav.tsx                 | 2 +-
 src/components/nabla/common/NablaFootnote.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout/Nav.tsx b/src/components/Layout/Nav.tsx
index cb1cd04b..5b00d200 100644
--- a/src/components/Layout/Nav.tsx
+++ b/src/components/Layout/Nav.tsx
@@ -28,7 +28,7 @@ const CollapseMenu = ({
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'} `}>
+    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'}`}>
       <input type="checkbox" checked={isActive} ref={inputRef} />
       <button
         type="button"
diff --git a/src/components/nabla/common/NablaFootnote.tsx b/src/components/nabla/common/NablaFootnote.tsx
index 64c15923..46dbce5e 100644
--- a/src/components/nabla/common/NablaFootnote.tsx
+++ b/src/components/nabla/common/NablaFootnote.tsx
@@ -2,10 +2,10 @@ const nablaHomepageUrl = 'https://nabla.fi';
 
 export function NablaFootnote() {
   return (
-    <div className="text-center mt-3 font-bold text-sm">
+    <div className="mt-3 text-center text-sm font-bold">
       Powered by{' '}
       <a href={nablaHomepageUrl} target="_blank" rel="noreferrer">
-        Nabla technology
+        Vortex Finance
       </a>
     </div>
   );

From 954b529dc020c8b3413284424d5cd66e6c1c4037 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Fri, 27 Sep 2024 10:53:14 +0100
Subject: [PATCH 09/15] change collapse behaviour to open only one at the time

---
 src/components/Layout/Nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout/Nav.tsx b/src/components/Layout/Nav.tsx
index 5b00d200..a3d97aed 100644
--- a/src/components/Layout/Nav.tsx
+++ b/src/components/Layout/Nav.tsx
@@ -29,7 +29,7 @@ const CollapseMenu = ({
 
   return (
     <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'}`}>
-      <input type="checkbox" checked={isActive} ref={inputRef} />
+      <input type="radio" name="menu-item" checked={isActive} ref={inputRef} />
       <button
         type="button"
         className={`nav-item collapse-btn collapse-title ${isActive ? 'active' : ''}`}

From 5b3e9cf9ad82aed5d3fd93d1acdf433d137cf9dd Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 30 Sep 2024 12:20:18 +0200
Subject: [PATCH 10/15] extract NavItem to a separate file, implement safer url
 check

---
 src/components/Layout/Nav/NavItem/index.tsx | 43 +++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/components/Layout/Nav/NavItem/index.tsx

diff --git a/src/components/Layout/Nav/NavItem/index.tsx b/src/components/Layout/Nav/NavItem/index.tsx
new file mode 100644
index 00000000..873b1a48
--- /dev/null
+++ b/src/components/Layout/Nav/NavItem/index.tsx
@@ -0,0 +1,43 @@
+import { NavLink } from 'react-router-dom';
+import { LinkItem } from '../../links';
+
+const isExternalLink = (link: string) => {
+  try {
+    const parsedUrl = new URL(link);
+    return ['http:', 'https:'].includes(parsedUrl.protocol);
+  } catch {
+    return false;
+  }
+};
+
+export const NavItem = ({
+  item,
+  onClick,
+  isSubNavItem = false,
+}: {
+  item: LinkItem;
+  onClick?: () => void;
+  isSubNavItem?: boolean;
+}) => {
+  const { link, prefix, suffix, title, props, hidden } = item;
+  if (hidden) return null;
+  const isExternal = isExternalLink(link);
+
+  const linkUi = (
+    <>
+      {prefix}
+      <span>{title}</span>
+      {suffix}
+    </>
+  );
+  const cls = `nav-item font-outfit ${props?.className?.() || ''} ${isSubNavItem ? 'text-sm' : ''}`;
+  return isExternal ? (
+    <a href={link} {...props} className={cls} onClick={onClick}>
+      {linkUi}
+    </a>
+  ) : (
+    <NavLink to={link} {...props} onClick={onClick} className={cls}>
+      {linkUi}
+    </NavLink>
+  );
+};

From 80d81492bd5ec5e31588bc1e47356d1b4c6a40b2 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 30 Sep 2024 12:21:15 +0200
Subject: [PATCH 11/15] extract NavCollapseMenu to a separate file, change nav
 item active logic

---
 .../Layout/Nav/NavCollapseMenu/index.tsx      | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/Layout/Nav/NavCollapseMenu/index.tsx

diff --git a/src/components/Layout/Nav/NavCollapseMenu/index.tsx b/src/components/Layout/Nav/NavCollapseMenu/index.tsx
new file mode 100644
index 00000000..e86659e3
--- /dev/null
+++ b/src/components/Layout/Nav/NavCollapseMenu/index.tsx
@@ -0,0 +1,39 @@
+export const NavCollapseMenu = ({
+  link,
+  disabled,
+  button,
+  children,
+  ariaControls,
+  activeSelection,
+  onClick,
+}: {
+  link: string;
+  disabled?: boolean;
+  button: JSX.Element | null;
+  children: JSX.Element | null;
+  ariaControls?: string;
+  activeSelection?: string | null;
+  onClick: (link: string | null) => void;
+}) => {
+  const isItemActive = !!activeSelection && activeSelection === link;
+
+  const handleOnClick = () => {
+    onClick(isItemActive ? null : link);
+  };
+
+  return (
+    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'} ${isItemActive ? 'collapse-open' : ''} `}>
+      <button
+        type="button"
+        className={`nav-item collapse-btn collapse-title ${isItemActive ? 'active' : ''}`}
+        aria-controls={ariaControls}
+        aria-disabled={disabled}
+        aria-expanded={isItemActive}
+        onClick={handleOnClick}
+      >
+        {button}
+      </button>
+      <div className="collapse-content p-0">{children}</div>
+    </section>
+  );
+};

From acd3023fb29e50a0d53798a6d9e7be123bde962f Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 30 Sep 2024 12:21:45 +0200
Subject: [PATCH 12/15] change Nav component structure

---
 src/components/Layout/Nav.tsx       | 129 ----------------------------
 src/components/Layout/Nav/index.tsx |  80 +++++++++++++++++
 2 files changed, 80 insertions(+), 129 deletions(-)
 delete mode 100644 src/components/Layout/Nav.tsx
 create mode 100644 src/components/Layout/Nav/index.tsx

diff --git a/src/components/Layout/Nav.tsx b/src/components/Layout/Nav.tsx
deleted file mode 100644
index a3d97aed..00000000
--- a/src/components/Layout/Nav.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { memo, useEffect, useMemo, useState, useRef } from 'preact/compat';
-import { NavLink, useLocation } from 'react-router-dom';
-
-import { useGlobalState } from '../../GlobalStateProvider';
-import { createLinks, LinkItem } from './links';
-import { NavCollapseButtonContent } from './NavCollapseButtonContent';
-
-const CollapseMenu = ({
-  link,
-  disabled,
-  button,
-  children,
-  ariaControls,
-}: {
-  link: string;
-  disabled?: boolean;
-  button: JSX.Element | null;
-  children: JSX.Element | null;
-  ariaControls?: string;
-}) => {
-  const { pathname } = useLocation();
-  const isActive = useMemo(() => {
-    const [path] = pathname.split('?');
-    const paths = path.split('/').filter(Boolean);
-    return paths[1] && paths[1].startsWith(link.replace('/', '')) ? true : false;
-  }, [link, pathname]);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'}`}>
-      <input type="radio" name="menu-item" checked={isActive} ref={inputRef} />
-      <button
-        type="button"
-        className={`nav-item collapse-btn collapse-title ${isActive ? 'active' : ''}`}
-        aria-controls={ariaControls}
-        aria-disabled={disabled}
-        aria-expanded={inputRef.current?.checked}
-      >
-        {button}
-      </button>
-      <div className="collapse-content p-0">{children}</div>
-    </section>
-  );
-};
-
-export const NavItem = ({
-  item,
-  onClick,
-  isSubNavItem = false,
-}: {
-  item: LinkItem;
-  onClick?: () => void;
-  isSubNavItem?: boolean;
-}) => {
-  const { link, prefix, suffix, title, props, hidden } = item;
-  if (hidden) return null;
-  const isExternal = link.startsWith('http');
-  const linkUi = (
-    <>
-      {prefix}
-      <span>{title}</span>
-      {suffix}
-    </>
-  );
-  const cls = `nav-item font-outfit ${props?.className?.() || ''} ${isSubNavItem ? 'text-sm' : ''}`;
-  return isExternal ? (
-    <a href={link} {...props} className={cls} onClick={onClick}>
-      {linkUi}
-    </a>
-  ) : (
-    <NavLink to={link} {...props} onClick={onClick} className={cls}>
-      {linkUi}
-    </NavLink>
-  );
-};
-
-export type NavProps = {
-  onClick?: () => void;
-};
-
-const Nav = memo(({ onClick }: NavProps) => {
-  const state = useGlobalState();
-
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [links, setLinks] = useState<LinkItem[]>([]);
-
-  const handleMouseEnter = () => {
-    setIsPlaying(true);
-  };
-
-  useEffect(() => {
-    const [defaultLinks, loadedLinksPromise] = createLinks(state.tenantName);
-    setLinks(defaultLinks);
-
-    loadedLinksPromise.then((links) => setLinks(links)).catch((error) => console.error("Couldn't load links", error));
-  }, [state.tenantName]);
-
-  return (
-    <nav>
-      {links.map((item, i) => {
-        if (item.hidden) return;
-        return item.submenu ? (
-          <div onMouseEnter={handleMouseEnter} className="my-2.5">
-            <CollapseMenu
-              key={i}
-              link={item.link}
-              disabled={item.disabled}
-              ariaControls="submenu"
-              button={<NavCollapseButtonContent item={item} isPlaying={isPlaying} />}
-            >
-              <ul className="submenu" id={`submenu-${i}`}>
-                {item.submenu.map((subItem, j) => (
-                  <li key={`${i}-${j}`} className="ml-[3px]">
-                    <NavItem item={subItem} onClick={onClick} isSubNavItem={true} />
-                  </li>
-                ))}
-              </ul>
-            </CollapseMenu>
-          </div>
-        ) : (
-          <NavItem key={i} item={item} onClick={onClick} />
-        );
-      })}
-    </nav>
-  );
-});
-
-export default Nav;
diff --git a/src/components/Layout/Nav/index.tsx b/src/components/Layout/Nav/index.tsx
new file mode 100644
index 00000000..a22cdb65
--- /dev/null
+++ b/src/components/Layout/Nav/index.tsx
@@ -0,0 +1,80 @@
+import { memo, useEffect, useMemo, useState } from 'preact/compat';
+import { useLocation } from 'react-router-dom';
+import { useGlobalState } from '../../../GlobalStateProvider';
+import { NavCollapseButtonContent } from '../NavCollapseButtonContent';
+import { createLinks, LinkItem } from '../links';
+import { NavItem } from './NavItem';
+import { NavCollapseMenu } from './NavCollapseMenu';
+
+const getActiveLink = (pathname: string): string | null => {
+  const [path] = pathname.split('?');
+  const paths = path.split('/').filter(Boolean);
+  return paths.length > 1 ? `/${paths[1]}` : null;
+};
+
+export type NavProps = {
+  onClick?: () => void;
+};
+
+const Nav = memo(({ onClick }: NavProps) => {
+  const state = useGlobalState();
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [links, setLinks] = useState<LinkItem[]>([]);
+
+  const { pathname } = useLocation();
+  const activeLink = useMemo(() => getActiveLink(pathname), [pathname]);
+  const [activeSelection, setActiveSelection] = useState<null | string>(activeLink);
+
+  const handleMouseEnter = () => {
+    setIsPlaying(true);
+  };
+
+  useEffect(() => {
+    const [defaultLinks, loadedLinksPromise] = createLinks(state.tenantName);
+    setLinks(defaultLinks);
+
+    loadedLinksPromise.then(setLinks).catch((error) => console.error("Couldn't load links", error));
+  }, [state.tenantName]);
+
+  return (
+    <nav>
+      {links.map((item, i) => {
+        if (item.hidden) return;
+
+        return item.submenu ? (
+          <div onMouseEnter={handleMouseEnter} className="my-2.5">
+            <NavCollapseMenu
+              key={i}
+              disabled={item.disabled}
+              ariaControls="submenu"
+              button={<NavCollapseButtonContent item={item} isPlaying={isPlaying} />}
+              activeSelection={activeSelection}
+              link={item.link}
+              onClick={setActiveSelection}
+            >
+              <ul className="submenu" id={`submenu-${i}`}>
+                {item.submenu.map((subItem, j) => (
+                  <li key={`${i}-${j}`} className="ml-[3px]">
+                    <NavItem item={subItem} onClick={onClick} isSubNavItem={true} />
+                  </li>
+                ))}
+              </ul>
+            </NavCollapseMenu>
+          </div>
+        ) : (
+          <NavItem
+            key={i}
+            item={item}
+            onClick={() => {
+              setActiveSelection(item.link);
+              onClick && onClick();
+            }}
+          />
+        );
+      })}
+    </nav>
+  );
+});
+
+export default Nav;

From 0e6b8a8d945d4db778a32c3247761f48aebd6ef7 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 30 Sep 2024 12:22:24 +0200
Subject: [PATCH 13/15] remove unnecessary Promise constructor,
 no-async-promise-executor

---
 src/components/Layout/links.tsx | 43 ++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/Layout/links.tsx b/src/components/Layout/links.tsx
index 1d6501b8..36e5b9ff 100644
--- a/src/components/Layout/links.tsx
+++ b/src/components/Layout/links.tsx
@@ -169,26 +169,25 @@ export function createLinks(tenantName: TenantName): [LinkItem[], Promise<LinkIt
     alchemyPayLinkItem,
   ];
 
-  return [
-    links,
-    new Promise(async (resolve) => {
-      const alchemyPayLink = await config.alchemyPay.encodeUrlWithRedirection(
-        config.alchemyPay.prodUrl,
-        window.location.href,
-      );
-
-      resolve([
-        dashboardLinkItem,
-        zenlinkAmmLinkItem,
-        spacewalkLinkItem,
-        nablaLinkItem,
-        stakingLinkItem,
-        governanceLinkItem,
-        {
-          ...alchemyPayLinkItem,
-          link: alchemyPayLink,
-        },
-      ]);
-    }),
-  ];
+  const getLinks = async () => {
+    const alchemyPayLink = await config.alchemyPay.encodeUrlWithRedirection(
+      config.alchemyPay.prodUrl,
+      window.location.href,
+    );
+
+    return [
+      dashboardLinkItem,
+      zenlinkAmmLinkItem,
+      spacewalkLinkItem,
+      nablaLinkItem,
+      stakingLinkItem,
+      governanceLinkItem,
+      {
+        ...alchemyPayLinkItem,
+        link: alchemyPayLink,
+      },
+    ];
+  };
+
+  return [links, getLinks()];
 }

From 580f0cdbc254abe423865ce8d604cad6542aec7b Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 30 Sep 2024 12:49:54 +0200
Subject: [PATCH 14/15] remove unused Nav component

---
 src/components/Layout/Nav.tsx | 129 ----------------------------------
 1 file changed, 129 deletions(-)
 delete mode 100644 src/components/Layout/Nav.tsx

diff --git a/src/components/Layout/Nav.tsx b/src/components/Layout/Nav.tsx
deleted file mode 100644
index a3d97aed..00000000
--- a/src/components/Layout/Nav.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { memo, useEffect, useMemo, useState, useRef } from 'preact/compat';
-import { NavLink, useLocation } from 'react-router-dom';
-
-import { useGlobalState } from '../../GlobalStateProvider';
-import { createLinks, LinkItem } from './links';
-import { NavCollapseButtonContent } from './NavCollapseButtonContent';
-
-const CollapseMenu = ({
-  link,
-  disabled,
-  button,
-  children,
-  ariaControls,
-}: {
-  link: string;
-  disabled?: boolean;
-  button: JSX.Element | null;
-  children: JSX.Element | null;
-  ariaControls?: string;
-}) => {
-  const { pathname } = useLocation();
-  const isActive = useMemo(() => {
-    const [path] = pathname.split('?');
-    const paths = path.split('/').filter(Boolean);
-    return paths[1] && paths[1].startsWith(link.replace('/', '')) ? true : false;
-  }, [link, pathname]);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'}`}>
-      <input type="radio" name="menu-item" checked={isActive} ref={inputRef} />
-      <button
-        type="button"
-        className={`nav-item collapse-btn collapse-title ${isActive ? 'active' : ''}`}
-        aria-controls={ariaControls}
-        aria-disabled={disabled}
-        aria-expanded={inputRef.current?.checked}
-      >
-        {button}
-      </button>
-      <div className="collapse-content p-0">{children}</div>
-    </section>
-  );
-};
-
-export const NavItem = ({
-  item,
-  onClick,
-  isSubNavItem = false,
-}: {
-  item: LinkItem;
-  onClick?: () => void;
-  isSubNavItem?: boolean;
-}) => {
-  const { link, prefix, suffix, title, props, hidden } = item;
-  if (hidden) return null;
-  const isExternal = link.startsWith('http');
-  const linkUi = (
-    <>
-      {prefix}
-      <span>{title}</span>
-      {suffix}
-    </>
-  );
-  const cls = `nav-item font-outfit ${props?.className?.() || ''} ${isSubNavItem ? 'text-sm' : ''}`;
-  return isExternal ? (
-    <a href={link} {...props} className={cls} onClick={onClick}>
-      {linkUi}
-    </a>
-  ) : (
-    <NavLink to={link} {...props} onClick={onClick} className={cls}>
-      {linkUi}
-    </NavLink>
-  );
-};
-
-export type NavProps = {
-  onClick?: () => void;
-};
-
-const Nav = memo(({ onClick }: NavProps) => {
-  const state = useGlobalState();
-
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [links, setLinks] = useState<LinkItem[]>([]);
-
-  const handleMouseEnter = () => {
-    setIsPlaying(true);
-  };
-
-  useEffect(() => {
-    const [defaultLinks, loadedLinksPromise] = createLinks(state.tenantName);
-    setLinks(defaultLinks);
-
-    loadedLinksPromise.then((links) => setLinks(links)).catch((error) => console.error("Couldn't load links", error));
-  }, [state.tenantName]);
-
-  return (
-    <nav>
-      {links.map((item, i) => {
-        if (item.hidden) return;
-        return item.submenu ? (
-          <div onMouseEnter={handleMouseEnter} className="my-2.5">
-            <CollapseMenu
-              key={i}
-              link={item.link}
-              disabled={item.disabled}
-              ariaControls="submenu"
-              button={<NavCollapseButtonContent item={item} isPlaying={isPlaying} />}
-            >
-              <ul className="submenu" id={`submenu-${i}`}>
-                {item.submenu.map((subItem, j) => (
-                  <li key={`${i}-${j}`} className="ml-[3px]">
-                    <NavItem item={subItem} onClick={onClick} isSubNavItem={true} />
-                  </li>
-                ))}
-              </ul>
-            </CollapseMenu>
-          </div>
-        ) : (
-          <NavItem key={i} item={item} onClick={onClick} />
-        );
-      })}
-    </nav>
-  );
-});
-
-export default Nav;

From f191c250a8d0c305a1c1bf2d4b7039b2712f4dd9 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 30 Sep 2024 12:50:10 +0200
Subject: [PATCH 15/15] disable ForexAMM for Pendulum

---
 src/config/apps/nabla.ts | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/config/apps/nabla.ts b/src/config/apps/nabla.ts
index 41011c58..cf0da3de 100644
--- a/src/config/apps/nabla.ts
+++ b/src/config/apps/nabla.ts
@@ -14,16 +14,11 @@ export type NablaConfig = AppConfigBase &
   >;
 
 export const nablaConfig: NablaConfig = {
-  tenants: [TenantName.Foucoco, TenantName.Pendulum],
-  environment: ['staging', 'development', 'production'],
+  tenants: [TenantName.Foucoco],
+  environment: ['staging', 'development'],
   foucoco: {
     indexerUrl: 'https://pendulum.squids.live/foucoco-squid/graphql',
     router: '6mYwT4yRrrMK978NszqBvxkvXjYnsmKfs2BkYGJGiR4XY9Sc',
     oracle: '6kqj1tnYUGY3L93YFArXKF2E4tpQ2tUJ4DARwkAjZEyDoof6',
   },
-  pendulum: {
-    indexerUrl: 'https://pendulum.squids.live/pendulum-squid/graphql',
-    router: '6buMJsFCbXpHRyacKTjBn3Jss241b2aA7CZf9tKzKHMJWpcJ',
-    oracle: '6f9uHwN2r5w82Bjrywc4wmZYb6TN64bZH5Ev87qmJ675uFvq',
-  },
 };