add AlcehmyPay onramp nav link

src/assets/onramp.tsx

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'preact/compat';
+
+const OnrampIcon = (props: HTMLAttributes<SVGSVGElement>) => (
+  <svg width="32" height="32" viewBox="0 0 32 32" {...props}>
+    <path d="m28.64,12.62c0-3.57-2.9-6.47-6.47-6.47-2.92,0-5.4,1.95-6.19,4.62h-7.08c-1.53,0-2.77,1.24-2.77,2.77v8.69c0,1.53,1.24,2.77,2.77,2.77h13c1.53,0,2.77-1.24,2.77-2.77v-3.64c2.33-.98,3.98-3.28,3.98-5.97Zm-20.52.92c0-.43.35-.77.77-.77h6.82c.01.59.1,1.16.27,1.7h-7.85v-.93Zm14.54,8.69c0,.42-.35.77-.77.77h-13c-.43,0-.77-.35-.77-.77v-4.13h10.62c1,.63,2.17,1,3.43,1,.17,0,.33-.01.49-.02v3.16Zm-.49-4.84c-2.63,0-4.77-2.14-4.77-4.77s2.14-4.77,4.77-4.77,4.77,2.14,4.77,4.77-2.14,4.77-4.77,4.77Z" />
+    <path d="m22.66,8.93c-1.47-.03-2.74,1.18-2.77,2.65-.03,1,.49,1.88,1.27,2.38.04.02.09,0,.11-.03l.61-1.22c.09-.18.08-.39-.03-.56-.09-.14-.15-.32-.14-.5,0-.48.38-.87.86-.9.55-.03,1,.43.96.98-.03.44-.39.8-.83.83h0c-.2.01-.38.13-.47.31l-.61,1.22s0,.09.04.1c.31.12.64.18.99.18,1.49,0,2.7-1.23,2.7-2.72,0-1.49-1.19-2.7-2.67-2.72Z" />
+    <path d="m20.8,14.37c-.5,0-.91.41-.91.91s.41.91.91.91.91-.41.91-.91-.41-.91-.91-.91Z" />
+  </svg>
+);
+
+export default OnrampIcon;

src/components/Layout/links.tsx

@@ -1,13 +1,15 @@
-import { ChevronRightIcon, WalletIcon } from '@heroicons/react/20/solid';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
 import { ComponentChildren } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { GlobalState } from '../../GlobalStateProvider';
 import DashboardIcon from '../../assets/dashboard';
 import GovernanceIcon from '../../assets/governance';
 import NablaIcon from '../../assets/nabla';
+import OnrampIcon from '../../assets/onramp';
 import SpacewalkIcon from '../../assets/spacewalk';
 import StakingIcon from '../../assets/staking';
 import SwapIcon from '../../assets/swap';
+import { config } from '../../config';
 import { TenantName } from '../../models/Tenant';
 import ComingSoonTag from './ComingSoonTag';
 
@@ -115,13 +117,16 @@ export const links: Links = ({ tenantName }) => [
     ],
   },
   {
-    link: 'https://ramptest.alchemypay.org/?appId=qmamnbodyqzbdr0w',
+    link: config.aclhemyPay.prodUrl,
     title: 'Buy PEN',
-    prefix: <WalletIcon />,
+    prefix: <OnrampIcon />,
     suffix: arrow,
-    hidden: true,
     props: {
-      className: ({ isActive } = {}) => (isActive ? 'active' : ''),
+      style: {
+        visibility: tenantName === TenantName.Pendulum ? 'visible' : 'hidden',
+      },
+      target: '_blank',
+      rel: 'nofollow noreferrer',
     },
   },
 ];

src/config/index.ts

@@ -47,4 +47,8 @@ export const config = {
     url: 'wss://relay.walletconnect.com',
     projectId: '299fda67fbf3b60a31ba8695524534cd',
   },
+  aclhemyPay: {
+    prodUrl: `https://ramp.alchemypay.org/?appId=wNxCyQNce01WLqyL&network=PEN&crypto=PENDULUM&showTable=buy&type=buy`,
+    testUrl: `https://ramptest.alchemypay.org/?appId=f83Is2y7L425rxl8&network=PEN&crypto=PENDULUM&showTable=buy&type=buy`,
+  }
 };