feat(sdk): add shine effect in Main Button

Telegram-Mini-Apps · Oct 1, 2024 · d759840 · d759840
1 parent fa8a7b7
commit d759840
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 1 deletion.
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
@@ -88,6 +88,7 @@ export {
 export * as mainButton from '@/scopes/components/main-button/instance.js';
 export {
   backgroundColor as mainButtonBackgroundColor,
+  hasShineEffect as mainButtonHasShineEffect,
   isMounted as isMainButtonMounted,
   isVisible as isMainButtonVisible,
   isEnabled as isMainButtonEnabled,

diff --git a/packages/sdk/src/scopes/components/main-button/methods.test.ts b/packages/sdk/src/scopes/components/main-button/methods.test.ts
@@ -56,6 +56,7 @@ describe.each([
   beforeEach(() => {
     state.set({
       backgroundColor: '#123456',
+      hasShineEffect: true,
       isEnabled: true,
       isLoaderVisible: true,
       isVisible: true,
@@ -77,6 +78,7 @@ describe('mounted', () => {
     it('should save the state in storage key tapps/mainButton', () => {
       state.set({
         backgroundColor: '#123456',
+        hasShineEffect: true,
         isEnabled: true,
         isLoaderVisible: true,
         isVisible: true,
@@ -90,13 +92,14 @@ describe('mounted', () => {
       });
 
       expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith('tapps/mainButton', '{"backgroundColor":"#111111","isEnabled":true,"isLoaderVisible":true,"isVisible":true,"text":"TEXT","textColor":"#789abc"}');
+      expect(spy).toHaveBeenCalledWith('tapps/mainButton', '{"backgroundColor":"#111111","hasShineEffect":true,"isEnabled":true,"isLoaderVisible":true,"isVisible":true,"text":"TEXT","textColor":"#789abc"}');
     });
 
     it('should call "web_app_setup_main_button" only if text is not empty', () => {
       const spy = mockPostEvent();
       state.set({
         backgroundColor: '#123456',
+        hasShineEffect: false,
         isEnabled: true,
         isLoaderVisible: true,
         isVisible: true,
@@ -109,6 +112,7 @@ describe('mounted', () => {
       setParams({ text: 'abc' });
       expect(spy).toHaveBeenCalledTimes(1);
       expect(spy).toHaveBeenCalledWith('web_app_setup_main_button', {
+        has_shine_effect: false,
         is_visible: true,
         is_active: true,
         is_progress_visible: true,
@@ -228,6 +232,7 @@ describe('setParams', () => {
   it('should merge passed object with the state', () => {
     state.set({
       backgroundColor: '#123456',
+      hasShineEffect: true,
       isEnabled: true,
       isLoaderVisible: true,
       isVisible: true,
@@ -245,6 +250,7 @@ describe('setParams', () => {
 
     expect(state()).toStrictEqual({
       backgroundColor: '#111111',
+      hasShineEffect: true,
       isEnabled: false,
       isLoaderVisible: false,
       isVisible: true,

diff --git a/packages/sdk/src/scopes/components/main-button/methods.ts b/packages/sdk/src/scopes/components/main-button/methods.ts
@@ -68,6 +68,7 @@ function onStateChanged(s: State): void {
   // crash due to the empty value of the text.
   if (s.text) {
     postEvent('web_app_setup_main_button', {
+      has_shine_effect: s.hasShineEffect,
       is_visible: s.isVisible,
       is_active: s.isEnabled,
       is_progress_visible: s.isLoaderVisible,

diff --git a/packages/sdk/src/scopes/components/main-button/signals.ts b/packages/sdk/src/scopes/components/main-button/signals.ts
@@ -9,6 +9,7 @@ import type { State } from './types.js';
  */
 export const state = signal<State>({
   backgroundColor: '#000000',
+  hasShineEffect: false,
   isEnabled: true,
   isLoaderVisible: false,
   isVisible: false,
@@ -32,6 +33,11 @@ function createStateComputed<K extends keyof State>(key: K): Computed<State[K]>
  */
 export const backgroundColor = createStateComputed('backgroundColor');
 
+/**
+ * @see State.hasShineEffect
+ */
+export const hasShineEffect = createStateComputed('hasShineEffect');
+
 /**
  * @see State.isEnabled
  */

diff --git a/packages/sdk/src/scopes/components/main-button/types.ts b/packages/sdk/src/scopes/components/main-button/types.ts
@@ -5,6 +5,10 @@ export interface State {
    * The main button background color.
    */
   backgroundColor: RGB;
+  /**
+   * True if the Main Button has a shining effect.
+   */
+  hasShineEffect: boolean;
   /**
    * True if the main button is currently clickable.
    */