sygmaprotocol · FSM1 · Oct 13, 2023 · Oct 13, 2023
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# Sygma Widget UI
+# Sygma Widget UI
+
+test signing commit
diff --git a/packages/wallet-manager/src/WalletManagerContext.ts b/packages/wallet-manager/src/WalletManagerContext.ts
@@ -65,6 +65,6 @@ export class WalletManagerContextProvider extends LitElement {
   }
 
   render() {
-    return html` <slot></slot>`;
+    return html`<slot></slot>`;
   }
 }
diff --git a/packages/widget/index.html b/packages/widget/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + Lit-Element App</title>
+  <script type="module" src="/src/index.ts"></script>
+</head>
+
+<body>
+  <widget-root>
+  </widget-root>
+</body>
+
+</html>
diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -7,16 +7,26 @@
   "license": "LGPL-3.0-or-later",
   "type": "module",
   "scripts": {
-    "build": "tsc --build --clean && tsc --build ./tsconfig.json",
-    "dev": "tsc --build --clean && tsc --build ./tsconfig.json --watch",
+    "start": "npm run dev",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "tsc && vite preview",
     "clean": "rm -rf ./build",
     "lint": "eslint 'src/**/*.ts'",
     "lint:fix": "yarn run lint --fix"
   },
   "author": "Sygmaprotocol Product Team",
   "dependencies": {
-    "@buildwithsygma/sygma-sdk-core": "^2.2.0",
-    "ethers": "5.7.2",
-    "lit": "^2.8.0"
+    "@builtwithsygma/sygmaprotocol-wallet-manager": "1.0.0",
+    "@lit/context": "1.0.0",
+    "@lit/reactive-element": "2.0.0",
+    "ethers": "5.7",
+    "lit": "^3.0.0",
+    "lit-html": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.8.4",
+    "typescript": "5.2.2",
+    "vite": "4.4.11"
   }
 }
diff --git a/packages/widget/src/ConnectDialog.ts b/packages/widget/src/ConnectDialog.ts
@@ -0,0 +1,24 @@
+import { consume } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import {
+    WalletManagerContext,
+    WalletManagerController
+} from 'packages/wallet-manager/build';
+
+
+@customElement('connect-dialog')
+class ConnectDialog extends LitElement {
+    @consume({ context: WalletManagerContext, subscribe: true })
+    @property({ attribute: false })
+    walletManager?: WalletManagerController;
+
+    render() {
+        if (this.walletManager?.account) {
+            return html`
+
+    </wallet-manager-context>`;
+
+        }
+    }
+}
diff --git a/packages/widget/src/connect.ts b/packages/widget/src/connect.ts
@@ -0,0 +1,26 @@
+import { consume } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import {
+  WalletManagerContext,
+  WalletManagerController
+} from 'packages/wallet-manager/build';
+
+@customElement('connect-dialog')
+class ConnectDialog extends LitElement {
+  @consume({ context: WalletManagerContext, subscribe: true })
+  @property({ attribute: false })
+  walletManager?: WalletManagerController;
+
+  render() {
+    if (!this.walletManager || !this.walletManager.account) {
+      return html`<button @click=${this.walletManager?.connectEvmWallet}>
+        Connect
+      </button> `;
+    } else {
+      return html`<p>EVM Account: ${this.walletManager.evmWallet?.address}</p>`;
+    }
+  }
+}
+
+export { ConnectDialog };
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
@@ -0,0 +1 @@
+export { WidgetRoot } from './widget-root';
diff --git a/packages/widget/src/widget-root.ts b/packages/widget/src/widget-root.ts
@@ -0,0 +1,14 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { WalletManagerContextProvider } from '@builtwithsygma/sygmaprotocol-wallet-manager'
+
+@customElement('widget-root')
+class WidgetRoot extends LitElement {
+  render() {
+    return html`<wallet-manager-context>
+      <connect-dialog></connect-dialog>
+    </wallet-manager-context>`;
+  }
+}
+
+export { WidgetRoot };
diff --git a/packages/widget/vite.config.ts b/packages/widget/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  build: {
+    outDir: 'build',
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es']
+    },
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html')
+      }
+    }
+  }
+});