Skip to content

Commit 1cc6e3b

Browse files
smgvsmgv
committed
aap.tsx changes
1 parent 1cfd33d commit 1cc6e3b

File tree

6 files changed

+62
-94
lines changed

6 files changed

+62
-94
lines changed

‎packages/modal-ui/index.html‎

Lines changed: 15 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,20 @@
1-
<html>
1+
<!doctype html>
2+
<html lang="en">
23
<head>
3-
<title>Test web3auth app</title>
4+
<script type="module">
5+
import { Buffer } from "buffer";
6+
import process from "process";
7+
window.Buffer = Buffer;
8+
window.process = process;
9+
</script>
10+
<meta charset="utf-8" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1" />
12+
<meta name="theme-color" content="#000000" />
13+
<title>Web3Auth Modal UI</title>
414
</head>
5-
615
<body>
7-
<h1>Test web3auth app</h1>
8-
<div>
9-
<button class="show-modal" onclick="showModal()">Show Modal</button>
10-
</div>
11-
<script src="./dist/assets/index-De1Kpl9H.js"></script>
12-
<script src="https://cdn.jsdelivr.net/npm/@web3auth/auth"></script>
13-
<script>
14-
let modal = null;
15-
let testEventEmitter = null;
16-
function showModal() {
17-
console.log("open");
18-
modal.open();
19-
// testEventEmitter.emit("connecting", { adapter: "auth" })
20-
// testEventEmitter.emit("errored", { error: new Error("something went wrong") })
21-
// testEventEmitter.emit("connected", { adapter: "wallet-connect-v1" })
22-
// testEventEmitter.emit("disconnected", { adapter: "wallet-connect-v1" })
23-
}
24-
(async function init() {
25-
try {
26-
testEventEmitter = new Auth.SafeEventEmitter();
27-
modal = new Ui({
28-
adapterListener: testEventEmitter,
29-
theme: "dark",
30-
// version: "1",
31-
});
32-
await modal.initModal();
33-
console.log("modal init");
34-
modal.addSocialLogins(
35-
"auth",
36-
{
37-
google: {
38-
name: "google",
39-
},
40-
facebook: {
41-
name: "facebook",
42-
},
43-
twitter: {
44-
name: "twitter",
45-
},
46-
reddit: {
47-
name: "reddit",
48-
},
49-
twitch: {
50-
name: "twitch",
51-
},
52-
github: {
53-
name: "github",
54-
},
55-
},
56-
["facebook"]
57-
);
58-
modal.initExternalWalletContainer();
59-
modal.addWalletLogins(
60-
{
61-
"wallet-connect-v2": {
62-
label: "wallet-connect-v2",
63-
},
64-
},
65-
{ showExternalWalletsOnly: false }
66-
);
67-
testEventEmitter.emit("adapter_data_updated", { adapterName: "wallet-connect-v1", data: { uri: "alslkslkalls" } });
68-
// showModal()
69-
} catch (error) {
70-
console.log("error in ui", error);
71-
}
72-
})();
73-
</script>
16+
<noscript>You need to enable JavaScript to run this app.</noscript>
17+
<div id="root" class="w3a-parent-container"></div>
18+
<script src="/src/index.tsx" type="module"></script>
7419
</body>
7520
</html>

‎packages/modal-ui/package.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
"node": ">=18.x",
2323
"npm": ">=9.x"
2424
},
25+
"files": [
26+
"dist"
27+
],
28+
"jsdelivr": "dist/ui.umd.min.js",
2529
"keywords": [
2630
"blockchain",
2731
"ethereum",
@@ -31,6 +35,8 @@
3135
"web3Auth/ui"
3236
],
3337
"license": "MIT",
38+
"main": "dist/lib.cjs/packages/ui/src/index.js",
39+
"module": "dist/lib.esm/packages/ui/src/index.js",
3440
"name": "@web3auth/modal-ui",
3541
"publishConfig": {
3642
"access": "public"
@@ -45,5 +51,7 @@
4551
"serve": "vite preview",
4652
"start": "vite"
4753
},
54+
"types": "dist/types/index.d.ts",
55+
"unpkg": "dist/ui.umd.min.js",
4856
"version": "0.0.0"
4957
}

