Portal: UI tweaks/fixes #7978
Portal: UI tweaks/fixes #7978
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
|
|
Caution Review failedThe pull request is closed. WalkthroughRemoved or reduced tab-header icons and flattened several tabbed UI sections; many MDX files received presentational and formatting tweaks. The payments/send guide was replaced with a multi-step prepared-quote execution example including per-step transactions and Bridge.status polling. Several shared components had styling updates. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as Developer App
participant SDK as Bridge SDK
participant ChainA as Origin Chain
participant ChainB as Destination Chain
Note over Dev,SDK: Prepare multi-step quote
Dev->>SDK: Bridge.prepareQuote(params)
SDK-->>Dev: preparedQuote { steps[], origin/destination amounts }
loop For each step
Note over Dev: Execute step transactions in order
loop For each transaction in step
alt tx.chain == origin
Dev->>ChainA: sendAndConfirm(tx)
ChainA-->>Dev: receipt
else tx.chain == destination
Dev->>ChainB: sendAndConfirm(tx)
ChainB-->>Dev: receipt
end
end
end
Note over Dev,SDK: Poll cross-chain action status
Dev->>SDK: Bridge.status(actionId)
alt PENDING
SDK-->>Dev: status=PENDING
Dev->>SDK: poll until terminal
else SUCCESS
SDK-->>Dev: status=SUCCESS
else FAILED
SDK-->>Dev: status=FAILED
Dev-->>Dev: throw error
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (24)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
the
Portal
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7978 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58626 58626
Branches 4146 4146
=======================================
Hits 33145 33145
Misses 25375 25375
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
apps/portal/src/app/wallets/link-profiles/page.mdx (1)
178-186: .NET snippet: variable mismatch and trailing commaUse mainInAppWallet consistently; remove trailing comma to avoid compile error.
-// Link Telegram -_ = await mainWallet.LinkAccount(walletToLink: socialWallet,); +// Link Telegram +_ = await mainInAppWallet.LinkAccount(walletToLink: socialWallet);-// Link Phone -_ = await mainWallet.LinkAccount(walletToLink: phoneWallet, otp: otp); +// Link Phone +_ = await mainInAppWallet.LinkAccount(walletToLink: phoneWallet, otp: otp);apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx (1)
420-425: Fetch example builds an invalid request bodyThe generated fetch snippet assigns an object to body and omits Content-Type. This leads to runtime errors when copied. Serialize JSON and set the header.
Apply:
if (Object.keys(headersObj).length > 0) { fetchOptions.headers = headersObj; } - if (Object.keys(bodyObj).length > 0) { - fetchOptions.body = bodyObj; - } + if (Object.keys(bodyObj).length > 0) { + // ensure JSON content-type (respect existing header casing) + if (!Object.keys(headersObj).some((k) => k.toLowerCase() === "content-type")) { + headersObj["Content-Type"] = "application/json"; + } + fetchOptions.headers = headersObj; + fetchOptions.body = JSON.stringify(bodyObj, null, 2); + }apps/portal/src/app/payments/swap/page.mdx (4)
47-55: React example: missing import for sendAndConfirmTransactionThe snippet uses sendAndConfirmTransaction but doesn’t import it.
-import { Bridge } from "thirdweb"; +import { Bridge, sendAndConfirmTransaction } from "thirdweb";Also applies to: 98-104
171-177: Quote display math mixes Number with bigintAvoid Number(...) on on-chain amounts; use formatUnits for accurate rendering.
- value={quote ? (Number(quote.destinationAmount) / 1e18).toFixed(6) : ""} + value={quote ? Number(formatUnits(quote.destinationAmount, 18)).toFixed(6) : ""}- <span className="font-medium">Rate:</span> 1 {fromToken} = {(Number(quote.destinationAmount) / Number(quote.originAmount)).toFixed(6)} {toToken} + <span className="font-medium">Rate:</span> 1 {fromToken} = {( + Number(formatUnits(quote.destinationAmount, 18)) / + Number(formatUnits(quote.originAmount, 18)) + ).toFixed(6)} {toToken}- <span className="font-medium">Fee:</span> {((Number(quote.originAmount) - Number(amount) * 1e18) / 1e18).toFixed(6)} {fromToken} + <span className="font-medium">Fee:</span> {( + Number(formatUnits(quote.originAmount, 18)) - Number(amount || "0") + ).toFixed(6)} {fromToken}Also applies to: 192-201
229-238: AdvancedSwapInterface: missing client and executeSwapThis snippet references client and executeSwap without defining them.
-import { Bridge } from "thirdweb"; +import { Bridge, sendAndConfirmTransaction } from "thirdweb"; +import { createThirdwebClient } from "thirdweb"; @@ function AdvancedSwapInterface() { const account = useActiveAccount(); + const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" }); @@ + async function executeSwap(quote) { + if (!quote || !account) return; + for (const step of quote.steps) { + for (const transaction of step.transactions) { + const result = await sendAndConfirmTransaction({ transaction, account }); + if (["buy", "sell", "transfer"].includes(transaction.action)) { + let status; + do { + status = await Bridge.status({ + transactionHash: result.transactionHash, + chainId: transaction.chainId, + client, + }); + if (status.status === "PENDING") await new Promise(r => setTimeout(r, 3000)); + } while (status.status === "PENDING"); + } + } + } + }Also applies to: 328-338
70-80: UseparseUnitsfor precise wei conversionBigInt(amount * 1e18) throws a RangeError for non-integer values and loses precision(blog.alexdevero.com, rc.viem.sh).
- amount: BigInt(amount * 1e18), // Convert to wei + // Convert human-readable amount to wei precisely + amount: parseUnits(amount, 18),Also add:
+import { parseUnits, formatUnits } from "viem";
🧹 Nitpick comments (27)
apps/portal/src/app/page.tsx (1)
240-240: Match icon flex behavior with SDKCard to prevent squish on narrow widthsSDKCard icons use shrink-0; ArticleCardIndex doesn’t. Add shrink-0 for consistency.
- <props.icon className="size-4 text-muted-foreground" /> + <props.icon className="size-4 shrink-0 text-muted-foreground" />apps/portal/src/app/contracts/transactions/page.mdx (1)
1-7: Remove unused imports after dropping Tabs wrapperTabs*, EngineIcon are no longer used; keep only OpenApiEndpoint to satisfy lints and reduce bundle.
-import { - Tabs, - TabsList, - TabsTrigger, - TabsContent, - OpenApiEndpoint, -} from "@doc"; +import { OpenApiEndpoint } from "@doc"; -import { - EngineIcon, -} from "@/icons";Also applies to: 9-10, 16-16
apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx (1)
30-30: Keep parameter items visually grouped after removing muted backgroundAdd a subtle border to retain separation without the fill.
- <div className="flex flex-col gap-2 p-3 rounded-lg"> + <div className="flex flex-col gap-2 p-3 rounded-lg border">apps/portal/src/components/Document/List.tsx (1)
4-10: Type clarity and prop passthroughAdd explicit return types and allow className/HTML props passthrough to aid composition.
-export function UnorderedList(props: { children?: React.ReactNode }) { - return <ul className={cn(styles.unorderedList)}>{props.children}</ul>; -} +export function UnorderedList( + props: React.ComponentPropsWithoutRef<"ul">, +): React.JSX.Element { + const { className, ...rest } = props; + return <ul {...rest} className={cn(styles.unorderedList, className)} />; +} -export function OrderedList(props: { children?: React.ReactNode }) { - return <ul className={cn(styles.orderedList)}>{props.children}</ul>; -} +export function OrderedList( + props: React.ComponentPropsWithoutRef<"ol">, +): React.JSX.Element { + const { className, ...rest } = props; + return <ol {...rest} className={cn(styles.orderedList, className)} />; +}apps/portal/src/app/transactions/monitor/page.mdx (1)
31-31: Standardize icon sizingElsewhere you use size-4; align for consistency.
- <EngineIcon className="w-4 h-4" /> + <EngineIcon className="size-4" />apps/portal/src/app/contracts/events/page.mdx (1)
21-23: Unify icon sizing shorthandPrefer size-4 over w-4 h-4 for brevity.
- <EngineIcon className="w-4 h-4" /> + <EngineIcon className="size-4" /> - <TypeScriptIcon className="w-4 h-4" /> + <TypeScriptIcon className="size-4" /> - <ReactIcon className="w-4 h-4" /> + <ReactIcon className="size-4" />Also applies to: 25-27, 29-31
apps/portal/src/components/Layouts/DocLayout.tsx (1)
29-37: Add explicit return type on DocLayoutMatches TS guideline for explicit returns.
-export function DocLayout(props: DocLayoutProps) { +export function DocLayout(props: DocLayoutProps): React.JSX.Element {apps/portal/src/app/wallets/link-profiles/page.mdx (4)
28-46: Apply spacing cleanup consistently in this fileIn “Retrieve Linked Profiles” (Lines 216–225), icons still use mr-2. Remove for consistency; gap-2 already handles spacing.
- <TypeScriptIcon className="w-4 h-4 mr-2" /> + <TypeScriptIcon className="w-4 h-4" /> - <ReactIcon className="w-4 h-4 mr-2" /> + <ReactIcon className="w-4 h-4" /> - <DotNetIcon className="w-4 h-4 mr-2" /> + <DotNetIcon className="w-4 h-4" />
101-116: React snippet: drop unused variableDon’t assign preAuthenticate to a variable you don’t use.
-const email = await preAuthenticate({ +await preAuthenticate({ client, strategy: "email", email: "[email protected]", });
28-46: Optional: use size-4 for icon shorthandAlign with other pages.
- <TypeScriptIcon className="w-4 h-4" /> + <TypeScriptIcon className="size-4" /> - <ReactIcon className="w-4 h-4" /> + <ReactIcon className="size-4" /> - <ReactIcon className="w-4 h-4" /> + <ReactIcon className="size-4" /> - <DotNetIcon className="w-4 h-4" /> + <DotNetIcon className="size-4" /> - <UnityIcon className="w-4 h-4" /> + <UnityIcon className="size-4" />
248-251: Guard example logsOptional: defensively access profiles[0] to avoid undefined at copy-paste time.
-console.log("Type:", profiles[0].type); // "discord" -console.log("Email:", profiles[0].details.email); // "[email protected]" +console.log("Type:", profiles?.[0]?.type); // "discord" +console.log("Email:", profiles?.[0]?.details?.email); // "[email protected]"apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx (3)
268-268: UI polish: confirm readability after removing background/roundedWith bg-muted/30 and rounded-lg gone, adjacent items may visually blend inside sections with many params. If density suffers, consider adding a subtle separator (e.g., border-t last:border-none) on InlineParameterItem or spacing between items.
336-343: Null check uses the wrong variableThe ternary checks h !== null instead of h.example !== null, which is always true and stringifies null as "null".
- return `-H "${h.name}:${typeof h.example === "object" && h !== null + return `-H "${h.name}:${typeof h.example === "object" && h.example !== null ? JSON.stringify(h.example) : h.example }"`;
315-317: Encode query parameter names as well as valuesMinor robustness improvement for unusual keys.
- .map((q) => `${q.name}=${encodeURIComponent(String(q.example))}`) + .map((q) => `${encodeURIComponent(q.name)}=${encodeURIComponent(String(q.example))}`)Also applies to: 369-371
apps/portal/src/components/others/TableOfContents.tsx (3)
116-125: A11y: label the navigation landmarkAdd aria-labelledby and an id on the heading so screen readers announce this nav correctly.
- return ( - <nav + return ( + <nav + aria-labelledby="toc-heading" className={cn( "shrink-0 hidden pt-6 text-sm xl:block", "styled-scrollbar sticky top-sticky-top-height h-sidebar-height flex-col overflow-y-auto", )} style={{ visibility: hideNav ? "hidden" : "visible", }} > - <div className="text-sm"> - <div className="font-medium mb-4 text-foreground border-b pb-4 text-base"> + <div className="text-sm"> + <div id="toc-heading" className="font-medium mb-4 text-foreground border-b pb-4 text-base"> On this page </div>Also applies to: 126-129
184-186: Improve active-link affordanceLight-weight text can be hard to scan. Consider bumping weight only when active.
- "block overflow-hidden text-ellipsis text-muted-foreground transition-colors hover:text-foreground data-[active='true']:text-foreground", + "block overflow-hidden text-ellipsis text-muted-foreground transition-colors hover:text-foreground data-[active='true']:text-foreground data-[active='true']:font-medium",
77-78: Observer threshold is strict; consider 0.6 for smoother highlightingCurrent threshold: 1 requires the entire heading in view. 0.6 typically feels better for long pages.
- { - threshold: 1, - }, + { + threshold: 0.6, + },apps/portal/src/app/payments/products/page.mdx (1)
1-13: Remove unused Tabs importsTabs/TabsList/TabsTrigger/TabsContent are no longer used on this page.
import { Callout, createMetadata, - Tabs, - TabsList, - TabsTrigger, - TabsContent, ArticleIconCard, } from "@doc";apps/portal/src/app/wallets/page.mdx (2)
24-24: Remove unused importExternalLink is imported but not used.
-import { ExternalLink } from "lucide-react";
79-83: Minor copy tweak (optional)Consider “Complete authentication” → “Complete the authentication” for smoother grammar, or add a blank line before the heading if any MDX linter flagged it.
apps/portal/src/app/insight/page.mdx (2)
30-30: Trim extra whitespace in JSX.Minor nit: → .
- iconUrl={<BracesIcon />} + iconUrl={<BracesIcon />}
61-75: Prefer shared Grid for consistency (optional).Replacing with raw Tailwind is fine, but consider keeping the shared Grid component to centralize spacing/breakpoint conventions across docs.
apps/portal/src/app/payments/sell/page.mdx (1)
40-53: Show or reference client initialization to avoid confusion.The snippet passes client but doesn’t define it here. Either add a short client creation snippet or explicitly reference a prior section where it’s created.
Example addition (above the prepare call):
import { createThirdwebClient } from "thirdweb"; const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });apps/portal/src/app/payments/send/page.mdx (4)
155-157: Avoid committing anything that looks like a key.Use a neutral placeholder to prevent secret scanners from flagging this.
- client: { - clientId: "..." - } + client: { clientId: "<YOUR_CLIENT_ID>" }
173-175: Same here—use a neutral placeholder.- client: { - clientId: "...", - } + client: { clientId: "<YOUR_CLIENT_ID>" }
237-255: Add a timeout/backoff to polling to avoid indefinite waits and rate pressure.Prevent infinite loops and be gentle on the status endpoint.
- let swapStatus; - do { + let swapStatus; + const startedAt = Date.now(); + const timeoutMs = 10 * 60 * 1000; // 10 minutes + let delayMs = 3000; + do { swapStatus = await Bridge.status({ transactionHash: result.transactionHash, chainId: transaction.chainId, client, }); if (swapStatus.status === "PENDING") { - await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds + await new Promise((r) => setTimeout(r, delayMs)); + delayMs = Math.min(delayMs * 1.5, 15000); // capped backoff } - } while (swapStatus.status === "PENDING"); + if (Date.now() - startedAt > timeoutMs) { + throw new Error("Timed out waiting for destination completion"); + } + } while (swapStatus.status === "PENDING");
41-54: Optionally show minimal client/wallet setup to make snippets copy-pastable.A short prelude helps readers run examples without hunting other pages.
import { createThirdwebClient, createWallet, inAppWallet } from "thirdweb"; const client = createThirdwebClient({ clientId: "<YOUR_CLIENT_ID>" }); const wallet = await createWallet(inAppWallet()).connect({ client });I can amend the page with a collapsible “Prerequisites” snippet if you want.
Also applies to: 227-235
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (24)
apps/portal/src/app/contracts/events/page.mdx(3 hunks)apps/portal/src/app/contracts/page.mdx(0 hunks)apps/portal/src/app/contracts/transactions/page.mdx(1 hunks)apps/portal/src/app/insight/page.mdx(3 hunks)apps/portal/src/app/page.tsx(1 hunks)apps/portal/src/app/payments/custom-data/page.mdx(1 hunks)apps/portal/src/app/payments/fund/page.mdx(1 hunks)apps/portal/src/app/payments/products/page.mdx(1 hunks)apps/portal/src/app/payments/sell/page.mdx(1 hunks)apps/portal/src/app/payments/send/page.mdx(1 hunks)apps/portal/src/app/payments/swap/page.mdx(12 hunks)apps/portal/src/app/payments/transactions/page.mdx(1 hunks)apps/portal/src/app/transactions/monitor/page.mdx(4 hunks)apps/portal/src/app/transactions/page.mdx(0 hunks)apps/portal/src/app/wallets/link-profiles/page.mdx(12 hunks)apps/portal/src/app/wallets/page.mdx(4 hunks)apps/portal/src/app/wallets/server/page.mdx(1 hunks)apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx(1 hunks)apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx(1 hunks)apps/portal/src/components/Document/AuthMethodsTabs.tsx(0 hunks)apps/portal/src/components/Document/FeatureCard.tsx(1 hunks)apps/portal/src/components/Document/List.tsx(1 hunks)apps/portal/src/components/Layouts/DocLayout.tsx(1 hunks)apps/portal/src/components/others/TableOfContents.tsx(2 hunks)
💤 Files with no reviewable changes (3)
- apps/portal/src/app/contracts/page.mdx
- apps/portal/src/app/transactions/page.mdx
- apps/portal/src/components/Document/AuthMethodsTabs.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsxapps/portal/src/components/Layouts/DocLayout.tsxapps/portal/src/components/Document/List.tsxapps/portal/src/components/others/TableOfContents.tsxapps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsxapps/portal/src/app/page.tsxapps/portal/src/components/Document/FeatureCard.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsxapps/portal/src/components/Layouts/DocLayout.tsxapps/portal/src/components/Document/List.tsxapps/portal/src/components/others/TableOfContents.tsxapps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsxapps/portal/src/app/page.tsxapps/portal/src/components/Document/FeatureCard.tsx
🧠 Learnings (12)
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
PR: thirdweb-dev/js#7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/portal/src/components/Layouts/DocLayout.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/portal/src/components/others/TableOfContents.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/portal/src/components/others/TableOfContents.tsxapps/portal/src/app/wallets/link-profiles/page.mdx
📚 Learning: 2025-06-18T04:30:04.326Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:30:04.326Z
Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
Applied to files:
apps/portal/src/components/others/TableOfContents.tsx
📚 Learning: 2025-07-02T20:04:53.982Z
Learnt from: MananTank
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/webhook-metrics.tsx:40-40
Timestamp: 2025-07-02T20:04:53.982Z
Learning: The Spinner component imported from "@/components/ui/Spinner/Spinner" in the dashboard accepts a className prop, not a size prop. The correct usage is <Spinner className="size-4" />, not <Spinner size="sm" />. The component defaults to "size-4" if no className is provided.
Applied to files:
apps/portal/src/app/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/portal/src/app/wallets/link-profiles/page.mdxapps/portal/src/app/payments/swap/page.mdxapps/portal/src/app/payments/custom-data/page.mdx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Support for in-app wallets (social/email login)
Applied to files:
apps/portal/src/app/wallets/link-profiles/page.mdxapps/portal/src/app/wallets/page.mdx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/portal/src/app/wallets/link-profiles/page.mdx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
apps/portal/src/app/wallets/link-profiles/page.mdx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/portal/src/app/payments/swap/page.mdx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/portal/src/app/payments/swap/page.mdxapps/portal/src/app/payments/custom-data/page.mdx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over custom margins.
Applied to files:
apps/portal/src/app/payments/custom-data/page.mdx
🪛 LanguageTool
apps/portal/src/app/wallets/link-profiles/page.mdx
[grammar] ~233-~233: There might be a mistake here.
Context: ..."; const profiles = await getProfiles({ client, // optionally sepcify the ecos...
(QB_NEW_EN)
[grammar] ~235-~235: Ensure spelling is correct
Context: ...getProfiles({ client, // optionally sepcify the ecosystem for ecosystem wallets });...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~235-~235: There might be a mistake here.
Context: ...cify the ecosystem for ecosystem wallets }); console.log(profiles[0].type); // w...
(QB_NEW_EN)
apps/portal/src/app/wallets/page.mdx
[grammar] ~79-~79: There might be a mistake here.
Context: ...d="POST" /> ### Complete Authentication Verify and complete the authentication p...
(QB_NEW_EN)
🪛 Gitleaks (8.27.2)
apps/portal/src/app/payments/send/page.mdx
46-46: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
48-48: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
66-66: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
68-68: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (18)
apps/portal/src/app/wallets/server/page.mdx (1)
21-26: LGTM: icon margin cleanup in Tabs headersIcon spacing aligns with the PR-wide simplification; no functional impact.
apps/portal/src/app/payments/custom-data/page.mdx (1)
38-43: LGTM: removed right margin on tab iconsConsistent with the new Tabs header style; spacing is handled by gap utilities.
apps/portal/src/app/transactions/monitor/page.mdx (1)
31-33: LGTM: presentational cleanupIcon margin removal and whitespace tweaks only; no behavioral impact.
Also applies to: 47-47, 63-67, 74-78
apps/portal/src/app/contracts/events/page.mdx (1)
21-23: LGTM: icon spacing simplificationConsistent with Portal-wide tab header tweaks.
Also applies to: 25-27, 29-31
apps/portal/src/components/Layouts/DocLayout.tsx (1)
29-37: LGTM: remove muted foregroundMakes body text inherit default color; aligns with other docs components.
apps/portal/src/app/wallets/link-profiles/page.mdx (1)
28-46: LGTM: tab icon spacing adjustmentsConsistent with the rest of the Portal docs.
apps/portal/src/app/payments/products/page.mdx (1)
69-69: LGTM: heading tweakColon styling reads well and matches the rest of the Portal.
apps/portal/src/app/payments/swap/page.mdx (5)
31-37: LGTM: icon margin removal in tabsConsistent with PR-wide icon spacing reductions.
146-155: LGTM: select markup tighteningWhitespace-only; no behavior change.
177-186: LGTM: select markup tighteningWhitespace-only; no behavior change.
286-286: LGTM: spacing tweakNo functional impact.
613-620: LGTM: heading tweakConsistent with other pages.
apps/portal/src/app/wallets/page.mdx (1)
386-388: Unity snippet LGTMExplicit provider and chainId read clearer; matches the rest of the guide.
apps/portal/src/app/insight/page.mdx (1)
25-26: Confirm layout change at md breakpoint.Dropping md:grid-cols-2 means medium screens fall back to a single column until lg, reducing info density. If intentional, all good—otherwise consider restoring a 2-col md layout.
apps/portal/src/app/payments/transactions/page.mdx (1)
78-85: Verify live demo link matches context.Ensure the playground URL is the intended Transactions demo for this page. If multiple pages point to the same demo, confirm that’s deliberate.
apps/portal/src/components/Document/FeatureCard.tsx (1)
12-30: No existing href usage found—confirm necessity before refactoring
Ripgrep across apps/portal/src returned no<FeatureCard href=…>occurrences; please verify if any consumers (including MDX/docs) pass anhrefbefore adding Link support. Also add the explicitJSX.Elementreturn type forFeatureCardas per guidelines.apps/portal/src/app/payments/fund/page.mdx (1)
66-73: Double-check live demo target.Card points to /connect/pay/transactions; confirm that’s the intended demo for “Fund Wallet” (BuyWidget) and not the Transactions demo.
apps/portal/src/app/payments/send/page.mdx (1)
41-54: Secret scanner noise—confirm CI is green.Static analysis flagged “generic-api-key” around these examples. With placeholders, these should be false positives; ensure CI allowlists the pattern or uses safer placeholders.
Run your pipeline and confirm no gitleaks findings remain for this page; if there are, swap "..." with "<YOUR_CLIENT_ID>" (as suggested) or wrap example blocks with comments CI ignores.
Also applies to: 227-255
|
|
||
| ### Generate a payment | ||
|
|
||
| To get started, lets generate a payment for 10 USDC on Optimism, paid with USDT on Arbitrum. |
There was a problem hiding this comment.
Fix apostrophe: "lets" → "let's".
Reader-facing typo.
-To get started, lets generate a payment for 10 USDC on Optimism, paid with USDT on Arbitrum.
+To get started, let's generate a payment for 10 USDC on Optimism, paid with USDT on Arbitrum.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| To get started, lets generate a payment for 10 USDC on Optimism, paid with USDT on Arbitrum. | |
| To get started, let's generate a payment for 10 USDC on Optimism, paid with USDT on Arbitrum. |
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/send/page.mdx around line 39, replace the typo
"lets" with the correct contraction "let's" so the sentence reads: "To get
started, let's generate a payment for 10 USDC on Optimism, paid with USDT on
Arbitrum."
| ```typescript | ||
| import { Bridge } from "thirdweb"; | ||
|
|
||
| const preparedQuote = await Bridge.Buy.prepare({ | ||
| originChainId: 42161, | ||
| originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum | ||
| destinationChainId: 10, | ||
| destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism | ||
| amount: 10_000_000n, // 10 USDC in wei (USDC has 6 decimals) | ||
| sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", | ||
| receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", | ||
| client, | ||
| }); | ||
| ``` | ||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Define and use client consistently.
client is referenced but never created. Add creation and keep naming consistent across examples.
-import { Bridge } from "thirdweb";
+import { Bridge, createThirdwebClient } from "thirdweb";
+
+// Create a client (do not hardcode real keys in docs)
+const client = createThirdwebClient({ clientId: "<YOUR_CLIENT_ID>" });
const preparedQuote = await Bridge.Buy.prepare({
originChainId: 42161,
originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
destinationChainId: 10,
destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism
amount: 10_000_000n, // 10 USDC in wei (USDC has 6 decimals)
sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
- client,
+ client,
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```typescript | |
| import { Bridge } from "thirdweb"; | |
| const preparedQuote = await Bridge.Buy.prepare({ | |
| originChainId: 42161, | |
| originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum | |
| destinationChainId: 10, | |
| destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism | |
| amount: 10_000_000n, // 10 USDC in wei (USDC has 6 decimals) | |
| sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", | |
| receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", | |
| client, | |
| }); | |
| ``` | |
| ``` | |
| import { Bridge, createThirdwebClient } from "thirdweb"; | |
| // Create a client (do not hardcode real keys in docs) | |
| const client = createThirdwebClient({ clientId: "<YOUR_CLIENT_ID>" }); | |
| const preparedQuote = await Bridge.Buy.prepare({ | |
| originChainId: 42161, | |
| originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum | |
| destinationChainId: 10, | |
| destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism | |
| amount: 10_000_000n, // 10 USDC in wei (USDC has 6 decimals) | |
| sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709", | |
| receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", | |
| client, | |
| }); |
🧰 Tools
🪛 Gitleaks (8.27.2)
46-46: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
48-48: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/send/page.mdx around lines 41 to 54, the snippet
calls prepare with a variable named `client` that is never created; instantiate
the thirdweb Bridge client before using it and keep the same `client` identifier
across the example. Create the client using the official thirdweb Bridge client
constructor/factory with the required config (provider/signer or API key),
assign it to `client`, and then pass that `client` into Bridge.Buy.prepare so
the example is complete and consistent.
| ### Execute the payment with thirdweb Wallets | ||
|
|
||
| ### Execute the payment with thirdweb Wallets | ||
| This step assumes you already have a thirdweb wallet logged in. To learn how to setup wallets, see the Wallets [getting started guide](/wallets). |
There was a problem hiding this comment.
Grammar: "setup" → "set up".
-This step assumes you already have a thirdweb wallet logged in. To learn how to setup wallets, see the Wallets [getting started guide](/wallets).
+This step assumes you already have a thirdweb wallet logged in. To learn how to set up wallets, see the Wallets [getting started guide](/wallets).📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| This step assumes you already have a thirdweb wallet logged in. To learn how to setup wallets, see the Wallets [getting started guide](/wallets). | |
| This step assumes you already have a thirdweb wallet logged in. To learn how to set up wallets, see the Wallets [getting started guide](/wallets). |
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/send/page.mdx around line 191, the sentence uses
the noun "setup" but should use the verb phrase "set up"; update the text so it
reads "To learn how to set up wallets, see the Wallets [getting started
guide](/wallets)." to correct the grammar.
| }); | ||
| ``` | ||
|
|
||
| However, prepared payments might contain multiple transactions. Approvals, swaps, and any other pre-execution steps are computed for you and included in the returned transactions. Lets wrap our transaction execution in a loop so we account for all steps. |
There was a problem hiding this comment.
Fix apostrophe: "Lets" → "Let's".
-However, prepared payments might contain multiple transactions. Approvals, swaps, and any other pre-execution steps are computed for you and included in the returned transactions. Lets wrap our transaction execution in a loop so we account for all steps.
+However, prepared payments might contain multiple transactions. Approvals, swaps, and any other pre-execution steps are computed for you and included in the returned transactions. Let's wrap our transaction execution in a loop so we account for all steps.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| However, prepared payments might contain multiple transactions. Approvals, swaps, and any other pre-execution steps are computed for you and included in the returned transactions. Lets wrap our transaction execution in a loop so we account for all steps. | |
| However, prepared payments might contain multiple transactions. Approvals, swaps, and any other pre-execution steps are computed for you and included in the returned transactions. Let's wrap our transaction execution in a loop so we account for all steps. |
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/send/page.mdx around line 206, the text uses
"Lets" where the contraction should be "Let's"; update the sentence to "Let's
wrap our transaction execution in a loop so we account for all steps." making
sure to replace the missing apostrophe and preserve surrounding punctuation and
formatting.
| } | ||
| ``` | ||
|
|
||
| This will execute the transactions in order, but it might not work yet. Payment transactions that are cross-chain require both an origin **and a destination transaction**. To account for this, thirdweb Payments have a special status function allowing you to get the end to end status of a buy, sell, or transfer. Lets wait for the cross-chain transactions to be fully completed in our loop. |
There was a problem hiding this comment.
Fix apostrophe: "Lets" → "Let's".
-... Lets wait for the cross-chain transactions to be fully completed in our loop.
+... Let's wait for the cross-chain transactions to be fully completed in our loop.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| This will execute the transactions in order, but it might not work yet. Payment transactions that are cross-chain require both an origin **and a destination transaction**. To account for this, thirdweb Payments have a special status function allowing you to get the end to end status of a buy, sell, or transfer. Lets wait for the cross-chain transactions to be fully completed in our loop. | |
| This will execute the transactions in order, but it might not work yet. Payment transactions that are cross-chain require both an origin **and a destination transaction**. To account for this, thirdweb Payments have a special status function allowing you to get the end to end status of a buy, sell, or transfer. Let's wait for the cross-chain transactions to be fully completed in our loop. |
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/send/page.mdx around line 222, change the word
"Lets" to the contraction "Let's" to correct the apostrophe usage in the
sentence ("Lets wait for the cross-chain transactions..." → "Let's wait for the
cross-chain transactions...").
| swapStatus = await Bridge.status({ | ||
| transactionHash: result.transactionHash, | ||
| chainId: transaction.chainId, | ||
| client: thirdwebClient, | ||
| }); | ||
| if (swapStatus.status === "PENDING") { |
There was a problem hiding this comment.
Use the same client identifier as above.
thirdwebClient is undefined; prior snippets use client.
- swapStatus = await Bridge.status({
+ swapStatus = await Bridge.status({
transactionHash: result.transactionHash,
chainId: transaction.chainId,
- client: thirdwebClient,
+ client,
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| swapStatus = await Bridge.status({ | |
| transactionHash: result.transactionHash, | |
| chainId: transaction.chainId, | |
| client: thirdwebClient, | |
| }); | |
| if (swapStatus.status === "PENDING") { | |
| swapStatus = await Bridge.status({ | |
| transactionHash: result.transactionHash, | |
| chainId: transaction.chainId, | |
| client, | |
| }); | |
| if (swapStatus.status === "PENDING") { |
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/send/page.mdx around lines 241 to 246, the code
uses an undefined variable thirdwebClient when calling Bridge.status; replace
thirdwebClient with the existing client identifier used earlier (i.e., client)
so the call becomes Bridge.status({ transactionHash: result.transactionHash,
chainId: transaction.chainId, client }); and verify the earlier snippet defines
and scopes client appropriately.
| return comparisons.sort((a, b) => | ||
| Number(b.quote.destinationAmount) - Number(a.quote.destinationAmount) | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
BigInt-safe sort comparator
Number(...) can overflow for large bigint amounts. Compare as bigint and map to -1/0/1.
- return comparisons.sort((a, b) =>
- Number(b.quote.destinationAmount) - Number(a.quote.destinationAmount)
- );
+ return comparisons.sort((a, b) => {
+ if (a.quote.destinationAmount === b.quote.destinationAmount) return 0;
+ return a.quote.destinationAmount < b.quote.destinationAmount ? 1 : -1;
+ });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return comparisons.sort((a, b) => | |
| Number(b.quote.destinationAmount) - Number(a.quote.destinationAmount) | |
| ); | |
| return comparisons.sort((a, b) => { | |
| if (a.quote.destinationAmount === b.quote.destinationAmount) return 0; | |
| return a.quote.destinationAmount < b.quote.destinationAmount ? 1 : -1; | |
| }); |
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/swap/page.mdx around lines 588-590, the
comparator uses Number(...) which can overflow for large bigint amounts; replace
the numeric subtraction with explicit BigInt comparisons: convert both
destinationAmount values to BigInt (e.g. BigInt(a.quote.destinationAmount)) and
return -1, 0 or 1 based on comparing those BigInts (if aBig > bBig return -1, if
aBig < bBig return 1, otherwise return 0) so the sort is safe for arbitrarily
large integer amounts.
| const profiles = await getProfiles({ | ||
| client, | ||
| // optionally sepcify the ecosystem for ecosystem wallets | ||
| }); | ||
|
|
There was a problem hiding this comment.
Fix typo in user-facing comment
“sepcify” → “specify”.
- // optionally sepcify the ecosystem for ecosystem wallets
+ // optionally specify the ecosystem for ecosystem wallets📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const profiles = await getProfiles({ | |
| client, | |
| // optionally sepcify the ecosystem for ecosystem wallets | |
| }); | |
| const profiles = await getProfiles({ | |
| client, | |
| // optionally specify the ecosystem for ecosystem wallets | |
| }); |
🧰 Tools
🪛 LanguageTool
[grammar] ~233-~233: There might be a mistake here.
Context: ..."; const profiles = await getProfiles({ client, // optionally sepcify the ecos...
(QB_NEW_EN)
[grammar] ~235-~235: Ensure spelling is correct
Context: ...getProfiles({ client, // optionally sepcify the ecosystem for ecosystem wallets });...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~235-~235: There might be a mistake here.
Context: ...cify the ecosystem for ecosystem wallets }); console.log(profiles[0].type); // w...
(QB_NEW_EN)
🤖 Prompt for AI Agents
In apps/portal/src/app/wallets/link-profiles/page.mdx around lines 233 to 237,
fix the typo in the user-facing comment: change "sepcify" to "specify" so the
comment reads "// optionally specify the ecosystem for ecosystem wallets".
Ensure only the comment text is updated; leave surrounding code unchanged.
| return <ul className={cn(styles.orderedList)}>{props.children}</ul>; | ||
| } |
There was a problem hiding this comment.
Fix semantic tag for ordered lists
OrderedList renders a
- ; should be
- for correct semantics & accessibility.
Apply:
-export function OrderedList(props: { children?: React.ReactNode }) {
- return <ul className={cn(styles.orderedList)}>{props.children}</ul>;
+export function OrderedList(props: { children?: React.ReactNode }): React.JSX.Element {
+ return <ol className={cn(styles.orderedList)}>{props.children}</ol>;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return <ul className={cn(styles.orderedList)}>{props.children}</ul>; | |
| } | |
| export function OrderedList(props: { children?: React.ReactNode }): React.JSX.Element { | |
| return <ol className={cn(styles.orderedList)}>{props.children}</ol>; | |
| } |
🤖 Prompt for AI Agents
In apps/portal/src/components/Document/List.tsx around lines 9 to 10, the
OrderedList component currently returns a <ul> but should use an <ol> for
correct semantics and accessibility; change the returned element from <ul> to
<ol> while preserving the className (cn(styles.orderedList)) and props.children,
and run a quick lint/aria check to ensure no other references or tests expect a
UL.
Merge activity
|
<!--
## 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 refining the UI components and code structure in the `apps/portal` directory, improving styles, and enhancing the functionality of various elements such as tabs, lists, and layouts.
### Detailed summary
- Adjusted class names for styling consistency.
- Reduced icon sizes in several components.
- Removed unnecessary background styles from `InlineParameterItem`.
- Simplified `UnorderedList` and `OrderedList` components.
- Enhanced `FeatureCard` layout and styles.
- Updated tab triggers by removing redundant margin classes.
- Streamlined payment-related documentation and examples.
- Improved overall readability and structure in multiple markdown files.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- Style
- Simplified tab headers by removing platform icons across multiple pages.
- Updated layout and spacing: Insight grid tweaks, refined DocLayout text color, toned-down lists and parameter blocks, redesigned FeatureCard, and streamlined Table of Contents styling.
- Documentation
- Replaced several tabbed sections with single-flow content; some pages now link directly to live demos.
- Updated examples: Send now illustrates a multi-step execution flow; corrected/cleaned samples for Sell and other payments pages.
- Transactions and Contracts pages use direct endpoint rendering in places for clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
09-04-portal_ui_tweaks_fixes
branch
from
36f9819 to
ea98087
Compare
vercel
bot
temporarily deployed
to
Production – thirdweb_playground
PR-Codex overview
This PR focuses on refining the UI components and layout of the application, enhancing styling, and optimizing the code for better readability and consistency.
Detailed summary
DocLayout.tsx.page.tsxand various other components.InlineParameterItemcomponents.UnorderedListandOrderedList.<Tabs>wrappers in several markdown files.FeatureCard.tsx.TableOfContentsstyles for better visibility.sendandswapexamples in markdown files for clarity.Summary by CodeRabbit
Style
Documentation