-
Notifications
You must be signed in to change notification settings - Fork 359
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: redesign payment selection flow for Buy screen (#5176)
- Loading branch information
1 parent
771acd1
commit 84571ef
Showing
18 changed files
with
825 additions
and
540 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "thirdweb": patch | ||
| --- | ||
|
|
||
| Redesigned Pay payment selection flow |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { APIHeader } from "@/components/blocks/APIHeader"; | ||
| import { CodeExample } from "@/components/code/code-example"; | ||
| import { BuyMerchPreview } from "@/components/pay/direct-payment"; | ||
| import ThirdwebProvider from "@/components/thirdweb-provider"; | ||
| import { metadataBase } from "@/lib/constants"; | ||
| import type { Metadata } from "next"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| metadataBase, | ||
| title: "Integrate Fiat & Cross-Chain Crypto Payments | thirdweb Pay", | ||
| description: | ||
| "The easiest way for users to transact in your app. Onramp users in clicks and generate revenue for each user transaction. Integrate for free.", | ||
| }; | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <ThirdwebProvider> | ||
| <main className="container px-0 pb-20"> | ||
| <APIHeader | ||
| title="Commerce payments with fiat or crypto" | ||
| description={ | ||
| <> | ||
| Let your users pay for any service with fiat or crypto on any | ||
| chain. | ||
| </> | ||
| } | ||
| docsLink="https://portal.thirdweb.com/connect/pay/get-started" | ||
| heroLink="/pay.png" | ||
| /> | ||
|
|
||
| <section className="space-y-8"> | ||
| <BuyMerch /> | ||
| </section> | ||
| </main> | ||
| </ThirdwebProvider> | ||
| ); | ||
| } | ||
|
|
||
| function BuyMerch() { | ||
| return ( | ||
| <> | ||
| <div className="space-y-2"> | ||
| <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl"> | ||
| Commerce | ||
| </h2> | ||
| <p className="max-w-[600px]"> | ||
| Take paymets from Fiat or Crypto directly to your seller wallet. | ||
| <br /> | ||
| Get notified for every sale through webhooks, which lets you trigger | ||
| any action you want like shipping physical goods, activating services | ||
| or doing onchain actions. | ||
| </p> | ||
| </div> | ||
|
|
||
| <CodeExample | ||
| preview={<BuyMerchPreview />} | ||
| code={`import { PayEmbed, getDefaultToken } from "thirdweb/react"; | ||
| import { base } from "thirdweb/chains"; | ||
| function App() { | ||
| return ( | ||
| <PayEmbed | ||
| client={client} | ||
| theme={"light"} | ||
| payOptions={{ | ||
| mode: "direct_payment", | ||
| paymentInfo: { | ||
| amount: "35", | ||
| chain: base, | ||
| token: getDefaultToken(base, "USDC"), | ||
| sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675", | ||
| }, | ||
| metadata: { | ||
| name: "Black Hoodie (Size L)", | ||
| image: "/drip-hoodie.png", | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
| };`} | ||
| lang="tsx" | ||
| /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
141 changes: 141 additions & 0 deletions
141
apps/playground-web/src/app/connect/pay/transactions/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import { APIHeader } from "@/components/blocks/APIHeader"; | ||
| import { CodeExample } from "@/components/code/code-example"; | ||
| import { | ||
| PayTransactionButtonPreview, | ||
| PayTransactionPreview, | ||
| } from "@/components/pay/transaction-button"; | ||
| import ThirdwebProvider from "@/components/thirdweb-provider"; | ||
| import { metadataBase } from "@/lib/constants"; | ||
| import type { Metadata } from "next"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| metadataBase, | ||
| title: "Integrate Fiat & Cross-Chain Crypto Payments | thirdweb Pay", | ||
| description: | ||
| "The easiest way for users to transact in your app. Onramp users in clicks and generate revenue for each user transaction. Integrate for free.", | ||
| }; | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <ThirdwebProvider> | ||
| <main className="container px-0 pb-20"> | ||
| <APIHeader | ||
| title="Onchain transactions with fiat or crypto" | ||
| description={ | ||
| <> | ||
| Let your users pay for onchain transactions with fiat or crypto on | ||
| any chain. | ||
| </> | ||
| } | ||
| docsLink="https://portal.thirdweb.com/connect/pay/get-started" | ||
| heroLink="/pay.png" | ||
| /> | ||
|
|
||
| <section className="space-y-8"> | ||
| <BuyOnchainAsset /> | ||
| </section> | ||
|
|
||
| <div className="h-14" /> | ||
|
|
||
| <section className="space-y-8"> | ||
| <NoFundsPopup /> | ||
| </section> | ||
| </main> | ||
| </ThirdwebProvider> | ||
| ); | ||
| } | ||
|
|
||
| function BuyOnchainAsset() { | ||
| return ( | ||
| <> | ||
| <div className="space-y-2"> | ||
| <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl"> | ||
| Transactions | ||
| </h2> | ||
| <p className="max-w-[600px]"> | ||
| Let your users pay for onchain transactions with fiat or crypto on any | ||
| chain. | ||
| <br /> | ||
| Amounts are calculated automatically from the transaction, and will | ||
| get executed after the user has obtained the necessary funds via | ||
| onramp or swap. | ||
| </p> | ||
| </div> | ||
|
|
||
| <CodeExample | ||
| preview={<PayTransactionPreview />} | ||
| code={`import { claimTo } from "thirdweb/extensions/erc1155"; | ||
| import { PayEmbed, useActiveAccount } from "thirdweb/react"; | ||
| function App() { | ||
| const account = useActiveAccount(); | ||
| const { data: nft } = useReadContract(getNFT, { | ||
| contract: nftContract, | ||
| tokenId: 0n, | ||
| }); | ||
| return ( | ||
| <PayEmbed | ||
| client={client} | ||
| payOptions={{ | ||
| mode: "transaction", | ||
| transaction: claimTo({ | ||
| contract: nftContract, | ||
| quantity: 1n, | ||
| tokenId: 0n, | ||
| to: account?.address, | ||
| }), | ||
| metadata: nft?.metadata, | ||
| }} | ||
| /> | ||
| ); | ||
| };`} | ||
| lang="tsx" | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function NoFundsPopup() { | ||
| return ( | ||
| <> | ||
| <div className="space-y-2"> | ||
| <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl"> | ||
| Automatic Onramp | ||
| </h2> | ||
| <p className="max-w-[600px]"> | ||
| Any transaction with value will automatically trigger onramp to fund | ||
| the wallet if needed before executing the transaction. | ||
| </p> | ||
| </div> | ||
|
|
||
| <CodeExample | ||
| preview={<PayTransactionButtonPreview />} | ||
| code={`import { trasnfer } from "thirdweb/extensions/erc1155"; | ||
| import { PayEmbed, useActiveAccount } from "thirdweb/react"; | ||
| function App() { | ||
| const account = useActiveAccount(); | ||
| return ( | ||
| <TransactionButton | ||
| client={client} | ||
| transaction={() => { | ||
| if (!account) { throw new Error("No wallet connected"); } | ||
| return transfer({ | ||
| contract: usdcContract, | ||
| amount: "50", | ||
| to: account.address, | ||
| }); | ||
| }} | ||
| /> | ||
| ); | ||
| };`} | ||
| lang="tsx" | ||
| /> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.