Update README.md with a better copy and paste example for nextjs (#48)

covalenthq · Jan 10, 2024 · b2fdd27 · b2fdd27
1 parent 7df866a
commit b2fdd27
Showing 1 changed file with 50 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -87,41 +87,56 @@ Here's a full example to get you started. If you're using `next.js` versions `^1
 Be sure to secure your key to prevent unauthorized use in the Covalent platform by restricting usage to specific URLs.
 
 ```tsx
-// 'use client';
-// If using Next.js, put your API key in a .env.local file
-<GoldRushProvider
-    apikey={process.env.NEXT_PUBLIC_API_KEY}
-    mode="dark"
-    color="emerald"
->
-    <TokenBalancesListView
-        chain_names={[
-            "eth-mainnet",
-            "matic-mainnet",
-            "bsc-mainnet",
-            "avalanche-mainnet",
-            "optimism-mainnet",
-        ]}
-        hide_small_balances
-        address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
-    />
-    <TokenTransfersListView
-        chain_name="eth-mainnet"
-        address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
-        contract_address="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
-    />
-    <AddressActivityListView address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de" />
-    <NFTWalletTokenListView
-        address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
-        chain_names={[
-            "eth-mainnet",
-            "matic-mainnet",
-            "bsc-mainnet",
-            "avalanche-mainnet",
-            "optimism-mainnet",
-        ]}
-    />
-</GoldRushProvider>
+'use client'
+import "@covalenthq/goldrush-kit/styles.css";
+import {
+  GoldRushProvider,
+  NFTWalletTokenListView,
+  TokenBalancesListView,
+  TokenTransfersListView,
+  AddressActivityListView,
+} from "@covalenthq/goldrush-kit";
+
+export default function GoldRushExample() {
+  return (
+    <main className="">
+      <GoldRushProvider
+          apikey={process.env.NEXT_PUBLIC_API_KEY}
+          mode="dark"
+          color="emerald"
+      >
+          <TokenBalancesListView
+              chain_names={[
+                  "eth-mainnet",
+                  "matic-mainnet",
+                  "bsc-mainnet",
+                  "avalanche-mainnet",
+                  "optimism-mainnet",
+              ]}
+              hide_small_balances
+              address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
+          />
+          <TokenTransfersListView
+              chain_name="eth-mainnet"
+              address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
+              contract_address="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
+          />
+          <AddressActivityListView address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de" />
+          <NFTWalletTokenListView
+              address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
+              chain_names={[
+                  "eth-mainnet",
+                  "matic-mainnet",
+                  "bsc-mainnet",
+                  "avalanche-mainnet",
+                  "optimism-mainnet",
+              ]}
+          />
+      </GoldRushProvider>
+    </main> 
+  )
+}
+
 ```
 
 ## GoldRush Templates