Skip to content

Commit a30fa94

Browse files
author
dschlabach
committed
bug fixes, console.log removals
1 parent 2b8cfc3 commit a30fa94

File tree

8 files changed

+63
-21
lines changed

8 files changed

+63
-21
lines changed

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { createContext, useEffect, useState } from 'react';
1616
import { base } from 'wagmi/chains';
1717

1818
type State = {
19+
isInitialized: boolean;
1920
activeComponent?: OnchainKitComponent;
2021
setActiveComponent?: (component: OnchainKitComponent) => void;
2122
chainId?: number;
@@ -40,7 +41,8 @@ type State = {
4041
isSponsored?: boolean;
4142
};
4243

43-
const defaultState: State = {
44+
export const defaultState: State = {
45+
isInitialized: false,
4446
activeComponent: OnchainKitComponent.Transaction,
4547
chainId: base.id,
4648
componentTheme: 'default',
@@ -54,6 +56,8 @@ const defaultState: State = {
5456
export const AppContext = createContext(defaultState);
5557

5658
export const AppProvider = ({ children }: { children: React.ReactNode }) => {
59+
const [isInitialized, setIsInitialized] = useState(false);
60+
5761
const [activeComponent, setActiveComponent] =
5862
useStateWithStorage<OnchainKitComponent>({
5963
key: 'activeComponent',
@@ -63,7 +67,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
6367
const [componentTheme, setComponentTheme] =
6468
useStateWithStorage<ComponentTheme>({
6569
key: 'componentTheme',
66-
defaultValue: 'none',
70+
defaultValue: defaultState.componentTheme,
6771
});
6872

6973
const [componentMode, setComponentMode] = useStateWithStorage<ComponentMode>({
@@ -123,6 +127,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
123127
if (storedPaymasters) {
124128
setPaymastersState(JSON.parse(storedPaymasters));
125129
}
130+
131+
// Wait for all useStateWithStorage hooks to initialize
132+
setIsInitialized(true);
126133
}, []);
127134

128135
const setPaymaster = (chainId: number, url: string, enabled: boolean) => {
@@ -137,6 +144,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
137144
return (
138145
<AppContext.Provider
139146
value={{
147+
isInitialized,
140148
activeComponent,
141149
setActiveComponent,
142150
chainId,

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

+8
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { NFTOptions } from './form/nft-options';
1010
import { SwapConfig } from './form/swap-config';
1111
import { TransactionOptions } from './form/transaction-options';
1212
import { WalletType } from './form/wallet-type';
13+
import { useContext } from 'react';
14+
import { AppContext } from './AppProvider';
1315

1416
const COMMON_OPTIONS = [
1517
ActiveComponent,
@@ -67,6 +69,12 @@ export default function DemoOptions({
6769
}: {
6870
component?: OnchainKitComponent;
6971
}) {
72+
const { isInitialized } = useContext(AppContext);
73+
74+
if (!isInitialized) {
75+
// return null; // or a loading state
76+
}
77+
7078
const commonElements = COMMON_OPTIONS.map((Component) => (
7179
<Component key={Component.name} />
7280
));

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ export function Chain() {
1717
<Label htmlFor="chain">Chain</Label>
1818
<Select
1919
value={chainId?.toString()}
20-
onValueChange={(value) =>
21-
value ? setChainId?.(Number.parseInt(value)) : value
22-
}
20+
onValueChange={(value) => {
21+
console.log('(salt-hash) chain value:', value);
22+
return value ? setChainId?.(Number.parseInt(value)) : value;
23+
}}
2324
>
2425
<SelectTrigger>
2526
<SelectValue placeholder="Select chain" />

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,15 @@ export function ComponentMode() {
1818
<Label htmlFor="mode">Component Mode</Label>
1919
<Select
2020
value={componentMode}
21-
onValueChange={(value: ComponentModeReact) => setComponentMode(value)}
21+
onValueChange={(value: ComponentModeReact) => {
22+
// Radix bug:
23+
// https://github.com/radix-ui/primitives/issues/3135
24+
if (!value) {
25+
return;
26+
}
27+
28+
return setComponentMode(value);
29+
}}
2230
>
2331
<SelectTrigger id="mode">
2432
<SelectValue placeholder="Select mode" />

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import {
66
SelectTrigger,
77
SelectValue,
88
} from '@/components/ui/select';
9-
import type { ComponentTheme as ComponentThemeType } from '@/types/onchainkit';
109
import { useContext } from 'react';
1110
import { AppContext } from '../AppProvider';
11+
import type { ComponentTheme as ComponentThemeReact } from '@/types/onchainkit';
1212

1313
export function ComponentTheme() {
1414
const { componentTheme, setComponentTheme } = useContext(AppContext);
@@ -17,8 +17,15 @@ export function ComponentTheme() {
1717
<div className="grid gap-2">
1818
<Label htmlFor="theme">Component Theme</Label>
1919
<Select
20+
defaultValue={componentTheme}
2021
value={componentTheme}
21-
onValueChange={(value: ComponentThemeType) => {
22+
onValueChange={(value: ComponentThemeReact) => {
23+
// Radix bug:
24+
// https://github.com/radix-ui/primitives/issues/3135
25+
if (!value) {
26+
return;
27+
}
28+
2229
setComponentTheme(value);
2330
}}
2431
>

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Label } from '@/components/ui/label';
22
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
3+
import { getStorageKey } from '@/lib/hooks';
34
import { getSlicedAddress } from '@/lib/utils';
45
import { useEffect, useState } from 'react';
56
import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi';
@@ -29,7 +30,7 @@ export function WalletType() {
2930
const [walletType, setWalletType] = useState<WalletPreference>();
3031

3132
useEffect(() => {
32-
const storedWalletType = localStorage.getItem('walletType');
33+
const storedWalletType = localStorage.getItem(getStorageKey('walletType'));
3334
if (storedWalletType) {
3435
setWalletType(storedWalletType as WalletPreference);
3536
}
@@ -46,14 +47,14 @@ export function WalletType() {
4647
// Set localStorage ONLY when user has connected
4748
// otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
4849
onSuccess: () => {
49-
localStorage.setItem('walletType', value);
50+
localStorage.setItem(getStorageKey('walletType'), value);
5051
},
5152
},
5253
);
5354
}
5455

5556
async function clearWalletType() {
56-
localStorage.removeItem('walletType');
57+
localStorage.removeItem(getStorageKey('walletType'));
5758
setWalletType(undefined);
5859
}
5960

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

+13-7
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ type StorageConfig<T> = {
3434

3535
const OCK_NAMESPACE_PREFIX = 'ock-';
3636

37+
export function getStorageKey(key: string) {
38+
return OCK_NAMESPACE_PREFIX + key;
39+
}
40+
3741
/**
3842
* Custom hook to manage state with localStorage
3943
* Also syncs to URL params on first load
@@ -49,14 +53,19 @@ export function useStateWithStorage<T>({
4953
const [state, setState] = useState<ReturnType>(defaultValue as ReturnType);
5054
const [isInitialized, setIsInitialized] = useState(false);
5155

56+
// Logging
57+
useEffect(() => {
58+
console.log(`${key} changed:`, state);
59+
}, [state, key]);
60+
5261
// Load initial value from URL or localStorage
5362
useEffect(() => {
5463
if (isInitialized) {
5564
return;
5665
}
5766

5867
const urlState = initializeStateFromUrl();
59-
const urlValue = urlState[key.toLowerCase()];
68+
const urlValue = urlState[key];
6069

6170
if (urlValue) {
6271
setState(parser(urlValue) as ReturnType);
@@ -65,7 +74,7 @@ export function useStateWithStorage<T>({
6574
}
6675

6776
try {
68-
const stored = window.localStorage.getItem(OCK_NAMESPACE_PREFIX + key);
77+
const stored = window.localStorage.getItem(getStorageKey(key));
6978
if (stored) {
7079
setState(parser(stored) as ReturnType);
7180
}
@@ -83,12 +92,9 @@ export function useStateWithStorage<T>({
8392

8493
try {
8594
if (state !== undefined) {
86-
window.localStorage.setItem(
87-
OCK_NAMESPACE_PREFIX + key,
88-
serializer(state),
89-
);
95+
window.localStorage.setItem(getStorageKey(key), serializer(state));
9096
} else {
91-
window.localStorage.removeItem(OCK_NAMESPACE_PREFIX + key);
97+
window.localStorage.removeItem(getStorageKey(key));
9298
}
9399
} catch (e) {
94100
console.warn(`Error writing to localStorage for ${key}:`, e);

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

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { defaultState } from '@/components/AppProvider';
12
import { OnchainKitComponent } from '@/types/onchainkit';
3+
import { getStorageKey } from './hooks';
24

35
const commonOptions = [
46
'activeComponent',
@@ -38,11 +40,12 @@ export function getShareableUrl(activeComponent?: OnchainKitComponent) {
3840
const params = new URLSearchParams();
3941

4042
for (const param of [...relevantParams, ...commonOptions]) {
41-
const value = localStorage.getItem(param);
42-
if (value) {
43+
const value = localStorage.getItem(getStorageKey(param));
44+
if (value && value !== defaultState[param as keyof typeof defaultState]) {
4345
params.set(param, value);
4446
}
4547
}
48+
4649
return `${window.location.origin}?${params.toString()}`;
4750
}
4851

@@ -61,7 +64,7 @@ export function initializeStateFromUrl(): Record<string, string> {
6164
const state: Record<string, string> = {};
6265

6366
for (const [key, value] of params.entries()) {
64-
localStorage.setItem(key, value);
67+
localStorage.setItem(getStorageKey(key), value);
6568
state[key] = value;
6669
}
6770
return state;

0 commit comments

Comments
 (0)