refactor: builder app theme initialize and go back

.changeset/soft-eggs-glow.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@apps/builder': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Hides the go back button on header when embedded mode is enabled

apps/builder/lib/constants.ts

@@ -1,13 +1,4 @@
-import {
-  notoSans,
-  inter,
-  domine,
-  ebGaramond,
-  breeSerif,
-  teko,
-  bellota,
-  newAmsterdam
-} from '@/lib/fonts'
+import { notoSans, inter, domine, ebGaramond, breeSerif, bellota } from '@/lib/fonts'
 
 export const ACCENT_COLORS = ['#3B82F6', '#EF4444', '#F59E0B', '#10B981']
 export const BG_COLORS = ['#202020', '#363636', '#FFFFFF']
@@ -17,16 +8,14 @@ export const RADIUS_NAME_VALUE_MAP = {
   S: '1px',
   M: '2px',
   L: '4px',
-  XL: '6px'
+  XL: '8px'
 }
 
 export const FONT_OPTIONS = [
-  { label: 'Noto Sans', value: notoSans.style.fontFamily },
   { label: 'Inter', value: inter.style.fontFamily },
+  { label: 'Noto Sans', value: notoSans.style.fontFamily },
   { label: 'Domine', value: domine.style.fontFamily },
   { label: 'EB Garamond', value: ebGaramond.style.fontFamily },
   { label: 'Bree Serif', value: breeSerif.style.fontFamily },
-  { label: 'Teko', value: teko.style.fontFamily },
-  { label: 'Bellota', value: bellota.style.fontFamily },
-  { label: 'New Amsterdam', value: newAmsterdam.style.fontFamily }
+  { label: 'Bellota', value: bellota.style.fontFamily }
 ]

apps/builder/lib/fonts.ts

