From a89762e1f71ca0c32e8c97b62586923fbb111a5c Mon Sep 17 00:00:00 2001 From: youssefea Date: Tue, 25 Mar 2025 22:27:27 +0100 Subject: [PATCH 1/3] remove old react native integration and add new project --- .../react-native-project.mdx} | 81 +++++++++---------- 1 file changed, 38 insertions(+), 43 deletions(-) rename apps/base-docs/docs/pages/identity/smart-wallet/{guides/react-native-integration.mdx => quickstart/react-native-project.mdx} (78%) diff --git a/apps/base-docs/docs/pages/identity/smart-wallet/guides/react-native-integration.mdx b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/react-native-project.mdx similarity index 78% rename from apps/base-docs/docs/pages/identity/smart-wallet/guides/react-native-integration.mdx rename to apps/base-docs/docs/pages/identity/smart-wallet/quickstart/react-native-project.mdx index 2c1364903f7..3b0065d7db2 100644 --- a/apps/base-docs/docs/pages/identity/smart-wallet/guides/react-native-integration.mdx +++ b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/react-native-project.mdx @@ -1,29 +1,49 @@ import { Callout } from "vocs/components"; -# Create a React Native App +# Add to Existing React Native App + +This guide helps you add support for Smart Wallet into a React Native app +by integrating the +[Mobile Wallet Protocol Client](https://www.npmjs.com/package/@mobile-wallet-protocol/client). This doc is updated for Mobile Wallet Protocol Client `v1.0.0` -This guide will walk you through adding support for Smart Wallet into a React Native app by integrating the [Mobile Wallet Protocol Client](https://www.npmjs.com/package/@mobile-wallet-protocol/client). - - - **Tips**: If you need a template or scaffold to start with, you can check out - the [Smart Wallet Expo - Example](https://github.com/MobileWalletProtocol/smart-wallet-expo-example). + + Breaking change in v1.0.0: Universal Links and App Links requirements are + removed in favor of custom schemes (e.g. `myapp://`). -::::steps +## Before You Start -## Prerequisites +This guide walks you through adding support for Smart Wallet into an existing React Native app or starter project. -### Deeplink handling +If you prefer to skip ahead and start with a working example, navigate to the [repository](https://github.com/MobileWalletProtocol/smart-wallet-expo-example.git) or run the following command to clone it locally: - - Breaking change in v1.0.0: Universal Links and App Links requirements are - removed in favor of custom schemes (e.g. `myapp://`). - +```bash +git clone https://github.com/MobileWalletProtocol/smart-wallet-expo-example.git +``` + +If you are looking to integrate Smart Wallet into an existing React Native app or starter project, follow the instructions below. + +## Step 1: Install Mobile Wallet Protocol Client + +Add the latest version of [Mobile Wallet Protocol Client](https://mobilewalletprotocol.github.io/wallet-mobile-sdk/) to your project. + +:::code-group + +```zsh [npm] +npm i @mobile-wallet-protocol/client@latest +``` + +```zsh [yarn] +yarn add @mobile-wallet-protocol/client@latest +``` + +::: + +## Step 2: Add Polyfills ### Install peer dependencies @@ -81,44 +101,19 @@ import { CoinbaseWalletSDK } from "@mobile-wallet-protocol/client"; ::: -## Setup - -### Install Mobile Wallet Protocol Client - -Add the latest version of Mobile Wallet Protocol Client to your project. - -:::code-group - -```zsh [npm] -npm i @mobile-wallet-protocol/client@latest -``` - -```zsh [yarn] -yarn add @mobile-wallet-protocol/client@latest -``` - -::: - -### Configuration - - - Breaking change in v1.0.0: `handleResponse` is removed. No need to handle - returned deeplinks as this is now handled by the SDK. - - -## Usage +## Step 3: Usage Mobile Wallet Protocol Client provides 2 interfaces for mobile app to interact with the Smart Wallet, an EIP-1193 compliant provider interface and a wagmi connector. - If your app is using wallet aggregator, go straight to **Option 2: Wagmi - Connector** for 1-line integration. :) + If your app is using wallet aggregator, go straight to [**Option 2: Wagmi + Connector**](#option-2-wagmi-connector) for 1-line integration. ### Option 1: EIP-1193 Provider - the `app` prefix in SDK config params is removed in v1.0.0. + The `app` prefix in SDK config params is removed in v1.0.0. Create a new `EIP1193Provider` instance, which is EIP-1193 compliant. From af0cd922a026c96f0c577d5633c4adf7677f3762 Mon Sep 17 00:00:00 2001 From: youssefea Date: Fri, 28 Mar 2025 15:49:28 +0100 Subject: [PATCH 2/3] Align time durations in the quickstart --- .../docs/components/SmartWalletQuickstartOptions.tsx | 6 +++--- .../docs/pages/identity/smart-wallet/quickstart/index.mdx | 4 ++-- .../pages/identity/smart-wallet/quickstart/quick-demo.mdx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/base-docs/docs/components/SmartWalletQuickstartOptions.tsx b/apps/base-docs/docs/components/SmartWalletQuickstartOptions.tsx index 47f1926d9da..9edbeb6113c 100644 --- a/apps/base-docs/docs/components/SmartWalletQuickstartOptions.tsx +++ b/apps/base-docs/docs/components/SmartWalletQuickstartOptions.tsx @@ -6,17 +6,17 @@ export default function SmartWalletQuickstartOptions() { return (
} /> } /> } /> diff --git a/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx index cfda4e439a5..2259f133eba 100644 --- a/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx +++ b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx @@ -7,8 +7,8 @@ with no app or extension required, thanks to its reliance on [Passkeys](https:// This simple guide provides three options for getting started with Smart Wallet: -1. [Quick Demo using OnchainKit (5 mins)](/identity/smart-wallet/quickstart/quick-demo) - The fastest way to see Smart Wallet in action -2. [Add to Existing Next.js Project (15 mins)](/identity/smart-wallet/quickstart/nextjs-project) - Step-by-step integration with an existing Next.js application using Wagmi +1. [Quick Demo using OnchainKit](/identity/smart-wallet/quickstart/quick-demo) - The fastest way to see Smart Wallet in action +2. [Add to Existing Next.js Project](/identity/smart-wallet/quickstart/nextjs-project) - Step-by-step integration with an existing Next.js application using Wagmi 3. [Add to Existing React Native Project](/identity/smart-wallet/introduction/install-react-native) - A simple installation instruction. _A more detailed guide coming soon._ diff --git a/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/quick-demo.mdx b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/quick-demo.mdx index 9eb98bcfdf1..a61a5f22afe 100644 --- a/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/quick-demo.mdx +++ b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/quick-demo.mdx @@ -1,6 +1,6 @@ import { Callout } from "vocs/components"; -# Quick Demo using OnchainKit (5 mins) +# Quick Demo using OnchainKit This option uses the OnchainKit [Wallet component](/builderkits/onchainkit/wallet/wallet). It is perfect for quickly experiencing Smart Wallet functionality with minimal setup. From 98b92ae90bc0a84d2a94b08831ad4d999677b07a Mon Sep 17 00:00:00 2001 From: youssea Date: Tue, 6 May 2025 16:26:43 +0200 Subject: [PATCH 3/3] Update index.mdx --- .../docs/pages/identity/smart-wallet/quickstart/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx index 760dd4256c0..982d58ee095 100644 --- a/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx +++ b/apps/base-docs/docs/pages/identity/smart-wallet/quickstart/index.mdx @@ -9,7 +9,7 @@ This simple guide provides three options for getting started with Smart Wallet: 1. [Quick Demo using OnchainKit](/identity/smart-wallet/quickstart/quick-demo) - The fastest way to see Smart Wallet in action 2. [Add to Existing Next.js Project](/identity/smart-wallet/quickstart/nextjs-project) - Step-by-step integration with an existing Next.js application using Wagmi -3. [Add to Existing React Native Project](/identity/smart-wallet/introduction/install-react-native) - A simple installation instruction. _A more detailed guide coming soon._ +3. [Add to Existing React Native Project](/identity/smart-wallet/quickstart/react-native-project) - A simple installation instruction. _A more detailed guide coming soon._