feat(ui): implement multiple buttons support

Author: jenshenJ

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.`);
         }