Merge branch 'staging' into feat/logo-link

src/app.tsx

@@ -13,13 +13,13 @@ import TermsAndConditions from './TermsAndConditions';
  */
 const Dashboard = <SuspenseLoad importFn={() => import('./pages/dashboard/Dashboard')} fallback={defaultPageLoader} />;
 const Amm = <SuspenseLoad importFn={() => import('./pages/amm/Amm')} fallback={defaultPageLoader} />;
-const AmberPage = <SuspenseLoad importFn={() => import('./pages/amber')} fallback={defaultPageLoader} />;
+const NablaPage = <SuspenseLoad importFn={() => import('./pages/nabla')} fallback={defaultPageLoader} />;
 const StatsPage = <SuspenseLoad importFn={() => import('./pages/stats')} fallback={defaultPageLoader} />;
-const SwapPage = <SuspenseLoad importFn={() => import('./pages/amber/swap')} fallback={defaultPageLoader} />;
-const SwapPoolsPage = <SuspenseLoad importFn={() => import('./pages/amber/swap-pools')} fallback={defaultPageLoader} />;
+const SwapPage = <SuspenseLoad importFn={() => import('./pages/nabla/swap')} fallback={defaultPageLoader} />;
+const SwapPoolsPage = <SuspenseLoad importFn={() => import('./pages/nabla/swap-pools')} fallback={defaultPageLoader} />;
 const TransfersPage = <SuspenseLoad importFn={() => import('./pages/bridge/Transfers')} fallback={defaultPageLoader} />;
 const BackstopPoolsPage = (
-  <SuspenseLoad importFn={() => import('./pages/amber/backstop-pools')} fallback={defaultPageLoader} />
+  <SuspenseLoad importFn={() => import('./pages/nabla/backstop-pools')} fallback={defaultPageLoader} />
 );
 const Bridge = <SuspenseLoad importFn={() => import('./pages/bridge')} fallback={defaultPageLoader} />;
 const Collators = <SuspenseLoad importFn={() => import('./pages/collators/Collators')} fallback={defaultPageLoader} />;
