[MNY-223] Update Bridge Page (#8138)

--- ## PR-Codex overview This PR introduces enhancements and new features to the `dashboard` application, including updates to the `Bridge` functionality, improvements in the UI components, and new utility functions for handling themes and FAQs. ### Detailed summary - Added `ogl` dependency for graphics handling. - Updated `ChainSeo` type in `chain-seo.ts` for better structure. - Increased blockchain support from 80+ to 85+ in documentation. - Enhanced `PageHeader` and `ToggleThemeButton` components for improved styling. - Refactored `FaqSection` to accept a more flexible props structure. - Introduced `BridgeVeil` component for visual effects based on themes. - Added `DataPill` and `PillLink` components for better UI elements. - Created a `BridgeFaqSection` with FAQs related to bridging. - Improved `TokenPage` to manage filters and sorting more effectively. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
2025-09-26 22:09:35 +00:00
parent 64f5e474bb
commit a94e9c2396
13 changed files with 394 additions and 47 deletions
@@ -47,6 +47,7 @@
    "next-themes": "^0.4.6",
    "nextjs-toploader": "^1.6.12",
    "nuqs": "^2.4.3",
+    "ogl": "^1.0.11",
    "papaparse": "^5.5.3",
    "pluralize": "^8.0.0",
    "posthog-js": "1.256.1",
@@ -0,0 +1,192 @@
+"use client";
+/* eslint-disable no-restricted-syntax */
+import { Mesh, Program, Renderer, Triangle, Vec2 } from "ogl";
+import { useEffect, useRef } from "react";
+
+const vertex = `
+attribute vec2 position;
+void main(){gl_Position=vec4(position,0.0,1.0);}
+`;
+
+const fragment = `
+#ifdef GL_ES
+precision lowp float;
+#endif
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uHueShift;
+uniform float uNoise;
+uniform float uScan;
+uniform float uScanFreq;
+uniform float uWarp;
+uniform vec3 uBackgroundColor;
+uniform float uBackgroundOpacity;
+uniform float uPatternLightness;
+#define iTime uTime
+#define iResolution uResolution
+
+vec4 buf[8];
+float rand(vec2 c){return fract(sin(dot(c,vec2(12.9898,78.233)))*43758.5453);}
+
+mat3 rgb2yiq=mat3(0.299,0.587,0.114,0.596,-0.274,-0.322,0.211,-0.523,0.312);
+mat3 yiq2rgb=mat3(1.0,0.956,0.621,1.0,-0.272,-0.647,1.0,-1.106,1.703);
+
+vec3 hueShiftRGB(vec3 col,float deg){
+    vec3 yiq=rgb2yiq*col;
+    float rad=radians(deg);
+    float cosh=cos(rad),sinh=sin(rad);
+    vec3 yiqShift=vec3(yiq.x,yiq.y*cosh-yiq.z*sinh,yiq.y*sinh+yiq.z*cosh);
+    return clamp(yiq2rgb*yiqShift,0.0,1.0);
+}
+
+vec4 sigmoid(vec4 x){return 1./(1.+exp(-x));}
+
+vec4 cppn_fn(vec2 coordinate,float in0,float in1,float in2){
+    buf[6]=vec4(coordinate.x,coordinate.y,0.3948333106474662+in0,0.36+in1);
+    buf[7]=vec4(0.14+in2,sqrt(coordinate.x*coordinate.x+coordinate.y*coordinate.y),0.,0.);
+    buf[0]=mat4(vec4(6.5404263,-3.6126034,0.7590882,-1.13613),vec4(2.4582713,3.1660357,1.2219609,0.06276096),vec4(-5.478085,-6.159632,1.8701609,-4.7742867),vec4(6.039214,-5.542865,-0.90925294,3.251348))*buf[6]+mat4(vec4(0.8473259,-5.722911,3.975766,1.6522468),vec4(-0.24321538,0.5839259,-1.7661959,-5.350116),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(0.21808943,1.1243913,-1.7969975,5.0294676);
+    buf[1]=mat4(vec4(-3.3522482,-6.0612736,0.55641043,-4.4719114),vec4(0.8631464,1.7432913,5.643898,1.6106541),vec4(2.4941394,-3.5012043,1.7184316,6.357333),vec4(3.310376,8.209261,1.1355612,-1.165539))*buf[6]+mat4(vec4(5.24046,-13.034365,0.009859298,15.870829),vec4(2.987511,3.129433,-0.89023495,-1.6822904),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-5.9457836,-6.573602,-0.8812491,1.5436668);
+    buf[0]=sigmoid(buf[0]);buf[1]=sigmoid(buf[1]);
+    buf[2]=mat4(vec4(-15.219568,8.095543,-2.429353,-1.9381982),vec4(-5.951362,4.3115187,2.6393783,1.274315),vec4(-7.3145227,6.7297835,5.2473326,5.9411426),vec4(5.0796127,8.979051,-1.7278991,-1.158976))*buf[6]+mat4(vec4(-11.967154,-11.608155,6.1486754,11.237008),vec4(2.124141,-6.263192,-1.7050359,-0.7021966),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-4.17164,-3.2281182,-4.576417,-3.6401186);
+    buf[3]=mat4(vec4(3.1832156,-13.738922,1.879223,3.233465),vec4(0.64300746,12.768129,1.9141049,0.50990224),vec4(-0.049295485,4.4807224,1.4733979,1.801449),vec4(5.0039253,13.000481,3.3991797,-4.5561905))*buf[6]+mat4(vec4(-0.1285731,7.720628,-3.1425676,4.742367),vec4(0.6393625,3.714393,-0.8108378,-0.39174938),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-1.1811101,-21.621881,0.7851888,1.2329718);
+    buf[2]=sigmoid(buf[2]);buf[3]=sigmoid(buf[3]);
+    buf[4]=mat4(vec4(5.214916,-7.183024,2.7228765,2.6592617),vec4(-5.601878,-25.3591,4.067988,0.4602802),vec4(-10.57759,24.286327,21.102104,37.546658),vec4(4.3024497,-1.9625226,2.3458803,-1.372816))*buf[0]+mat4(vec4(-17.6526,-10.507558,2.2587414,12.462782),vec4(6.265566,-502.75443,-12.642513,0.9112289),vec4(-10.983244,20.741234,-9.701768,-0.7635988),vec4(5.383626,1.4819539,-4.1911616,-4.8444734))*buf[1]+mat4(vec4(12.785233,-16.345072,-0.39901125,1.7955981),vec4(-30.48365,-1.8345358,1.4542528,-1.1118771),vec4(19.872723,-7.337935,-42.941723,-98.52709),vec4(8.337645,-2.7312303,-2.2927687,-36.142323))*buf[2]+mat4(vec4(-16.298317,3.5471997,-0.44300047,-9.444417),vec4(57.5077,-35.609753,16.163465,-4.1534753),vec4(-0.07470326,-3.8656476,-7.0901804,3.1523974),vec4(-12.559385,-7.077619,1.490437,-0.8211543))*buf[3]+vec4(-7.67914,15.927437,1.3207729,-1.6686112);
+    buf[5]=mat4(vec4(-1.4109162,-0.372762,-3.770383,-21.367174),vec4(-6.2103205,-9.35908,0.92529047,8.82561),vec4(11.460242,-22.348068,13.625772,-18.693201),vec4(-0.3429052,-3.9905605,-2.4626114,-0.45033523))*buf[0]+mat4(vec4(7.3481627,-4.3661838,-6.3037653,-3.868115),vec4(1.5462853,6.5488915,1.9701879,-0.58291394),vec4(6.5858274,-2.2180402,3.7127688,-1.3730392),vec4(-5.7973905,10.134961,-2.3395722,-5.965605))*buf[1]+mat4(vec4(-2.5132585,-6.6685553,-1.4029363,-0.16285264),vec4(-0.37908727,0.53738135,4.389061,-1.3024765),vec4(-0.70647055,2.0111287,-5.1659346,-3.728635),vec4(-13.562562,10.487719,-0.9173751,-2.6487076))*buf[2]+mat4(vec4(-8.645013,6.5546675,-6.3944063,-5.5933375),vec4(-0.57783127,-1.077275,36.91025,5.736769),vec4(14.283112,3.7146652,7.1452246,-4.5958776),vec4(2.7192075,3.6021907,-4.366337,-2.3653464))*buf[3]+vec4(-5.9000807,-4.329569,1.2427121,8.59503);
+    buf[4]=sigmoid(buf[4]);buf[5]=sigmoid(buf[5]);
+    buf[6]=mat4(vec4(-1.61102,0.7970257,1.4675229,0.20917463),vec4(-28.793737,-7.1390953,1.5025433,4.656581),vec4(-10.94861,39.66238,0.74318546,-10.095605),vec4(-0.7229728,-1.5483948,0.7301322,2.1687684))*buf[0]+mat4(vec4(3.2547753,21.489103,-1.0194173,-3.3100595),vec4(-3.7316632,-3.3792162,-7.223193,-0.23685838),vec4(13.1804495,0.7916005,5.338587,5.687114),vec4(-4.167605,-17.798311,-6.815736,-1.6451967))*buf[1]+mat4(vec4(0.604885,-7.800309,-7.213122,-2.741014),vec4(-3.522382,-0.12359311,-0.5258442,0.43852118),vec4(9.6752825,-22.853785,2.062431,0.099892326),vec4(-4.3196306,-17.730087,2.5184598,5.30267))*buf[2]+mat4(vec4(-6.545563,-15.790176,-6.0438633,-5.415399),vec4(-43.591583,28.551912,-16.00161,18.84728),vec4(4.212382,8.394307,3.0958717,8.657522),vec4(-5.0237565,-4.450633,-4.4768,-5.5010443))*buf[3]+mat4(vec4(1.6985557,-67.05806,6.897715,1.9004834),vec4(1.8680354,2.3915145,2.5231109,4.081538),vec4(11.158006,1.7294737,2.0738268,7.386411),vec4(-4.256034,-306.24686,8.258898,-17.132736))*buf[4]+mat4(vec4(1.6889864,-4.5852966,3.8534803,-6.3482175),vec4(1.3543309,-1.2640043,9.932754,2.9079645),vec4(-5.2770967,0.07150358,-0.13962056,3.3269649),vec4(28.34703,-4.918278,6.1044083,4.085355))*buf[5]+vec4(6.6818056,12.522166,-3.7075126,-4.104386);
+    buf[7]=mat4(vec4(-8.265602,-4.7027016,5.098234,0.7509808),vec4(8.6507845,-17.15949,16.51939,-8.884479),vec4(-4.036479,-2.3946867,-2.6055532,-1.9866527),vec4(-2.2167742,-1.8135649,-5.9759874,4.8846445))*buf[0]+mat4(vec4(6.7790847,3.5076547,-2.8191125,-2.7028968),vec4(-5.743024,-0.27844876,1.4958696,-5.0517144),vec4(13.122226,15.735168,-2.9397483,-4.101023),vec4(-14.375265,-5.030483,-6.2599335,2.9848232))*buf[1]+mat4(vec4(4.0950394,-0.94011575,-5.674733,4.755022),vec4(4.3809423,4.8310084,1.7425908,-3.437416),vec4(2.117492,0.16342592,-104.56341,16.949184),vec4(-5.22543,-2.994248,3.8350096,-1.9364246))*buf[2]+mat4(vec4(-5.900337,1.7946124,-13.604192,-3.8060522),vec4(6.6583457,31.911177,25.164474,91.81147),vec4(11.840538,4.1503043,-0.7314397,6.768467),vec4(-6.3967767,4.034772,6.1714606,-0.32874924))*buf[3]+mat4(vec4(3.4992442,-196.91893,-8.923708,2.8142626),vec4(3.4806502,-3.1846354,5.1725626,5.1804223),vec4(-2.4009497,15.585794,1.2863957,2.0252278),vec4(-71.25271,-62.441242,-8.138444,0.50670296))*buf[4]+mat4(vec4(-12.291733,-11.176166,-7.3474145,4.390294),vec4(10.805477,5.6337385,-0.9385842,-4.7348723),vec4(-12.869276,-7.039391,5.3029537,7.5436664),vec4(1.4593618,8.91898,3.5101583,5.840625))*buf[5]+vec4(2.2415268,-6.705987,-0.98861027,-2.117676);
+    buf[6]=sigmoid(buf[6]);buf[7]=sigmoid(buf[7]);
+    buf[0]=mat4(vec4(1.6794263,1.3817469,2.9625452,0.),vec4(-1.8834411,-1.4806935,-3.5924516,0.),vec4(-1.3279216,-1.0918057,-2.3124623,0.),vec4(0.2662234,0.23235129,0.44178495,0.))*buf[0]+mat4(vec4(-0.6299101,-0.5945583,-0.9125601,0.),vec4(0.17828953,0.18300213,0.18182953,0.),vec4(-2.96544,-2.5819945,-4.9001055,0.),vec4(1.4195864,1.1868085,2.5176322,0.))*buf[1]+mat4(vec4(-1.2584374,-1.0552157,-2.1688404,0.),vec4(-0.7200217,-0.52666044,-1.438251,0.),vec4(0.15345335,0.15196142,0.272854,0.),vec4(0.945728,0.8861938,1.2766753,0.))*buf[2]+mat4(vec4(-2.4218085,-1.968602,-4.35166,0.),vec4(-22.683098,-18.0544,-41.954372,0.),vec4(0.63792,0.5470648,1.1078634,0.),vec4(-1.5489894,-1.3075932,-2.6444845,0.))*buf[3]+mat4(vec4(-0.49252132,-0.39877754,-0.91366625,0.),vec4(0.95609266,0.7923952,1.640221,0.),vec4(0.30616966,0.15693925,0.8639857,0.),vec4(1.1825981,0.94504964,2.176963,0.))*buf[4]+mat4(vec4(0.35446745,0.3293795,0.59547555,0.),vec4(-0.58784515,-0.48177817,-1.0614829,0.),vec4(2.5271258,1.9991658,4.6846647,0.),vec4(0.13042648,0.08864098,0.30187556,0.))*buf[5]+mat4(vec4(-1.7718065,-1.4033192,-3.3355875,0.),vec4(3.1664357,2.638297,5.378702,0.),vec4(-3.1724713,-2.6107926,-5.549295,0.),vec4(-2.851368,-2.249092,-5.3013067,0.))*buf[6]+mat4(vec4(1.5203838,1.2212278,2.8404984,0.),vec4(1.5210563,1.2651345,2.683903,0.),vec4(2.9789467,2.4364579,5.2347264,0.),vec4(2.2270417,1.8825914,3.8028636,0.))*buf[7]+vec4(-1.5468478,-3.6171484,0.24762098,0.);
+    buf[0]=sigmoid(buf[0]);
+    return vec4(buf[0].x,buf[0].y,buf[0].z,1.);
+}
+
+void mainImage(out vec4 fragColor,in vec2 fragCoord){
+    vec2 uv=fragCoord/uResolution.xy*2.-1.;
+    uv.y*=-1.;
+    uv+=uWarp*vec2(sin(uv.y*6.283+uTime*0.5),cos(uv.x*6.283+uTime*0.5))*0.05;
+    fragColor=cppn_fn(uv,0.1*sin(0.3*uTime),0.1*sin(0.69*uTime),0.1*sin(0.44*uTime));
+}
+
+void main(){
+    vec4 col;mainImage(col,gl_FragCoord.xy);
+    col.rgb=hueShiftRGB(col.rgb,uHueShift);
+    float scanline_val=sin(gl_FragCoord.y*uScanFreq)*0.5+0.5;
+    col.rgb*=1.-(scanline_val*scanline_val)*uScan;
+    col.rgb+=(rand(gl_FragCoord.xy+uTime)-0.5)*uNoise;
+
+    // Apply lightness control to pattern
+    col.rgb = col.rgb * uPatternLightness;
+
+    // Use background color as base, then add pattern on top
+    vec3 finalColor = uBackgroundColor + col.rgb * uBackgroundOpacity;
+
+    gl_FragColor=vec4(clamp(finalColor,0.0,1.0),1.0);
+}
+`;
+
+type Props = {
+  hueShift?: number;
+  noiseIntensity?: number;
+  scanlineIntensity?: number;
+  speed?: number;
+  scanlineFrequency?: number;
+  warpAmount?: number;
+  resolutionScale?: number;
+  backgroundColor?: [number, number, number];
+  backgroundOpacity?: number;
+  patternLightness?: number;
+};
+
+export function DarkVeil({
+  hueShift = 0,
+  noiseIntensity = 0,
+  scanlineIntensity = 0,
+  speed = 0.5,
+  scanlineFrequency = 0,
+  warpAmount = 0,
+  resolutionScale = 1,
+  backgroundColor = [0, 0, 0],
+  backgroundOpacity = 1,
+  patternLightness = 1.0,
+}: Props) {
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const canvas = ref.current as HTMLCanvasElement;
+    const parent = canvas.parentElement as HTMLElement;
+
+    const renderer = new Renderer({
+      dpr: Math.min(window.devicePixelRatio, 2),
+      canvas,
+    });
+
+    const gl = renderer.gl;
+    const geometry = new Triangle(gl);
+
+    const program = new Program(gl, {
+      vertex,
+      fragment,
+      uniforms: {
+        uTime: { value: 0 },
+        uResolution: { value: new Vec2() },
+        uHueShift: { value: hueShift },
+        uNoise: { value: noiseIntensity },
+        uScan: { value: scanlineIntensity },
+        uScanFreq: { value: scanlineFrequency },
+        uWarp: { value: warpAmount },
+        uBackgroundColor: { value: backgroundColor },
+        uBackgroundOpacity: { value: backgroundOpacity },
+        uPatternLightness: { value: patternLightness },
+      },
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+
+    const resize = () => {
+      const w = parent.clientWidth,
+        h = parent.clientHeight;
+      renderer.setSize(w * resolutionScale, h * resolutionScale);
+      program.uniforms.uResolution.value.set(w, h);
+    };
+
+    window.addEventListener("resize", resize);
+    resize();
+
+    const start = performance.now();
+    let frame = 0;
+
+    const loop = () => {
+      program.uniforms.uTime.value =
+        ((performance.now() - start) / 1000) * speed;
+      program.uniforms.uHueShift.value = hueShift;
+      program.uniforms.uNoise.value = noiseIntensity;
+      program.uniforms.uScan.value = scanlineIntensity;
+      program.uniforms.uScanFreq.value = scanlineFrequency;
+      program.uniforms.uWarp.value = warpAmount;
+      program.uniforms.uBackgroundColor.value = backgroundColor;
+      program.uniforms.uBackgroundOpacity.value = backgroundOpacity;
+      program.uniforms.uPatternLightness.value = patternLightness;
+      renderer.render({ scene: mesh });
+      frame = requestAnimationFrame(loop);
+    };
+
+    loop();
+
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", resize);
+    };
+  }, [
+    hueShift,
+    noiseIntensity,
+    scanlineIntensity,
+    speed,
+    scanlineFrequency,
+    warpAmount,
+    resolutionScale,
+    backgroundColor,
+    backgroundOpacity,
+    patternLightness,
+  ]);
+  return <canvas ref={ref} className="w-full h-full block" />;
+}
@@ -4,9 +4,10 @@ import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Skeleton } from "../ui/skeleton";

