add third party bridges

apps/bridge/src/components/WithdrawContainer/BridgeProviderDropdown.tsx

@@ -0,0 +1,91 @@
+import { useChainEnv } from 'apps/bridge/src/utils/hooks/useChainEnv';
+import { useCallback, useState } from 'react';
+
+const chainEnvToBridgeTime = {
+  mainnet: 'Takes about 7 days',
+  testnet: 'Takes about 20 minutes',
+};
+
+type BridgeProviderDropdownProps = {
+  bridgeProvider: 'native' | 'thirdParty';
+  setBridgeProvider: (bridgeProvider: 'native' | 'thirdParty') => void;
+};
+
+export function BridgeProviderDropdown({
+  bridgeProvider,
+  setBridgeProvider,
+}: BridgeProviderDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const chainEnv = useChainEnv();
+
+  const handleToggleDropdown = useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+
+  const handleSelectNative = useCallback(() => {
+    setBridgeProvider('native');
+    setIsOpen(false);
+  }, [setBridgeProvider]);
+
+  const handleSelectThirdParty = useCallback(() => {
+    setBridgeProvider('thirdParty');
+    setIsOpen(false);
+  }, [setBridgeProvider]);
+
+  return (
+    <div className="flex w-full flex-col space-y-2 px-4 pt-4">
+      <span className="pb-4 font-mono uppercase text-white">Method</span>
+      <div className="relative w-full">
+        <div>
+          <button
+            type="button"
+            onClick={handleToggleDropdown}
+            className={`flex w-full flex-row items-center justify-between rounded border border-stone-400 bg-black p-4 text-lg text-stone-400 ${
+              isOpen ? 'rounded-b-none' : ''
+            }`}
+          >
+            {bridgeProvider === 'native' ? 'Official Base bridge' : 'Third-party bridge'}
+            <svg className="text-gray-400 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="absolute z-10 flex w-full self-center">
+            <div className="flex w-full flex-col items-start divide-y divide-stone-400 rounded rounded-t-none border border-t-0 border-stone-400 bg-black">
+              <button
+                onClick={handleSelectThirdParty}
+                type="button"
+                className={`block w-full p-4 text-left ${
+                  bridgeProvider === 'thirdParty'
+                    ? 'bg-cds-background-gray-5 text-stone-400'
+                    : 'text-white'
+                }`}
+              >
+                Third-party bridge
+              </button>
+              <button
+                onClick={handleSelectNative}
+                type="button"
+                className={`block w-full p-4 text-left ${
+                  bridgeProvider === 'native'
+                    ? 'bg-cds-background-gray-5 text-stone-400'
+                    : 'text-white'
+                }`}
+              >
+                Official Base bridge
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+      <span className="text-stone-600">
+        {bridgeProvider === 'native' ? chainEnvToBridgeTime[chainEnv] : 'Takes about 20 minutes'}
+      </span>
+    </div>
+  );
+}

apps/bridge/src/components/WithdrawContainer/ThirdPartyBridges.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+
+const THIRD_PARTY_BRIDGES = [
+  { name: 'Hop Exchange', logo: '/icons/bridges/hop_protocol.webp', url: 'https://hop.exchange/' },
+  { name: 'Synapse', logo: '/icons/bridges/synapse.webp', url: 'https://www.synapseprotocol.com' },
+  { name: 'Socket Tech', logo: '/icons/bridges/socket.webp', url: 'https://socket.tech/' },
+];
+
+type ThirdPartyBridgeProps = {
+  name: string;
+  logo: string;
+  url: string;
+};
+
+function ThirdPartyBridge({ name, logo, url }: ThirdPartyBridgeProps) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+      className="flex h-24 w-32 flex-col items-center justify-center rounded border border-stone-400 sm:w-36"
+    >
+      <Image width={36} height={36} src={logo} alt={name} className="rounded-full" />
+      <span className="pt-4 text-center text-white">{name}</span>
+    </a>
+  );
+}
+
+export function ThirdPartyBridges() {
+  return (
+    <div className="flex w-full max-w-xl grow flex-col justify-center space-y-4 px-4 pt-8">
+      <span className="font-mono uppercase text-white">Choose Third-Party Bridge</span>
+      <div className="grid grid-cols-3 place-content-center gap-6">
+        {THIRD_PARTY_BRIDGES.map((bridge) => (
+          <ThirdPartyBridge
+            key={bridge.name}
+            name={bridge.name}
+            logo={bridge.logo}
+            url={bridge.url}
+          />
+        ))}
+      </div>
+      <a
+        href="https://base.org/ecosystem?tag=bridge"
+        target="_blank"
+        rel="noreferrer"
+        className="flex w-full items-center justify-center border border-white py-4 font-mono text-lg uppercase text-white"
+      >
+        Show More
+      </a>
+      <span className="text-stone-600">
+        These are independent service providers that Base is linking to for your convenience. Base
+        has no responsibility for their operation.
+      </span>
+    </div>
+  );
+}

