feat: implement MainButton

Author: evermake

packages/mini-app-react/src/context.ts

@@ -1,10 +1,17 @@
-import type { BackButton, Haptic, SettingsButton, Theme } from '@grom.js/mini-app'
+import type {
+  BackButton,
+  Haptic,
+  MainButton,
+  SettingsButton,
+  Theme,
+} from '@grom.js/mini-app'
 import type { Context } from 'react'
 import { createContext } from 'react'
 
 export interface MiniApp {
   backButton: BackButton.BackButton
   settingsButton: SettingsButton.SettingsButton
+  mainButton: MainButton.MainButton
   theme: Theme.Theme
   haptic: Haptic.Haptic
 }

packages/mini-app-react/src/hooks/useMainButton.ts

@@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+import { useMiniApp } from './useMiniApp'
+
+export interface UseMainButtonOptions {
+  text: string
+  visible: boolean
+  loading?: boolean
+  active?: boolean
+  shining?: boolean
+  bgColor?: string | null
+  textColor?: string | null
+  onClick?: () => void
+}
+
+export function useMainButton({
+  text,
+  visible,
+  loading,
+  active,
+  shining,
+  bgColor,
+  textColor,
+  onClick,
+}: UseMainButtonOptions): void {
+  const { mainButton } = useMiniApp()
+  useEffect(() => {
+    mainButton.stateStore.setState(prev => ({
+      text,
+      visible,
+      loading: loading ?? prev.loading,
+      active: active ?? prev.active,
+      shining: shining ?? prev.shining,
+      bgColor: bgColor === undefined ? prev.bgColor : bgColor,
+      textColor: textColor === undefined ? prev.textColor : textColor,
+    }))
+  }, [mainButton, text, visible, loading, active, shining, bgColor, textColor])
+  useEffect(() => {
+    if (onClick) {
+      return mainButton.onClick(onClick)
+    }
+  }, [onClick])
+}

packages/mini-app/src/Events.ts

@@ -6,6 +6,8 @@ import type { ThemeParams } from './LaunchParams.ts'
  * @see https://core.telegram.org/api/bots/webapps#incoming-events-client-to-mini-app
  */
 export interface IncomingEventMap {
+  main_button_pressed: void
+
   back_button_pressed: void
 
   settings_button_pressed: void
@@ -33,6 +35,16 @@ export interface OutgoingEventMap {
 
   web_app_ready: void
 
+  web_app_setup_main_button: {
+    is_visible?: boolean
+    is_active?: boolean
+    text: string
+    color?: string
+    text_color?: string
+    is_progress_visible?: boolean
+    has_shine_effect?: boolean
+  }
+
   web_app_setup_back_button: {
     is_visible: boolean
   }

packages/mini-app/src/index.ts

@@ -4,6 +4,7 @@ export * as InitParams from './InitParams.ts'
 export * as LaunchParams from './LaunchParams.ts'
 export * as BackButton from './modules/BackButton.ts'
 export * as Haptic from './modules/Haptic.ts'
+export * as MainButton from './modules/MainButton.ts'
 export * as SettingsButton from './modules/SettingsButton.ts'
 export * as Theme from './modules/Theme.ts'
 export * as SessionStorage from './SessionStorage.ts'

packages/mini-app/src/modules/MainButton.ts

@@ -0,0 +1,69 @@
+import type { Bridge } from '../Bridge'
+import type { UnsubscribeFn } from '../internal/EventBus'
+import type { StoredState } from '../SessionStorage'
+import type { Theme } from './Theme'
+import { Effect, Store } from '@tanstack/store'
+
+export interface MainButton {
+  stateStore: Store<State>
+  onClick: (listener: () => void) => UnsubscribeFn
+  offClick: (listener: any) => void
+}
+
+export interface State {
+  text: string
+  visible: boolean
+  loading: boolean
+  active: boolean
+  shining: boolean
+  bgColor: string | null
+  textColor: string | null
+}
+
+const INITIAL_STATE: State = {
+  text: 'Continue',
+  visible: false,
+  active: true,
+  shining: false,
+  loading: false,
+  bgColor: null,
+  textColor: null,
+}
+
+export const init = (options: {
+  bridge: Bridge
+  theme: Theme
+  storedState: StoredState<State>
+}): MainButton => {
+  const { bridge, theme, storedState } = options
+  const stateStore = new Store<State>(storedState.load() ?? INITIAL_STATE)
+  stateStore.subscribe(({ currentVal }) => {
+    storedState.save(currentVal)
+  })
+  const effect = new Effect({
+    fn: () => {
+      const state = stateStore.state
+      const palette = theme.paletteStore.state
+      bridge.emit('web_app_setup_main_button', {
+        text: state.text,
+        is_visible: state.visible,
+        is_active: state.active,
+        is_progress_visible: state.loading,
+        has_shine_effect: state.shining,
+        color: state.bgColor ?? palette.button_color ?? '#2481cc',
+        text_color: state.textColor ?? palette.button_text_color ?? '#ffffff',
+      })
+    },
+    deps: [stateStore, theme.paletteStore],
+  })
+  effect.mount()
+  return {
+    stateStore,
+    onClick: (listener) => {
+      return bridge.on('main_button_pressed', listener)
+    },
+    offClick: (listener) => {
+      bridge.off('main_button_pressed', listener)
+    },
+  }
+}