bug fixes, console.log removals

Author: dschlabach

playground/nextjs-app-router/components/AppProvider.tsx

@@ -16,6 +16,7 @@ import { createContext, useEffect, useState } from 'react';
 import { base } from 'wagmi/chains';
 
 type State = {
+  isInitialized: boolean;
   activeComponent?: OnchainKitComponent;
   setActiveComponent?: (component: OnchainKitComponent) => void;
   chainId?: number;
@@ -40,7 +41,8 @@ type State = {
   isSponsored?: boolean;
 };
 
-const defaultState: State = {
+export const defaultState: State = {
+  isInitialized: false,
   activeComponent: OnchainKitComponent.Transaction,
   chainId: base.id,
   componentTheme: 'default',
@@ -54,6 +56,8 @@ const defaultState: State = {
 export const AppContext = createContext(defaultState);
 
 export const AppProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isInitialized, setIsInitialized] = useState(false);
+
   const [activeComponent, setActiveComponent] =
     useStateWithStorage<OnchainKitComponent>({
       key: 'activeComponent',
@@ -63,7 +67,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [componentTheme, setComponentTheme] =
     useStateWithStorage<ComponentTheme>({
       key: 'componentTheme',
-      defaultValue: 'none',
+      defaultValue: defaultState.componentTheme,
     });
 
   const [componentMode, setComponentMode] = useStateWithStorage<ComponentMode>({
@@ -123,6 +127,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     if (storedPaymasters) {
       setPaymastersState(JSON.parse(storedPaymasters));
     }
+
+    // Wait for all useStateWithStorage hooks to initialize
+    setIsInitialized(true);
   }, []);
 
   const setPaymaster = (chainId: number, url: string, enabled: boolean) => {
@@ -137,6 +144,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <AppContext.Provider
       value={{
+        isInitialized,
         activeComponent,
         setActiveComponent,
         chainId,

playground/nextjs-app-router/components/DemoOptions.tsx

@@ -10,6 +10,8 @@ import { NFTOptions } from './form/nft-options';
 import { SwapConfig } from './form/swap-config';
 import { TransactionOptions } from './form/transaction-options';
 import { WalletType } from './form/wallet-type';
+import { useContext } from 'react';
+import { AppContext } from './AppProvider';
 
 const COMMON_OPTIONS = [
   ActiveComponent,
@@ -67,6 +69,12 @@ export default function DemoOptions({
 }: {
   component?: OnchainKitComponent;
 }) {
+  const { isInitialized } = useContext(AppContext);
+
+  if (!isInitialized) {
+    // return null; // or a loading state
+  }
+
   const commonElements = COMMON_OPTIONS.map((Component) => (
     <Component key={Component.name} />
   ));

playground/nextjs-app-router/components/form/chain.tsx

@@ -17,9 +17,10 @@ export function Chain() {
       <Label htmlFor="chain">Chain</Label>
       <Select
         value={chainId?.toString()}
-        onValueChange={(value) =>
-          value ? setChainId?.(Number.parseInt(value)) : value
-        }
+        onValueChange={(value) => {
+          console.log('(salt-hash) chain value:', value);
+          return value ? setChainId?.(Number.parseInt(value)) : value;
+        }}
       >
         <SelectTrigger>
           <SelectValue placeholder="Select chain" />

playground/nextjs-app-router/components/form/component-mode.tsx

@@ -18,7 +18,15 @@ export function ComponentMode() {
       <Label htmlFor="mode">Component Mode</Label>
       <Select
         value={componentMode}
-        onValueChange={(value: ComponentModeReact) => setComponentMode(value)}
+        onValueChange={(value: ComponentModeReact) => {
+          // Radix bug:
+          // https://github.com/radix-ui/primitives/issues/3135
+          if (!value) {
+            return;
+          }
+
+          return setComponentMode(value);
+        }}
       >
         <SelectTrigger id="mode">
           <SelectValue placeholder="Select mode" />

playground/nextjs-app-router/components/form/component-theme.tsx

@@ -6,9 +6,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import type { ComponentTheme as ComponentThemeType } from '@/types/onchainkit';
 import { useContext } from 'react';
 import { AppContext } from '../AppProvider';
+import type { ComponentTheme as ComponentThemeReact } from '@/types/onchainkit';
 
 export function ComponentTheme() {
   const { componentTheme, setComponentTheme } = useContext(AppContext);
@@ -17,8 +17,15 @@ export function ComponentTheme() {
     <div className="grid gap-2">
       <Label htmlFor="theme">Component Theme</Label>
       <Select
+        defaultValue={componentTheme}
         value={componentTheme}
-        onValueChange={(value: ComponentThemeType) => {
+        onValueChange={(value: ComponentThemeReact) => {
+          // Radix bug:
+          // https://github.com/radix-ui/primitives/issues/3135
+          if (!value) {
+            return;
+          }
+
           setComponentTheme(value);
         }}
       >

playground/nextjs-app-router/components/form/wallet-type.tsx

@@ -1,5 +1,6 @@
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { getStorageKey } from '@/lib/hooks';
 import { getSlicedAddress } from '@/lib/utils';
 import { useEffect, useState } from 'react';
 import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi';
@@ -29,7 +30,7 @@ export function WalletType() {
   const [walletType, setWalletType] = useState<WalletPreference>();
 
   useEffect(() => {
-    const storedWalletType = localStorage.getItem('walletType');
+    const storedWalletType = localStorage.getItem(getStorageKey('walletType'));
     if (storedWalletType) {
       setWalletType(storedWalletType as WalletPreference);
     }
@@ -46,14 +47,14 @@ export function WalletType() {
         // Set localStorage ONLY when user has connected
         // otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
         onSuccess: () => {
-          localStorage.setItem('walletType', value);
+          localStorage.setItem(getStorageKey('walletType'), value);
         },
       },
     );
   }
 
   async function clearWalletType() {
-    localStorage.removeItem('walletType');
+    localStorage.removeItem(getStorageKey('walletType'));
     setWalletType(undefined);
   }
 

playground/nextjs-app-router/lib/hooks.ts

@@ -34,6 +34,10 @@ type StorageConfig<T> = {
 
 const OCK_NAMESPACE_PREFIX = 'ock-';
 
+export function getStorageKey(key: string) {
+  return OCK_NAMESPACE_PREFIX + key;
+}
+
 /**
  * Custom hook to manage state with localStorage
  * Also syncs to URL params on first load
@@ -49,14 +53,19 @@ export function useStateWithStorage<T>({
   const [state, setState] = useState<ReturnType>(defaultValue as ReturnType);
   const [isInitialized, setIsInitialized] = useState(false);
 
+  // Logging
+  useEffect(() => {
+    console.log(`${key} changed:`, state);
+  }, [state, key]);
+
   // Load initial value from URL or localStorage
   useEffect(() => {
     if (isInitialized) {
       return;
     }
 
     const urlState = initializeStateFromUrl();
-    const urlValue = urlState[key.toLowerCase()];
+    const urlValue = urlState[key];
 
     if (urlValue) {
       setState(parser(urlValue) as ReturnType);
@@ -65,7 +74,7 @@ export function useStateWithStorage<T>({
     }
 
     try {
-      const stored = window.localStorage.getItem(OCK_NAMESPACE_PREFIX + key);
+      const stored = window.localStorage.getItem(getStorageKey(key));
       if (stored) {
         setState(parser(stored) as ReturnType);
       }
@@ -83,12 +92,9 @@ export function useStateWithStorage<T>({
 
     try {
       if (state !== undefined) {
-        window.localStorage.setItem(
-          OCK_NAMESPACE_PREFIX + key,
-          serializer(state),
-        );
+        window.localStorage.setItem(getStorageKey(key), serializer(state));
       } else {
-        window.localStorage.removeItem(OCK_NAMESPACE_PREFIX + key);
+        window.localStorage.removeItem(getStorageKey(key));
       }
     } catch (e) {
       console.warn(`Error writing to localStorage for ${key}:`, e);

playground/nextjs-app-router/lib/url-params.ts

@@ -1,4 +1,6 @@
+import { defaultState } from '@/components/AppProvider';
 import { OnchainKitComponent } from '@/types/onchainkit';
+import { getStorageKey } from './hooks';
 
 const commonOptions = [
   'activeComponent',
@@ -38,11 +40,12 @@ export function getShareableUrl(activeComponent?: OnchainKitComponent) {
   const params = new URLSearchParams();
 
   for (const param of [...relevantParams, ...commonOptions]) {
-    const value = localStorage.getItem(param);
-    if (value) {
+    const value = localStorage.getItem(getStorageKey(param));
+    if (value && value !== defaultState[param as keyof typeof defaultState]) {
       params.set(param, value);
     }
   }
+
   return `${window.location.origin}?${params.toString()}`;
 }
 
@@ -61,7 +64,7 @@ export function initializeStateFromUrl(): Record<string, string> {
   const state: Record<string, string> = {};
 
   for (const [key, value] of params.entries()) {
-    localStorage.setItem(key, value);
+    localStorage.setItem(getStorageKey(key), value);
     state[key] = value;
   }
   return state;