-export function ToggleThemeButton() {
+export function ToggleThemeButton(props: { className?: string }) {
  const { setTheme, theme } = useTheme();

  return (
@@ -15,7 +16,10 @@ export function ToggleThemeButton() {
    >
      <Button
        aria-label="Toggle theme"
-        className="h-auto w-auto rounded-full border border-border bg-background p-2"
+        className={cn(
+          "h-auto w-auto rounded-full border border-border bg-background p-2",
+          props.className,
+        )}
        onClick={() => {
          setTheme(theme === "dark" ? "light" : "dark");
        }}
@@ -4,9 +4,10 @@ import { useId, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { cn } from "@/lib/utils";
-import type { ChainSeo } from "../../apis/chain-seo";

-export function FaqSection(props: { faqs: ChainSeo["faqs"] }) {
+export function FaqSection(props: {
+  faqs: Array<{ title: string; description: string }>;
+}) {
  return (
    <div className="py-10">
      <section className="">
@@ -1,7 +1,7 @@
 import "server-only";
 import { unstable_cache } from "next/cache";

-export type ChainSeo = {
+type ChainSeo = {
  title: string;
  description: string;
  og: {
@@ -1,5 +1,6 @@
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "@/api/account/get-account";
+import { FaqSection } from "@/components/blocks/faq-section";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { getChain, getCustomChainMetadata } from "../../utils";
 import { fetchChainSeo } from "./apis/chain-seo";
@@ -8,7 +9,6 @@ import { ChainOverviewSection } from "./components/server/ChainOverviewSection";
 import { ChainCTA } from "./components/server/cta-card";
 import { ExplorersSection } from "./components/server/explorer-section";
 import { FaucetSection } from "./components/server/FaucetSection";
-import { FaqSection } from "./components/server/faq-section";
 import { SupportedProductsSection } from "./components/server/SupportedProductsSection";

 type Props = {
@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Input } from "@workspace/ui/components/input";
 import { cn } from "@workspace/ui/lib/utils";
 import { ActivityIcon, SearchIcon, TrendingUpIcon } from "lucide-react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Bridge } from "thirdweb";
 import { BridgeNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Button } from "@/components/ui/button";
@@ -15,11 +15,22 @@ const client = getClientThirdwebClient();

 const pageSize = 20;

+type Filter =
+  | { type: "filter"; value: "volume" | "market_cap" }
+  | { type: "search"; value: string };
+
 export function TokenPage(props: { chains: Bridge.chains.Result }) {
  const [page, setPage] = useState(1);
  const [chainId, setChainId] = useState(1);
-  const [search, setSearch] = useState("");
-  const [sortBy, setSortBy] = useState<"volume" | "market_cap">("volume");
+  const [filter, _setFilter] = useState<Filter>({
+    type: "filter",
+    value: "volume",
+  });
+
+  const setFilter = useCallback((filter: Filter) => {
+    _setFilter(filter);
+    setPage(1);
+  }, []);

  const tokensQuery = useQuery({
    queryKey: [
@@ -27,8 +38,7 @@ export function TokenPage(props: { chains: Bridge.chains.Result }) {
      {
        page,
        chainId,
-        sortBy,
-        search,
+        filter,
      },
    ],
    queryFn: () => {
@@ -37,8 +47,8 @@ export function TokenPage(props: { chains: Bridge.chains.Result }) {
        chainId: chainId,
        limit: pageSize,
        offset: (page - 1) * pageSize,
-        sortBy: search ? undefined : sortBy,
-        query: search ? search : undefined,
+        sortBy: filter.type === "filter" ? filter.value : undefined,
+        query: filter.type === "search" ? filter.value : undefined,
      });
    },
    refetchOnMount: false,
@@ -62,19 +72,19 @@ export function TokenPage(props: { chains: Bridge.chains.Result }) {
            <SortButton
              label="Popular"
              onClick={() => {
-                setSortBy("market_cap");
-                setSearch("");
+                setFilter({ type: "filter", value: "market_cap" });
              }}
-              isSelected={sortBy === "market_cap" && !search}
+              isSelected={
+                filter.type === "filter" && filter.value === "market_cap"
+              }
              icon={ActivityIcon}
            />
            <SortButton
              label="Trending"
              onClick={() => {
-                setSortBy("volume");
-                setSearch("");
+                setFilter({ type: "filter", value: "volume" });
              }}
-              isSelected={sortBy === "volume" && !search}
+              isSelected={filter.type === "filter" && filter.value === "volume"}
              icon={TrendingUpIcon}
            />
          </div>
@@ -83,9 +93,11 @@ export function TokenPage(props: { chains: Bridge.chains.Result }) {
            <SearchIcon className="size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search Tokens"
-              value={search}
+              value={filter.type === "search" ? filter.value : ""}
              className="rounded-xl bg-card flex-1 pl-9"
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e) =>
+                setFilter({ type: "search", value: e.target.value })
+              }
            />
          </div>
        </div>
@@ -0,0 +1,36 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { DarkVeil } from "@/components/DarkVeil";
+
+const bgBackground: Record<string, [number, number, number]> = {
+  dark: [0, 0, 0],
+  light: [250 / 255, 250 / 255, 250 / 255],
+};
+
+const hues = {
+  light: 65,
+  dark: -85,
+};
+
+const patternLightnesss = {
+  light: -1,
+  dark: 0.8,
+};
+
+export function BridgeVeil() {
+  const theme = useTheme();
+  const isLight = theme.theme === "light";
+  const patternLightness = isLight
+    ? patternLightnesss.light
+    : patternLightnesss.dark;
+  const hueShift = isLight ? hues.light : hues.dark;
+  return (
+    <DarkVeil
+      backgroundColor={bgBackground[isLight ? "light" : "dark"]}
+      patternLightness={patternLightness}
+      hueShift={hueShift}
+      warpAmount={0.5}
+    />
+  );
+}
@@ -6,10 +6,10 @@ import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";

 export function PageHeader(props: { containerClassName?: string }) {
  return (
-    <div className="border-b border-dashed">
+    <div className="border-b border-border/50 border-dashed">
      <header
        className={cn(
-          "container flex max-w-7xl justify-between py-3",
+          "container flex max-w-7xl justify-between py-4",
          props.containerClassName,
        )}
      >
@@ -30,7 +30,7 @@ export function PageHeader(props: { containerClassName?: string }) {
          >
            Docs
          </Link>
-          <ToggleThemeButton />
+          <ToggleThemeButton className="bg-transparent" />
          <PublicPageConnectButton connectButtonClassName="!rounded-full" />
        </div>
      </header>
@@ -1,17 +1,21 @@
 import { cn } from "@workspace/ui/lib/utils";
+import { ChevronRightIcon } from "lucide-react";
 import type { Metadata } from "next";
+import Link from "next/link";
 import type { Address } from "thirdweb";
 import { defineChain } from "thirdweb/chains";
 import { getContract } from "thirdweb/contract";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
+import { FaqSection } from "@/components/blocks/faq-section";
 import { AppFooter } from "@/components/footers/app-footer";
+import { BridgeVeil } from "./components/BridgeVeil";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
 import { PageHeader } from "./components/header";
 import { bridgeAppThirdwebClient } from "./constants";

-const title = "thirdweb Payments: Swap, Bridge, and Onramp";
+const title = "thirdweb Bridge: Buy, Bridge & Swap Crypto on 85+ Chains";
 const description =
-  "Swap, bridge, and on-ramp to any EVM chain with thirdweb's Payments.";
+  "Bridge, swap, and on-ramp across 9M+ token routes on 85+ chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing and near-instant fast finality";

 export const metadata: Metadata = {
  description,
@@ -52,37 +56,94 @@ export default async function BridgePage({

  return (
    <div className="grow flex flex-col relative overflow-hidden">
-      <PageHeader />
-
-      <div className="flex grow items-center justify-center py-36 px-4 min-h-dvh relative overflow-hidden">
-        <DotsBackgroundPattern />
-        <UniversalBridgeEmbed
-          amount={amount as string}
-          chainId={chainId ? Number(chainId) : undefined}
-          token={
-            symbol && decimals && tokenName
-              ? {
-                  address: tokenAddress as Address,
-                  name: tokenName,
-                  symbol,
-                }
-              : undefined
-          }
-        />
+      <div className="absolute top-0 left-0 right-0 h-dvh  md:h-[1200px] fade-in-0 animate-in duration-1000">
+        <BridgeVeil />
      </div>

-      <div className="bg-background relative z-10">
-        <AppFooter />
+      <div className="relative z-10">
+        <PageHeader />
+
+        <div className="pt-28 pb-32 min-h-dvh relative z-10">
+          <div className="container mb-20">
+            <h1 className="text-5xl md:text-6xl font-bold mb-6 tracking-tighter text-center leading-none text-pretty">
+              Bridge and Swap tokens <br className="max-sm:hidden" /> across any
+              chain, instantly
+            </h1>
+
+            <div className="flex-wrap flex gap-3 items-center justify-center">
+              <DataPill>85+ Chains Supported</DataPill>
+              <DataPill>3200+ Tokens Supported</DataPill>
+              <DataPill>9+ Million Routes Available</DataPill>
+            </div>
+          </div>
+
+          <div className="flex grow items-center justify-center px-4 relative">
+            <DotsBackgroundPattern />
+            <UniversalBridgeEmbed
+              amount={amount as string}
+              chainId={chainId ? Number(chainId) : undefined}
+              token={
+                symbol && decimals && tokenName
+                  ? {
+                      address: tokenAddress as Address,
+                      name: tokenName,
+                      symbol,
+                    }
+                  : undefined
+              }
+            />
+          </div>
+        </div>
+
+        <div className="mb-24 container max-w-4xl">
+          <BridgeFaqSection />
+        </div>
+
+        <div className="flex flex-col gap-4 items-center mb-28 container">
+          <PillLink href="https://portal.thirdweb.com/bridge">
+            Integrate Bridge in your apps in minutes, and start generating
+            revenue
+          </PillLink>
+
+          <PillLink href="https://thirdweb.com/tokens">
+            Discover Trending Tokens
+          </PillLink>
+        </div>
+
+        <div className="relative">
+          <AppFooter />
+        </div>
      </div>
    </div>
  );
 }

+function DataPill(props: { children: React.ReactNode }) {
+  return (
+    <p className="flex items-center gap-1.5 text-foreground/60 text-xs bg-accent/30 backdrop-blur-lg border border-border/70 rounded-full px-3 py-1.5 hover:text-foreground transition-colors duration-300">
+      {props.children}
+    </p>
+  );
+}
+
+function PillLink(props: { children: React.ReactNode; href: string }) {
+  return (
+    <Link
+      href={props.href}
+      target="_blank"
+      className="shadow-lg text-center justify-center inline-flex items-center gap-2 text-foreground text-sm bg-card/50 backdrop-blur-lg border border-border/70 hover:border-active-border rounded-full px-5 py-2.5 hover:text-foreground transition-colors duration-300 text-pretty leading-5"
+    >
+      {props.children}
+      <ChevronRightIcon className="size-3.5 shrink-0 text-muted-foreground" />
+    </Link>
+  );
+}
+
 function DotsBackgroundPattern(props: { className?: string }) {
  return (
    <div
      className={cn(
-        "pointer-events-none absolute inset-0 text-foreground/30 dark:text-foreground/10",
+        "pointer-events-none absolute -inset-20 text-foreground/30 dark:text-foreground/10",
        props.className,
      )}
      style={{
@@ -94,3 +155,35 @@ function DotsBackgroundPattern(props: { className?: string }) {
    />
  );
 }
+
+const bridgeFaqs: Array<{ title: string; description: string }> = [
+  {
+    title: "What is bridging in crypto?",
+    description:
+      "Crypto bridging (cross-chain bridging) moves tokens between blockchains so you can use assets across networks. In thirdweb Bridge, connect your wallet, choose the source token/network and destination token/network, review the route and price, then confirm. Assets arrive after finality, often under ~10 seconds on fast routes, though timing depends on networks and congestion.",
+  },
+  {
+    title: "How does crypto bridging work?",
+    description:
+      "Bridge smart contracts lock or burn tokens on the source chain and mint or release equivalents on the destination via verified cross-chain providers. thirdweb Bridge automatically finds the fastest, lowest-cost route and may use different mechanisms based on networks and liquidity. Arrival can range from seconds to minutes depending on finality; many routes complete in ~10 seconds",
+  },
+  {
+    title: "What is a crypto asset swap?",
+    description:
+      "A crypto swap exchanges one token for another via a DEX or aggregator. thirdweb Bridge lets you bridge + swap in one step. For example, ETH on Ethereum to USDC on Base, by selecting your start and end tokens/networks and confirming.",
+  },
+  {
+    title: "How can I get stablecoins like USDC or USDT?",
+    description:
+      "Use thirdweb Bridge to convert assets you hold into USDC or USDT on your chosen network: select your current token/network, pick the stablecoin (USDC, USDT, etc) on the destination, and confirm. You can also buy stablecoins with fiat in the Buy flow and bridge if needed. Always verify official token contract addresses.",
+  },
+  {
+    title: "What is the cost of bridging and swapping?",
+    description:
+      "Costs include gas on each chain, bridge/liquidity provider fees, and any DEX swap fees or price impact. thirdweb Bridge compares routes and selects the best price route. Save by using lower-gas times or combining bridge + swap in one flow.",
+  },
+];
+
+function BridgeFaqSection() {
+  return <FaqSection faqs={bridgeFaqs} />;
+}
@@ -21,7 +21,7 @@ export const metadata = createMetadata({
 The BridgeWidget Script makes it easy to embed cross-chain swaps and fiat onramp UI into your app. Just add a script tag to your HTML and get a fully customizable widget — no build setup required.

 ## Key Features
- Cross-chain token swaps across 80+ blockchains
+- Cross-chain token swaps across 85+ blockchains
 - Fiat onramp support to buy tokens with credit/debit cards
 - Customizable UI - use prebuilt themes or override with your brand colors
 - Prefill token selections for a smoother user experience
@@ -202,6 +202,9 @@ importers:
      nuqs:
        specifier: ^2.4.3
        version: 2.4.3([email protected](@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected]))([email protected])
+      ogl:
+        specifier: ^1.0.11
+        version: 1.0.11
      papaparse:
        specifier: ^5.5.3
        version: 5.5.3
@@ -13036,6 +13039,9 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}

+  [email protected]:
+    resolution: {integrity: sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==}
+
  [email protected]:
    resolution: {integrity: sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg==}

@@ -33996,6 +34002,8 @@ snapshots:
      node-fetch-native: 1.6.6
      ufo: 1.6.1

+  [email protected]: {}
+
  [email protected]: {}

  [email protected]: {}