feat(ui): implement multiple buttons support

Author: jenshenJ

packages/ui-react/src/components/TonConnectButton.tsx

@@ -1,12 +1,12 @@
-import { CSSProperties, FunctionComponent, memo, useEffect } from 'react';
+import { CSSProperties, FunctionComponent, memo, useEffect, useRef } from 'react';
 import { useTonConnectUI } from '../hooks/useTonConnectUI';
-
-const buttonRootId = 'ton-connect-button';
+import { addButtonId, removeButtonId, getButtonIds, DEFAULT_BUTTON_ID } from '../utils/tonconnect-button-ids';
 
 export interface TonConnectButtonProps {
     className?: string;
-
     style?: CSSProperties;
+
+    id?: string;
 }
 
 /**
@@ -15,18 +15,28 @@ export interface TonConnectButtonProps {
  * @param [className] css class to add to the button container.
  * @param [style] style to add to the button container.
  * @constructor
- */
-const TonConnectButton: FunctionComponent<TonConnectButtonProps> = ({ className, style }) => {
+ */const TonConnectButton: FunctionComponent<TonConnectButtonProps> = ({ className, style, id }) => {
     const [_, setOptions] = useTonConnectUI();
+    const buttonId = useRef<string>(
+        id ??
+        (getButtonIds().length === 0
+            ? DEFAULT_BUTTON_ID
+            : `ton-connect-button-${Math.random().toString(36).slice(2, 10)}`)
+    );
 
     useEffect(() => {
-        setOptions({ buttonRootId });
-        return () => setOptions({ buttonRootId: null });
+        const newIds = addButtonId(buttonId.current);
+        setOptions({ buttonRootId: newIds });
+
+        return () => {
+            const newIds = removeButtonId(buttonId.current);
+            setOptions({ buttonRootId: newIds.length > 0 ? newIds : null });
+        };
     }, [setOptions]);
 
     return (
         <div
-            id={buttonRootId}
+            id={buttonId.current}
             className={className}
             style={{ width: 'fit-content', ...style }}
         ></div>

packages/ui-react/src/utils/tonconnect-button-ids.ts

@@ -0,0 +1,19 @@
+export const DEFAULT_BUTTON_ID = 'ton-connect-button';
+
+let ids: string[] = [];
+
+export function getButtonIds() {
+    return [...ids];
+}
+
+export function addButtonId(id: string) {
+    if (!ids.includes(id)) {
+        ids.push(id);
+    }
+    return getButtonIds();
+}
+
+export function removeButtonId(id: string) {
+    ids = ids.filter(existingId => existingId !== id);
+    return getButtonIds();
+} 

packages/ui/src/app/App.tsx

@@ -33,10 +33,14 @@ const App: Component<AppProps> = props => {
                 <ConnectorContext.Provider value={appState.connector}>
                     <GlobalStyles />
                     <ThemeProvider theme={themeState}>
-                        <Show when={appState.buttonRootId}>
-                            <Portal mount={document.getElementById(appState.buttonRootId!)!}>
-                                <AccountButton />
-                            </Portal>
+                        <Show when={Array.isArray(appState.buttonRootId) && appState.buttonRootId.length > 0}>
+                            <>
+                                {appState.buttonRootId && (appState.buttonRootId as string[]).map((id) => (
+                                    <Portal mount={document.getElementById(id)!}>
+                                        <AccountButton />
+                                    </Portal>
+                                ))}
+                            </>
                         </Show>
                         <Dynamic component={globalStylesTag}>
                             <WalletsModal />

packages/ui/src/app/state/app.state.ts

@@ -7,7 +7,7 @@ import { Loadable } from 'src/models/loadable';
 
 export type AppState = {
     connector: ITonConnect;
-    buttonRootId: string | null;
+    buttonRootId: string | null | string[];
     language: Locales;
     walletsListConfiguration: WalletsListConfiguration | {};
     connectRequestParameters?: Loadable<ConnectAdditionalRequest> | null;

packages/ui/src/models/ton-connect-ui-options.ts

@@ -14,7 +14,7 @@ export interface TonConnectUiOptions {
      * HTML element id to attach the wallet connect button. If not passed button won't appear.
      * @default null.
      */
-    buttonRootId?: string | null;
+    buttonRootId?: string | null | string[];
 
     /**
      * Language for the phrases it the UI elements.

packages/ui/src/ton-connect-ui.ts

@@ -993,11 +993,21 @@ export class TonConnectUI {
         return rootId;
     }
 
-    private checkButtonRootExist(buttonRootId: string | null | undefined): void | never {
+    private checkButtonRootExist(buttonRootId: string | string[] | null | undefined): void | never {
         if (buttonRootId == null) {
             return;
         }
 
+        if (Array.isArray(buttonRootId)) {
+            for (const buttonId of buttonRootId) {
+                if (document.getElementById(buttonId)) {
+                    return;
+                }
+            }
+
+            throw new TonConnectUIError(`${buttonRootId} element not found in the document.`);
+        }
+
         if (!document.getElementById(buttonRootId)) {
             throw new TonConnectUIError(`${buttonRootId} element not found in the document.`);
         }