From 738906d3c2b1ef58ad511c09afd632630f7bfd18 Mon Sep 17 00:00:00 2001
From: Satyam Mishra <satyam1308mishra@gmail.com>
Date: Sun, 5 Jan 2025 14:32:00 +0530
Subject: [PATCH] Update implementation.mdx

Update the implementation to use providers for better code clarity.
---
 docs/appkit/next/ethers5/implementation.mdx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/appkit/next/ethers5/implementation.mdx b/docs/appkit/next/ethers5/implementation.mdx
index aaf93582..723d82fa 100644
--- a/docs/appkit/next/ethers5/implementation.mdx
+++ b/docs/appkit/next/ethers5/implementation.mdx
@@ -6,6 +6,7 @@ In this example we will create a new file called `context/appkit.tsx` outside ou
 ```tsx
 'use client'
 
+import { createContext } from 'react'
 import { createAppKit } from '@reown/appkit/react'
 import { Ethers5Adapter } from '@reown/appkit-adapter-ethers5'
 import { mainnet, arbitrum } from '@reown/appkit/networks'
@@ -22,7 +23,7 @@ const metadata = {
 }
 
 // 3. Create the AppKit instance
-createAppKit({
+const appkit = createAppKit({
   adapters: [new Ethers5Adapter()],
   metadata: metadata,
   networks: [mainnet, arbitrum],
@@ -32,10 +33,12 @@ createAppKit({
   }
 })
 
-export function AppKit() {
+const AppKitContext = createContext(appkit);
+
+export function AppKit({ children }: { children: React.ReactNode }) {
   return (
-    <YourApp /> //make sure you have configured the <appkit-button> inside
-  )
+    <AppKitContext.Provider value={appkit}>{children}</AppKitContext.Provider>
+  );
 }
 ```