Add property used to always show the connect modal (#391)

* feat: add support for only showing connect

* fix: add call to close

Author: HiiiiD

packages/dapp-kit-react/src/DAppKitProvider/DAppKitProvider.tsx

@@ -151,6 +151,7 @@ export const DAppKitProvider = ({
     connectionCertificate: connectionCertificateData,
     allowedWallets,
     v2Api,
+    alwaysShowConnect,
 }: DAppKitProviderOptions): React.ReactElement | null => {
     const [dAppKit, setDAppKit] = useState<DAppKit | null>(null);
     useEffect(() => {
@@ -169,6 +170,7 @@ export const DAppKitProvider = ({
             connectionCertificate: connectionCertificateData,
             allowedWallets,
             v2Api,
+            alwaysShowConnect,
         });
         setDAppKit(kit);
     }, [
@@ -186,6 +188,7 @@ export const DAppKitProvider = ({
         connectionCertificateData,
         allowedWallets,
         v2Api.enabled,
+        alwaysShowConnect,
     ]);
 
     if (!dAppKit) {

packages/dapp-kit-ui/src/client.ts

@@ -66,6 +66,12 @@ export type DAppKitUIOptions = DAppKitOptions & {
     modalParent?: HTMLElement;
     onSourceClick?: (source?: SourceInfo) => void;
     v2Api: DappKitUIV2ApiOptions;
+    /**
+     * Always show the connect Modal, even if the user is connected.
+     * **This feature should not be used unless you really know what you need it for**
+     * @default false
+     */
+    alwaysShowConnect?: boolean;
 };
 
 export const DAppKitUI = {
@@ -83,6 +89,8 @@ export const DAppKitUI = {
             options.v2Api.onConnectResponse = () => Promise.resolve();
         if (options.v2Api.autoInitialize === undefined)
             options.v2Api.autoInitialize = true;
+        if (options.alwaysShowConnect === undefined)
+            options.alwaysShowConnect = false;
         dappKitOptions = options as ParsedOptions;
         dappKit = new DAppKit(options);
 

packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts

@@ -137,6 +137,10 @@ export class ConnectModal extends LitElement {
         return DAppKitUI.get().options.v2Api.enabled ?? false;
     }
 
+    private get alwaysShowConnect(): boolean {
+        return DAppKitUI.configuration?.alwaysShowConnect ?? false;
+    }
+
     @property({ type: Function })
     onSourceClick = (source?: SourceInfo): void => {
         if (!source) return;
@@ -169,7 +173,15 @@ export class ConnectModal extends LitElement {
                         result,
                     );
                 })
-                .then(() => this.requestUpdate())
+                .then(() => {
+                    if (this.alwaysShowConnect) {
+                        this.setWaitingForTheSignature(false);
+                        this.requestForConnectionCertificate = false;
+                        DAppKitUI.modal.close();
+                    }
+
+                    this.requestUpdate();
+                })
                 .catch((err): void => {
                     DAppKitLogger.error(
                         'Connection Attempt',
@@ -184,6 +196,11 @@ export class ConnectModal extends LitElement {
         this.wallet
             .connect()
             .then(() => {
+                if (this.alwaysShowConnect) {
+                    this.setWaitingForTheSignature(false);
+                    this.requestForConnectionCertificate = false;
+                    DAppKitUI.modal.close();
+                }
                 this.requestUpdate();
             })
             .catch((err): void => {

packages/dapp-kit-ui/src/components/modals/modal.ts

@@ -72,6 +72,10 @@ export class Modal extends LitElement {
         );
     }
 
+    private get alwaysShowConnect(): boolean {
+        return DAppKitUI.configuration?.alwaysShowConnect ?? false;
+    }
+
     @property()
     address = DAppKitUI.wallet.state.address ?? '';
 
@@ -112,7 +116,7 @@ export class Modal extends LitElement {
 
         return html`
             <div>
-                ${this.address
+                ${this.address && !this.alwaysShowConnect
                     ? html` <vdk-address-modal
                           .mode=${this.mode}
                           .i18n=${this.i18n}