OCK Pay & Fund tutorials (#1072)

* add images for fund and pay tutorials

* add onramp config troubleshooting steps

* add images for pay and fund tutorials

* add images to pay tutorial

* update metadata for pay + fund tutorials

* use replace dapp with app

* update title for better SEO

* add callouts

* crop image and add markups

* add details to OnchainkitProviders step

* call out the changes needed for the config.ts step

* add hyperlink for react docs

apps/base-docs/tutorials/docs/2_ock-fund-tutorial.md

@@ -0,0 +1,181 @@
+---
+title: 'Build a Smart Wallet Funding app with OnchainKit'
+slug: /build-smart-wallet-funding-app
+description: Learn how to create a app that detects if a smart wallet has ETH and prompts users to add funds if needed.
+author: hughescoin
+keywords: [
+    Account Abstraction,
+    AA,
+    Smart account,
+    Smart Wallet,
+    Funding,
+    Onramps,
+    Onchainkit,
+    Onboarding
+    Smart contract wallet,
+    Smart account,
+  ]
+tags: ['frontend', 'wallet', 'ethereum']
+difficulty: medium
+displayed_sidebar: null
+---
+
+In this tutorial, you'll learn how to build an onchain app that checks a user's wallet balance and either allows them to mint an NFT or prompts them to add funds. We'll use the OnchainKit App Template as a starting point.
+
+---
+
+## Objectives
+
+By the end of this tutorial you should be able to:
+
+- Set up a project using the Onchain Kit App Template
+- Configure the app for to onboard users easily using [Smart Wallets]
+- Implement balance checking and conditional rendering
+- Use the Fund component to allow users to add funds to their wallet
+
+## Prerequisites
+
+### React and TypeScript
+
+You should be familiar with React and TypeScript. If you're new to these technologies, consider reviewing their [official documentation] first.
+
+### OnchainKit
+
+This tutorial uses Coinbase's Onchain Kit. Familiarity with its basic concepts will be helpful.
+
+### Access to the Coinbase Developer Platform
+
+You'll need to set up an account on with [Coinbase Developer Platform (CDP) Account](https://www.coinbase.com/cloud). The CDP provides various tools and services for blockchain development, including access to API endpoints and other resources that will be instrumental in your project. Once you've created your account, you'll be ready to move forward with integrating these services into your application.
+
+:::tip CDP Configurations
+
+If you see a "something went wrong" error message when navigating to pay.coinbase.com, make sure you have "enforce secure initialization" disabled on the [Onramp config page] in Coinbase Developer Platform Dashboard.
+
+![fund-onramp-config](../../assets/images/onchainkit-tutorials/fund-onramp-config.png)
+:::
+
+---
+
+## Setting up the Project
+
+To get started, clone the Onchain Kit App Template by running
+
+```bash
+git clone git@github.com:coinbase/onchain-app-template.git
+```
+
+in your terminal, then navigate into the project directory with:
+
+```bash
+cd onchain-app-template
+```
+
+Next, install the necessary dependencies by executing `bun install` followed by `bun install viem`.
+
+After setting up the project, you'll need to configure your environment variables. Create a `.env` file in the root directory of your project and add the following line: `NEXT_PUBLIC_WC_PROJECT_ID=your_project_id_here`. Remember to replace 'your_project_id_here' with your actual project ID. Additionally, don't forget to configure your apiKey in the `src/app/components/OnchainProviders.tsx` file.
+
+## Configuring for Smart Wallets
+
+To make the app work only with smart wallets, modify `src/wagmi.ts`:
+
+```typescript
+// Inside the useWagmiConfig() function, before the useMemo() hook
+coinbaseWallet.preference = 'smartWalletOnly';
+```
+
+## Implementing Balance Checking
+
+Now well implement a check on the user's wallet to see if they have enough funds. Before we implement this check, let's create a helper function that grabs the user's Ethereum balance using [viem]. To do so, create a `utils.ts` file in the `src` directory that creates a client connected to Base and fetches the user's ETH balance:
+
+```typescript
+import { createPublicClient, http } from 'viem';
+import { base } from 'viem/chains';
+import type { GetBalanceParameters } from 'viem';
+
+const publicClient = createPublicClient({
+  transport: http(),
+  chain: base,
+});
+
+export async function getBalance(address: GetBalanceParameters) {
+  const balance = publicClient.getBalance(address);
+  return balance;
+}
+```
+
+Next, import the `getBalance()` function into your main component file (e.g., `src/app/page.tsx`). You will want to add a few [react hooks] to fetch the balance and store it as a state variable. Add the following lines of code to your `page.tsx` file:
+
+```typescript
+import { useState, useEffect } from 'react';
+import { getBalance } from '../utils';
+import { FundButton } from '@coinbase/onchainkit/fund';
+
+// Inside your component
+const [walletBalance, setWalletBalance] = useState('');
+
+useEffect(() => {
+  async function fetchBalance() {
+    if (address) {
+      const balance = await getBalance({ address });
+      setWalletBalance(String(balance));
+    }
+  }
+  fetchBalance();
+}, [address]);
+```
+
+## Implementing Conditional Rendering
+
+Now that we know the user's balance, we can then have them mint an NFT or prompt them to fund their wallet if they do not have enough ETH.
+
+The end state is to show their balance along with the appropriate call to actions like so:
+
+![fund-wallet](../../assets/images/onchainkit-tutorials/fund-wallet-balance.png)
+
+Update your component's return statement with the following code:
+
+```typescript
+return (
+  <div className="flex h-full w-96 max-w-full flex-col px-1 md:w-[1008px]">
+    {/* ... other sections ... */}
+    <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 px-2 py-4 md:grow">
+      <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
+        <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
+          <p className="text-xl font-normal not-italic tracking-[-1.2px] text-indigo-600">
+            Your Wallet has {walletBalance} ETH
+          </p>
+        </div>
+      </div>
+      {address ? (
+        parseFloat(walletBalance) > 0 ? (
+          <TransactionWrapper address={address} />
+        ) : (
+          <FundButton text={'Add funds to transact'} />
+        )
+      ) : (
+        <WalletWrapper className="w-[450px] max-w-full" text="Sign in to transact" />
+      )}
+    </section>
+    <Footer />
+  </div>
+);
+```
+
+Sweet! Now our conditional rendering is in full force. If a user clicks on the `+ Add funds to transact` button they will be given three options for topping up their smart wallet:
+
+![fund-wallet](../../assets/images/onchainkit-tutorials/fund-funding-options.png)
+
+## Conclusion
+
+Congratulations! You've built a app that checks a user's smart wallet balance and provides appropriate options based on their funds.
+This app can serve as a foundation for more complex onchain applications that require users to have funded smart wallets.
+
+---
+
+[Onchain Kit]: https://github.com/coinbase/onchainkit
+[Viem]: https://viem.sh/
+[Smart Wallets]: https://keys.coinbase.com/onboarding
+[viem]: https://viem.sh/docs/introduction
+[react hooks]: https://react.dev/reference/react/hooks
+[Onramp config page]: https://portal.cdp.coinbase.com/products/onramp
+[official documentation]: https://react.dev/

apps/base-docs/tutorials/docs/2_ock-pay-tutorial.md

@@ -0,0 +1,209 @@
+---
+title: 'Build a eCommerce App using Coinbase Commerce and OnchainKit'
+slug: /coinbase-commerce-payment-integration
+description: Learn how to integrate Coinbase Commerce payments into your application using OnchainKit.
+author: hughescoin
+keywords: [
+    Account Abstraction,
+    AA,
+    Smart account,
+    Smart Wallet,
+    Funding,
+    Onramps,
+    Onchainkit,
+    Onboarding
+    Smart contract wallet,
+    Smart account,
+  ]
+tags: ['account abstraction']
+difficulty: intermediate
+hide_table_of_contents: false
+displayed_sidebar: null
+---
+
+# Build a eCommerce App using Coinbase Commerce and OnchainKit
+
+Looking to sell items and receive crypto on Base? Well, look no further!
+This tutorial will guide you through the process of integrating Coinbase Commerce products into your application using OnchainKit. By the end of the tutorial you will be able to spin up a demo store that allows you to sell products for crypto. If you customers do not have crypto wallets, they can easily sign up with a few clicks using [Passkeys].
+
+## Prerequisites
+
+Before starting this tutorial, make sure you have:
+
+### A Coinbase Commerce Account
+
+Coinbase Commerce is a platform that enables merchants to accept cryptocurrency payments in a decentralized manner. It provides tools for integrating crypto payments into online stores, offering a secure and straightforward way to receive hundreds of tokens across Base, Polygon, and Ethereum.
+
+To proceed, you will need a Coinbase Commerce account. You can sign up for an account [here](https://beta.commerce.coinbase.com/sign-up).
+
+### Access to the Coinbase Developer Platform
+
+You'll need to set up an account on with [Coinbase Developer Platform (CDP) Account](https://www.coinbase.com/cloud). The CDP provides various tools and services for blockchain development, including access to API endpoints and other resources that will be instrumental in your project. Once you've created your account, you'll be ready to move forward with integrating these services into your application.
+
+### Wallet Connect
+
+You’ll need to set up a cloud account with [Reown] (FKA, WalletConnect), a protocol that enables secure wallet connections across different platforms.
+
+## Setting up Coinbase Commerce
+
+Let's first start by getting started by creating a product on Coinbase Commerce.
+
+To begin integrating Coinbase Commerce payments, you'll need to set up your account and create a product. Start by logging into your Coinbase Commerce account. Once you're in, navigate to the [product creation page].
+
+![pay-commerce-uuid](../../assets/images/onchainkit-tutorials/pay-commerce-products.png)
+
+Here, you'll need to add a detailed description of the product or service you're offering. After filling in the necessary information, click on the `Create product` button.
+
+![pay-commerce-uuid](../../assets/images/onchainkit-tutorials/pay-create-product-details.png)
+
+Once your product is created you will be presented with a small popup that contains a link to your products hosted page. Click on the `View product` button. This will take you to a page with more details about your newly created product. Pay close attention to the URL of this page, as it contains a crucial piece of information: the product's UUID. You'll need to copy this UUID from the URL.
+
+![pay-commerce-uuid](../../assets/images/onchainkit-tutorials/pay-copy-product-link.png)
+
+Finally, for security and ease of use in your development process, it's recommended to store this UUID as an environment variable in your project's `.env` file. This setup will allow you to securely reference your product when implementing the payment integration in your application.
+
+## Setting up the OnchainKit Project
+
+Now let's dive into the code. For this tutorial, we'll use OnchainKit's app template to create a demo store. Start by cloning the OnchainKit app template:
+
+```bash
+git clone https://github.com/coinbase/onchainkit-app-template.git
+cd onchainkit-app-template
+bun i
+```
+
+## Configuring Environment Variables
+
+Update your `.env` file to include the following variables:
+
+```bash
+   NEXT_PUBLIC_WC_PROJECT_ID=
+   NEXT_TELEMETRY_DISABLED=1
+   NEXT_PUBLIC_ONCHAINKIT_API_KEY=
+   NEXT_PUBLIC_PRODUCT_ID=
+```
+
+## Configuring Wagmi
+
+In your Wagmi configuration file, add the following line after the `useMemo()` React hook:
+
+```javascript
+coinbaseWallet.preference = 'smartWalletOnly';
+```
+
+Ensure your `src/app/components/OnchainProviders.tsx` file has configured its `apiKey` to your CDP API key and `chain` to **base**:
+
+```typescript:src/app/components/OnchainProviders.tsx
+'use client';
+import { OnchainKitProvider } from '@coinbase/onchainkit';
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { base } from 'viem/chains';
+import { WagmiProvider } from 'wagmi';
+import { useWagmiConfig } from '../wagmi';
+
+type Props = { children: ReactNode };
+
+const queryClient = new QueryClient();
+
+function OnchainProviders({ children }: Props) {
+  const wagmiConfig = useWagmiConfig();
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <OnchainKitProvider
+          apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
+          chain={base}
+        >
+          <RainbowKitProvider modalSize='compact'>
+            {children}
+          </RainbowKitProvider>
+        </OnchainKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export default OnchainProviders;
+```
+
+Update your `Config.ts` file to correspond to the correct environment variables and hosted URL if you have one. In the example below, the hosted url is `https://based-jerseys.vercel.app`.
+
+```typescript:Config.ts
+export const NEXT_PUBLIC_URL =
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:3000'
+    : 'https://based-jerseys.vercel.app';
+export const NEXT_PUBLIC_CDP_API_KEY =
+  process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY;
+export const NEXT_PUBLIC_WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
+```
+
+## Implementing the Payment Component
+
+To implement the payment component, start by opening the `src/app/page.tsx` file. You'll need to add some new imports at the top of the file: import the `Pay`, `PayButton`, and `PayStatus` components from '@coinbase/onchainkit', as well as the `Image` component from 'next/image'.
+
+Next, create a constant for your product ID using the environment variable you set up earlier. This will allow you to easily reference your product in the payment component.
+
+```typescript
+import { Pay, PayButton, PayStatus } from '@coinbase/onchainkit';
+import Image from 'next/image';
+
+const productId = process.env.NEXT_PUBLIC_PRODUCT_ID;
+```
+
+For visual appeal, add an image of your product to the `/public` folder. This image can be displayed alongside your payment button to give customers a clear view of what they're purchasing. Add you product image using the `Image` component from `next/image` and style with some inline css like so:
+
+```jsx
+<div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
+  <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
+    <Image src={'/based-jersey-front.jpeg'} width={250} height={250} alt="onchain-pods" />
+  </div>
+</div>
+```
+
+:::tip use conditional rendering
+
+When setting up the payment component, it's important to implement conditional rendering. This ensures that the payment button only appears once the user's wallet is connected. This approach provides a smoother user experience and prevents potential errors from attempting to initiate a payment before a wallet is available.
+:::
+
+Finally, configure the Pay component within your JSX. Wrap the `PayButton` and `PayStatus` components inside the `Pay` component, passing your `productId` as a prop to the `Pay` component. Set the `coinbaseBranded` prop on the `PayButton` to true for consistent branding. This setup creates a complete payment flow, allowing users to initiate a payment and view its status all within your application.
+
+```jsx
+<section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 px-2 py-4 md:grow">
+  <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
+    <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
+      <Image src={'/based-jersey-front.jpeg'} width={250} height={250} alt="jersey" />
+    </div>
+  </div>
+  <div className="mt-6">
+    {' '}
+    {/* Added spacing */}
+    {address ? (
+      <Pay productId={productId}>
+        <PayButton coinbaseBranded={true} />
+        <PayStatus />
+      </Pay>
+    ) : (
+      <WalletWrapper className="w-[450px] max-w-full" text="Sign in to transact" />
+    )}
+  </div>
+</section>
+```
+
+You may now test your implementation locally by running `bun run dev`
+
+![pay-commerce-uuid](../../assets/images/onchainkit-tutorials/pay-final-product.png)
+
+## Conclusion
+
+Congratulations! You've successfully integrated Coinbase Commerce payments into your application using OnchainKit. This is a significant achievement that opens up new possibilities for your business.
+
+As next steps, consider expanding your product catalog by adding more items to your site. Each new product can be seamlessly integrated using the same Pay component, allowing you to create a diverse and engaging e-commerce experience. Once you're satisfied with your application, you can easily deploy it using a service like Vercel, making your creation accessible to users worldwide. Keep exploring and building – the potential for your onchain commerce application is limitless!
+
+---
+
+[Passkeys]: https://www.coinbase.com/blog/introducing-passkeys-a-safer-and-easier-way-to-sign-in-to-coinbase
+[Reown]: https://cloud.reown.com/
+[product creation page]: https://beta.commerce.coinbase.com/products