-
-
-
- );
-}
+import { useETHPrice } from '../../hooks/useETHPrice';
+import { useMode } from '../../hooks/useMode';
+import { useNativeCurrency } from '../../hooks/useNativeCurrency';
+import { ChainId } from '../../types/ChainId';
+import { formatAmount, formatUSD } from '../../util/NumberUtils';
+import { isOnrampEnabled, isOnrampServiceEnabled } from '../../util/featureFlag';
+import { getNetworkName } from '../../util/networks';
+import { TokenLogoFallback } from '../TransferPanel/TokenInfo';
+import { Button } from '../common/Button';
+import { Dialog } from '../common/Dialog';
+import { DialogProps, DialogWrapper, useDialog2 } from '../common/Dialog2';
+import { NetworkImage } from '../common/NetworkImage';
+import { NetworksPanel } from '../common/NetworkSelectionContainer';
+import { SafeImage } from '../common/SafeImage';
+import { SearchPanel } from '../common/SearchPanel/SearchPanel';
+import { Loader } from '../common/atoms/Loader';
+import { Homepage } from './Homepage';
+import { LinkoutOnrampPanel } from './LinkoutOnrampPanel';
+import { MoonPayPanel, MoonPaySkeleton } from './MoonPayPanel';
+import { onrampServices } from './utils';
const MoonPayProvider = dynamic(
() => import('@moonpay/moonpay-react').then((mod) => mod.MoonPayProvider),
@@ -179,7 +138,6 @@ function BuyPanelNetworkButton({
);
}
-/* eslint-disable @typescript-eslint/no-unused-vars */
const BalanceWrapper = memo(function BalanceWrapper() {
const { address, isConnected } = useAccount();
const { ethToUSD } = useETHPrice();
@@ -192,6 +150,13 @@ const BalanceWrapper = memo(function BalanceWrapper() {
error: balanceError,
} = useBalance({ chainId: selectedChainId, address });
const showPriceInUsd = nativeCurrency.symbol.toLowerCase() === 'eth';
+ const balanceInUsd = useMemo(() => {
+ if (!balanceState || !showPriceInUsd) {
+ return null;
+ }
+ return ethToUSD(Number(utils.formatEther(BigNumber.from(balanceState.value))));
+ }, [balanceState, ethToUSD, showPriceInUsd]);
+ const isBalanceLessThan15Usd = Number(balanceInUsd) < 15;
const [dialogProps, openDialog] = useDialog2();
const openBuyPanelNetworkSelectionDialog = () => {
openDialog('buy_panel_network_selection');
@@ -228,58 +193,52 @@ const BalanceWrapper = memo(function BalanceWrapper() {
{!isLoadingBalance && (balanceError || typeof balanceState === 'undefined') && (
Failed to load balance.
)}
- {balanceState && showPriceInUsd && (
-
- ({formatUSD(ethToUSD(Number(utils.formatEther(BigNumber.from(balanceState.value)))))})
+ {balanceInUsd !== null && balanceInUsd !== 0 && (
+
+ {balanceInUsd} {formatUSD(balanceInUsd)}
)}
+ {isBalanceLessThan15Usd && (
+
-
- MoonPay
-- PayPal, Debit Card, Apple Pay -
-div]:!m-0 [&>div]:!w-full [&>div]:!border-x-0 [&>div]:!border-none [&>div]:!p-0 sm:[&>div]:!rounded sm:[&>div]:!border-x',
- '[&_iframe]:rounded-xl',
- )}
- >
- {children}
-
- - On-Ramps are not directly endorsed by Arbitrum. Please use at your own risk. -
-
+
+ On-Ramps are not endorsed by Arbitrum. Please use at your own risk. +
); -}); +} + +function OnrampServicePanel() { + const pathname = usePathname(); + const onrampService = pathname.split('/').pop(); + const allOnrampServices = onrampServices.map((service) => service.slug); + + switch (onrampService) { + case 'moonpay': + if (!isMoonPayEnabled) { + return null; + } + return
+
-
+
+
);
}
diff --git a/packages/arb-token-bridge-ui/src/components/BuyPanel/Homepage.tsx b/packages/arb-token-bridge-ui/src/components/BuyPanel/Homepage.tsx
new file mode 100644
index 000000000..7c59fe488
--- /dev/null
+++ b/packages/arb-token-bridge-ui/src/components/BuyPanel/Homepage.tsx
@@ -0,0 +1,100 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useCallback } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { trackEvent } from '@/bridge/util/AnalyticsUtils';
+import MoonPay from '@/images/onramp/moonpay.svg';
+
+import { Button } from '../common/Button';
+import { onrampServices } from './utils';
+
+function OnrampServiceTile({ name, logo, slug }: { name: string; logo: string; slug: string }) {
+ const pathname = usePathname();
+ const searchParams = useSearchParams();
+
+ return (
+ {
+ trackEvent('Onramp Service Click', { service: name });
+ }}
+ >
+
+
+ );
+}
+
+function MoonPayTile() {
+ const pathname = usePathname();
+ const searchParams = useSearchParams();
+
+ return (
+ {
+ trackEvent('Onramp Service Click', { service: 'MoonPay' });
+ }}
+ >
+
+
+ );
+}
+
+export function Homepage() {
+ const router = useRouter();
+
+ const allOnrampOnClick = useCallback(() => {
+ router.push('/projects?subcategories=fiat-on-ramp');
+ }, [router]);
+
+ return (
+
+
+ );
+}
diff --git a/packages/arb-token-bridge-ui/src/components/BuyPanel/LinkoutOnrampPanel.tsx b/packages/arb-token-bridge-ui/src/components/BuyPanel/LinkoutOnrampPanel.tsx
new file mode 100644
index 000000000..d3da86cf6
--- /dev/null
+++ b/packages/arb-token-bridge-ui/src/components/BuyPanel/LinkoutOnrampPanel.tsx
@@ -0,0 +1,54 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+
+import { useMode } from '@/bridge/hooks/useMode';
+
+import { Button } from '../common/Button';
+import { ExternalLink } from '../common/ExternalLink';
+import { BackButton } from './BackButton';
+import { onrampServices } from './utils';
+
+export function LinkoutOnrampPanel({ serviceSlug }: { serviceSlug: string }) {
+ const { embedMode } = useMode();
+ const service = onrampServices.find((s) => s.slug === serviceSlug);
+
+ if (!service) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/arb-token-bridge-ui/src/components/BuyPanel/MoonPayPanel.tsx b/packages/arb-token-bridge-ui/src/components/BuyPanel/MoonPayPanel.tsx
new file mode 100644
index 000000000..a31c68c23
--- /dev/null
+++ b/packages/arb-token-bridge-ui/src/components/BuyPanel/MoonPayPanel.tsx
@@ -0,0 +1,90 @@
+import dynamic from 'next/dynamic';
+import { PropsWithChildren, memo, useCallback } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useAccount } from 'wagmi';
+
+import { useMode } from '@/bridge/hooks/useMode';
+
+import { getAPIBaseUrl } from '../../util';
+import { isOnrampServiceEnabled } from '../../util/featureFlag';
+import { SafeImage } from '../common/SafeImage';
+import { BackButton } from './BackButton';
+
+export function MoonPaySkeleton({ children }: PropsWithChildren) {
+ const { embedMode } = useMode();
+
+ return (
+
+
+
+
+
+
+ {service.name}
++ Buy and transfer instantly using your debit card, bank account with Thirdweb{' '} + {service.name}. +
+
+
+
+ );
+}
+
+export const MoonPayPanel = memo(function MoonPayPanel() {
+ const { address } = useAccount();
+ const showMoonPay = isOnrampServiceEnabled('moonpay');
+
+ const handleGetSignature = useCallback(async (widgetUrl: string): Promise
+
+ MoonPay
++ PayPal, Debit Card, Apple Pay +
+div]:!m-0 [&>div]:!w-full [&>div]:!border-x-0 [&>div]:!border-none [&>div]:!p-0 sm:[&>div]:!rounded sm:[&>div]:!border-x',
+ '[&_iframe]:rounded-xl',
+ )}
+ >
+ {children}
+
+