From 8502bc308b545bba0394fa67b914a116e676fbb7 Mon Sep 17 00:00:00 2001
From: dschlabach <daniel.schlabach@coinbase.com>
Date: Fri, 15 Nov 2024 12:09:50 -0500
Subject: [PATCH] save

---
 .../components/AppProvider.tsx                | 19 +++++---
 .../nextjs-app-router/components/Demo.tsx     | 46 ++++++++++---------
 .../components/form/component-theme.tsx       |  8 +++-
 .../nextjs-app-router/lib/url-params.ts       | 16 ++++++-
 4 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/playground/nextjs-app-router/components/AppProvider.tsx b/playground/nextjs-app-router/components/AppProvider.tsx
index 5450c09bd9..de2d85139c 100644
--- a/playground/nextjs-app-router/components/AppProvider.tsx
+++ b/playground/nextjs-app-router/components/AppProvider.tsx
@@ -88,14 +88,22 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [isSponsored, setIsSponsoredState] = useState<boolean>(false);
 
   // Load initial values from localStorage
-  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO: Refactor this component
   useEffect(() => {
     const urlState = initializeStateFromUrl();
+    console.log('urlState:', urlState);
 
+    // Common options
     const storedActiveComponent =
-      urlState.activecomponent || localStorage.getItem('activeComponent');
+      urlState.activeComponent || localStorage.getItem('activeComponent');
     const storedWalletType =
-      urlState.wallettype || localStorage.getItem('walletType');
+      urlState.walletType || localStorage.getItem('walletType');
+    const storedComponentTheme = (urlState.componentTheme ||
+      localStorage.getItem('componentTheme')) as ComponentTheme;
+    const storedComponentMode = (urlState.componentMode ||
+      localStorage.getItem('componentMode')) as ComponentMode;
+
+    // Component-specific options
     const storedChainId = urlState.chain || localStorage.getItem('chainId');
     const storedPaymasters =
       urlState.paymasterurl || localStorage.getItem('paymasters');
@@ -103,10 +111,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       urlState.transactiontype || localStorage.getItem('transactionType');
     const storedDefaultMaxSlippage =
       urlState.defaultmaxslippage || localStorage.getItem('defaultMaxSlippage');
-    const storedComponentTheme = (urlState.componenttheme ||
-      localStorage.getItem('componentTheme')) as ComponentTheme;
-    const storedComponentMode = (urlState.componentmode ||
-      localStorage.getItem('componentMode')) as ComponentMode;
     const storedNFTToken =
       urlState.nfttoken || localStorage.getItem('nftToken');
     const storedIsSponsored =
@@ -131,6 +135,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       setDefaultMaxSlippage(Number(storedDefaultMaxSlippage));
     }
     if (storedComponentTheme) {
+      console.log('initializing component theme:', storedComponentTheme);
       setComponentTheme(storedComponentTheme);
     }
     if (storedComponentMode) {
diff --git a/playground/nextjs-app-router/components/Demo.tsx b/playground/nextjs-app-router/components/Demo.tsx
index bd189fea34..2dbf56103f 100644
--- a/playground/nextjs-app-router/components/Demo.tsx
+++ b/playground/nextjs-app-router/components/Demo.tsx
@@ -18,6 +18,7 @@ import TransactionDefaultDemo from './demo/TransactionDefault';
 import WalletDemo from './demo/Wallet';
 import WalletDefaultDemo from './demo/WalletDefault';
 import { OnchainKitComponent } from '@/types/onchainkit';
+import { getShareableUrl } from '@/lib/url-params';
 
 const activeComponentMapping: Record<OnchainKitComponent, React.FC> = {
   [OnchainKitComponent.Fund]: FundDemo,
@@ -43,8 +44,8 @@ function Demo() {
   const [copied, setCopied] = useState(false);
 
   const copyShareableLink = () => {
-    // const url = getShareableUrl(activeComponent);
-    // navigator.clipboard.writeText(url);
+    const url = getShareableUrl(activeComponent);
+    navigator.clipboard.writeText(url);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
@@ -105,25 +106,28 @@ function Demo() {
         <form className="mt-4 grid gap-8">
           <DemoOptions component={activeComponent} />
         </form>
-        <div className="mt-auto pt-6 text-sm">
-          <a
-            className="opacity-100 transition-opacity duration-200 hover:opacity-70"
-            href="https://github.com/coinbase/onchainkit/tree/main/playground"
-            rel="noreferrer"
-            target="_blank"
-            title="View OnchainKit Playground on GitHub"
-          >
-            Github ↗
-          </a>
-          <a
-            className="pl-4 opacity-100 transition-opacity duration-200 hover:opacity-70"
-            href="https://onchainkit.xyz"
-            rel="noreferrer"
-            target="_blank"
-            title="View OnchainKit"
-          >
-            OnchainKit ↗
-          </a>
+        <div className="mt-auto flex items-center justify-between pt-6 text-sm">
+          <div>
+            <a
+              className="opacity-100 transition-opacity duration-200 hover:opacity-70"
+              href="https://github.com/coinbase/onchainkit/tree/main/playground"
+              rel="noreferrer"
+              target="_blank"
+              title="View OnchainKit Playground on GitHub"
+            >
+              Github ↗
+            </a>
+            <a
+              className="pl-4 opacity-100 transition-opacity duration-200 hover:opacity-70"
+              href="https://onchainkit.xyz"
+              rel="noreferrer"
+              target="_blank"
+              title="View OnchainKit"
+            >
+              OnchainKit ↗
+            </a>
+          </div>
+
           <button
             type="button"
             onClick={copyShareableLink}
diff --git a/playground/nextjs-app-router/components/form/component-theme.tsx b/playground/nextjs-app-router/components/form/component-theme.tsx
index a1b66959bc..ae2224c700 100644
--- a/playground/nextjs-app-router/components/form/component-theme.tsx
+++ b/playground/nextjs-app-router/components/form/component-theme.tsx
@@ -12,13 +12,19 @@ import type { ComponentTheme as ComponentThemeType } from '@/types/onchainkit';
 
 export function ComponentTheme() {
   const { componentTheme, setComponentTheme } = useContext(AppContext);
+  console.log('componentTheme ():', componentTheme);
 
   return (
     <div className="grid gap-2">
       <Label htmlFor="theme">Component Theme</Label>
       <Select
         value={componentTheme}
-        onValueChange={(value: ComponentThemeType) => setComponentTheme(value)}
+        onValueChange={(value: ComponentThemeType) => {
+          console.log('onValueChange raw value:', value);
+          console.log('onValueChange typeof value:', typeof value);
+          console.log('current componentTheme:', componentTheme);
+          // return setComponentTheme(value);
+        }}
       >
         <SelectTrigger id="theme">
           <SelectValue placeholder="Select theme" />
diff --git a/playground/nextjs-app-router/lib/url-params.ts b/playground/nextjs-app-router/lib/url-params.ts
index f00340de94..26b1c88626 100644
--- a/playground/nextjs-app-router/lib/url-params.ts
+++ b/playground/nextjs-app-router/lib/url-params.ts
@@ -1,5 +1,12 @@
 import { OnchainKitComponent } from '@/types/onchainkit';
 
+const commonOptions = [
+  'activeComponent',
+  'componentMode',
+  'componentTheme',
+  'walletType',
+];
+
 const URL_PARAM_MAPPING: Partial<Record<OnchainKitComponent, string[]>> = {
   [OnchainKitComponent.Checkout]: ['chargeId', 'productId'],
   [OnchainKitComponent.Transaction]: ['calls', 'contracts'],
@@ -13,14 +20,18 @@ export function getShareableUrl(activeComponent?: OnchainKitComponent) {
   const relevantParams = getComponentQueryParams(activeComponent);
   const params = new URLSearchParams();
 
-  for (const param of relevantParams) {
-    params.set(param, localStorage.getItem(param) || '');
+  for (const param of [...relevantParams, ...commonOptions]) {
+    const value = localStorage.getItem(param);
+    if (value) {
+      params.set(param, value);
+    }
   }
   return `${window.location.origin}?${params.toString()}`;
 }
 
 export function getComponentQueryParams(component: OnchainKitComponent) {
   const options = URL_PARAM_MAPPING[component];
+
   if (!options) {
     return [];
   }
@@ -37,6 +48,7 @@ export function initializeStateFromUrl(): Record<string, string> {
   const state: Record<string, string> = {};
 
   for (const [key, value] of params.entries()) {
+    localStorage.setItem(key, value);
     state[key] = value;
   }
   return state;