Add link to subscan explore on the transaction status pop up (#557)

* Bump api-solang to latest version * Show button to view nabla transaction on explorer * Change margin of buttons * Enable Nabla on Pendulum (only for testing, to be removed) * remove unnecessary code * improve nav responsiveness when multiple collapse groups appear * fix button class * change swap footer text * change collapse behaviour to open only one at the time * Remove boolean cast with `!!` * Amend merge --------- Co-authored-by: Kacper Szarkiewicz <[email protected]> Co-authored-by: Kacper Szarkiewicz <[email protected]>
pendulum-chain · Sep 30, 2024 · 3944ce6 · 3944ce6
1 parent b93d255
commit 3944ce6
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 45 deletions.
diff --git 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="radio" name="menu-item" 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
@@ -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,20 +57,20 @@ 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>
         </aside>
       </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/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>
   );

diff --git 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,61 @@ const getErrorMessage = (data?: ExecuteMessageResult['result']) => {
   }
 };
 
-export function TransactionProgress({ mutation, children, onClose }: TransactionProgressProps): JSX.Element | null {
-  if (mutation.isIdle) return null;
+function getExplorerUrl(tenant: TenantName, data?: ExecuteMessageResult['execution']) {
+  if (tenant === TenantName.Pendulum && data?.type === 'extrinsic') {
+    return `https://pendulum.subscan.io/extrinsic/${data.txHash.toHex()}`;
+  }
+}
+
+export function TransactionProgress({ mutation, children, onClose }: TransactionProgressProps) {
+  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>}
+      <div className="mt-6"></div>
+      {explorerUrl && (
+        <a href={explorerUrl} target="_blank" rel="noreferrer" className="btn btn-secondary w-full">
+          View on Explorer
+        </a>
+      )}
       {!!onClose && (
-        <Button color="primary" className="w-full mt-6" onClick={onClose}>
+        <Button color="primary" className="mt-2 w-full" onClick={onClose}>
           Close
         </Button>
       )}

diff --git 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',
+  },
 };
diff --git 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;
 }

diff --git a/yarn.lock b/yarn.lock
@@ -3343,8 +3343,8 @@ __metadata:
   linkType: hard
 
 "@pendulum-chain/api-solang@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "@pendulum-chain/api-solang@npm:0.7.0"
+  version: 0.7.1
+  resolution: "@pendulum-chain/api-solang@npm:0.7.1"
   peerDependencies:
     "@polkadot/api": ^13.2
     "@polkadot/api-contract": ^13.2
@@ -3353,7 +3353,7 @@ __metadata:
     "@polkadot/types-codec": ^13.2
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: 10c0/de16a29414516e99316cae463267b7b8af3562f5d4ce06edc0fc8a816f04a7e92c8217feb1d6209a5b30f089a3fe884788b73276c70751f3f30e94bd471345fd
+  checksum: 10c0/2ef7f6f6fd28dbb9ac857be946596830d8bdd45760fa0f278e5a05379c148e691c760fb3b461dc16fc31f2052fb1af420afda2a1dae431f246483f2348c3179a
   languageName: node
   linkType: hard
 
@@ -4327,7 +4327,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@scure/base@npm:^1.1.1, @scure/base@npm:^1.1.5, @scure/base@npm:^1.1.7":
+"@scure/base@npm:^1.1.1, @scure/base@npm:^1.1.5":
+  version: 1.1.6
+  resolution: "@scure/base@npm:1.1.6"
+  checksum: 10c0/237a46a1f45391fc57719154f14295db936a0b1562ea3e182dd42d7aca082dbb7062a28d6c49af16a7e478b12dae8a0fe678d921ea5056bcc30238d29eb05c55
+  languageName: node
+  linkType: hard
+
+"@scure/base@npm:^1.1.7":
   version: 1.1.9
   resolution: "@scure/base@npm:1.1.9"
   checksum: 10c0/77a06b9a2db8144d22d9bf198338893d77367c51b58c72b99df990c0a11f7cadd066d4102abb15e3ca6798d1529e3765f55c4355742465e49aed7a0c01fe76e8
