feat: add unified login UX/UI
This commit is contained in:
p2arthur
1
examples/web3auth-ui-demo/.env.example
Normal file
1
examples/web3auth-ui-demo/.env.example
Normal file
@ -0,0 +1 @@
|
||||
VITE_WEB3AUTH_CLIENT_ID=your-web3auth-client-id
|
||||
12
examples/web3auth-ui-demo/index.html
Normal file
12
examples/web3auth-ui-demo/index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Web3Auth UI Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3528
examples/web3auth-ui-demo/package-lock.json
generated
Normal file
3528
examples/web3auth-ui-demo/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
examples/web3auth-ui-demo/package.json
Normal file
29
examples/web3auth-ui-demo/package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "web3auth-ui-demo",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tokenizerwa/web3auth-algorand": "file:../../packages/web3auth-algorand",
|
||||
"@tokenizerwa/web3auth-algorand-ui": "file:../../packages/web3auth-algorand-ui",
|
||||
"@web3auth/base": "^9.7.0",
|
||||
"@web3auth/base-provider": "^9.7.0",
|
||||
"@web3auth/modal": "^9.7.0",
|
||||
"algosdk": "^3.0.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"@vitejs/plugin-react": "^5.1.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.11",
|
||||
"@types/react-dom": "^18.2.4",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
32
examples/web3auth-ui-demo/src/main.tsx
Normal file
32
examples/web3auth-ui-demo/src/main.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { Web3AuthGoogleButton } from '@tokenizerwa/web3auth-algorand-ui'
|
||||
import { AlgorandWeb3AuthProvider } from '@tokenizerwa/web3auth-algorand'
|
||||
import './styles.css'
|
||||
|
||||
const WEB3AUTH_CLIENT_ID = import.meta.env.VITE_WEB3AUTH_CLIENT_ID || ''
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="page">
|
||||
<header>
|
||||
<h1>Algorand + Web3Auth Demo</h1>
|
||||
<p>Sign in with Google and get an Algorand signer instantly.</p>
|
||||
</header>
|
||||
|
||||
<AlgorandWeb3AuthProvider config={{ clientId: WEB3AUTH_CLIENT_ID }}>
|
||||
<section className="card">
|
||||
<h2>Connect</h2>
|
||||
<p>Use the ready-made Google button from the UI package.</p>
|
||||
<Web3AuthGoogleButton />
|
||||
</section>
|
||||
</AlgorandWeb3AuthProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
63
examples/web3auth-ui-demo/src/styles.css
Normal file
63
examples/web3auth-ui-demo/src/styles.css
Normal file
@ -0,0 +1,63 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: radial-gradient(circle at 20% 20%, #f2f7ff, #ffffff 45%), radial-gradient(circle at 80% 0%, #fef6e8, #ffffff 40%);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding: 48px 16px 72px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 2.4rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 60px -32px rgba(15, 23, 42, 0.35);
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
}
|
||||
15
examples/web3auth-ui-demo/tsconfig.json
Normal file
15
examples/web3auth-ui-demo/tsconfig.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ES2020",
|
||||
"lib": ["ES2020", "DOM"],
|
||||
"moduleResolution": "Node",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react-jsx",
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
6
examples/web3auth-ui-demo/vite.config.ts
Normal file
6
examples/web3auth-ui-demo/vite.config.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user