Skip to content

Portal: UI tweaks/fixes #7978

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 4, 2025
Merged

Portal: UI tweaks/fixes #7978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions apps/portal/src/app/contracts/events/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ Query and listen to contract events for any deployed contract on any EVM chain.
<Tabs defaultValue="http">
<TabsList>
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
<EngineIcon className="w-4 h-4 mr-2" />
<EngineIcon className="w-4 h-4" />
HTTP
</TabsTrigger>
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
<TypeScriptIcon className="w-4 h-4 mr-2" />
<TypeScriptIcon className="w-4 h-4" />
TypeScript
</TabsTrigger>
<TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
<ReactIcon className="w-4 h-4 mr-2" />
<ReactIcon className="w-4 h-4" />
React
</TabsTrigger>
</TabsList>
Expand Down Expand Up @@ -88,11 +88,11 @@ Read more on how to [generate extension functions using the CLI](/contracts/gene
```jsx
import { useContractEvents } from "thirdweb/react";
import { prepareEvent } from "thirdweb";

const myEvent = prepareEvent({
signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
});

function YourComponent() {
const { data: contractEvents } = useContractEvents({
contract,
Expand All @@ -118,7 +118,7 @@ Read more on how to [generate extension functions using the CLI](/contracts/gene
```jsx
import { useContractEvents } from "thirdweb/react";
import { transferEvent } from "thirdweb/extensions/erc20";

function YourComponent() {
const { data: contractEvents } = useContractEvents({
contract,
Expand Down
7 changes: 0 additions & 7 deletions apps/portal/src/app/contracts/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,31 +38,24 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain.
<Tabs defaultValue="http">
<TabsList>
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
<EngineIcon className="w-4 h-4 mr-2" />
HTTP
</TabsTrigger>
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
<TypeScriptIcon className="w-4 h-4 mr-2" />
TypeScript
</TabsTrigger>
<TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
<ReactIcon className="w-4 h-4 mr-2" />
React
</TabsTrigger>
<TabsTrigger value="reactnative" className="flex items-center gap-2 [&>p]:mb-0">
<ReactIcon className="w-4 h-4 mr-2" />
React Native
</TabsTrigger>
<TabsTrigger value="unity" className="flex items-center gap-2 [&>p]:mb-0">
<UnityIcon className="w-4 h-4 mr-2" />
Unity
</TabsTrigger>
<TabsTrigger value="dotnet" className="flex items-center gap-2 [&>p]:mb-0">
<DotNetIcon className="w-4 h-4 mr-2" />
.NET
</TabsTrigger>
<TabsTrigger value="unreal" className="flex items-center gap-2 [&>p]:mb-0">
<UnrealEngineIcon className="w-4 h-4 mr-2" />
Unreal Engine
</TabsTrigger>
</TabsList>
Expand Down
14 changes: 1 addition & 13 deletions apps/portal/src/app/contracts/transactions/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,4 @@ import {

Query all transactions for any deployed contract on any EVM chain.

<Tabs defaultValue="http">
<TabsList>
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
<EngineIcon className="w-4 h-4 mr-2" />
HTTP
</TabsTrigger>
</TabsList>

<TabsContent value="http">
<OpenApiEndpoint path="/v1/contracts/{chainId}/{address}/transactions" method="GET" />

</TabsContent>
</Tabs>
<OpenApiEndpoint path="/v1/contracts/{chainId}/{address}/transactions" method="GET" />
10 changes: 5 additions & 5 deletions apps/portal/src/app/insight/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ export const metadata = createMetadata({

# Insight

Insight is a tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic.
Insight is a tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic.

<OpenSourceCard title="Insight" href="https://github.com/thirdweb-dev/insight" />

## Features

<div
className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3"
className="my-4 grid gap-4 lg:grid-cols-2"
>
<FeatureCard
title="Easy-to-Use API"
description="Easily understandable data API to query blockchain data."
iconUrl={<BracesIcon />}
iconUrl={<BracesIcon />}
/>

<FeatureCard
Expand Down Expand Up @@ -58,7 +58,7 @@ Insight is a tool that lets you retrieve blockchain data from any EVM chain, enr

## Video Tutorials

<Grid>
<div className="grid gap-4 lg:grid-cols-2">

<ArticleCard
title="Insight Introduction"
Expand All @@ -72,7 +72,7 @@ Insight is a tool that lets you retrieve blockchain data from any EVM chain, enr
href="https://m.youtube.com/watch?v=HvqewXLVRig"
/>

</Grid>
</div>

## Supported Chains
Insight is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=insight).
Expand Down
2 changes: 1 addition & 1 deletion apps/portal/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ function ArticleCardIndex(props: {
<div className="rounded-lg border bg-card p-4 hover:border-active-border relative">
<div className="flex mb-3">
<div className="p-2 rounded-full border bg-background">
<props.icon className="size-5 text-muted-foreground" />
<props.icon className="size-4 text-muted-foreground" />
</div>
</div>
<h3 className="mb-0.5 font-medium text-lg tracking-tight">
Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/app/payments/custom-data/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ Associate user IDs, custom payment IDs, order details, and more with any payment
<Tabs defaultValue="typescript">
<TabsList>
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
<TypeScriptIcon className="w-4 h-4 mr-2" />
<TypeScriptIcon className="w-4 h-4" />
TypeScript
</TabsTrigger>
<TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
<ReactIcon className="w-4 h-4 mr-2" />
<ReactIcon className="w-4 h-4" />
React
</TabsTrigger>
</TabsList>
Expand Down
14 changes: 2 additions & 12 deletions apps/portal/src/app/payments/fund/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,6 @@ export const metadata = createMetadata({

Fund wallets with crypto using the `BuyWidget`.

<Tabs defaultValue="react">
<TabsList>
<TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
<ReactIcon className="w-4 h-4 mr-2" />
React
</TabsTrigger>
</TabsList>

<TabsContent value="react">

### Fund a wallet with the `BuyWidget`

Expand Down Expand Up @@ -70,10 +61,9 @@ function ProductPage() {
```

The BuyWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains.
</TabsContent>
</Tabs>

## View it in action:

## View it in action:

<ArticleIconCard
title="Fund Wallet Live Demo"
Expand Down
14 changes: 1 addition & 13 deletions apps/portal/src/app/payments/products/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,6 @@ export const metadata = createMetadata({

Accept crypto and fiat payments for any product using the `CheckoutWidget`.

<Tabs defaultValue="react">
<TabsList>
<TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
<ReactIcon className="w-4 h-4 mr-2" />
React
</TabsTrigger>
</TabsList>

<TabsContent value="react">

### Sell a Product with the `CheckoutWidget`

```tsx
Expand Down Expand Up @@ -75,10 +65,8 @@ function ProductPage() {
```

The CheckoutWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains.
</TabsContent>
</Tabs>

## View it in action:
## View it in action:

<ArticleIconCard
title="Sell a Product Live Demo"
Expand Down
41 changes: 16 additions & 25 deletions apps/portal/src/app/payments/sell/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,37 +32,28 @@ export const metadata = createMetadata({

You can create a payment with either the input amount (sell) or output amount (buy) of a token. Most examples focus on buying a specific amount, but you can just as easily sell a specific amount of tokens.

<Tabs defaultValue="typescript">
<TabsList>
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
<TypeScriptIcon className="w-4 h-4 mr-2" />
TypeScript
</TabsTrigger>
</TabsList>

<TabsContent value="typescript">
### Generate a sell payment
### Generate a sell payment

To generate a sale, use the same inputs as `Buy.prepare`, but with the `Sell.prepare` function. The following function will sell 50 USDT on Arbitrum. The returned `destinationAmount` will indicate how much USDC on Optimism you'll receive after fees.
To generate a sale, use the same inputs as `Buy.prepare`, but with the `Sell.prepare` function. The following function will sell 50 USDT on Arbitrum. The returned `destinationAmount` will indicate how much USDC on Optimism you'll receive after fees.

```typescript
import { Bridge } from "thirdweb";
```typescript
import { Bridge } from "thirdweb";

const preparedQuote = await Bridge.Sell.prepare({
originChainId: 42161,
originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
destinationChainId: 10,
destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism
amount: 50_000_000n, // 50 USDT in wei (USDT has 6 decimals)
sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
client,
const preparedQuote = await Bridge.Sell.prepare({
originChainId: 42161,
originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
destinationChainId: 10,
destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism
amount: 50_000_000n, // 50 USDT in wei (USDT has 6 decimals)
sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
client,
});
```
```

You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process.

You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process.
</TabsContent>
</Tabs>

## Going further

Expand Down
Loading
Loading