@@ -4740,7 +4747,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@substrate/connect-known-chains@npm:^1.1.1, @substrate/connect-known-chains@npm:^1.1.5":
+"@substrate/connect-known-chains@npm:^1.1.1":
+  version: 1.1.5
+  resolution: "@substrate/connect-known-chains@npm:1.1.5"
+  checksum: 10c0/b3b08eabcbddecb058125bd133d929b455dde8fc78ee54eff8ee4646f469d7b5d2c61465c393bdc9686152ceeaa263cf0a8e057b1e3732a182f724d75c5cceae
+  languageName: node
+  linkType: hard
+
+"@substrate/connect-known-chains@npm:^1.1.5":
   version: 1.4.1
   resolution: "@substrate/connect-known-chains@npm:1.4.1"
   checksum: 10c0/fbfe7e7af93bbf5209332e059b54baa71f63a2cc05c4f4dd9f010862e4b36e46de73585f90b9d1c07b8ddd60ef75cecab0fc9e43faeec034976195e9a02f23ab
@@ -4805,7 +4819,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@substrate/ss58-registry@npm:^1.44.0, @substrate/ss58-registry@npm:^1.50.0":
+"@substrate/ss58-registry@npm:^1.44.0":
+  version: 1.48.0
+  resolution: "@substrate/ss58-registry@npm:1.48.0"
+  checksum: 10c0/b2ff1bd7688a3f72353f05dd47676a0127be346d0516a0dd2214118d4085637e35a37b115f4bd9101772a9723f6111e4e77dc008cf69ad45b64c806de419547c
+  languageName: node
+  linkType: hard
+
+"@substrate/ss58-registry@npm:^1.50.0":
   version: 1.50.0
   resolution: "@substrate/ss58-registry@npm:1.50.0"
   checksum: 10c0/49178248445d88b2f06f6e45e7890bd292f91b9d5d6bfa2788f27b5d9e3a08d3f18462440ea905b2fe7fa60dafb690d40ce1f549929bdbbe48562be622748717
@@ -12789,7 +12810,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nock@npm:^13.5.0, nock@npm:^13.5.4":
+"nock@npm:^13.5.0":
+  version: 13.5.4
+  resolution: "nock@npm:13.5.4"
+  dependencies:
+    debug: "npm:^4.1.0"
+    json-stringify-safe: "npm:^5.0.1"
+    propagate: "npm:^2.0.0"
+  checksum: 10c0/9ca47d9d7e4b1f4adf871d7ca12722f8ef1dc7d2b9610b2568f5d9264eae9f424baa24fd9d91da9920b360d641b4243e89de198bd22c061813254a99cc6252af
+  languageName: node
+  linkType: hard
+
+"nock@npm:^13.5.4":
   version: 13.5.5
   resolution: "nock@npm:13.5.5"
   dependencies:
@@ -16870,20 +16902,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.1, tslib@npm:^2.6.2, tslib@npm:^2.7.0":
-  version: 2.7.0
-  resolution: "tslib@npm:2.7.0"
-  checksum: 10c0/469e1d5bf1af585742128827000711efa61010b699cb040ab1800bcd3ccdd37f63ec30642c9e07c4439c1db6e46345582614275daca3e0f4abae29b0083f04a6
-  languageName: node
-  linkType: hard
-
-"tslib@npm:~2.6.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.1, tslib@npm:^2.6.2, tslib@npm:~2.6.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "tslib@npm:2.7.0"
+  checksum: 10c0/469e1d5bf1af585742128827000711efa61010b699cb040ab1800bcd3ccdd37f63ec30642c9e07c4439c1db6e46345582614275daca3e0f4abae29b0083f04a6
+  languageName: node
+  linkType: hard
+
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"
@@ -17841,7 +17873,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.15.0, ws@npm:^8.15.1, ws@npm:^8.16.0, ws@npm:^8.8.1":
+"ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.15.0, ws@npm:^8.15.1, ws@npm:^8.8.1":
+  version: 8.17.0
+  resolution: "ws@npm:8.17.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10c0/55241ec93a66fdfc4bf4f8bc66c8eb038fda2c7a4ee8f6f157f2ca7dc7aa76aea0c0da0bf3adb2af390074a70a0e45456a2eaf80e581e630b75df10a64b0a990
+  languageName: node
+  linkType: hard
+
+"ws@npm:^8.16.0":
   version: 8.18.0
   resolution: "ws@npm:8.18.0"
   peerDependencies: