Skip to content

Commit 8ab49d5

Browse files
smgvsmgv
committed
UI added
1 parent 740af55 commit 8ab49d5

File tree

21 files changed

+387
-84
lines changed

21 files changed

+387
-84
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@
1313
"changeProcessCWD": true
1414
}
1515
],
16-
"cSpell.words": ["JRPC","Solana"]
16+
"cSpell.words": ["clsx", "JRPC", "Ronin", "Solana"]
1717
}

‎package-lock.json‎

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,8 @@
8484
"packages/plugins/*",
8585
"packages/providers/*",
8686
"packages/ui"
87-
]
87+
],
88+
"dependencies": {
89+
"tailwind-merge": "^2.5.4"
90+
}
8891
}

‎packages/modal-ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"url": "https://github.com/Web3Auth/Web3Auth/issues"
44
},
55
"dependencies": {
6+
"clsx": "^2.1.1",
67
"solid-js": "^1.8.11"
78
},
89
"description": "Ui modal for web3Auth",

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

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import { batch, type Component, createSignal } from "solid-js";
1+
import { createSignal, type Component } from "solid-js";
2+
import { Modal } from "./components/Modal";
3+
import { Body } from "./components/Body";
24

35
const App: Component = () => {
4-
const [counter, setCounter] = createSignal(0);
5-
6-
const incrementCounter = () => {
7-
batch(() => {
8-
setCounter((c) => c + 1);
9-
});
10-
};
6+
const [open, setOpen] = createSignal(false);
117
return (
12-
<>
13-
<p class="text-4xl text-app-white text-center py-20 bg-app-primary-600">Hello tailwind! hello</p>
14-
<br />
15-
<button onClick={incrementCounter}>Click to increment - {counter()}</button>
16-
</>
8+
<div class="w-screen h-screen flex items-center justify-center flex-col gap-4">
9+
<h1 class="text-3xl font-bold 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>
14+
</div>
1715
);
1816
};
1917

‎packages/modal-ui/src/components/Body/Body.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { createSignal } from "solid-js";
2+
import Footer from "../Footer/Footer";
3+
import ConnectWallet from "./ConnectWallet";
4+
import Login from "./Login";
5+
6+
const PAGES = {
7+
LOGIN: 'login',
8+
CONNECT_WALLET: 'connect_wallet'
9+
}
10+
11+
const Body = () => {
12+
13+
const [currentPage, setCurrentPage] = createSignal(PAGES.LOGIN);
14+
15+
16+
return (
17+
<div class="h-[760px] p-6 flex flex-col flex-1">
18+
{currentPage() === PAGES.LOGIN && <Login onExternalWalletClick={() => setCurrentPage(PAGES.CONNECT_WALLET)} />}
19+
{currentPage() === PAGES.CONNECT_WALLET && <ConnectWallet onBackClick={() => setCurrentPage(PAGES.LOGIN)} />}
20+
<Footer />
21+
</div>
22+
);
23+
};
24+
25+
export default Body

‎packages/modal-ui/src/components/Body/ConnectWallet.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { createSignal, For } from "solid-js"
2+
import { WalletButton } from "../WalletButton"
3+
4+
export interface ConnectWalletProps {
5+
onBackClick?: () => void
6+
};
7+
8+
const WALLET_LIST = ['Metamask', 'Ronin Wallet', 'Phantom', 'Rainbow', 'Trust Wallet', 'Coinbase Wallet', 'Uniswap', 'Metamask', 'Ronin Wallet', 'Phantom', 'Rainbow', 'Trust Wallet', 'Coinbase Wallet', 'Uniswap', 'Metamask', 'Ronin Wallet', 'Phantom', 'Rainbow', 'Trust Wallet', 'Coinbase Wallet', 'Uniswap']
9+
10+
11+
const PAGES = {
12+
CONNECT_WALLET: 'Connect Wallet',
13+
SELECTED_WALLET: "Selected Wallet"
14+
}
15+
16+
const ConnectWallet = ({ onBackClick }: ConnectWalletProps) => {
17+
18+
const [currentPage, setCurrentPage] = createSignal(PAGES.CONNECT_WALLET);
19+
const [selectedWallet, setSelectedWallet] = createSignal(false);
20+
21+
const handleBack = () => {
22+
if (!selectedWallet() && currentPage() === PAGES.CONNECT_WALLET && onBackClick) {
23+
onBackClick()
24+
}
25+
26+
if (selectedWallet) {
27+
setCurrentPage(PAGES.CONNECT_WALLET)
28+
setSelectedWallet(false)
29+
}
30+
}
31+
32+
return (
33+
<div class="flex flex-col gap-y-4 flex-1 relative">
34+
<div class="flex items-center justify-between">
35+
<figure class="w-5 h-5 rounded-full bg-app-gray-200 cursor-pointer" onClick={handleBack}></figure>
36+
<p class="text-base font-medium text-app-gray-900">{currentPage()}</p>
37+
<div class="w-5 h-5" />
38+
</div>
39+
40+
{!selectedWallet() ? <div class="contents">
41+
<input placeholder="Search through wallets..." class="w-full px-4 py-2.5 border border-app-gray-300 bg-app-gray-50 placeholder:text-app-gray-400 placeholder:text-sm placeholder:font-normal rounded-full" />
42+
<ul class="flex flex-col gap-y-2 h-[calc(100dvh_-_240px)] overflow-y-auto">
43+
<For each={WALLET_LIST}>
44+
{(wallet) =>
45+
<WalletButton label={wallet} onClick={() => { setSelectedWallet(true); setCurrentPage(PAGES.SELECTED_WALLET) }} />
46+
}
47+
</For>
48+
</ul>
49+
</div> :
50+
<div class="contents">
51+
<div class="bg-app-gray-200 rounded-lg h-[320px] w-[320px] mx-auto"></div>
52+
<p class="text-center text-sm text-app-gray-500 font-normal">Scan with a WalletConnect-supported wallet or click the QR code to copy to your clipboard.</p>
53+
<div class="flex items-center justify-between w-full mt-auto bg-app-gray-50 rounded-xl p-3">
54+
<p class="text-sm text-app-gray-900">Don't have Trust Wallet?</p>
55+
<button class="appearance-none border border-app-gray-900 text-xs text-app-gray-900 rounded-full px-2 py-2">Get Wallet</button>
56+
</div>
57+
</div>
58+
}
59+
60+
{/* <div class="absolute bottom-0 left-0 bg-app-white rounded-lg p-6 w-full flex flex-col gap-y-2 shadow-sm border border-app-gray-100">
61+
<div class="flex items-center gap-x-2 w-full bg-app-gray-100 px-4 py-2 rounded-full">
62+
<figure class="w-5 h-5 rounded-full bg-app-gray-200 cursor-pointer"></figure>
63+
<p class="text-sm font-medium text-app-gray-900">Install Chrome</p>
64+
</div>
65+
<div class="flex items-center gap-x-2 w-full bg-app-gray-100 px-4 py-2 rounded-full">
66+
<figure class="w-5 h-5 rounded-full bg-app-gray-200 cursor-pointer"></figure>
67+
<p class="text-sm font-medium text-app-gray-900">Install Chrome</p>
68+
</div>
69+
<div class="flex items-center gap-x-2 w-full bg-app-gray-100 px-4 py-2 rounded-full">
70+
<figure class="w-5 h-5 rounded-full bg-app-gray-200 cursor-pointer"></figure>
71+
<p class="text-sm font-medium text-app-gray-900">Install Chrome</p>
72+
</div>
73+
</div> */}
74+
</div>
75+
)
76+
}
77+
78+
export default ConnectWallet

‎packages/modal-ui/src/components/Body/Login.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import SocialLoginList from "../SocialLoginList";
2+
3+
export interface LoginProps {
4+
onExternalWalletClick?: () => void;
5+
};
6+
7+
const Login = ({ onExternalWalletClick }: LoginProps) => {
8+
9+
const handleConnectWallet = (e: MouseEvent) => {
10+
e.preventDefault();
11+
if (onExternalWalletClick) onExternalWalletClick()
12+
}
13+
return (
14+
<div class="flex flex-col gap-y-4 h-full">
15+
<div class="flex flex-col items-start gap-y-1">
16+
<p class="text-xl font-bold text-app-gray-900 dark:text-app-white">Sign in</p>
17+
<p class="text-sm font-normal text-app-gray-500 dark:text-app-gray-400">Your Web3Auth wallet with one click</p>
18+
</div>
19+
20+
<SocialLoginList />
21+
22+
23+
<form class="flex flex-col gap-y-4 mt-auto">
24+
<div class="flex flex-col gap-y-2">
25+
<label class="text-sm font-semibold text-app-gray-900 text-start">Email or Phone</label>
26+
<input placeholder="E.g. +00-123455/[email protected]" class="px-4 py-2.5 border border-app-gray-300 bg-app-gray-50 placeholder:text-app-gray-400 placeholder:text-sm placeholder:font-normal rounded-full" />
27+
</div>
28+
<button class="w-full px-5 py-3 rounded-full bg-app-gray-100 disabled:text-app-gray-400 text-app-gray-900 text-sm font-medium">Continue with Email</button>
29+
<div class="flex flex-col gap-y-2">
30+
<label class="text-sm font-semibold text-app-gray-900 text-start">External Wallet</label>
31+
<button class="w-full px-5 py-3 rounded-full bg-app-gray-100 disabled:text-app-gray-400 text-app-gray-900 text-sm font-medium" onClick={handleConnectWallet}>Connect with Wallet</button>
32+
</div>
33+
</form>
34+
</div>
35+
)
36+
}
37+
38+
export default Login;

‎packages/modal-ui/src/components/Body/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Body } from "./Body";

‎packages/modal-ui/src/components/Footer/Footer.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const Footer = () => {
2+
return (
3+
<div class="flex items-center gap-2 justify-center pt-6 mt-auto">
4+
<div class="text-xs text-app-gray-300 dark:text-app-gray-500">{"modal.footer.message-new"}</div>
5+
<img
6+
height="16"
7+
src="https://images.web3auth.io/web3auth-footer-logo-light.svg"
8+
alt="Web3Auth Logo Light"
9+
class="h-4 block dark:hidden"
10+
/>
11+
<img
12+
height="16"
13+
src="https://images.web3auth.io/web3auth-footer-logo-dark.svg"
14+
alt="Web3Auth Logo Dark"
15+
class="h-4 hidden dark:block"
16+
/>
17+
</div>
18+
)
19+
}
20+
21+
export default Footer

0 commit comments

Comments
 (0)