From 463e4e7dda913a8e5455bf186a80c5258c3090b0 Mon Sep 17 00:00:00 2001 From: samina Date: Mon, 7 Jul 2025 14:06:36 -0700 Subject: [PATCH] wallets page completed --- apps/portal/src/app/connect/page.mdx | 99 ++++++++++++++++--------- apps/portal/src/app/connect/sidebar.tsx | 4 - apps/portal/src/app/pay/page.mdx | 13 +++- 3 files changed, 75 insertions(+), 41 deletions(-) diff --git a/apps/portal/src/app/connect/page.mdx b/apps/portal/src/app/connect/page.mdx index 0e55ff0554a..bf960789f19 100644 --- a/apps/portal/src/app/connect/page.mdx +++ b/apps/portal/src/app/connect/page.mdx @@ -3,6 +3,7 @@ import { GithubTemplateCard, Grid, ExpandableGrid, + FeatureCard, createMetadata, OpenSourceCard, Stack, @@ -12,7 +13,6 @@ import { ArticleIconCard, DocImage } from "@doc"; -import { ExternalLink } from "lucide-react"; import { TypeScriptIcon, ReactIcon, @@ -24,6 +24,8 @@ import { cn } from "@/lib/utils"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import SupportedChains from "../_images/supported-chains.png"; +import {FuelIcon,MonitorCheckIcon,WalletCardsIcon,UserLockIcon, ExternalLinkIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon, IdCardIcon, HandCoinsIcon, MonitorSmartphoneIcon} from "lucide-react"; + export const metadata = createMetadata({ title: "thirdweb Connect", @@ -36,26 +38,79 @@ export const metadata = createMetadata({ # Wallets -Wallets is the complete toolkit for connecting every user to your application. It features customizable onboarding flows, self-custodial in-app wallets, account abstraction, onramps, and a performant API to interact with the blockchain. +Wallets is a complete toolkit for connecting any user to your application. It includes **customizable components** for onboarding, **embedded wallets** , **account abstraction** +for gasless transactions, **server wallets** for developers to carry out transactions, and a secure **non-custodial key management system**. ## Live Playground -You can interact with the React SDK in the [Live Playground](https://playground.thirdweb.com/). - -## Quick starts +## Features + +
+ } + /> + + } + /> + + } + /> + + } + /> + + } + /> + -Get started with Wallets in your preferred language. + } + /> + + } + /> + + } + /> + +
+ +## Quick Starts -## With Wallets, you can - -- **Connect to 500+ different wallet providers** with support for every EVM network -- **Log in and authenticate your users** with customizable and secure [email, phone, passkeys and social login](https://portal.thirdweb.com/connect/in-app-wallet/overview) flows. -- **Sponsor transactions** to seamlessly onboard non-native or new crypto users with [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview). -- **Perform wallet actions** like connecting and disconnecting wallets, viewing balance, displaying ENS names, and execute transactions with our [performant, reliable and type safe API](https://portal.thirdweb.com/connect/blockchain-api) -- **Easily integrate with thirdweb's contracts** to enable users to interact with your application. -- **Facilitate payments** by letting user top up their wallets or do onchain purchases with a credit card with [Pay](https://portal.thirdweb.com/connect/pay/overview). - - -
-

- You'll need a client ID to access the Wallet APIs, storage, and more. -

- - - -
- - ## Supported Chains -Wallets are supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist). +Wallets are supported on EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=connect-sdk). ## Starter Kits & demos -View all available starter kits, demos and templates on Github. +View all available starter kits, demos, and templates on Github. , diff --git a/apps/portal/src/app/pay/page.mdx b/apps/portal/src/app/pay/page.mdx index 18d47f2dac1..a0885c3f29f 100644 --- a/apps/portal/src/app/pay/page.mdx +++ b/apps/portal/src/app/pay/page.mdx @@ -1,7 +1,7 @@ -import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc"; +import { createMetadata, DocImage, Grid, SDKCard, FeatureCard, ArticleIconCard } from "@doc"; import PayOverviewImage from "./assets/pay-overview.png"; import SupportedChains from "../_images/supported-chains.png"; -import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react"; +import {ExternalLinkIcon, RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react"; export const metadata = createMetadata({ image: { @@ -17,9 +17,14 @@ export const metadata = createMetadata({ Payments allows you to create both simple and advanced payment flows for bridging, swapping, onramping, and peer-to-peer purchases. It's been used to drive millions in NFT sales, bridge native tokens to brand new chains, send stablecoins between users, and more. -To get started check out the [SDK functions](https://portal.thirdweb.com/typescript/v5/buy/quote), [API reference](https://bridge.thirdweb.com/reference), or [playground](https://playground.thirdweb.com/connect/pay). +## Live Playground - + ## Features