Create component dynamically (#106)

* fix: create component dynamically * fix: default WC modal never used * fix: default WC modal never used
vechain · Nov 27, 2023 · 2e75994 · 2e75994
1 parent 92a0f00
commit 2e75994
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 5 deletions.
diff --git a/apps/sample-angular-app/src/main.ts b/apps/sample-angular-app/src/main.ts
@@ -21,6 +21,7 @@ const vechainWalletKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     network: 'test',
     walletConnectOptions,
+    useWalletKitModal: true,
 };
 
 DAppKit.configure(vechainWalletKitOptions);
diff --git a/apps/sample-svelte-app/src/lib/index.ts b/apps/sample-svelte-app/src/lib/index.ts
@@ -14,6 +14,7 @@ const vechainWalletKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     network: 'test',
     walletConnectOptions,
+    useWalletKitModal: true,
 };
 
 DAppKit.configure(vechainWalletKitOptions);
diff --git a/apps/sample-vanilla-app/index.js b/apps/sample-vanilla-app/index.js
@@ -16,6 +16,7 @@ const vechainWalletKitOptions = {
     node: 'https://testnet.vechain.org/',
     network: 'test',
     walletConnectOptions,
+    useWalletKitModal: true,
 };
 
 const connex = DAppKit.configure(vechainWalletKitOptions);

diff --git a/apps/sample-vue-app/src/connex/ConnexProvider.vue b/apps/sample-vue-app/src/connex/ConnexProvider.vue
@@ -53,6 +53,7 @@ export default defineComponent({
         const connex = DAppKit.configure({
             nodeUrl: 'https://mainnet.vechain.org/',
             walletConnectOptions,
+            useWalletKitModal: true,
         });
 
         const onDisconnected = () => {

diff --git a/packages/dapp-kit-react/src/ConnexProvider.tsx b/packages/dapp-kit-react/src/ConnexProvider.tsx
@@ -35,6 +35,7 @@ export const ConnexProvider: React.FC<ConnexProviderOptions> = ({
     nodeOptions,
     walletConnectOptions,
     persistState = false,
+    useWalletKitModal = false,
 }): React.ReactElement => {
     const [account, setAccount] = useState<string | null>(
         persistState ? retrieve('account') : null,
@@ -49,8 +50,14 @@ export const ConnexProvider: React.FC<ConnexProviderOptions> = ({
                 nodeUrl: nodeOptions.node,
                 genesis: nodeOptions.network,
                 walletConnectOptions,
+                useWalletKitModal,
             }),
-        [nodeOptions.network, nodeOptions.node, walletConnectOptions],
+        [
+            useWalletKitModal,
+            nodeOptions.network,
+            nodeOptions.node,
+            walletConnectOptions,
+        ],
     );
 
     /**

diff --git a/packages/dapp-kit-react/src/types.ts b/packages/dapp-kit-react/src/types.ts
@@ -23,6 +23,7 @@ export interface ConnexProviderOptions {
     nodeOptions: Omit<Options, 'signer'>;
     walletConnectOptions?: WalletConnectOptions;
     persistState?: boolean;
+    useWalletKitModal?: boolean;
 }
 
 /**

diff --git a/packages/dapp-kit-ui/index.js b/packages/dapp-kit-ui/index.js
@@ -16,6 +16,7 @@ const vechainWalletKitOptions = {
     node: 'https://testnet.vechain.org/',
     network: 'test',
     walletConnectOptions,
+    useWalletKitModal: true,
 };
 
 DAppKit.configure(vechainWalletKitOptions);
diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts
@@ -4,13 +4,20 @@ import { CustomWalletConnectModal, DAppKitModal } from './modal';
 
 let connex: MultiWalletConnex | null = null;
 
+type DAppKitOptions = Omit<ConnexOptions, 'customWcModal'> & {
+    useWalletKitModal?: boolean;
+};
+
 const DAppKit = {
-    configure(options: ConnexOptions): MultiWalletConnex {
-        if (!options.customWcModal) {
-            options.customWcModal = CustomWalletConnectModal.getInstance();
+    configure(options: DAppKitOptions): MultiWalletConnex {
+        const connexOptions: ConnexOptions = options;
+
+        if (options.useWalletKitModal) {
+            connexOptions.customWcModal =
+                CustomWalletConnectModal.getInstance();
         }
 
-        connex = new MultiWalletConnex(options);
+        connex = new MultiWalletConnex(connexOptions);
 
         return connex;
     },