feat: add more onramp services #70

fionnachan · 2025-10-02T12:25:14Z

Summary

Steps to test

vercel · 2025-10-02T12:25:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
arbitrum-portal	Ready	Preview	Oct 17, 2025 3:44pm

chrstph-dvx · 2025-10-08T10:00:55Z

packages/app/src/app/(embed)/bridge/embed/buy/[slug]/page.tsx

+import EmbedPageWrapper from '../../EmbedPageWrapper';
+
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };


Note: once we migrate to turbopack, this can reimport SearchParamsProps type (it need to be awaited)

chrstph-dvx · 2025-10-08T17:20:34Z

packages/app/src/app/(with-sidebar)/bridge/buy/[slug]/page.tsx

+  /**
+   * This code is run on every query param change,
+   * we don't want to sanitize every query param change.
+   * It should only be executed once per user per session.
+   */
+  if (searchParams.sanitized !== 'true') {
+    addOrbitChainsToArbitrumSDK();
+    await sanitizeAndRedirect(searchParams, `${PathnameEnum.BUY}/${params.slug}`);
+  }
+
+  return (
+    <BridgePageWrapper searchParams={searchParams} redirectPath={`/bridge/buy/${params.slug}`} />
+  );


We can reuse bridgePageUtils no?

chrstph-dvx · 2025-10-08T17:22:47Z

packages/arb-token-bridge-ui/src/components/BuyPanel/BackButton.tsx

This is not needed for now because parent are already using use client, but I would explicitely say that it requires it here

chrstph-dvx · 2025-10-08T17:38:48Z

packages/arb-token-bridge-ui/src/components/BuyPanel/BuyPanel.tsx

+    }
+    return formatUSD(ethToUSD(Number(utils.formatEther(BigNumber.from(balanceState.value)))));
+  }, [balanceState, ethToUSD, showPriceInUsd]);
+  const isBalanceLessThan15Usd = Number(balanceInUsd?.replaceAll(/[$<]/g, '')) < 15;


Can we compare against balanceState instead?

We want to do <15 USD so it has to be the value in USD, rather than ETH balance value

We can compare to ethToUSD(...), we would be able to compare without replacing anything

oh perfect thanks