@@ -38,8 +38,8 @@ export function App() {
             <Route path="bridge" element={Bridge} />
             <Route path="transfers" element={TransfersPage} />
           </Route>
-          <Route path="amber">
-            <Route path="" element={AmberPage} />
+          <Route path="nabla">
+            <Route path="" element={NablaPage} />
             <Route path="swap" element={SwapPage} />
             <Route path="swap-pools" element={SwapPoolsPage} />
             <Route path="backstop-pools" element={BackstopPoolsPage} />

src/assets/collators.tsx

@@ -1,7 +1,8 @@
-const CollatorsIcon = () => (
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.0312 2.8125H1.96875C0.883195 2.8125 0 3.6957 0 4.78125V13.2188C0 14.3043 0.883195 15.1875 1.96875 15.1875H16.0312C17.1168 15.1875 18 14.3043 18 13.2188V4.78125C18 3.6957 17.1168 2.8125 16.0312 2.8125ZM1.96875 3.9375H16.0312C16.4965 3.9375 16.875 4.31603 16.875 4.78125V5.90625H1.125V4.78125C1.125 4.31603 1.50353 3.9375 1.96875 3.9375ZM16.0312 14.0625H1.96875C1.50353 14.0625 1.125 13.684 1.125 13.2188V7.03125H16.875V13.2188C16.875 13.684 16.4965 14.0625 16.0312 14.0625Z" />
-    <path d="M3.9375 12.375H3.375C3.06436 12.375 2.8125 12.1231 2.8125 11.8125V11.25C2.8125 10.9394 3.06436 10.6875 3.375 10.6875H3.9375C4.24814 10.6875 4.5 10.9394 4.5 11.25V11.8125C4.5 12.1231 4.24814 12.375 3.9375 12.375Z" />
+import { HTMLAttributes } from 'preact/compat';
+
+const CollatorsIcon = (props: HTMLAttributes<SVGSVGElement>) => (
+  <svg width="32" height="32" {...props} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m16.41,8.12l4.73,3.68-4.73,3.68-4.73-3.68,4.73-3.68m0-2.53l-7.99,6.21,1.45,1.13,6.54,5.08,6.53-5.08,1.46-1.13-7.99-6.21h0Zm6.54,9.58s-6.55,5.09-6.55,5.09l-6.54-5.08-1.44,1.12,7.99,6.21,7.99-6.21-1.45-1.13h0Zm0,4.52s-6.55,5.09-6.55,5.09l-6.54-5.08-1.44,1.12,7.99,6.21,7.99-6.21-1.45-1.13h0Z" />
   </svg>
 );
 

src/assets/dashboard.tsx

@@ -1,16 +1,8 @@
-const DashboardIcon = () => (
-  <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#clip0_370_3543)">
-      <path d="M6.93745 6.00005H1.31245C0.58873 6.00005 0 5.41132 0 4.68745V1.31245C0 0.58873 0.58873 0 1.31245 0H6.93745C7.66132 0 8.25005 0.58873 8.25005 1.31245V4.68745C8.25005 5.41132 7.66132 6.00005 6.93745 6.00005ZM1.31245 1.125C1.20905 1.125 1.125 1.20905 1.125 1.31245V4.68745C1.125 4.791 1.20905 4.87505 1.31245 4.87505H6.93745C7.041 4.87505 7.12505 4.791 7.12505 4.68745V1.31245C7.12505 1.20905 7.041 1.125 6.93745 1.125H1.31245Z" />
-      <path d="M6.93745 18H1.31245C0.58873 18 0 17.4113 0 16.6875V8.81253C0 8.08867 0.58873 7.49994 1.31245 7.49994H6.93745C7.66132 7.49994 8.25005 8.08867 8.25005 8.81253V16.6875C8.25005 17.4113 7.66132 18 6.93745 18ZM1.31245 8.62494C1.20905 8.62494 1.125 8.70898 1.125 8.81253V16.6875C1.125 16.7909 1.20905 16.875 1.31245 16.875H6.93745C7.041 16.875 7.12505 16.7909 7.12505 16.6875V8.81253C7.12505 8.70898 7.041 8.62494 6.93745 8.62494H1.31245Z" />
-      <path d="M16.6875 18H11.0625C10.3387 18 9.74995 17.4113 9.74995 16.6875V13.3125C9.74995 12.5887 10.3387 11.9999 11.0625 11.9999H16.6875C17.4113 11.9999 18 12.5887 18 13.3125V16.6875C18 17.4113 17.4113 18 16.6875 18ZM11.0625 13.1249C10.959 13.1249 10.875 13.209 10.875 13.3125V16.6875C10.875 16.7909 10.959 16.875 11.0625 16.875H16.6875C16.791 16.875 16.875 16.7909 16.875 16.6875V13.3125C16.875 13.209 16.791 13.1249 16.6875 13.1249H11.0625Z" />
-      <path d="M16.6875 10.5H11.0625C10.3387 10.5 9.74995 9.91132 9.74995 9.18745V1.31245C9.74995 0.58873 10.3387 0 11.0625 0H16.6875C17.4113 0 18 0.58873 18 1.31245V9.18745C18 9.91132 17.4113 10.5 16.6875 10.5ZM11.0625 1.125C10.959 1.125 10.875 1.20905 10.875 1.31245V9.18745C10.875 9.291 10.959 9.37505 11.0625 9.37505H16.6875C16.791 9.37505 16.875 9.291 16.875 9.18745V1.31245C16.875 1.20905 16.791 1.125 16.6875 1.125H11.0625Z" />
-    </g>
-    <defs>
-      <clipPath id="clip0_370_3543">
-        <rect width="18" height="18" fill="white" />
-      </clipPath>
-    </defs>
+import { HTMLAttributes } from 'preact/compat';
+
+const DashboardIcon = (props: HTMLAttributes<SVGSVGElement>) => (
+  <svg width="32" height="32" {...props} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="m23,9v2h-4v-2h4m-10,0v6h-4v-6h4m10,8v6h-4v-6h4m-10,4v2h-4v-2h4m12-14h-8v6h8v-6h0Zm-10,0H7v10h8V7h0Zm10,8h-8v10h8v-10h0Zm-10,4H7v6h8v-6h0Z" />
   </svg>
 );
 

src/assets/governance.tsx

@@ -1,8 +1,9 @@
-const GovernanceIcon = () => (
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.875 1.125C6.01768 1.125 4.5 2.6427 4.5 4.5C4.5 6.3573 6.01768 7.875 7.875 7.875C9.73232 7.875 11.25 6.3573 11.25 4.5C11.25 2.6427 9.73232 1.125 7.875 1.125ZM7.875 2.25C9.12431 2.25 10.125 3.25069 10.125 4.5C10.125 5.7493 9.12431 6.75 7.875 6.75C6.62569 6.75 5.625 5.7493 5.625 4.5C5.625 3.25069 6.62569 2.25 7.875 2.25Z" />
-    <path d="M6.1875 9C3.39261 9 1.125 11.2676 1.125 14.0625V15.1875C1.12501 15.3367 1.18428 15.4797 1.28977 15.5852C1.39525 15.6907 1.53832 15.75 1.6875 15.75H7.78933C7.86387 15.751 7.93787 15.7373 8.00704 15.7095C8.07621 15.6817 8.13917 15.6404 8.19225 15.5881C8.24533 15.5357 8.28748 15.4734 8.31625 15.4046C8.34502 15.3358 8.35984 15.262 8.35984 15.1875C8.35984 15.113 8.34502 15.0391 8.31625 14.9704C8.28748 14.9016 8.24533 14.8392 8.19225 14.7869C8.13917 14.7346 8.07621 14.6933 8.00704 14.6655C7.93787 14.6377 7.86387 14.6239 7.78933 14.625H2.25V14.0625C2.25 11.8714 3.99639 10.125 6.1875 10.125H8.44628C8.52081 10.126 8.59482 10.1123 8.66399 10.0845C8.73315 10.0567 8.79611 10.0154 8.84919 9.96308C8.90227 9.91075 8.94443 9.84838 8.9732 9.77961C9.00197 9.71084 9.01678 9.63704 9.01678 9.5625C9.01678 9.48795 9.00197 9.41415 8.9732 9.34538C8.94443 9.27661 8.90227 9.21424 8.84919 9.16191C8.79611 9.10957 8.73315 9.0683 8.66399 9.04051C8.59482 9.01271 8.52081 8.99894 8.44628 9H6.1875Z" />
-    <path d="M12.9301 8.99995C12.6164 9.00501 12.3688 9.25992 12.3731 9.57012V10.182C12.0151 10.2558 11.6815 10.3997 11.3865 10.5962L10.9547 10.1645C10.8222 10.0281 10.6717 9.97672 10.5296 9.98429C10.1035 10.007 9.75021 10.5622 10.1593 10.9598L10.5933 11.3938C10.3978 11.6891 10.254 12.0223 10.1813 12.3803H9.57049C8.80982 12.3696 8.80982 13.516 9.57049 13.5053H10.1835C10.2571 13.86 10.4002 14.1902 10.5944 14.483L10.1571 14.9203C9.61166 15.4505 10.4223 16.2611 10.9525 15.7156L11.3887 15.2795C11.6832 15.4753 12.0158 15.619 12.3731 15.6926V16.3045C12.3624 17.0651 13.5088 17.0651 13.498 16.3045V15.6937C13.8549 15.6207 14.1869 15.4766 14.4813 15.2817L14.9208 15.7211C15.1419 15.9485 15.5078 15.9485 15.726 15.7234C15.9442 15.498 15.9388 15.1421 15.7159 14.9258L15.2787 14.4886C15.4745 14.1945 15.6178 13.862 15.6917 13.5053H16.3047C16.6218 13.5098 16.8798 13.251 16.8749 12.9373C16.8693 12.6237 16.615 12.3761 16.3047 12.3804H15.6939C15.6208 12.0203 15.477 11.6849 15.2798 11.3883L15.7137 10.9544C15.9411 10.7334 15.9411 10.3674 15.7137 10.1491C15.6016 10.0406 15.4573 9.98735 15.3138 9.98874C15.1704 9.99155 15.0281 10.0484 14.9205 10.159L14.4854 10.5941C14.1905 10.3984 13.8577 10.2541 13.4999 10.181V9.57017C13.5056 9.25309 13.2456 8.99511 12.932 9.00001L12.9301 8.99995ZM12.9379 11.2499C13.8766 11.2499 14.6254 11.9987 14.6254 12.9373C14.6254 13.8759 13.8766 14.6247 12.9379 14.6247C11.9992 14.6247 11.2504 13.8759 11.2504 12.9373C11.2504 11.9987 11.9992 11.2499 12.9379 11.2499Z" />
+import { HTMLAttributes } from 'preact/compat';
+
+const GovernanceIcon = (props: HTMLAttributes<SVGSVGElement>) => (
+  <svg width="32" height="32" {...props} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="20.71 18.88 18.71 20.88 23.99 20.88 23.99 22.83 8.64 22.83 8.64 20.88 10.92 20.88 8.92 18.88 6.64 18.88 6.64 24.83 25.99 24.83 25.99 18.88 20.71 18.88" />
+    <path d="m17.15,8.99l3.99,3.99-6.05,6.05-3.99-3.99,6.05-6.05m0-2.83l-8.88,8.88,6.82,6.82,8.88-8.88-6.82-6.82h0Z" />
   </svg>
 );
 

src/assets/nabla.tsx

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'preact/compat';
+
+const NablaIcon = (props: HTMLAttributes<SVGSVGElement>) => (
+  <svg
+    width="32"
+    height="32"
+    fill="#32253e"
+    fillRule="evenodd"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+  >
+    <path d="m25.26,5.71l1.25,8.42-8.63,12.17-3.45-.79-5.19-8.95-3.75-7.09,19.77-3.75Zm-1.11.97l-17.91,3.23,8.32,13.52,2.28.28,7.32-17.03Zm-4.8,3.82l-3.84,8.93-4.56-7.42,8.4-1.51Zm-.99,1.41l-3.73,1.65,1.19,3.81,2.54-5.46Z" />
+  </svg>
+);
+
+export default NablaIcon;

src/assets/spacewalk.tsx

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'preact/compat';
+
+const SpacewalkIcon = (props: HTMLAttributes<SVGSVGElement>) => (
+  <svg width="32" height="32" {...props} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m16,5.03c-6.06,0-10.97,4.91-10.97,10.97s4.91,10.97,10.97,10.97,10.97-4.91,10.97-10.97-4.91-10.97-10.97-10.97Zm0,19.8c-4.87,0-8.83-3.96-8.83-8.83s3.96-8.83,8.83-8.83,8.83,3.96,8.83,8.83-3.96,8.83-8.83,8.83Z" />
+    <path d="m16.99,9.37c-2.31,0-4.52,1.75-5.83,4.42-1.7,3.46-1.2,7.17,1.74,8.59.68.33,1.38.48,2.06.48,2.31,0,4.51-1.76,5.82-4.43,1.7-3.46,1.39-7.08-1.74-8.59-.68-.33-1.36-.48-2.04-.48h0Zm0,1.76c.42,0,.83.1,1.23.3,1.07.52,1.56,1.42,1.67,2.45l-4.59-2.23c.55-.33,1.12-.51,1.68-.51h0Zm-4.87,5.59c.08-.5.22-1.01.42-1.53l6.23,3.03c-.28.48-.6.91-.94,1.28l-5.71-2.78Zm1.04-2.81c.28-.48.6-.91.94-1.28l5.73,2.79c-.09.51-.25,1.03-.44,1.52l-6.23-3.03Zm.54,6.8c-.87-.42-1.4-1.17-1.59-2.22-.01-.07-.02-.14-.03-.2l4.54,2.21c-.55.33-1.12.51-1.67.51-.42,0-.84-.1-1.25-.3Z" />{' '}
+  </svg>
+);
+
+export default SpacewalkIcon;

src/assets/swap.tsx

@@ -1,5 +1,7 @@
-const SwapIcon = () => (
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { HTMLAttributes } from 'preact/compat';
+
+const SwapIcon = (props: HTMLAttributes<SVGSVGElement>) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clipPath="url(#clip0_370_3553)">
       <path d="M15.8599 10.2367C15.8622 10.2234 15.8646 10.2101 15.8669 10.1967C15.8774 10.1368 15.887 10.0766 15.8959 10.0164C15.8999 9.98945 15.9039 9.96256 15.9075 9.93556C15.9118 9.90349 15.916 9.87139 15.9199 9.83926C15.9251 9.79679 15.9298 9.75422 15.9342 9.71157C15.9377 9.67722 15.9409 9.6428 15.9439 9.60838C15.9472 9.57133 15.9501 9.53424 15.9528 9.49708C15.9547 9.4706 15.9567 9.44413 15.9583 9.41762C15.9615 9.36432 15.964 9.31085 15.966 9.25731C15.967 9.23016 15.9677 9.20299 15.9684 9.17581C15.9695 9.13471 15.9701 9.09354 15.9704 9.05231C15.9705 9.0349 15.9712 9.01754 15.9712 9.00013C15.9712 8.94209 15.9702 8.88418 15.9688 8.82639C15.9688 8.82537 15.9687 8.82435 15.9687 8.82333C15.9674 8.77274 15.9655 8.72229 15.9632 8.67191C15.9625 8.65788 15.9618 8.64389 15.9611 8.62989C15.9593 8.59583 15.9572 8.56179 15.9549 8.52783C15.9533 8.50357 15.9517 8.47932 15.9499 8.45509C15.9493 8.44792 15.9486 8.44078 15.948 8.43361C15.8164 6.78457 15.1115 5.25247 13.9289 4.07042C13.9188 4.06033 13.9081 4.05126 13.8975 4.04208C13.1838 3.33578 12.3128 2.77773 11.3267 2.42866C11.0259 2.32195 10.698 2.47953 10.5916 2.77935C10.4855 3.07888 10.6425 3.40834 10.9423 3.51444C13.105 4.28023 14.6057 6.24864 14.7984 8.50582C14.7996 8.52031 14.801 8.53472 14.8021 8.54921C14.8033 8.56528 14.8043 8.58141 14.8054 8.59751C14.8077 8.63049 14.8098 8.66347 14.8115 8.69655C14.8119 8.70474 14.8123 8.71297 14.8127 8.72116C14.817 8.81369 14.8193 8.90658 14.8193 8.99982C14.8193 9.0169 14.819 9.03388 14.8189 9.05093C14.8186 9.08184 14.8182 9.11274 14.8174 9.14361C14.8168 9.16794 14.8161 9.19223 14.8152 9.21649C14.8136 9.26015 14.8115 9.30378 14.8089 9.34738C14.8075 9.3703 14.8058 9.39315 14.8042 9.41604C14.802 9.44645 14.7995 9.47683 14.7969 9.5072C14.7945 9.53498 14.7919 9.56271 14.7891 9.59038C14.7853 9.62754 14.7811 9.66467 14.7766 9.70176C14.7735 9.72742 14.7702 9.75302 14.7668 9.77858C14.7632 9.80512 14.7592 9.8316 14.7553 9.8581C14.7486 9.90251 14.7415 9.94677 14.7339 9.99086C14.7312 10.0065 14.7284 10.0223 14.7256 10.0379C14.3571 12.0624 12.929 13.7808 10.9424 14.4846C10.6425 14.5904 10.4856 14.9199 10.5917 15.2197C10.6753 15.4559 10.8974 15.6035 11.1346 15.6035C11.1982 15.6035 11.2631 15.5929 11.3265 15.5704C12.9382 14.9997 14.2429 13.8715 15.0544 12.4495C15.068 12.4308 15.0808 12.4113 15.0924 12.3907C15.4658 11.7207 15.7241 10.9909 15.8599 10.2367Z" />
       <path d="M9.54882 1.70128L6.38068 0.0641901C6.09738 -0.0815357 5.75042 0.029244 5.60473 0.311625C5.4584 0.594323 5.56947 0.941568 5.85185 1.08758L8.50859 2.4601L7.09521 5.19704C6.9492 5.47942 7.06026 5.82699 7.34296 5.97299C7.42751 6.01666 7.51769 6.03726 7.6066 6.03726C7.81533 6.03726 8.01657 5.92339 8.11923 5.72524L9.79629 2.47691C9.94226 2.19456 9.8312 1.84732 9.54882 1.70128Z" />

src/components/Layout/links.tsx

@@ -9,6 +9,8 @@ import GovernanceIcon from '../../assets/governance';
 import SwapIcon from '../../assets/swap';
 import { TenantName } from '../../models/Tenant';
 import ComingSoonTag from './ComingSoonTag';
+import NablaIcon from '../../assets/nabla';
+import SpacewalkIcon from '../../assets/spacewalk';
 
 export type LinkParameter = { isActive?: boolean };
 export type BaseLinkItem = {
@@ -44,7 +46,7 @@ export const links: Links = ({ tenantName }) => [
     props: {
       className: ({ isActive } = {}) => (isActive ? 'active' : 'coming-soon'),
     },
-    prefix: <SwapIcon />,
+    prefix: <SwapIcon className="p-1" />,
     suffix: <ComingSoonTag />,
   },
   {
@@ -53,7 +55,7 @@ export const links: Links = ({ tenantName }) => [
     props: {
       className: ({ isActive } = {}) => (isActive ? 'active' : tenantName === TenantName.Pendulum ? 'coming-soon' : ''),
     },
-    prefix: <BridgeIcon />,
+    prefix: <SpacewalkIcon />,
     suffix: tenantName === TenantName.Pendulum ? <ComingSoonTag /> : <></>,
     submenu: [
       {
@@ -90,25 +92,25 @@ export const links: Links = ({ tenantName }) => [
     ),
   },
   {
-    link: '/amber',
-    title: '0xAmber',
-    prefix: <SwapIcon />,
+    link: '/nabla',
+    title: 'Nabla',
+    prefix: <NablaIcon />,
     suffix: <ComingSoonTag />,
-    hidden: true,
+    hidden: !true,
     props: {
       className: ({ isActive } = {}) => (isActive ? 'active' : ''),
     },
     submenu: [
       {
-        link: './amber/swap',
+        link: './nabla/swap',
         title: 'Swap',
       },
       {
-        link: './amber/swap-pools',
+        link: './nabla/swap-pools',
         title: 'Swap Pools',
       },
       {
-        link: './amber/backstop-pools',
+        link: './nabla/backstop-pools',
         title: 'Backstop Pool',
       },
     ],

src/components/Layout/styles.sass

@@ -25,6 +25,9 @@ $menu: 32px
   flex-direction: column
   padding-top: 20px
   width: 270px
+  max-height: 100%
+  overflow: auto
+
   @media screen and (max-width: $medium)
     box-shadow: 5px 0 8px rgba(0, 0, 0, .1)
 
@@ -72,7 +75,7 @@ nav
     border-radius: 100px
     border-radius: 9px
     margin: 10px 0
-    padding: 15px 25px
+    padding: 12px 16px
 
     &.active .nav-arrow
       visibility: visible
@@ -94,12 +97,12 @@ nav
       fill: currentColor
 
     svg:first-of-type
-      width: 20px
-      height: 20px
+      width: 32px
+      height: 32px
 
     span
       display: block
-      margin-left: 20px
+      margin-left: 14px
       width: 140px
       height: auto
       color: var(--text-primary)

src/pages/nabla/index.tsx

@@ -0,0 +1,5 @@
+import SwapPage from './swap';
+
+const NablaPage = SwapPage;
+
+export default NablaPage;