mirror of
https://github.com/uqbar-dao/nectar.git
synced 2025-01-03 06:11:01 +03:00
spruce the register flow
This commit is contained in:
Tobias Merkle
parent
a83f50b475
commit
11ca1ae7ba
@ -15,7 +15,7 @@
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
|
||||
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
|
||||
<script type="module" crossorigin src="/main:app_store:sys/assets/index-oDVJPgUs.js"></script>
|
||||
<script type="module" crossorigin src="/main:app_store:sys/assets/index-YeOEFbyC.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-JESB3UJK.css">
|
||||
</head>
|
||||
|
||||
|
||||
@ -173,15 +173,6 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#signup-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 2em;
|
||||
max-width: calc(100vw - 4em);
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
1
kinode/src/register-ui/.gitignore
vendored
1
kinode/src/register-ui/.gitignore
vendored
@ -13,6 +13,7 @@
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
|
||||
10
kinode/src/register-ui/.sample.env
Normal file
10
kinode/src/register-ui/.sample.env
Normal file
@ -0,0 +1,10 @@
|
||||
# local
|
||||
REACT_APP_INVITE_GET=
|
||||
REACT_APP_BUILD_USER_OP_POST=
|
||||
REACT_APP_BROADCAST_USER_OP_POST=
|
||||
|
||||
REACT_APP_SEPOLIA_RPC_URL=
|
||||
REACT_APP_OPTIMISM_RPC_URL=
|
||||
REACT_APP_MAINNET_RPC_URL=
|
||||
DANGEROUSLY_DISABLE_HOST_CHECK=true # needed for local development
|
||||
|
||||
@ -4,15 +4,15 @@ This app is compiled and put into the root directory of every Kinode node for lo
|
||||
## Development
|
||||
|
||||
1. Run `yarn` to install dependencies
|
||||
2. Run `yarn run tc` to generate ABIs
|
||||
3. Start a kinode locally on port 8080 (default)
|
||||
3. Run `yarn start` to serve the UI at http://localhost:3000 (proxies requests to local kinode)
|
||||
1. Run `yarn run tc` to generate ABIs
|
||||
1. Start a kinode locally on port 8080 (default)
|
||||
1. Run `yarn start` to serve the UI at http://localhost:3000 (proxies requests to local kinode)
|
||||
|
||||
If you would like to proxy requests to a kinode that is not at http://localhost:8080, change the `proxy` field in `package.json`.
|
||||
|
||||
## Building
|
||||
|
||||
1. Run `yarn` to install dependencies
|
||||
2. Run `yarn run tc` to generate ABIs
|
||||
3. Run `yarn build` to generate the `./build` folder
|
||||
4. Overwrite `kinode/kinode/src/register-ui/build` with `./build`
|
||||
1. Run `yarn run tc` to generate ABIs
|
||||
1. Run `yarn build` to generate the `./build` folder
|
||||
1. Overwrite `kinode/kinode/src/register-ui/build` with `./build`
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.5066fae5.css",
|
||||
"main.js": "/static/js/main.5a1b6086.js",
|
||||
"main.css": "/static/css/main.72c02557.css",
|
||||
"main.js": "/static/js/main.6d54da2b.js",
|
||||
"static/media/OpenSans-CondBold.ttf": "/static/media/OpenSans-CondBold.6293057f8484b6c0da03.ttf",
|
||||
"static/media/BarlowCondensed-Black.ttf": "/static/media/BarlowCondensed-Black.3ba02bbdeb04e17f34bf.ttf",
|
||||
"static/media/Futura-Heavy.ttf": "/static/media/Futura-Heavy.af72c25a6945b0f48abb.ttf",
|
||||
"static/media/unknown.png": "/static/media/unknown.880d04d4611a45ab1001.png",
|
||||
"static/media/background.jpg": "/static/media/background.01d2427cfc21fb685016.jpg",
|
||||
"static/media/kinode.svg": "/static/media/kinode.86d0c1a6a4a3ca3be41616b5989d6925.svg",
|
||||
"index.html": "/index.html",
|
||||
"static/media/logo.svg": "/static/media/logo.45dcb752ac5b825f5e3b9299d2210f0a.svg"
|
||||
"static/media/kinode.svg": "/static/media/kinode.6b178bc9164b31d90099844a82d04497.svg"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.5066fae5.css",
|
||||
"static/js/main.5a1b6086.js"
|
||||
"static/css/main.72c02557.css",
|
||||
"static/js/main.6d54da2b.js"
|
||||
]
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><title>Welcome - Kinode</title><meta charset="utf-8"/><meta http-equiv="pragma" content="no-cache"/><meta http-equiv="cache-control" content="no-cache"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzc5IiBoZWlnaHQ9IjUxNCIgdmlld0JveD0iMCAwIDc3OSA1MTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8c3R5bGU+CiAgICAgICAgQG1lZGlhIChwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyaykgewogICAgICAgICAgICBzdmcgeyBmaWxsOiB3aGl0ZTsgfQogICAgICAgIH0KICAgICAgICBAbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCkgewogICAgICAgICAgICBzdmcgeyBmaWxsOiBibGFjazsgfQogICAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8cGF0aCBkPSJNNzUzLjA5MiA1LjkxOTMyQzc1Ni41NTcgNS4wOTk3NiA3NTUuOTYyIC0wLjAwMDEyMjA3IDc1Mi40MDEgLTAuMDAwMTIyMDdINDI2LjAwMUM0MjQuNzU1IC0wLjAwMDEyMjA3IDQyMy42MzkgMC43NzAyNyA0MjMuMTk3IDEuOTM1MzVMMjM2Ljk2OCA0OTIuNkMyMzUuNzI5IDQ5NS44NjUgMjQwLjEyMyA0OTguMjU1IDI0Mi4xOTEgNDk1LjQ0MUw1NjkuMzU3IDUwLjExMzJDNTY5Ljc3OCA0OS41MzkyIDU3MC4zOTEgNDkuMTMzOSA1NzEuMDg0IDQ4Ljk3TDc1My4wOTIgNS45MTkzMloiLz4KICAgIDxwYXRoIGQ9Ik0xMS45NjY1IDQwLjIyODhDOS4xMDk0OSAzOC43NzcgMTAuMjEzNSAzNC40NTgzIDEzLjQxNjcgMzQuNTU1N0w0MDQuMjczIDQ2LjQzNjdDNDA2LjMzNCA0Ni40OTkzIDQwNy43MTkgNDguNTc0OSA0MDYuOTg2IDUwLjUwMjNMMzQ3LjQzOCAyMDYuOTgxQzM0Ni44MDQgMjA4LjY0NyAzNDQuODY1IDIwOS4zOTYgMzQzLjI3NSAyMDguNTg4TDExLjk2NjUgNDAuMjI4OFoiLz4KPC9zdmc+Cg=="><meta httpequiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"/><script defer="defer" src="/static/js/main.5a1b6086.js"></script><link href="/static/css/main.5066fae5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><title>Welcome - Kinode</title><meta charset="utf-8"/><meta http-equiv="pragma" content="no-cache"/><meta http-equiv="cache-control" content="no-cache"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzc5IiBoZWlnaHQ9IjUxNCIgdmlld0JveD0iMCAwIDc3OSA1MTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8c3R5bGU+CiAgICAgICAgQG1lZGlhIChwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyaykgewogICAgICAgICAgICBzdmcgeyBmaWxsOiB3aGl0ZTsgfQogICAgICAgIH0KICAgICAgICBAbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCkgewogICAgICAgICAgICBzdmcgeyBmaWxsOiBibGFjazsgfQogICAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8cGF0aCBkPSJNNzUzLjA5MiA1LjkxOTMyQzc1Ni41NTcgNS4wOTk3NiA3NTUuOTYyIC0wLjAwMDEyMjA3IDc1Mi40MDEgLTAuMDAwMTIyMDdINDI2LjAwMUM0MjQuNzU1IC0wLjAwMDEyMjA3IDQyMy42MzkgMC43NzAyNyA0MjMuMTk3IDEuOTM1MzVMMjM2Ljk2OCA0OTIuNkMyMzUuNzI5IDQ5NS44NjUgMjQwLjEyMyA0OTguMjU1IDI0Mi4xOTEgNDk1LjQ0MUw1NjkuMzU3IDUwLjExMzJDNTY5Ljc3OCA0OS41MzkyIDU3MC4zOTEgNDkuMTMzOSA1NzEuMDg0IDQ4Ljk3TDc1My4wOTIgNS45MTkzMloiLz4KICAgIDxwYXRoIGQ9Ik0xMS45NjY1IDQwLjIyODhDOS4xMDk0OSAzOC43NzcgMTAuMjEzNSAzNC40NTgzIDEzLjQxNjcgMzQuNTU1N0w0MDQuMjczIDQ2LjQzNjdDNDA2LjMzNCA0Ni40OTkzIDQwNy43MTkgNDguNTc0OSA0MDYuOTg2IDUwLjUwMjNMMzQ3LjQzOCAyMDYuOTgxQzM0Ni44MDQgMjA4LjY0NyAzNDQuODY1IDIwOS4zOTYgMzQzLjI3NSAyMDguNTg4TDExLjk2NjUgNDAuMjI4OFoiLz4KPC9zdmc+Cg=="><meta httpequiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"/><script defer="defer" src="/static/js/main.6d54da2b.js"></script><link href="/static/css/main.72c02557.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
File diff suppressed because one or more lines are too long
@ -1,18 +0,0 @@
|
||||
<svg width="580" height="72" viewBox="0 0 580 72" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6_641)">
|
||||
<path d="M0.824922 1.07031L0.794922 70.0703H14.7949L14.8049 1.07031H0.824922Z" fill="#FFF5D9"/>
|
||||
<path d="M16.5947 36.8803L41.2547 1.07031H58.2447L33.1647 36.8803L61.2447 70.0703H42.9947L16.5947 36.8803Z" fill="#FFF5D9"/>
|
||||
<path d="M119.885 1.07031H105.765V70.0703H119.885V1.07031Z" fill="#FFF5D9"/>
|
||||
<path d="M173.185 1.07031V70.0703H186.775V26.8303L224.045 70.0703H234.825V1.07031H221.325V45.6803L183.445 1.07031H173.185Z" fill="#FFF5D9"/>
|
||||
<path d="M342.465 8.86C333.025 0.15 321.645 0 318.535 0C315.475 0 303.575 0.22 294.005 9.52C283.845 19.4 283.805 32.24 283.795 35.66C283.785 39.3 283.895 49.03 290.805 57.99C300.855 71.02 316.695 71.31 318.535 71.32C321.375 71.32 334.185 71 343.965 60.66C353.065 51.04 353.265 39.4 353.275 35.66C353.275 32.49 353.305 18.86 342.455 8.86H342.465ZM318.435 58.01C307.095 58.01 297.895 47.95 297.895 35.54C297.895 23.13 307.085 13.07 318.435 13.07C329.785 13.07 338.975 23.13 338.975 35.54C338.975 47.95 329.785 58.01 318.435 58.01Z" fill="#FFF5D9"/>
|
||||
<path d="M450.495 12.0802C444.975 5.46023 437.135 0.990234 427.955 0.990234C417.555 0.990234 405.295 1.07023 402.295 1.07023V69.9802C405.285 69.9802 417.555 70.0602 427.955 70.0602C445.525 70.0602 458.445 53.4102 459.065 36.8602C459.395 28.0102 456.185 18.9002 450.495 12.0802ZM440.085 49.9502C436.895 53.8702 432.705 56.6902 427.665 57.5602C424.025 58.1902 420.095 57.8302 416.405 57.8302C416.405 50.4002 416.405 42.9802 416.405 35.5502V13.2202C423.795 13.2202 430.525 12.7002 436.605 17.6002C440.275 20.5602 442.925 24.7102 444.165 29.2402C444.525 30.5402 444.765 31.8802 444.875 33.2302C445.395 39.3702 443.995 45.1402 440.085 49.9502Z" fill="#FFF5D9"/>
|
||||
<path d="M508.135 0.990234V70.0602H552.715V57.9302H522.035V40.4202H547.125V28.0702H521.995V13.3202H552.715V0.990234H508.135Z" fill="#FFF5D9"/>
|
||||
<path d="M574.835 66.0398H572.745L571.015 63.0698H569.845V66.0398H567.805V57.5498H571.765C572.845 57.5498 573.865 57.9298 574.425 58.9398C575.205 60.3698 574.665 62.3798 573.105 63.0298C573.725 64.1198 574.225 64.9498 574.845 66.0398H574.835ZM570.375 61.0798H570.845C571.335 61.0798 572.365 61.0798 572.365 60.2898C572.365 59.5598 571.335 59.5598 570.845 59.5598H570.375V61.0798Z" fill="#FFF5D9"/>
|
||||
<path d="M570.964 69.0002C574.913 69.0002 578.114 65.799 578.114 61.8502C578.114 57.9014 574.913 54.7002 570.964 54.7002C567.016 54.7002 563.814 57.9014 563.814 61.8502C563.814 65.799 567.016 69.0002 570.964 69.0002Z" stroke="#FFF5D9" stroke-width="2.2" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6_641">
|
||||
<rect width="578.41" height="71.32" fill="white" transform="translate(0.794922)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
@ -1,10 +0,0 @@
|
||||
<svg width="122" height="81" viewBox="0 0 122 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6_651)">
|
||||
<path d="M89.3665 8.06803L121.5 0.35155L66.5111 0.320312L63.7089 7.69502L0.5 5.7032L54.0253 32.9925L36.1529 80.3203L89.3665 8.06803Z" fill="#FFF5D9"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6_651">
|
||||
<rect width="121" height="80" fill="white" transform="translate(0.5 0.320312)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 431 B |
@ -2,6 +2,7 @@
|
||||
"name": "register",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"proxy": "http://localhost:8080",
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@ethersproject/hash": "^5.7.0",
|
||||
@ -69,4 +70,4 @@
|
||||
"@types/react-modal": "^3.16.2",
|
||||
"inline-source-cli": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -49,7 +49,6 @@ function ChainInfo({
|
||||
className="network-icon"
|
||||
src={sepoliaLogo}
|
||||
alt={networkName}
|
||||
style={{ filter: "grayscale(100%)" }}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
@ -58,7 +57,6 @@ function ChainInfo({
|
||||
className="network-icon"
|
||||
src={unknownLogo}
|
||||
alt={networkName}
|
||||
style={{ filter: "grayscale(100%)" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -75,7 +73,7 @@ function ChainInfo({
|
||||
{/* TODO: prompt to change address */}
|
||||
<button
|
||||
onClick={changeConnectedAccount}
|
||||
className="font-mono alt flex place-items-center max-w-1/3"
|
||||
className="font-mono clear flex place-items-center max-w-1/3"
|
||||
>
|
||||
<Jazzicon
|
||||
address={account || ""}
|
||||
@ -86,7 +84,7 @@ function ChainInfo({
|
||||
</button>
|
||||
<button
|
||||
onClick={changeToNodeChain}
|
||||
className="alt max-w-1/3"
|
||||
className="clear max-w-1/3"
|
||||
>
|
||||
{generateNetworkIcon(networkName)}
|
||||
<div className='ml-2'>
|
||||
@ -96,7 +94,7 @@ function ChainInfo({
|
||||
{/* TODO: show KNS contract ID in modal */}
|
||||
<button
|
||||
onClick={showKnsAddress}
|
||||
className="alt max-w-1/3"
|
||||
className="clear max-w-1/3"
|
||||
>
|
||||
KNS Contract
|
||||
</button>
|
||||
|
||||
@ -78,14 +78,18 @@ function KinodeHeader({
|
||||
{(nodeChainId === SEPOLIA_OPT_HEX ||
|
||||
nodeChainId === OPTIMISM_OPT_HEX) && (
|
||||
<Tooltip
|
||||
position="left"
|
||||
className="!absolute top-8 right-8"
|
||||
button={nodeChainId === SEPOLIA_OPT_HEX ? (
|
||||
<img
|
||||
alt="sepolia"
|
||||
className="network-icon"
|
||||
src={sepoliaLogo}
|
||||
/>
|
||||
) : nodeChainId === OPTIMISM_OPT_HEX ? (
|
||||
<img
|
||||
alt="optimism"
|
||||
className="network-icon"
|
||||
src={optimismLogo}
|
||||
/>
|
||||
) : null}
|
||||
@ -96,12 +100,9 @@ function KinodeHeader({
|
||||
: ''}
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col gap-4">
|
||||
{header}
|
||||
</div>
|
||||
{!hideConnect && (
|
||||
<div
|
||||
className="flex place-items-center place-content-center max-w-[50vw]"
|
||||
className="flex c max-w-[50vw] mb-8"
|
||||
>
|
||||
{isActive && account ? (
|
||||
<ChainInfo
|
||||
@ -111,27 +112,28 @@ function KinodeHeader({
|
||||
changeConnectedAccount={changeConnectedAccount}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col gap-8 mt-4">
|
||||
<h5 className="text-center max-w-[450px] leading-6">
|
||||
You must connect to a browser wallet to continue
|
||||
<div className="flex flex-col gap-8 my-4">
|
||||
<h5 className="flex c">
|
||||
{!isActivating && 'You must connect to a browser wallet to continue.'}
|
||||
|
||||
{isActivating ? (
|
||||
<Loader msg="Approve connection in your wallet" />
|
||||
) : (
|
||||
<button onClick={connectWallet} className="ml-2"> Connect Wallet </button>
|
||||
)}
|
||||
</h5>
|
||||
{isActivating ? (
|
||||
<Loader msg="Approve connection in your wallet" />
|
||||
) : (
|
||||
<button onClick={connectWallet}> Connect Wallet </button>
|
||||
)}
|
||||
{nodeChainId === SEPOLIA_OPT_HEX && (
|
||||
<h5
|
||||
className="text-center max-w-[450px] leading-6"
|
||||
className="text-center max-w-[450px] leading-6 flex c"
|
||||
>
|
||||
Kinode is currently on the Sepolia Testnet, if you need
|
||||
testnet ETH, you can get some from the{" "}
|
||||
Kinode is currently on the Sepolia Testnet.
|
||||
<a
|
||||
href="https://sepoliafaucet.com/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="button alt ml-2"
|
||||
>
|
||||
Sepolia Faucet
|
||||
Get Testnet ETH
|
||||
</a>
|
||||
</h5>
|
||||
)}
|
||||
@ -139,6 +141,9 @@ function KinodeHeader({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-4 c">
|
||||
{header}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -5,11 +5,13 @@ import { FaQuestion } from 'react-icons/fa6'
|
||||
interface TooltipProps {
|
||||
text: string
|
||||
button?: React.ReactNode
|
||||
className?: string
|
||||
position?: "top" | "bottom" | "left" | "right"
|
||||
}
|
||||
|
||||
export const Tooltip: React.FC<TooltipProps> = ({ text, button }) => {
|
||||
export const Tooltip: React.FC<TooltipProps> = ({ text, button, className, position }) => {
|
||||
const [showTooltip, setShowTooltip] = useState(false)
|
||||
return <div className="flex place-items-center place-content-center text-sm relative">
|
||||
return <div className={classNames("flex place-items-center place-content-center text-sm relative cursor-pointer shrink", className)}>
|
||||
<div onClick={() => setShowTooltip(!showTooltip)}>
|
||||
{button || <button
|
||||
className="icon ml-4"
|
||||
@ -18,9 +20,15 @@ export const Tooltip: React.FC<TooltipProps> = ({ text, button }) => {
|
||||
<FaQuestion />
|
||||
</button>}
|
||||
</div>
|
||||
<div className={classNames('absolute top-16 rounded bg-black p-2 min-w-[200px] z-10', { "hidden": !showTooltip })}>
|
||||
<div className={classNames('absolute rounded bg-black p-2 min-w-[200px] z-10',
|
||||
{
|
||||
"hidden": !showTooltip,
|
||||
"top-8": position === "top" || !position,
|
||||
"bottom-8": position === "bottom",
|
||||
"right-8": position === "left",
|
||||
"left-8": position === "right",
|
||||
})}>
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
@ -694,6 +694,10 @@ button:hover {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.\!absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
@ -706,6 +710,26 @@ button:hover {
|
||||
top: 4rem;
|
||||
}
|
||||
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.top-8 {
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.bottom-16 {
|
||||
bottom: 4rem;
|
||||
}
|
||||
|
||||
.left-16 {
|
||||
left: 4rem;
|
||||
}
|
||||
|
||||
.right-16 {
|
||||
right: 4rem;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
@ -720,6 +744,11 @@ button:hover {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.my-8 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
@ -737,6 +766,10 @@ button:hover {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@ -753,6 +786,10 @@ button:hover {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@ -781,10 +818,6 @@ button:hover {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.w-\[400px\] {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
@ -805,14 +838,14 @@ button:hover {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.max-w-\[500px\] {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.max-w-\[50vw\] {
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
.shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -833,6 +866,10 @@ button:hover {
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
@ -889,6 +926,15 @@ button:hover {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.leading-6 {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
@ -1024,4 +1070,11 @@ button:disabled {
|
||||
.network-icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
--tw-grayscale: grayscale(1);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.c {
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
}
|
||||
@ -142,5 +142,9 @@ button:disabled {
|
||||
}
|
||||
|
||||
.network-icon {
|
||||
@apply h-8 w-8;
|
||||
@apply h-8 w-8 filter grayscale-[1];
|
||||
}
|
||||
|
||||
.c {
|
||||
@apply place-items-center place-content-center;
|
||||
}
|
||||
@ -10,6 +10,7 @@ import { ipToNumber } from "../utils/ipToNumber";
|
||||
import { downloadKeyfile } from "../utils/download-keyfile";
|
||||
import DirectCheckbox from "../components/DirectCheckbox";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Tooltip } from "../components/Tooltip";
|
||||
|
||||
const { useProvider } = hooks;
|
||||
|
||||
@ -186,7 +187,7 @@ function Login({
|
||||
return (
|
||||
<>
|
||||
<KinodeHeader
|
||||
header={<h1>Login to Kinode</h1>}
|
||||
header={<h1 className="mb-8">Login to Kinode</h1>}
|
||||
openConnect={openConnect}
|
||||
closeConnect={closeConnect}
|
||||
hideConnect={!showReset}
|
||||
@ -195,78 +196,68 @@ function Login({
|
||||
{loading ? (
|
||||
<Loader msg={loading} />
|
||||
) : (
|
||||
<form id="signup-form" className="col" onSubmit={handleLogin}>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div className="login-row row" style={{ fontSize: 20, marginBottom: "1em" }}>
|
||||
{" "}
|
||||
Login as {knsName}{" "}
|
||||
<form
|
||||
id="signup-form"
|
||||
className="flex flex-col w-full max-w-[450px]"
|
||||
onSubmit={handleLogin}
|
||||
>
|
||||
<div className="self-stretch mb-2 flex flex-col">
|
||||
<div className="flex text-lg mb-2 place-items-center place-content-center">
|
||||
<span className="font-bold ml-2">
|
||||
{knsName}
|
||||
</span>
|
||||
<span className="ml-2 mt-1 text-sm">
|
||||
({isDirect ? "direct" : "indirect"} node)
|
||||
</span>
|
||||
</div>
|
||||
<label className="login-row row" style={{ marginBottom: "1em" }}>
|
||||
{" "}
|
||||
Enter Password{" "}
|
||||
</label>
|
||||
<input
|
||||
style={{ width: "100%" }}
|
||||
type="password"
|
||||
id="password"
|
||||
required
|
||||
minLength={6}
|
||||
name="password"
|
||||
placeholder="Min 6 characters"
|
||||
placeholder="Password"
|
||||
value={pw}
|
||||
onChange={(e) => setPw(e.target.value)}
|
||||
autoFocus
|
||||
className="self-stretch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col" style={{ width: "100%", lineHeight: 1.5 }}>
|
||||
{keyErrs.length > 0 && <div className="flex flex-col w-full leading-6 mb-2">
|
||||
{keyErrs.map((x, i) => (
|
||||
<div key={i} className="key-err">
|
||||
<div key={i} className="text-red-500">
|
||||
{x}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
<div className="col" style={{ width: "100%", lineHeight: 1.5 }}>
|
||||
<button type="submit"> {reset ? "Reset & " : ""} Login </button>
|
||||
{/* <button onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
navigate('/?initial=false', { replace: true });
|
||||
}}>Main Menu</button> */}
|
||||
<div
|
||||
className="login-row col"
|
||||
style={{
|
||||
marginLeft: "0.2em",
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
Registered as {isDirect ? "a direct" : "an indirect"} node
|
||||
</div>
|
||||
<div
|
||||
className="reset-networking"
|
||||
<button type="submit" className="w-full mb-2"> {reset ? "Reset & " : ""} Login </button>
|
||||
|
||||
<div className="flex flex-col w-full self-stretch place-content-center place-items-center">
|
||||
<button
|
||||
className="clear self-stretch mb-1"
|
||||
onClick={() => {
|
||||
setShowReset(!showReset);
|
||||
setReset(!showReset);
|
||||
}}
|
||||
>
|
||||
Reset Networking Info
|
||||
</div>
|
||||
<div
|
||||
className="reset-networking"
|
||||
</button>
|
||||
<button
|
||||
className="clear self-stretch"
|
||||
onClick={() => {
|
||||
navigate('/reset-node')
|
||||
}}
|
||||
>
|
||||
Reset Node & Password
|
||||
</div>
|
||||
</button>
|
||||
{showReset && (
|
||||
<div
|
||||
className="col"
|
||||
style={{ width: "100%", gap: 16, marginTop: 16 }}
|
||||
className="flex flex-col w-full gap-2 mt-4"
|
||||
>
|
||||
<div className="row" style={{ width: "100%" }}>
|
||||
<div style={{ position: "relative" }}>
|
||||
<div className="flex w-full place-items-center">
|
||||
<div className="relative flex">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="reset"
|
||||
@ -274,6 +265,7 @@ function Login({
|
||||
checked={reset}
|
||||
onChange={(e) => setReset(e.target.checked)}
|
||||
autoFocus
|
||||
className="mr-2"
|
||||
/>
|
||||
{reset && (
|
||||
<span
|
||||
@ -287,13 +279,7 @@ function Login({
|
||||
<label htmlFor="reset" className="direct-node-message">
|
||||
Reset networking keys and publish on-chain
|
||||
</label>
|
||||
<div className="tooltip-container">
|
||||
<div className="tooltip-button">ℹ</div>
|
||||
<div className="tooltip-content">
|
||||
This will update your networking keys and publish the new
|
||||
info on-chain
|
||||
</div>
|
||||
</div>
|
||||
<Tooltip text={`This will update your networking keys and publish the new info on-chain`} />
|
||||
</div>
|
||||
<DirectCheckbox {...{ direct, setDirect }} />
|
||||
</div>
|
||||
|
||||
@ -179,29 +179,22 @@ function RegisterEthName({
|
||||
<>
|
||||
<KinodeHeader
|
||||
header={
|
||||
<h3
|
||||
className="row"
|
||||
style={{ justifyContent: "center", alignItems: "center" }}
|
||||
>
|
||||
Register
|
||||
<NameLogo
|
||||
style={{ height: 28, width: "auto", margin: "0 16px -3px" }}
|
||||
/>
|
||||
Name
|
||||
</h3>
|
||||
<h1>
|
||||
Register Kinode Name
|
||||
</h1>
|
||||
}
|
||||
openConnect={openConnect}
|
||||
closeConnect={closeConnect}
|
||||
nodeChainId={nodeChainId === OPTIMISM_OPT_HEX ? MAINNET_OPT_HEX : nodeChainId}
|
||||
/>
|
||||
{Boolean(provider) && (
|
||||
<form id="signup-form" className="col" onSubmit={handleRegister}>
|
||||
<form id="signup-form" className="flex flex-col" onSubmit={handleRegister}>
|
||||
{loading ? (
|
||||
<Loader msg={loading} />
|
||||
) : (
|
||||
<>
|
||||
<div style={{ width: "100%" }}>
|
||||
<label className="login-row row" style={{ lineHeight: 1.5 }}>
|
||||
<div className="w-full">
|
||||
<label className="flex leading-6">
|
||||
Set up your Kinode with a .eth name
|
||||
</label>
|
||||
<EnterEthName {...enterEthNameProps} />
|
||||
|
||||
@ -6,7 +6,7 @@ import React, {
|
||||
useState,
|
||||
} from "react";
|
||||
import { hooks } from "../connectors/metamask";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { namehash } from "ethers/lib/utils";
|
||||
import { toAscii } from "idna-uts46-hx";
|
||||
import { hash } from "eth-ens-namehash";
|
||||
@ -19,6 +19,7 @@ import { getNetworkName, setChain } from "../utils/chain";
|
||||
import { ReactComponent as NameLogo } from "../assets/kinode.svg"
|
||||
import { Tooltip } from "../components/Tooltip";
|
||||
import { DirectTooltip } from "../components/DirectTooltip";
|
||||
import DirectCheckbox from "../components/DirectCheckbox";
|
||||
|
||||
const { useAccounts, useProvider } = hooks;
|
||||
|
||||
@ -146,53 +147,31 @@ function ResetNode({
|
||||
|
||||
return (
|
||||
<>
|
||||
<KinodeHeader header={<h3 className="row" style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
Reset
|
||||
<NameLogo style={{ height: 28, width: "auto", margin: "0 16px -3px" }} />
|
||||
Name
|
||||
</h3>}
|
||||
<KinodeHeader header={<h1 className="flex c mb-8">
|
||||
Reset Kinode Name
|
||||
</h1>}
|
||||
openConnect={openConnect}
|
||||
closeConnect={closeConnect}
|
||||
nodeChainId={nodeChainId}
|
||||
/>
|
||||
{Boolean(provider) && (
|
||||
<form id="signup-form" className="col" onSubmit={handleResetRecords}>
|
||||
<form
|
||||
id="signup-form"
|
||||
className="flex flex-col"
|
||||
onSubmit={handleResetRecords}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader msg={loading} />
|
||||
) : (
|
||||
<>
|
||||
<div className="col" style={{ width: "100%" }}>
|
||||
<h5 className="login-row row" style={{ marginBottom: 8 }}>
|
||||
{knsName}
|
||||
</h5>
|
||||
</div>
|
||||
<DirectCheckbox {...{ direct, setDirect }} />
|
||||
|
||||
<div className="row">
|
||||
<div style={{ position: "relative" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="direct"
|
||||
name="direct"
|
||||
checked={direct}
|
||||
onChange={(e) => setDirect(e.target.checked)}
|
||||
autoFocus
|
||||
/>
|
||||
{direct && (
|
||||
<span
|
||||
onClick={() => setDirect(false)}
|
||||
className="checkmark"
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<label htmlFor="direct" className="direct-node-message">
|
||||
Register as a direct node. If you are unsure leave unchecked.
|
||||
</label>
|
||||
<DirectTooltip />
|
||||
</div>
|
||||
|
||||
<button type="submit"> Reset Node </button>
|
||||
<button type="submit" className="self-stretch mt-2 text-2xl">
|
||||
Reset {knsName}
|
||||
</button>
|
||||
<Link to="/" className="button alt mt-2">
|
||||
Back
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user