chrstph-dvx · 2025-10-08T17:41:27Z

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx


  if (embedMode) {
-    if (pathname === PathnameEnum.EMBED_BUY && showBuyPanel) {
+    if (pathname.startsWith(PathnameEnum.EMBED_BUY) && showBuyPanel) {


We have this condition in few places, maybe we can abstract that away? (only the first part)

chrstph-dvx · 2025-10-08T17:59:47Z

packages/arb-token-bridge-ui/src/components/BuyPanel/LinkoutOnrampPanel.tsx

+
+export function LinkoutOnrampPanel({ serviceSlug }: { serviceSlug: string }) {
+  const { embedMode } = useMode();
+  const service = onrampServices.find((s) => s.slug === serviceSlug);


NIT/FYI: When we have array of something we want to map and at the same time access. It's usually easier to have 2 objects:

One Map<id, services>

One array of only ids

chrstph-dvx · 2025-10-08T20:00:03Z

packages/arb-token-bridge-ui/src/components/BuyPanel/Homepage.tsx

+        className={twMerge(
+          'relative flex w-full flex-col items-center justify-center rounded-md bg-gray-9 p-4 overflow-hidden',
+        )}
+        onClick={() => {}}


why do we have an empty onClick?

we use the Link anchor to navigate, but it is a button

Then we can remove the onClick here

dewanshparashar · 2025-10-09T10:41:06Z

packages/arb-token-bridge-ui/src/components/BuyPanel/Homepage.tsx

+
+  const allOnrampOnClick = useCallback(() => {
+    router.push(
+      '/projects?chains=arbitrum-one_arbitrum-nova_apechain_cheese_degen_ebi-xyz_pop-apex_reya_sanko_xai_xchain&subcategories=fiat-on-ramp',


Chains should not be hardcoded here. Let's simply redirect to the correct subcategory - https://portal.arbitrum.io/projects?subcategories=fiat-on-ramp

I was given this link by product, let me check with them if they are ok with all chains

dewanshparashar · 2025-10-09T10:46:45Z

packages/arb-token-bridge-ui/src/components/BuyPanel/BuyPanel.tsx

    <div
      className={twMerge(
-        'w-full overflow-hidden rounded-lg pb-8 text-white sm:max-w-[600px]',
+        'bg-gray-1 rounded-md border border-white/30 px-6 py-7 pb-8 text-white w-full sm:max-w-[600px] min-h-[600px] flex flex-col',


We shouldn't hardcode the bg-color here especially in embed mode. It must take on the color (or it's variant) passed on by the theme.

And I think same with the tile background colors. I feel they should be translucent so that they derive their colors from background's theme.

Else we have a primary button theme as well but I dont think that should be used here since it would conflict with the icons' themes.

thanks for flagging, this wasn't considered in the design at all, so i'll relay that to design team and let them figure it out and apply the changes when they provide them

dewanshparashar · 2025-10-09T10:47:59Z

packages/arb-token-bridge-ui/src/components/BuyPanel/Homepage.tsx

+        className={twMerge(
+          'relative flex w-full flex-col items-center justify-center rounded-md bg-gray-9 p-4 overflow-hidden',
+        )}
+        onClick={() => {}}


Let's track all the onramp clicks in posthog.

packages/arb-token-bridge-ui/tailwind.config.js

dewanshparashar · 2025-10-09T10:53:10Z

packages/arb-token-bridge-ui/src/components/BuyPanel/LinkoutOnrampPanel.tsx

+  return (
+    <div
+      className={twMerge(
+        'relative bg-gray-1 rounded-md border border-gray-8 px-5 pt-14  pb-6 text-white -mx-4 md:mx-0 w-[calc(100%_+_40px)] md:w-full',


Same comment here - the color should not be hardcoded, atleast in embed mode - but it should be translucent so that it derives from the widget-bg-color, or should be a variant of widget-bg-color if we want it to be opaque.

flagged to design

fionnachan changed the title ~~move moonpay into its own file~~ feat: add more onramp services Oct 2, 2025

fionnachan mentioned this pull request Oct 2, 2025

feat: add more onramp services #29

Closed

vercel bot had a problem deploying to Preview October 2, 2025 12:27 Failure

fionnachan force-pushed the onramp branch from 42ce471 to d2fc7d0 Compare October 2, 2025 16:45

vercel bot deployed to Preview October 2, 2025 16:49 View deployment

fionnachan force-pushed the onramp branch from d2fc7d0 to 32851d0 Compare October 3, 2025 10:47

vercel bot deployed to Preview October 3, 2025 10:55 View deployment

fionnachan force-pushed the onramp branch from 32851d0 to facab1a Compare October 3, 2025 11:29

vercel bot deployed to Preview October 3, 2025 11:36 View deployment

fionnachan force-pushed the onramp branch from facab1a to 0b07e10 Compare October 3, 2025 13:19

vercel bot deployed to Preview October 3, 2025 13:30 View deployment

fionnachan force-pushed the buy-route branch from 13d8842 to 508372a Compare October 3, 2025 17:19

vercel bot deployed to Preview October 3, 2025 17:22 View deployment

fionnachan force-pushed the onramp branch from 7184c28 to 7b53285 Compare October 3, 2025 17:46

vercel bot deployed to Preview October 3, 2025 17:50 View deployment

Base automatically changed from buy-route to master October 6, 2025 09:54

fionnachan force-pushed the onramp branch from 7b53285 to dba0730 Compare October 6, 2025 10:27

fionnachan marked this pull request as draft October 6, 2025 10:28

vercel bot deployed to Preview October 6, 2025 10:32 View deployment

vercel bot deployed to Preview October 6, 2025 18:51 View deployment

vercel bot deployed to Preview October 7, 2025 08:40 View deployment

fionnachan marked this pull request as ready for review October 7, 2025 08:45

vercel bot deployed to Preview October 7, 2025 08:52 View deployment

fionnachan requested review from chrstph-dvx and dewanshparashar October 7, 2025 11:07

vercel bot deployed to Preview October 8, 2025 13:37 View deployment

chrstph-dvx reviewed Oct 8, 2025

View reviewed changes

dewanshparashar requested changes Oct 9, 2025

View reviewed changes

vercel bot deployed to Preview October 9, 2025 11:59 View deployment

vercel bot deployed to Preview October 10, 2025 13:28 View deployment

fionnachan force-pushed the onramp branch from 172a0e4 to c44f24d Compare October 16, 2025 20:40

fionnachan requested review from chrstph-dvx and dewanshparashar October 16, 2025 20:41

vercel bot deployed to Preview October 16, 2025 20:46 View deployment

vercel bot deployed to Preview October 17, 2025 14:04 View deployment

fionnachan added 22 commits October 17, 2025 16:39

move moonpay into its own file

dd44f0a

add buy panel home page

0657257

services list

4c5f441

add all onramp tiles

080c2c6

fix import issue

71d52e4

wip

60bda28

fix merge conflicts

2a3c6ed

make moonpay panel work

aa7ef36

add details screen

8c039b8

widget buy details page

e000bdb

add search query params to back button link

b793454

low balance warning

8532832

make widget onramp panels work

d23238c

cleanup

0f5a669

review comments

cd9e6dc

add buy now button

5c03052

clean up

e6ff41a

fix format

dd372cf

onramp update

7da2a5d

onramp widget colours

7185d48

onramp widget colours

5d6e2fb

widget styles

b171a94

fionnachan force-pushed the onramp branch from ed572c8 to b171a94 Compare October 17, 2025 15:39

vercel bot deployed to Preview October 17, 2025 15:44 View deployment

feat: add more onramp services #70

Are you sure you want to change the base?

feat: add more onramp services #70

Uh oh!

Conversation

fionnachan commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Steps to test

Uh oh!

vercel bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fionnachan commented Oct 2, 2025 •

edited

Loading

vercel bot commented Oct 2, 2025 •

edited

Loading