Stencil webcomponents from sdk-dapp-core-ui (#37)

README.md

@@ -4,6 +4,15 @@
 
 ## Usage
 
+In your project, make sure to use the `preserveSymlinks` option in the server configuration to ensure that the symlinks are preserved, for ease of development.
+
+``` js
+  resolve: {
+    preserveSymlinks: true, // 👈
+    alias: {
+      src: "/src",
+    },
+  },
 ```
 
 // TODO: DEMONSTRATE API

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-core",
-  "version": "0.0.0-alpha.9",
+  "version": "0.0.0-alpha.11",
   "main": "out/index.js",
   "module": "out/index.js",
   "types": "out/index.d.ts",
@@ -19,8 +19,8 @@
     "url": "git+https://github.com/multiversx/mx-sdk-dapp-core.git"
   },
   "scripts": {
-    "unpublish-verdaccio": "npm unpublish @multiversx/sdk-dapp-core@0.0.0-alpha.10 --registry http://localhost:4873",
-    "publish-verdaccio": "npm run unpublish-verdaccio && npm run compile && npm publish --registry http://localhost:4873/",
+    "unpublish-verdaccio": "npm unpublish @multiversx/sdk-dapp-core --force --registry http://localhost:4873",
+    "publish-verdaccio": "npm run unpublish-verdaccio && npm run compile-next && npm publish --registry http://localhost:4873/",
     "compile": "tsc && tsc-alias",
     "build-esbuild": "rimraf out && node esbuild.js",
     "build": "yarn build-esbuild && yarn compile",
@@ -43,7 +43,6 @@
     "@multiversx/sdk-web-wallet-iframe-provider": "2.0.1",
     "@multiversx/sdk-web-wallet-provider": "3.2.1",
     "isomorphic-fetch": "3.0.0",
-    "lit": "3.2.1",
     "lodash": "4.17.21",
     "protobufjs": "7.3.0",
     "socket.io-client": "4.7.5",
@@ -57,6 +56,9 @@
     "bignumber.js": "9.x",
     "immer": "10.x"
   },
+  "optionalDependencies": {
+    "@multiversx/sdk-dapp-core-ui": "file:../mx-sdk-dapp-core-ui"
+  },
   "resolutions": {
     "string-width": "4.1.0"
   },

src/core/methods/account/getWebviewToken.ts

@@ -1,5 +1,6 @@
 import { getWindowLocation } from 'utils/window/getWindowLocation';
 
+// TODO: also get from store
 export function getWebviewToken() {
   const { search } = getWindowLocation();
   const urlSearchParams = new URLSearchParams(search) as any;

src/core/providers/ProviderFactory.ts

@@ -7,6 +7,7 @@ import { setAccountProvider } from './accountProvider';
 import { DappProvider } from './DappProvider/DappProvider';
 import { createCrossWindowProvider } from './helpers/crossWindow/createCrossWindowProvider';
 import { createExtensionProvider } from './helpers/extension/createExtensionProvider';
+import { getConfig } from './helpers/getConfig';
 import { createIframeProvider } from './helpers/iframe/createIframeProvider';
 import { createLedgerProvider } from './helpers/ledger/createLedgerProvider';
 import {
@@ -18,10 +19,11 @@ import {
 export class ProviderFactory {
   public async create({
     type,
-    config,
+    config: userConfig,
     customProvider
   }: IProviderFactory): Promise<DappProvider> {
     let createdProvider: IProvider | null = null;
+    const { account, ui } = await getConfig(userConfig);
 
     switch (type) {
       case ProviderTypeEnum.extension: {
@@ -35,7 +37,7 @@ export class ProviderFactory {
 
       case ProviderTypeEnum.crossWindow: {
         const provider = await createCrossWindowProvider({
-          address: config?.account?.address
+          address: account?.address
         });
         createdProvider = provider as unknown as IProvider;
 
@@ -45,7 +47,10 @@ export class ProviderFactory {
       }
 
       case ProviderTypeEnum.ledger: {
-        const ledgerProvider = await createLedgerProvider();
+        const ledgerProvider = await createLedgerProvider(
+          ui.ledger.eventBus,
+          ui.ledger.mount
+        );
 
         if (!ledgerProvider) {
           throw new Error('Unable to create ledger provider');
@@ -69,7 +74,7 @@ export class ProviderFactory {
 
       case ProviderTypeEnum.metamask: {
         const provider = await createIframeProvider({
-          address: config?.account?.address,
+          address: account?.address,
           type: IframeLoginTypes.metamask
         });
 
@@ -86,7 +91,7 @@ export class ProviderFactory {
 
       case ProviderTypeEnum.passkey: {
         const provider = await createIframeProvider({
-          address: config?.account?.address,
+          address: account?.address,
           type: IframeLoginTypes.passkey
         });
 

src/core/providers/helpers/getConfig.ts

@@ -0,0 +1,38 @@
+import type { LedgerConnectModal } from '@multiversx/sdk-dapp-core-ui/dist/components/ledger-connect-modal';
+import { defineCustomElements } from '@multiversx/sdk-dapp-core-ui/loader';
+import { safeWindow } from 'constants/index';
+import {
+  IProviderConfig,
+  ProviderTypeEnum
+} from '../types/providerFactory.types';
+
+export const getConfig = async (config: IProviderConfig = {}) => {
+  if (!safeWindow.document) {
+    return config;
+  }
+
+  defineCustomElements(safeWindow);
+  const ledgerModalElement = document.createElement(
+    'ledger-connect-modal'
+  ) as LedgerConnectModal;
+  document.body.appendChild(ledgerModalElement);
+  await customElements.whenDefined('ledger-connect-modal');
+  const eventBus = await ledgerModalElement.getEventBus();
+
+  const ui = {
+    [ProviderTypeEnum.ledger]: {
+      eventBus,
+      mount: () => {
+        document.body.appendChild(ledgerModalElement);
+      }
+    }
+  };
+
+  return {
+    ...config,
+    ui: {
+      ...ui,
+      ...config.ui
+    }
+  };
+};