From 41bbee57d8e7cabe53346bb873ada5ac23a4c085 Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Thu, 3 Oct 2024 17:52:26 +0530
Subject: [PATCH 1/9] Dev: show portal projects in bridge

---
 packages/arb-token-bridge-ui/next.config.js   |  8 ++
 .../components/MainContent/MainContent.tsx    |  3 +
 .../src/components/common/PortalProject.tsx   | 66 ++++++++++++++
 .../src/components/common/ProjectsListing.tsx | 86 +++++++++++++++++++
 packages/arb-token-bridge-ui/src/constants.ts |  3 +
 .../arb-token-bridge-ui/tailwind.config.js    |  1 +
 6 files changed, 167 insertions(+)
 create mode 100644 packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
 create mode 100644 packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx

diff --git a/packages/arb-token-bridge-ui/next.config.js b/packages/arb-token-bridge-ui/next.config.js
index 957dae6ba5..51f8167984 100644
--- a/packages/arb-token-bridge-ui/next.config.js
+++ b/packages/arb-token-bridge-ui/next.config.js
@@ -8,6 +8,14 @@ module.exports = {
   distDir: 'build',
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'portal.arbitrum.io'
+      }
+    ]
+  },
   async headers() {
     return [
       {
diff --git a/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx b/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx
index 158308db54..0c3830d1d8 100644
--- a/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx
+++ b/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx
@@ -11,6 +11,7 @@ import { TransactionHistory } from '../TransactionHistory/TransactionHistory'
 import { useTransactionHistory } from '../../hooks/useTransactionHistory'
 import { isTxPending } from '../TransactionHistory/helpers'
 import { TransactionStatusInfo } from '../TransactionHistory/TransactionStatusInfo'
+import { ProjectsListing } from '../common/ProjectsListing'
 
 function TransactionHistorySidePanel() {
   const { closeTransactionHistoryPanel } = useAppContextActions()
@@ -59,6 +60,8 @@ export function MainContent() {
         <TransactionStatusInfo />
 
         <TransferPanel />
+
+        <ProjectsListing />
       </div>
 
       <TransactionHistorySidePanel />
diff --git a/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
new file mode 100644
index 0000000000..81253bb5e8
--- /dev/null
+++ b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
@@ -0,0 +1,66 @@
+import Image from 'next/image'
+import { ExternalLink } from './ExternalLink'
+
+export type PortalProject = {
+  chains: string[]
+  description: string
+  id: string
+  images: { logoUrl: string; bannerUrl: string }
+  subcategories: { id: string; title: string }[]
+  title: string
+  url: string
+}
+
+export const Project = ({ project }: { project: PortalProject }) => {
+  return (
+    <div className="h-full min-h-[150px] w-full overflow-hidden rounded-md border border-white/30 bg-dark hover:bg-dark-hover">
+      <ExternalLink
+        className="relative flex h-full w-full flex-col gap-2 p-4 hover:opacity-100"
+        aria-label={`${project.title}`}
+        href={`https://portal.arbitrum.io?project=${project.id}`}
+      >
+        {/* Normal project contents */}
+        <div className="flex w-full flex-row gap-1">
+          {/* Logos */}
+          <div className="flex shrink-0 grow-0 flex-col gap-2 overflow-hidden bg-cover bg-center">
+            {/* Project logo */}
+            <div className="relative inline-block max-w-[70px] overflow-hidden rounded-md bg-white p-[1px]">
+              <div className="[&:hover_span]:opacity-100">
+                <Image
+                  alt={`${project.title} logo`}
+                  src={project.images.logoUrl}
+                  width={50}
+                  height={50}
+                  className="rounded-md"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="relative grow text-left">
+            <div className="flex flex-col gap-1 px-2">
+              <h5 className="relative flex items-center gap-2 text-left text-lg font-semibold leading-7">
+                {project.title}
+              </h5>
+              <p className="mb-2 line-clamp-3 text-sm opacity-70">
+                {project.description}
+              </p>
+
+              <p className="flex flex-wrap justify-start gap-2 text-center leading-6 text-gray-700">
+                {project.subcategories.slice(0, 2).map(subcategory => (
+                  <span
+                    key={subcategory.id}
+                    className="inline-flex items-start justify-start gap-2 break-words rounded bg-black px-1.5 py-0.5 text-xs font-normal text-white/60"
+                  >
+                    {subcategory.title.replaceAll('/', ' / ')}
+                  </span>
+                ))}
+              </p>
+            </div>
+          </div>
+        </div>
+      </ExternalLink>
+    </div>
+  )
+}
diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
new file mode 100644
index 0000000000..1352bc4a9b
--- /dev/null
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -0,0 +1,86 @@
+import axios from 'axios'
+import useSWRImmutable from 'swr/immutable'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import { useNetworks } from '../../hooks/useNetworks'
+import { getNetworkName, isNetwork } from '../../util/networks'
+import { PortalProject, Project } from './PortalProject'
+import { PORTAL_API_ENDPOINT } from '../../constants'
+import { ExternalLink } from './ExternalLink'
+import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
+import { getChainQueryParamForChain } from '../../types/ChainQueryParam'
+
+const fetchProjects = async (chainId: number) => {
+  const isChainOrbit = isNetwork(chainId).isOrbitChain
+  const chainSlug = getChainQueryParamForChain(chainId)
+
+  if (!isChainOrbit || !chainSlug) {
+    return []
+  }
+
+  const response = await axios.get(
+    `${PORTAL_API_ENDPOINT}/api/projects?chains=${chainSlug}`
+  )
+
+  return response.data as PortalProject[]
+}
+
+export const ProjectsListing = () => {
+  const [{ destinationChain }] = useNetworks()
+
+  const isDestinationChainOrbit = isNetwork(destinationChain.id).isOrbitChain
+
+  const { color: destinationChainUIcolor } = getBridgeUiConfigForChain(
+    destinationChain.id
+  )
+
+  const destinationChainSlug = getChainQueryParamForChain(destinationChain.id)
+
+  const {
+    data: projects,
+    error,
+    isLoading
+  } = useSWRImmutable(['fetchProjects', destinationChain.id], () =>
+    fetchProjects(destinationChain.id)
+  )
+
+  if (
+    isLoading ||
+    !isDestinationChainOrbit ||
+    !projects ||
+    projects.length === 0 ||
+    typeof error !== 'undefined'
+  ) {
+    return null
+  }
+
+  return (
+    <div
+      className="flex flex-col gap-3 rounded-md border bg-dark p-4 text-white"
+      style={{
+        borderColor: destinationChainUIcolor
+      }}
+    >
+      <h2 className="text-lg">
+        Explore Apps on {getNetworkName(destinationChain.id)}
+      </h2>
+      <div className="grid gap-3 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
+        {projects.slice(0, 4).map(project => (
+          <Project key={project.id} project={project} />
+        ))}
+      </div>
+      {projects.length > 4 && (
+        <ExternalLink
+          href={`${PORTAL_API_ENDPOINT}/projects?chains=${destinationChainSlug}`}
+          className="flex w-min flex-nowrap items-center gap-2 self-end whitespace-nowrap rounded-sm border p-2 text-sm"
+          style={{
+            borderColor: destinationChainUIcolor,
+            backgroundColor: `${destinationChainUIcolor}66`
+          }}
+        >
+          See all
+          <ChevronRightIcon className="h-3 w-3" />
+        </ExternalLink>
+      )}
+    </div>
+  )
+}
diff --git a/packages/arb-token-bridge-ui/src/constants.ts b/packages/arb-token-bridge-ui/src/constants.ts
index a4c016d0a7..3294a30e88 100644
--- a/packages/arb-token-bridge-ui/src/constants.ts
+++ b/packages/arb-token-bridge-ui/src/constants.ts
@@ -36,3 +36,6 @@ export const MULTICALL_TESTNET_ADDRESS =
 export const ETHER_TOKEN_LOGO = '/images/EthereumLogoRound.svg'
 
 export const ether = { name: 'Ether', symbol: 'ETH', decimals: 18 } as const
+
+export const PORTAL_API_ENDPOINT =
+  'https://arbitrum-portal-git-fs-609-enhance-portal-be7f96-offchain-labs.vercel.app'
diff --git a/packages/arb-token-bridge-ui/tailwind.config.js b/packages/arb-token-bridge-ui/tailwind.config.js
index 8bd5a1b6a9..687d267831 100644
--- a/packages/arb-token-bridge-ui/tailwind.config.js
+++ b/packages/arb-token-bridge-ui/tailwind.config.js
@@ -43,6 +43,7 @@ module.exports = {
         'gray-dark': '#6D6D6D',
         'line-gray': '#F4F4F4',
         dark: '#1A1C1D', // (or default-black)
+        'dark-hover': '#2b2e30', // (or default-black-hover)
 
         'bg-gray-1': '#191919',
 

From 9af546bbb93ccee9e0b1345f9b095e4fb0c2b8c5 Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Mon, 7 Oct 2024 15:07:42 +0400
Subject: [PATCH 2/9] Dev: added analytics

---
 .../src/components/MainContent/MainContent.tsx  |  3 ---
 .../components/TransferPanel/TransferPanel.tsx  | 12 +++++++++++-
 .../TransferPanel/TransferPanelMain.tsx         |  2 +-
 .../src/components/common/PortalProject.tsx     |  9 ++++++++-
 .../src/components/common/ProjectsListing.tsx   | 17 ++++++++++++++++-
 .../src/util/AnalyticsUtils.ts                  |  7 +++++++
 6 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx b/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx
index 0c3830d1d8..158308db54 100644
--- a/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx
+++ b/packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx
@@ -11,7 +11,6 @@ import { TransactionHistory } from '../TransactionHistory/TransactionHistory'
 import { useTransactionHistory } from '../../hooks/useTransactionHistory'
 import { isTxPending } from '../TransactionHistory/helpers'
 import { TransactionStatusInfo } from '../TransactionHistory/TransactionStatusInfo'
-import { ProjectsListing } from '../common/ProjectsListing'
 
 function TransactionHistorySidePanel() {
   const { closeTransactionHistoryPanel } = useAppContextActions()
@@ -60,8 +59,6 @@ export function MainContent() {
         <TransactionStatusInfo />
 
         <TransferPanel />
-
-        <ProjectsListing />
       </div>
 
       <TransactionHistorySidePanel />
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
index 935c381795..cee82188a3 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -8,7 +8,7 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { twMerge } from 'tailwind-merge'
 
 import { useAppState } from '../../state'
-import { getNetworkName } from '../../util/networks'
+import { getNetworkName, isNetwork } from '../../util/networks'
 import {
   TokenDepositCheckDialog,
   TokenDepositCheckDialogType
@@ -75,6 +75,7 @@ import { ExternalLink } from '../common/ExternalLink'
 import { isExperimentalFeatureEnabled } from '../../util'
 import { useIsTransferAllowed } from './hooks/useIsTransferAllowed'
 import { MoveFundsButton } from './MoveFundsButton'
+import { ProjectsListing } from '../common/ProjectsListing'
 
 const signerUndefinedError = 'Signer is undefined'
 const transferNotAllowedError = 'Transfer not allowed'
@@ -180,6 +181,8 @@ export function TransferPanel() {
 
   const { destinationAddressError } = useDestinationAddressError()
 
+  const [showProjectsListing, setShowProjectsListing] = useState(false)
+
   const isBatchTransfer = isBatchTransferSupported && Number(amount2) > 0
 
   function closeWithResetTokenImportDialog() {
@@ -865,6 +868,11 @@ export function TransferPanel() {
     setTransferring(false)
     clearAmountInput()
 
+    // for custom orbit pages, show Projects' listing after transfer
+    if (isDepositMode && isNetwork(childChain.id).isOrbitChain) {
+      setShowProjectsListing(true)
+    }
+
     await (sourceChainTransaction as TransactionResponse).wait()
 
     // tx confirmed, update balances
@@ -1044,6 +1052,8 @@ export function TransferPanel() {
           </Tippy>
         )}
       </div>
+
+      {showProjectsListing && <ProjectsListing />}
     </>
   )
 }
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
index 398482041a..83dcbff77c 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
@@ -6,7 +6,7 @@ import { Chain, useAccount } from 'wagmi'
 import { useMedia } from 'react-use'
 
 import { useAppState } from '../../state'
-import { getExplorerUrl, isNetwork } from '../../util/networks'
+import { getExplorerUrl } from '../../util/networks'
 import { useDestinationAddressStore } from './AdvancedSettings'
 import { ExternalLink } from '../common/ExternalLink'
 
diff --git a/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
index 81253bb5e8..a3bc275be9 100644
--- a/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
@@ -11,13 +11,20 @@ export type PortalProject = {
   url: string
 }
 
-export const Project = ({ project }: { project: PortalProject }) => {
+export const Project = ({
+  project,
+  onClick
+}: {
+  project: PortalProject
+  onClick?: () => void
+}) => {
   return (
     <div className="h-full min-h-[150px] w-full overflow-hidden rounded-md border border-white/30 bg-dark hover:bg-dark-hover">
       <ExternalLink
         className="relative flex h-full w-full flex-col gap-2 p-4 hover:opacity-100"
         aria-label={`${project.title}`}
         href={`https://portal.arbitrum.io?project=${project.id}`}
+        onClick={onClick}
       >
         {/* Normal project contents */}
         <div className="flex w-full flex-row gap-1">
diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
index 1352bc4a9b..cf0dad2e06 100644
--- a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -8,6 +8,7 @@ import { PORTAL_API_ENDPOINT } from '../../constants'
 import { ExternalLink } from './ExternalLink'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { getChainQueryParamForChain } from '../../types/ChainQueryParam'
+import { trackEvent } from '../../util/AnalyticsUtils'
 
 const fetchProjects = async (chainId: number) => {
   const isChainOrbit = isNetwork(chainId).isOrbitChain
@@ -65,7 +66,16 @@ export const ProjectsListing = () => {
       </h2>
       <div className="grid gap-3 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
         {projects.slice(0, 4).map(project => (
-          <Project key={project.id} project={project} />
+          <Project
+            key={project.id}
+            project={project}
+            onClick={() => {
+              trackEvent('Project Click', {
+                network: getNetworkName(destinationChain.id),
+                projectName: project.title
+              })
+            }}
+          />
         ))}
       </div>
       {projects.length > 4 && (
@@ -76,6 +86,11 @@ export const ProjectsListing = () => {
             borderColor: destinationChainUIcolor,
             backgroundColor: `${destinationChainUIcolor}66`
           }}
+          onClick={() => {
+            trackEvent('Show All Projects Click', {
+              network: getNetworkName(destinationChain.id)
+            })
+          }}
         >
           See all
           <ChevronRightIcon className="h-3 w-3" />
diff --git a/packages/arb-token-bridge-ui/src/util/AnalyticsUtils.ts b/packages/arb-token-bridge-ui/src/util/AnalyticsUtils.ts
index ea25eeaae7..5ae69c9953 100644
--- a/packages/arb-token-bridge-ui/src/util/AnalyticsUtils.ts
+++ b/packages/arb-token-bridge-ui/src/util/AnalyticsUtils.ts
@@ -99,6 +99,13 @@ type AnalyticsEventMap = {
     complete: boolean
     version: number
   }
+  'Project Click': {
+    network: string
+    projectName: string
+  }
+  'Show All Projects Click': {
+    network: string
+  }
 }
 
 type AnalyticsEvent = keyof AnalyticsEventMap

From fabba35a8d708160e5f48dc1b77b3d53d1abeb4f Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Mon, 7 Oct 2024 15:38:51 +0400
Subject: [PATCH 3/9] Dev: randomize list and hide projects on network switch

---
 .../src/components/TransferPanel/TransferPanel.tsx       | 7 ++++++-
 .../src/components/common/ProjectsListing.tsx            | 9 ++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
index cee82188a3..5a6e584298 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { useState, useMemo, useCallback } from 'react'
+import { useState, useMemo, useCallback, useEffect } from 'react'
 import Tippy from '@tippyjs/react'
 import { constants, utils } from 'ethers'
 import { useLatest } from 'react-use'
@@ -185,6 +185,11 @@ export function TransferPanel() {
 
   const isBatchTransfer = isBatchTransferSupported && Number(amount2) > 0
 
+  useEffect(() => {
+    // hide Project listing when networks are changed
+    setShowProjectsListing(false)
+  }, [childChain.id, parentChain.id])
+
   function closeWithResetTokenImportDialog() {
     setTokenQueryParam(undefined)
     setImportTokenModalStatus(ImportTokenModalStatus.CLOSED)
diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
index cf0dad2e06..b328799753 100644
--- a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -10,6 +10,10 @@ import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { getChainQueryParamForChain } from '../../types/ChainQueryParam'
 import { trackEvent } from '../../util/AnalyticsUtils'
 
+const shuffleArray = (array: PortalProject[]) => {
+  return array.sort(() => Math.random() - 0.5)
+}
+
 const fetchProjects = async (chainId: number) => {
   const isChainOrbit = isNetwork(chainId).isOrbitChain
   const chainSlug = getChainQueryParamForChain(chainId)
@@ -54,6 +58,9 @@ export const ProjectsListing = () => {
     return null
   }
 
+  // Shuffle projects and limit to 4
+  const randomizedProjects = shuffleArray(projects).slice(0, 4)
+
   return (
     <div
       className="flex flex-col gap-3 rounded-md border bg-dark p-4 text-white"
@@ -65,7 +72,7 @@ export const ProjectsListing = () => {
         Explore Apps on {getNetworkName(destinationChain.id)}
       </h2>
       <div className="grid gap-3 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
-        {projects.slice(0, 4).map(project => (
+        {randomizedProjects.map(project => (
           <Project
             key={project.id}
             project={project}

From b89c14f6757d63cd1981cecb1282c9ca03845239 Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Mon, 7 Oct 2024 16:36:53 +0400
Subject: [PATCH 4/9] Dev: updated endpoint

---
 packages/arb-token-bridge-ui/src/constants.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/constants.ts b/packages/arb-token-bridge-ui/src/constants.ts
index 3294a30e88..e7e14e1350 100644
--- a/packages/arb-token-bridge-ui/src/constants.ts
+++ b/packages/arb-token-bridge-ui/src/constants.ts
@@ -37,5 +37,4 @@ export const ETHER_TOKEN_LOGO = '/images/EthereumLogoRound.svg'
 
 export const ether = { name: 'Ether', symbol: 'ETH', decimals: 18 } as const
 
-export const PORTAL_API_ENDPOINT =
-  'https://arbitrum-portal-git-fs-609-enhance-portal-be7f96-offchain-labs.vercel.app'
+export const PORTAL_API_ENDPOINT = 'https://portal.arbitrum.io'

From 3b25131937440ffc35d9079a73247486d799ad18 Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Tue, 8 Oct 2024 15:47:53 +0400
Subject: [PATCH 5/9] Dev: review comments

---
 .../src/components/common/PortalProject.tsx   | 86 +++++++++----------
 .../src/components/common/ProjectsListing.tsx |  6 +-
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
index a3bc275be9..929bea4231 100644
--- a/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
@@ -19,55 +19,53 @@ export const Project = ({
   onClick?: () => void
 }) => {
   return (
-    <div className="h-full min-h-[150px] w-full overflow-hidden rounded-md border border-white/30 bg-dark hover:bg-dark-hover">
-      <ExternalLink
-        className="relative flex h-full w-full flex-col gap-2 p-4 hover:opacity-100"
-        aria-label={`${project.title}`}
-        href={`https://portal.arbitrum.io?project=${project.id}`}
-        onClick={onClick}
-      >
-        {/* Normal project contents */}
-        <div className="flex w-full flex-row gap-1">
-          {/* Logos */}
-          <div className="flex shrink-0 grow-0 flex-col gap-2 overflow-hidden bg-cover bg-center">
-            {/* Project logo */}
-            <div className="relative inline-block max-w-[70px] overflow-hidden rounded-md bg-white p-[1px]">
-              <div className="[&:hover_span]:opacity-100">
-                <Image
-                  alt={`${project.title} logo`}
-                  src={project.images.logoUrl}
-                  width={50}
-                  height={50}
-                  className="rounded-md"
-                />
-              </div>
+    <ExternalLink
+      className="relative flex h-full min-h-[150px] w-full flex-col gap-2 overflow-hidden rounded-md border border-white/30 bg-dark p-4 hover:bg-dark-hover hover:opacity-100"
+      aria-label={`${project.title}`}
+      href={`https://portal.arbitrum.io?project=${project.id}`}
+      onClick={onClick}
+    >
+      {/* Normal project contents */}
+      <div className="flex w-full flex-row gap-1">
+        {/* Logos */}
+        <div className="flex shrink-0 grow-0 flex-col gap-2 overflow-hidden bg-cover bg-center">
+          {/* Project logo */}
+          <div className="relative inline-block max-w-[70px] overflow-hidden rounded-md bg-white p-[1px]">
+            <div className="[&:hover_span]:opacity-100">
+              <Image
+                alt={`${project.title} logo`}
+                src={project.images.logoUrl}
+                width={50}
+                height={50}
+                className="rounded-md"
+              />
             </div>
           </div>
+        </div>
 
-          {/* Content */}
-          <div className="relative grow text-left">
-            <div className="flex flex-col gap-1 px-2">
-              <h5 className="relative flex items-center gap-2 text-left text-lg font-semibold leading-7">
-                {project.title}
-              </h5>
-              <p className="mb-2 line-clamp-3 text-sm opacity-70">
-                {project.description}
-              </p>
+        {/* Content */}
+        <div className="relative grow text-left">
+          <div className="flex flex-col gap-1 px-2">
+            <h5 className="relative flex items-center gap-2 text-left text-lg font-semibold leading-7">
+              {project.title}
+            </h5>
+            <p className="mb-2 line-clamp-3 text-sm opacity-70">
+              {project.description}
+            </p>
 
-              <p className="flex flex-wrap justify-start gap-2 text-center leading-6 text-gray-700">
-                {project.subcategories.slice(0, 2).map(subcategory => (
-                  <span
-                    key={subcategory.id}
-                    className="inline-flex items-start justify-start gap-2 break-words rounded bg-black px-1.5 py-0.5 text-xs font-normal text-white/60"
-                  >
-                    {subcategory.title.replaceAll('/', ' / ')}
-                  </span>
-                ))}
-              </p>
-            </div>
+            <p className="flex flex-wrap justify-start gap-2 text-center leading-6 text-gray-700">
+              {project.subcategories.slice(0, 2).map(subcategory => (
+                <span
+                  key={subcategory.id}
+                  className="inline-flex items-start justify-start gap-2 break-words rounded bg-black px-1.5 py-0.5 text-xs font-normal text-white/60"
+                >
+                  {subcategory.title.replaceAll('/', ' / ')}
+                </span>
+              ))}
+            </p>
           </div>
         </div>
-      </ExternalLink>
-    </div>
+      </div>
+    </ExternalLink>
   )
 }
diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
index b328799753..a69178878b 100644
--- a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -44,13 +44,13 @@ export const ProjectsListing = () => {
     data: projects,
     error,
     isLoading
-  } = useSWRImmutable(['fetchProjects', destinationChain.id], () =>
-    fetchProjects(destinationChain.id)
+  } = useSWRImmutable(
+    isDestinationChainOrbit ? [destinationChain.id, 'fetchProjects'] : null,
+    ([destinationChainId]) => fetchProjects(destinationChainId)
   )
 
   if (
     isLoading ||
-    !isDestinationChainOrbit ||
     !projects ||
     projects.length === 0 ||
     typeof error !== 'undefined'

From 41b76ca97b0e09cb2dbbe222b0a5bec863d1b8a4 Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Tue, 8 Oct 2024 16:45:23 +0400
Subject: [PATCH 6/9] Dev: handle test mode

---
 .../src/components/common/PortalProject.tsx   | 13 ++-
 .../src/components/common/ProjectsListing.tsx | 79 ++++++++++++++++---
 2 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
index 929bea4231..8d66eb57cb 100644
--- a/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import { ExternalLink } from './ExternalLink'
+import { PORTAL_API_ENDPOINT } from '../../constants'
 
 export type PortalProject = {
   chains: string[]
@@ -13,16 +14,22 @@ export type PortalProject = {
 
 export const Project = ({
   project,
-  onClick
+  onClick,
+  isTestnetMode
 }: {
   project: PortalProject
   onClick?: () => void
+  isTestnetMode: boolean
 }) => {
   return (
     <ExternalLink
       className="relative flex h-full min-h-[150px] w-full flex-col gap-2 overflow-hidden rounded-md border border-white/30 bg-dark p-4 hover:bg-dark-hover hover:opacity-100"
       aria-label={`${project.title}`}
-      href={`https://portal.arbitrum.io?project=${project.id}`}
+      href={
+        isTestnetMode
+          ? PORTAL_API_ENDPOINT
+          : `${PORTAL_API_ENDPOINT}?project=${project.id}`
+      }
       onClick={onClick}
     >
       {/* Normal project contents */}
@@ -30,7 +37,7 @@ export const Project = ({
         {/* Logos */}
         <div className="flex shrink-0 grow-0 flex-col gap-2 overflow-hidden bg-cover bg-center">
           {/* Project logo */}
-          <div className="relative inline-block max-w-[70px] overflow-hidden rounded-md bg-white p-[1px]">
+          <div className="relative flex h-[50px] w-[50px] items-center justify-center overflow-hidden rounded-md bg-white p-[1px]">
             <div className="[&:hover_span]:opacity-100">
               <Image
                 alt={`${project.title} logo`}
diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
index a69178878b..2e0d8e54a1 100644
--- a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import axios from 'axios'
 import useSWRImmutable from 'swr/immutable'
 import { ChevronRightIcon } from '@heroicons/react/24/outline'
@@ -9,12 +10,42 @@ import { ExternalLink } from './ExternalLink'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { getChainQueryParamForChain } from '../../types/ChainQueryParam'
 import { trackEvent } from '../../util/AnalyticsUtils'
+import { useIsTestnetMode } from '../../hooks/useIsTestnetMode'
+import { isTestingEnvironment } from '../../util/CommonUtils'
 
 const shuffleArray = (array: PortalProject[]) => {
   return array.sort(() => Math.random() - 0.5)
 }
 
-const fetchProjects = async (chainId: number) => {
+const generateTestnetProjects = (
+  chainId: number,
+  count: number
+): PortalProject[] => {
+  const {
+    network: { name: chainName, logo: chainImage }
+  } = getBridgeUiConfigForChain(chainId)
+
+  return [...Array(count)].map((_, key) => ({
+    chains: [chainName],
+    description: `This is a featured project deployed on ${chainName}.`,
+    id: `project_${key}`,
+    images: {
+      logoUrl: chainImage,
+      bannerUrl: chainImage
+    },
+    subcategories: [
+      { id: 'defi', title: 'Defi' },
+      { id: 'nfts', title: 'NFTs' }
+    ],
+    title: `Featured Project ${key + 1}`,
+    url: PORTAL_API_ENDPOINT
+  }))
+}
+
+const fetchProjects = async (
+  chainId: number,
+  isTestnetMode: boolean
+): Promise<PortalProject[]> => {
   const isChainOrbit = isNetwork(chainId).isOrbitChain
   const chainSlug = getChainQueryParamForChain(chainId)
 
@@ -22,22 +53,29 @@ const fetchProjects = async (chainId: number) => {
     return []
   }
 
-  const response = await axios.get(
-    `${PORTAL_API_ENDPOINT}/api/projects?chains=${chainSlug}`
-  )
+  if (isTestnetMode) {
+    return isTestingEnvironment ? generateTestnetProjects(chainId, 6) : [] // don't show any test projects in production
+  }
 
-  return response.data as PortalProject[]
+  try {
+    const response = await axios.get(
+      `${PORTAL_API_ENDPOINT}/api/projects?chains=${chainSlug}`
+    )
+    return response.data as PortalProject[]
+  } catch (error) {
+    console.warn('Error fetching projects:', error)
+    return []
+  }
 }
 
 export const ProjectsListing = () => {
   const [{ destinationChain }] = useNetworks()
+  const [isTestnetMode] = useIsTestnetMode()
 
   const isDestinationChainOrbit = isNetwork(destinationChain.id).isOrbitChain
-
   const { color: destinationChainUIcolor } = getBridgeUiConfigForChain(
     destinationChain.id
   )
-
   const destinationChainSlug = getChainQueryParamForChain(destinationChain.id)
 
   const {
@@ -45,8 +83,17 @@ export const ProjectsListing = () => {
     error,
     isLoading
   } = useSWRImmutable(
-    isDestinationChainOrbit ? [destinationChain.id, 'fetchProjects'] : null,
-    ([destinationChainId]) => fetchProjects(destinationChainId)
+    isDestinationChainOrbit
+      ? [destinationChain.id, isTestnetMode, 'fetchProjects']
+      : null,
+    ([destinationChainId, isTestnetMode]) =>
+      fetchProjects(destinationChainId, isTestnetMode)
+  )
+
+  // Shuffle projects and limit to 4
+  const randomizedProjects = useMemo(
+    () => (projects ? shuffleArray(projects).slice(0, 4) : []),
+    [projects]
   )
 
   if (
@@ -58,9 +105,6 @@ export const ProjectsListing = () => {
     return null
   }
 
-  // Shuffle projects and limit to 4
-  const randomizedProjects = shuffleArray(projects).slice(0, 4)
-
   return (
     <div
       className="flex flex-col gap-3 rounded-md border bg-dark p-4 text-white"
@@ -76,7 +120,10 @@ export const ProjectsListing = () => {
           <Project
             key={project.id}
             project={project}
+            isTestnetMode={isTestnetMode}
             onClick={() => {
+              if (isTestnetMode) return
+
               trackEvent('Project Click', {
                 network: getNetworkName(destinationChain.id),
                 projectName: project.title
@@ -87,13 +134,19 @@ export const ProjectsListing = () => {
       </div>
       {projects.length > 4 && (
         <ExternalLink
-          href={`${PORTAL_API_ENDPOINT}/projects?chains=${destinationChainSlug}`}
+          href={
+            isTestnetMode
+              ? PORTAL_API_ENDPOINT
+              : `${PORTAL_API_ENDPOINT}/projects?chains=${destinationChainSlug}`
+          }
           className="flex w-min flex-nowrap items-center gap-2 self-end whitespace-nowrap rounded-sm border p-2 text-sm"
           style={{
             borderColor: destinationChainUIcolor,
             backgroundColor: `${destinationChainUIcolor}66`
           }}
           onClick={() => {
+            if (isTestnetMode) return
+
             trackEvent('Show All Projects Click', {
               network: getNetworkName(destinationChain.id)
             })

From bf03da2bf46f6aa6745d906209a44117d7199479 Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Tue, 8 Oct 2024 17:41:44 +0400
Subject: [PATCH 7/9] dev: added doscaimer

---
 .../src/components/common/ProjectsListing.tsx       | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
index 2e0d8e54a1..24169687dc 100644
--- a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -107,7 +107,7 @@ export const ProjectsListing = () => {
 
   return (
     <div
-      className="flex flex-col gap-3 rounded-md border bg-dark p-4 text-white"
+      className="flex flex-col gap-3 border-y bg-dark p-4 text-white sm:rounded-md sm:border"
       style={{
         borderColor: destinationChainUIcolor
       }}
@@ -115,6 +115,15 @@ export const ProjectsListing = () => {
       <h2 className="text-lg">
         Explore Apps on {getNetworkName(destinationChain.id)}
       </h2>
+
+      {isTestnetMode && (
+        <div className="text-xs text-white/70">
+          <b>Development-mode only</b>. These are placeholder projects for
+          showing how this feature works in non-production mode. Real projects
+          are fetched from the Portal for mainnet Orbit chains.
+        </div>
+      )}
+
       <div className="grid gap-3 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
         {randomizedProjects.map(project => (
           <Project
@@ -139,7 +148,7 @@ export const ProjectsListing = () => {
               ? PORTAL_API_ENDPOINT
               : `${PORTAL_API_ENDPOINT}/projects?chains=${destinationChainSlug}`
           }
-          className="flex w-min flex-nowrap items-center gap-2 self-end whitespace-nowrap rounded-sm border p-2 text-sm"
+          className="flex w-min flex-nowrap items-center gap-2 self-end whitespace-nowrap rounded-md border p-2 text-sm"
           style={{
             borderColor: destinationChainUIcolor,
             backgroundColor: `${destinationChainUIcolor}66`

From 6b6146c43ade3efa1b9b0552ee70bbc2cf613b2a Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Wed, 9 Oct 2024 16:32:28 +0400
Subject: [PATCH 8/9] Dev: add cors headers

---
 .../src/components/common/ProjectsListing.tsx              | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
index 24169687dc..dc2da82c76 100644
--- a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -59,7 +59,12 @@ const fetchProjects = async (
 
   try {
     const response = await axios.get(
-      `${PORTAL_API_ENDPOINT}/api/projects?chains=${chainSlug}`
+      `${PORTAL_API_ENDPOINT}/api/projects?chains=${chainSlug}`,
+      {
+        headers: {
+          'Access-Control-Allow-Origin': '*'
+        }
+      }
     )
     return response.data as PortalProject[]
   } catch (error) {

From 44e1af486cc7a7f1bf847bfb6a56d3554b4e6e8d Mon Sep 17 00:00:00 2001
From: dewanshparashar <dewanshparashar@yahoo.in>
Date: Thu, 10 Oct 2024 19:07:22 +0400
Subject: [PATCH 9/9] Dev: remove access control header

---
 .../src/components/common/ProjectsListing.tsx              | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
index dc2da82c76..24169687dc 100644
--- a/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx
@@ -59,12 +59,7 @@ const fetchProjects = async (
 
   try {
     const response = await axios.get(
-      `${PORTAL_API_ENDPOINT}/api/projects?chains=${chainSlug}`,
-      {
-        headers: {
-          'Access-Control-Allow-Origin': '*'
-        }
-      }
+      `${PORTAL_API_ENDPOINT}/api/projects?chains=${chainSlug}`
     )
     return response.data as PortalProject[]
   } catch (error) {