@@ -1,14 +1,4 @@
-import {
-  Noto_Sans,
-  Inter,
-  Domine,
-  EB_Garamond,
-  Bree_Serif,
-  Teko,
-  Bellota,
-  Delius,
-  Agbalumo
-} from 'next/font/google'
+import { Noto_Sans, Inter, Domine, EB_Garamond, Bree_Serif, Bellota } from 'next/font/google'
 import localFont from 'next/font/local'
 
 export const khTeka = localFont({
@@ -36,25 +26,22 @@ export const khTeka = localFont({
   ]
 })
 
-export const newAmsterdam = localFont({
-  src: [{ path: '../app/fonts/NewAmsterdam-Regular.ttf', weight: '400', style: 'normal' }]
-})
-
 export const inter = Inter({
   subsets: ['latin'],
-  weight: ['400', '500'],
-  style: ['normal']
+  weight: ['400', '500', '600', '700'],
+  style: ['normal'],
+  display: 'swap'
 })
 
 export const domine = Domine({
   subsets: ['latin'],
-  weight: ['400', '500'],
+  weight: ['400', '500', '600', '700'],
   style: ['normal']
 })
 
 export const ebGaramond = EB_Garamond({
   subsets: ['latin'],
-  weight: ['400', '500'],
+  weight: ['400', '500', '600', '700'],
   style: ['normal']
 })
 
@@ -64,30 +51,13 @@ export const breeSerif = Bree_Serif({
   style: ['normal']
 })
 
-export const teko = Teko({
-  subsets: ['latin'],
-  weight: ['400', '500'],
-  style: ['normal']
-})
-
 export const bellota = Bellota({
   subsets: ['latin'],
-  weight: ['400'],
+  weight: ['300', '400', '700'],
   style: ['normal']
 })
-
 export const notoSans = Noto_Sans({
   subsets: ['latin'],
-  weight: ['400', '500'],
+  weight: ['400', '500', '600', '700'],
   style: ['normal']
 })
-
-export const delius = Delius({
-  subsets: ['latin'],
-  weight: '400'
-})
-
-export const agbalumo = Agbalumo({
-  subsets: ['latin'],
-  weight: '400'
-})

apps/builder/lib/theme-store.ts

@@ -1,3 +1,4 @@
+import { inter } from '@/lib/fonts'
 import { urlStateUtils } from '@/lib/url-state'
 import { AppKit } from '@reown/appkit'
 import { ThemeVariables } from '@reown/appkit-core'
@@ -20,12 +21,21 @@ export const state = proxy<ThemeState>({
   borderRadius: '2px',
   themeVariables: {},
   modal: undefined,
-  fontFamily: ''
+  fontFamily: inter.style.fontFamily
 })
 
 export const ThemeStore = {
   state,
 
+  initializeThemeVariables(value: ThemeState['themeVariables']) {
+    state.mixColorStrength = value['--w3m-color-mix-strength'] || 0
+    state.mixColor = value['--w3m-color-mix'] || ''
+    state.accentColor = value['--w3m-accent'] || ''
+    state.borderRadius = value['--w3m-border-radius-master'] || '2px'
+    state.fontFamily = value['--w3m-font-family'] || inter.style.fontFamily
+    state.themeVariables = value
+  },
+
   setMixColorStrength(value: ThemeState['mixColorStrength']) {
     state.mixColorStrength = value
     if (state.modal) {
@@ -58,14 +68,6 @@ export const ThemeStore = {
     }
   },
 
-  setThemeVariables(value: ThemeState['themeVariables']) {
-    state.themeVariables = value
-    if (state.modal) {
-      state.modal.setThemeVariables(value)
-      urlStateUtils.updateURLWithState({ themeVariables: value })
-    }
-  },
-
   setFontFamily(value: ThemeState['fontFamily']) {
     state.fontFamily = value
     if (state.modal) {

apps/builder/providers/appkit-context-provider.tsx

@@ -10,6 +10,7 @@ import { useSnapshot } from 'valtio'
 import { UniqueIdentifier } from '@dnd-kit/core'
 import { defaultCustomizationConfig } from '@/lib/config'
 import { useTheme } from 'next-themes'
+import { inter } from '@/lib/fonts'
 
 interface AppKitProviderProps {
   children: ReactNode
@@ -101,7 +102,7 @@ export const ContextProvider: React.FC<AppKitProviderProps> = ({ children }) =>
     ThemeStore.setMixColor(variables['--w3m-color-mix'] || '')
     ThemeStore.setMixColorStrength(variables['--w3m-color-mix-strength'] || 0)
     ThemeStore.setBorderRadius(variables['--w3m-border-radius-master'] || '2px')
-    ThemeStore.setFontFamily(variables['--w3m-font-family'] || '')
+    ThemeStore.setFontFamily(variables['--w3m-font-family'] || inter.style.fontFamily)
   }
 
   function resetConfigs() {

apps/builder/providers/appkit-provider.tsx

@@ -43,6 +43,7 @@ export const modal = createAppKit({
 })
 
 ThemeStore.setModal(modal)
+ThemeStore.initializeThemeVariables(initialConfig?.themeVariables || {})
 
 export function AppKitProvider({
   children,

packages/scaffold-ui/src/partials/w3m-header/index.ts

@@ -209,11 +209,13 @@ export class W3mHeader extends LitElement {
   private leftHeaderTemplate() {
     const { view } = RouterController.state
     const isConnectHelp = view === 'Connect'
+    const isEmbeddedEnable = OptionsController.state.enableEmbedded
     const isApproveTransaction = view === 'ApproveTransaction'
     const isConnectingSIWEView = view === 'ConnectingSiwe'
     const isAccountView = view === 'Account'
 
-    const shouldHideBack = isApproveTransaction || isConnectingSIWEView
+    const shouldHideBack =
+      isApproveTransaction || isConnectingSIWEView || (isConnectHelp && isEmbeddedEnable)
 
     if (isAccountView) {
       return html`<wui-select