Portal: Add BridgeWidget script docs (#8129)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `BridgeWidget` functionality, updating UI components, and improving documentation for better user experience and clarity.

### Detailed summary
- Added `BridgeWidget Script` route in sidebar.
- Updated `Paragraph` and `Heading` components' margin classes.
- Revised `Details` component structure.
- Changed text references from `BuyWidget` to `SwapWidget`.
- Enhanced documentation for `BridgeWidget Script` with detailed integration instructions.
- Introduced new options for customizing the widget's appearance and behavior.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/portal/src/app/bridge/bridge-widget-script/bridge-widget-dark.png

@@ -102,17 +102,17 @@ const preparedQuote = await Bridge.Buy.prepare({
   </TabsContent>
 
   <TabsContent value="react">
-    The quickest way to setup Bridge in your React app is with the [`BuyWidget`](/references/typescript/v5/widgets/BuyWidget) component.
-    
+    The quickest way to setup Bridge in your React app is with the [`SwapWidget`](/references/typescript/v5/widgets/SwapWidget) component.
+
     ### Live Playground
 
 <ArticleIconCard
-  title="Payment Widgets Playground"
-  description="Try out the Payment Widgets in our live playground"
+  title="Swap Widget Playground"
+  description="Try out the Swap Widget in our live playground"
   icon={ReactIcon}
-  href="https://playground.thirdweb.com/connect/pay/transactions"
+  href="https://playground.thirdweb.com/bridge/swap-widget"
 />
-    
+
     ### Installation
 
     Install the thirdweb SDK in your React project:
@@ -127,7 +127,7 @@ const preparedQuote = await Bridge.Buy.prepare({
 
     ### Create a Client
 
-    First, create a client file (e.g., `thirdwebClient.ts`) for reuse throughout your app:
+    First, create a client file for reuse throughout your app:
 
     ```typescript
     // thirdwebClient.ts
@@ -140,7 +140,7 @@ const preparedQuote = await Bridge.Buy.prepare({
 
     ### Setup the Provider
 
-    Wrap your application with the ThirdwebProvider:
+    Wrap your application with the `ThirdwebProvider`
 
     ```tsx
     // app.tsx / _app.tsx
@@ -155,21 +155,17 @@ const preparedQuote = await Bridge.Buy.prepare({
     }
     ```
 
-    ### Buy Widget
+    ### Add Swap Widget
 
-    Use the BuyWidget to let users purchase tokens:
+    Use the SwapWidget to let users swap tokens
 
     ```tsx
-    import { BuyWidget } from "thirdweb/react";
-    import { base } from "thirdweb/chains";
+    import { SwapWidget } from "thirdweb/react";
 
-    function PaymentComponent() {
+    function Example() {
       return (
-        <BuyWidget
+        <SwapWidget
           client={client}
-          chain={base}
-          amount="10" // 10 USDC
-          tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
         />
       );
     }

apps/portal/src/app/bridge/bridge-widget-script/bridge-widget-light.png

@@ -32,6 +32,10 @@ export const sidebar: SideBar = {
           href: `${bridgeSlug}/routes`,
           name: "Get Routes",
         },
+        {
+          href: `${bridgeSlug}/bridge-widget-script`,
+          name: "BridgeWidget Script",
+        },
       ],
       name: "Guides",
     },

apps/portal/src/app/bridge/bridge-widget-script/page.mdx

@@ -30,7 +30,7 @@ export function Details(props: {
         <div className="flex gap-3">
           <span
             className={cn(
-              "break-all font-bold text-foreground text-sm tracking-tight",
+              "break-all text-foreground text-lg",
               "flex w-full gap-3 text-left font-semibold text-foreground group-hover:underline",
               props.headingClassName,
             )}
@@ -58,7 +58,9 @@ export function Details(props: {
         props.accordionTriggerClassName,
       )}
     >
-      <div className="pl-4 [&>:first-child]:mt-0">{props.children}</div>
+      <div className="pl-4 [&>:first-child]:mt-0 [&>*:last-child]:mb-0">
+        {props.children}
+      </div>
     </CustomAccordion>
   );
 }

apps/portal/src/app/bridge/page.mdx

@@ -46,7 +46,7 @@ export function Heading(props: {
     case 3: {
       return (
         <Anchor
-          className={cn("mt-10 mb-3", props.anchorClassName)}
+          className={cn("mt-10 mb-2", props.anchorClassName)}
           data-noindex={props.noIndex}
           id={props.anchorId}
         >

apps/portal/src/app/bridge/sidebar.tsx

@@ -5,6 +5,6 @@ export function Paragraph(props: {
   className?: string;
 }) {
   return (
-    <p className={cn("mb-5 leading-7", props.className)}>{props.children}</p>
+    <p className={cn("mb-3 leading-7", props.className)}>{props.children}</p>
   );
 }

apps/portal/src/components/Document/Details.tsx

@@ -32,7 +32,7 @@ const TabsTrigger = React.forwardRef<
       "border-transparent border-b text-muted-foreground ring-offset-700 transition-all",
       "hover:text-foreground hover:bg-accent data-[state=active]:text-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "data-[state=active]:before:opacity-100 before:absolute before:opacity-0 before:border-b before:left-0 before:right-0 before:bottom-[-5px] before:transition-opacity before:duration-300",
+      "data-[state=active]:before:opacity-100 before:absolute before:opacity-0 before:border-b-2 before:border-foreground before:left-0 before:right-0 before:bottom-[-5px] before:transition-opacity before:duration-300",
       className,
     )}
     ref={ref}

apps/portal/src/components/Document/Heading.tsx

@@ -48,7 +48,7 @@ export type SwapWidgetProps = {
    */
   client: ThirdwebClient;
   /**
-   * The prefill Buy and/or Sell tokens for the swap widget. If `tokenAddress` is not provided, the native token will be used
+   * Prefill Buy and/or Sell tokens for the swap widget. If `tokenAddress` is not provided, the native token will be used
    *
    * @example
    *