‎packages/modal-ui/src/App.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import { createSignal, type Component } from "solid-js";
2-
import { Modal } from "./components/Modal";
3-
import { Body } from "./components/Body";
1+
import { onMount, type Component } from "solid-js";
2+
import { LoginModal } from "./loginModal";
3+
// import { Auth } from "@web3auth/auth";
44

55
const App: Component = () => {
6-
const [open, setOpen] = createSignal(false);
6+
onMount(async () => {
7+
const adapterListener: any = null;
8+
const loginModal = new LoginModal({
9+
chainNamespace: "eip155",
10+
walletRegistry: { default: {}, others: {} },
11+
adapterListener: adapterListener,
12+
});
13+
await loginModal.initModal();
14+
});
715
return (
816
<div class="w3a--w-screen w3a--h-screen w3a--flex w3a--items-center w3a--justify-center w3a--flex-col w3a--gap-4">
917
<h1 class="w3a--text-3xl w3a--font-bold w3a--text-slate-700">Try out your new modal</h1>
10-
<button onClick={() => setOpen(true)}>Open Modal</button>
11-
<Modal open={open()} onClose={() => setOpen(false)} placement="center" padding={false} showCloseIcon>
12-
<Body />
13-
</Modal>
1418
</div>
1519
);
1620
};

‎packages/modal-ui/src/context/ThemeContext.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,3 @@ import { createContext } from "solid-js";
33
export const ThemedContext = createContext({
44
isDark: true, // default value
55
});
6-
7-
8-

‎packages/modal-ui/src/loginModal.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import "./index.css";
2-
32
import { applyWhiteLabelTheme, LANGUAGES, SafeEventEmitter } from "@web3auth/auth";
43
import {
54
ADAPTER_EVENTS,
@@ -18,9 +17,7 @@ import {
1817
} from "@web3auth/base";
1918
import { render } from "solid-js/web";
2019
import { ThemedContext } from "./context/ThemeContext";
21-
2220
import { LoginModal as Modal } from "./components/LoginModal";
23-
// import { ThemedContext } from "./context/ThemeContext";
2421
import {
2522
DEFAULT_LOGO_DARK,
2623
DEFAULT_LOGO_LIGHT,
@@ -39,7 +36,6 @@ import { getUserLanguage } from "./utils/modal";
3936
function createWrapper(parentZIndex: string): HTMLElement {
4037
const existingWrapper = document.getElementById("w3a-parent-container");
4138
if (existingWrapper) existingWrapper.remove();
42-
4339
const parent = document.createElement("section");
4440
parent.classList.add("w3a-parent-container");
4541
parent.setAttribute("id", "w3a-parent-container");
@@ -207,7 +203,7 @@ export class LoginModal extends SafeEventEmitter {
207203
}
208204

209205
render(
210-
() =>
206+
() => (
211207
<ThemedContext.Provider value={darkState}>
212208
<Modal
213209
closeModal={this.closeModal}
@@ -220,9 +216,10 @@ export class LoginModal extends SafeEventEmitter {
220216
chainNamespace={this.chainNamespace}
221217
walletRegistry={this.walletRegistry}
222218
/>
223-
</ThemedContext.Provider>,
224-
root!);
225-
219+
</ThemedContext.Provider>
220+
),
221+
root!
222+
);
226223

227224
if (this.uiConfig?.theme) {
228225
const rootElement = document.getElementById("w3a-parent-container") as HTMLElement;

‎packages/modal-ui/vite.config.ts‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,30 @@ export default defineConfig({
1515
server: {
1616
port: 3000,
1717
},
18+
// resolve: {
19+
// alias: {
20+
// buffer: resolve("../../node_modules/buffer"),
21+
// process: resolve("../../node_modules/process"),
22+
// },
23+
// },
24+
define: {
25+
global: "globalThis",
26+
},
1827
build: {
1928
target: "esnext",
20-
},
21-
resolve: {
22-
alias: {
23-
buffer: resolve("../../node_modules/buffer"),
24-
process: resolve("../../node_modules/process"),
29+
lib: {
30+
entry: resolve(__dirname, "src/loginModal.tsx"),
31+
name: "Ui",
32+
fileName: (format) => `ui.${format}.js`,
33+
formats: ["es", "umd", "cjs"],
34+
},
35+
rollupOptions: {
36+
external: ["solid-js"],
37+
output: {
38+
globals: {
39+
"solid-js": "Solid",
40+
},
41+
},
2542
},
2643
},
2744
});

0 commit comments

Comments
 (0)