feat: show projects in custom orbit pages

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 [
       {

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'
@@ -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,8 +181,15 @@ export function TransferPanel() {
 
   const { destinationAddressError } = useDestinationAddressError()
 
+  const [showProjectsListing, setShowProjectsListing] = useState(false)
+
   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)
@@ -865,6 +873,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 +1057,8 @@ export function TransferPanel() {
           </Tippy>
         )}
       </div>
+
+      {showProjectsListing && <ProjectsListing />}
     </>
   )
 }

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'
 

packages/arb-token-bridge-ui/src/components/common/PortalProject.tsx

@@ -0,0 +1,73 @@
+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,
+  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">
+          {/* 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>
+  )
+}

packages/arb-token-bridge-ui/src/components/common/ProjectsListing.tsx

@@ -0,0 +1,108 @@
+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'
+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)
+
+  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
+  }
+
+  // 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"
+      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">
+        {randomizedProjects.map(project => (
+          <Project
+            key={project.id}
+            project={project}
+            onClick={() => {
+              trackEvent('Project Click', {
+                network: getNetworkName(destinationChain.id),
+                projectName: project.title
+              })
+            }}
+          />
+        ))}
+      </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`
+          }}
+          onClick={() => {
+            trackEvent('Show All Projects Click', {
+              network: getNetworkName(destinationChain.id)
+            })
+          }}
+        >
+          See all
+          <ChevronRightIcon className="h-3 w-3" />
+        </ExternalLink>
+      )}
+    </div>
+  )
+}

packages/arb-token-bridge-ui/src/constants.ts

@@ -36,3 +36,5 @@ 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://portal.arbitrum.io'

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

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',