apps/bridge/src/components/WithdrawContainer/WithdrawContainer.tsx

@@ -31,6 +31,8 @@ import { useIsContractApproved } from 'apps/bridge/src/utils/hooks/useIsContract
 import { useApproveContract } from 'apps/bridge/src/utils/hooks/useApproveContract';
 import { BridgeButton } from 'apps/bridge/src/components/BridgeButton/BridgeButton';
 import { parseUnits } from 'viem';
+import { BridgeProviderDropdown } from 'apps/bridge/src/components/WithdrawContainer/BridgeProviderDropdown';
+import { ThirdPartyBridges } from 'apps/bridge/src/components/WithdrawContainer/ThirdPartyBridges';
 
 const activeAssets = getWithdrawalAssetsForChainEnv();
 
@@ -47,6 +49,7 @@ export function WithdrawContainer() {
   const [selectedAsset, setSelectedAsset] = useState<Asset>(activeAssets[0]);
   const publicClient = usePublicClient({ chainId });
   const { switchNetwork } = useSwitchNetwork();
+  const [bridgeProvider, setBridgeProvider] = useState<'native' | 'thirdParty'>('thirdParty');
 
   useEffect(() => {
     switchNetwork?.(chainId);
@@ -294,44 +297,57 @@ export function WithdrawContainer() {
 
   return (
     <div className="flex-col lg:flex lg:h-full lg:flex-row">
-      <div className="grow">
-        <WithdrawModal
-          isOpen={isWithdrawModalOpen}
-          onClose={handleCloseWithdrawModal}
-          L2ApproveTxHash={L2ApproveTxHash}
-          L2WithdrawTxHash={L2WithdrawTxHash}
-          isApprovalTx={isApprovalTx}
-          protocol={selectedAsset.protocol}
+      <div className="flex grow flex-col">
+        <BridgeProviderDropdown
+          bridgeProvider={bridgeProvider}
+          setBridgeProvider={setBridgeProvider}
         />
-        <BridgeInput
-          inputNetwork={getL2NetworkForChainEnv()}
-          isWithdraw
-          outputNetwork={getL1NetworkForChainEnv()}
-          balance={L2Balance?.formatted ?? ''}
-          amount={withdrawAmount}
-          setAmount={setWithdrawAmount}
-          assets={activeAssets}
-          selectedAsset={selectedAsset}
-          setSelectedAsset={setSelectedAsset}
-        >
-          {button}
-        </BridgeInput>
-
-        {isSmartContractWallet && (
-          <BridgeToInput bridgeTo={withdrawTo} setBridgeTo={setWithdrawTo} action="withdraw" />
+        {bridgeProvider === 'thirdParty' && (
+          <div className="flex grow items-start">
+            <ThirdPartyBridges />
+          </div>
         )}
+        {bridgeProvider === 'native' && (
+          <div className="grow">
+            <WithdrawModal
+              isOpen={isWithdrawModalOpen}
+              onClose={handleCloseWithdrawModal}
+              L2ApproveTxHash={L2ApproveTxHash}
+              L2WithdrawTxHash={L2WithdrawTxHash}
+              isApprovalTx={isApprovalTx}
+              protocol={selectedAsset.protocol}
+            />
+            <BridgeInput
+              inputNetwork={getL2NetworkForChainEnv()}
+              isWithdraw
+              outputNetwork={getL1NetworkForChainEnv()}
+              balance={L2Balance?.formatted ?? ''}
+              amount={withdrawAmount}
+              setAmount={setWithdrawAmount}
+              assets={activeAssets}
+              selectedAsset={selectedAsset}
+              setSelectedAsset={setSelectedAsset}
+            >
+              {button}
+            </BridgeInput>
+
+            {isSmartContractWallet && (
+              <BridgeToInput bridgeTo={withdrawTo} setBridgeTo={setWithdrawTo} action="withdraw" />
+            )}
 
-        <div className="border-t border-sidebar-border">
-          <TransactionSummary
-            selectedAsset={selectedAsset}
-            header="TRANSACTION SUMMARY"
-            balance={parseFloat(withdrawAmount ?? '0').toFixed(6) ?? ''}
-            outputNetwork={getL1NetworkForChainEnv()}
-            chainId={publicRuntimeConfig.l2ChainID}
-            isDeposit={false}
-          />
-          <div className="w-full px-6 py-12 sm:hidden">{button}</div>
-        </div>
+            <div className="border-t border-sidebar-border">
+              <TransactionSummary
+                selectedAsset={selectedAsset}
+                header="TRANSACTION SUMMARY"
+                balance={parseFloat(withdrawAmount ?? '0').toFixed(6) ?? ''}
+                outputNetwork={getL1NetworkForChainEnv()}
+                chainId={publicRuntimeConfig.l2ChainID}
+                isDeposit={false}
+              />
+              <div className="w-full px-6 py-12 sm:hidden">{button}</div>
+            </div>
+          </div>
+        )}
       </div>
       <FaqSidebar />
     </div>