diff --git a/examples/deposits/README.md b/examples/deposits/README.md index 50f06f37..d1c29319 100644 --- a/examples/deposits/README.md +++ b/examples/deposits/README.md @@ -3,3 +3,16 @@ npx gitpick tempoxyz/accounts/examples/deposits npm i npm dev ``` + +This example also shows the MPP Credits onramp entry point. A third-party site can open +the wallet directly to the credit-card credits flow with: + +```ts +await provider.request({ + method: 'wallet_deposit', + params: [{ intent: 'credits', displayName: 'My App' }], +}) +``` + +The onramp remains wallet-hosted: the app embeds/opens Tempo Wallet through the SDK, and +the wallet handles sign-in, eligibility, saved cards, and checkout. diff --git a/examples/deposits/src/App.tsx b/examples/deposits/src/App.tsx index ab55c50f..a2eb6146 100644 --- a/examples/deposits/src/App.tsx +++ b/examples/deposits/src/App.tsx @@ -1,3 +1,4 @@ +import { useMutation } from '@tanstack/react-query' import { formatUnits, stringify } from 'viem' import { useConnect, useConnection, useConnectors, useDisconnect } from 'wagmi' import { tempo } from 'wagmi/chains' @@ -81,8 +82,19 @@ function Balance() { } function Deposit() { - const { address } = useConnection() + const connection = useConnection() + const { address } = connection const deposit = Hooks.wallet.useDeposit() + const credits = useMutation({ + mutationFn: async () => { + const provider = await connection.connector?.getProvider() + if (!provider) throw new Error('Wallet not connected.') + return (provider as Deposit.Provider).request({ + method: 'wallet_deposit', + params: [{ displayName: 'Deposits Example', intent: 'credits' }], + }) + }, + }) return (

@@ -90,10 +102,22 @@ function Deposit() { amount, chainId, displayName, and token; omit fields to let the user choose them in the wallet UI.

+

+ To deep-link directly into the MPP Credits card onramp from another site, pass{' '} + {`{ intent: 'credits' }`}. The wallet still owns sign-in, onramp eligibility, + and checkout. +

+
) } + +declare namespace Deposit { + type Provider = { + request: (request: { + method: 'wallet_deposit' + params: [{ displayName: string; intent: 'credits' }] + }) => Promise + } +} diff --git a/playgrounds/web/src/App.tsx b/playgrounds/web/src/App.tsx index 37693867..84a713a2 100644 --- a/playgrounds/web/src/App.tsx +++ b/playgrounds/web/src/App.tsx @@ -341,6 +341,18 @@ function WalletDeposit() { > Deposit +