mirror of
https://github.com/logos-messaging/examples.waku.org.git
synced 2026-01-04 05:43:07 +00:00
use next.js tempalte
This commit is contained in:
Sasha
parent
5f3b0e22b0
commit
a60cfd8c37
3
examples/rln-js/.eslintrc.json
Normal file
3
examples/rln-js/.eslintrc.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../../.eslintrc.json"
|
||||
}
|
||||
35
examples/rln-js/.gitignore
vendored
Normal file
35
examples/rln-js/.gitignore
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
@ -1,30 +1,36 @@
|
||||
# Using [RLN](https://rfc.vac.dev/spec/32/) in JavaScript
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
> Rate limiting nullifier (RLN) is a construct based on zero-knowledge proofs
|
||||
> that provides an anonymous rate-limited signaling/messaging framework
|
||||
> suitable for decentralized (and centralized) environments
|
||||
## Getting Started
|
||||
|
||||
**Demonstrates**:
|
||||
First, run the development server:
|
||||
|
||||
- RLN:
|
||||
- Generate credentials
|
||||
- Insert membership to smart contract (Goerli testnet)
|
||||
- Retrieve smart contract state
|
||||
- Generate and send proofs
|
||||
- Verify incoming proofs
|
||||
- Pure Javascript/HTML.
|
||||
- Use minified bundle of js from unpkg.com, no import, no package manager.
|
||||
|
||||
To test the example:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/waku-org/js-waku-examples
|
||||
cd js-waku-examples/examples/rln-js
|
||||
npm install
|
||||
npm run start
|
||||
# open http://127.0.0.1:8080 In your browser
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
**There are a known issue using this webapp with Firefox + MetaMask. Try Chrome or Brave if you encounter any issue**.
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
The `master` branch's HEAD is deployed at https://examples.waku.org/rln-js/.
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@ -1,173 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>JS-Waku light node example</title>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<link rel="icon" href="./favicon.ico" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="row rcenter">
|
||||
<h1>Waku RLN</h1>
|
||||
<button id="connect-wallet" type="button">Connect Wallet</button>
|
||||
</div>
|
||||
|
||||
<span id="status"></span>
|
||||
|
||||
<h2 class="mu1">Blockchain</h2>
|
||||
<hr />
|
||||
|
||||
<div class="row rcenter">
|
||||
<h4>Address</h4>
|
||||
<code class="value" id="address"></code>
|
||||
</div>
|
||||
|
||||
<div class="row mu1 rcenter">
|
||||
<h4>Contract Data</h4>
|
||||
<button disabled id="retrieve-rln-details" type="button">
|
||||
Retrieve contract state from blockchain
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row rcenter">
|
||||
<h4>Latest membership id on contract</h4>
|
||||
<code class="value" id="latest-membership-id">Not loaded yet</code>
|
||||
</div>
|
||||
|
||||
<div class="row rcenter mu1">
|
||||
<div>
|
||||
<h2>Keystore</h2>
|
||||
<span id="keystoreStatus"></span>
|
||||
</div>
|
||||
<div>
|
||||
<button id="importKeystore" type="button">Import json</button>
|
||||
<input type="file" id="importKeystoreInput" style="display: none" />
|
||||
|
||||
<button id="exportKeystore" type="button">Download json</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<div class="row mu1">
|
||||
<label for="keystorePassword"
|
||||
>Password(used for reading/saving into Keystore):</label
|
||||
>
|
||||
<input
|
||||
id="keystorePassword"
|
||||
name="keystorePassword"
|
||||
type="text"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="w50">
|
||||
<h4>Generate new credentials from wallet:</h4>
|
||||
<br />
|
||||
<button
|
||||
id="import-from-wallet-button"
|
||||
type="button"
|
||||
style="width: 100%"
|
||||
>
|
||||
Generate new credentials
|
||||
</button>
|
||||
<br />
|
||||
<button disabled id="register-button" type="button">
|
||||
Register credentials
|
||||
</button>
|
||||
</div>
|
||||
<div class="w50">
|
||||
<h4>Read from Keystore:</h4>
|
||||
<br />
|
||||
<select
|
||||
id="keystoreOptions"
|
||||
style="
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
></select>
|
||||
<br />
|
||||
<button id="readKeystore" type="button">Read credentials</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row rcenter mu1">
|
||||
<h4>Keystore Hash</h4>
|
||||
<code class="value" id="keystoreHash">none</code>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h4>Membership id</h4>
|
||||
<code class="value" id="id">none</code>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h4>Secret Hash</h4>
|
||||
<code class="value" id="secret-hash">none</code>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h4>Commitment</h4>
|
||||
<code class="value" id="commitment">none</code>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h4>Nullifier</h4>
|
||||
<code class="value" id="nullifier">none</code>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h4>Trapdoor</h4>
|
||||
<code class="value" id="trapdoor">none</code>
|
||||
</div>
|
||||
|
||||
<h2 class="mu1">Waku</h2>
|
||||
<hr />
|
||||
<div id="waku-status"></div>
|
||||
|
||||
<div class="row rcenter mu1 mf">
|
||||
<label for="remote-multiaddr">Remote peer's multiaddr</label>
|
||||
<input
|
||||
id="remote-multiaddr"
|
||||
type="text"
|
||||
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
|
||||
/>
|
||||
<button disabled id="dial" type="button">Dial</button>
|
||||
</div>
|
||||
|
||||
<div class="row rcenter mf">
|
||||
<label for="nick-input">Your nickname</label>
|
||||
<input
|
||||
class="p100"
|
||||
id="nick-input"
|
||||
placeholder="Choose a nickname"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row rcenter mf">
|
||||
<label for="textInput">Message text</label>
|
||||
<input
|
||||
class="p100"
|
||||
disabled
|
||||
id="textInput"
|
||||
placeholder="Type your message here"
|
||||
type="text"
|
||||
/>
|
||||
<button disabled id="sendButton" type="button">
|
||||
Send message using Light Push
|
||||
</button>
|
||||
</div>
|
||||
<span id="sending-status"></span>
|
||||
|
||||
<h4 class="mu1">Messages</h4>
|
||||
<div id="messages"><ul id="messagesList"></ul></div>
|
||||
|
||||
<script src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
|
||||
<script type="module" src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,606 +0,0 @@
|
||||
import * as utils from "https://unpkg.com/@waku/utils@0.0.10/bundle/bytes.js";
|
||||
import {
|
||||
createEncoder,
|
||||
createDecoder,
|
||||
waitForRemotePeer,
|
||||
createLightNode,
|
||||
} from "https://unpkg.com/@waku/sdk@0.0.18/bundle/index.js";
|
||||
import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js";
|
||||
import {
|
||||
create,
|
||||
Keystore,
|
||||
RLNDecoder,
|
||||
RLNEncoder,
|
||||
RLNContract,
|
||||
SEPOLIA_CONTRACT,
|
||||
} from "https://unpkg.com/@waku/rln@0.1.1-fa49e29/bundle/index.js";
|
||||
import { ethers } from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js";
|
||||
|
||||
const ContentTopic = "/toy-chat/2/luzhou/proto";
|
||||
|
||||
// Protobuf
|
||||
const ProtoChatMessage = new protobuf.Type("ChatMessage")
|
||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||
.add(new protobuf.Field("nick", 2, "string"))
|
||||
.add(new protobuf.Field("text", 3, "bytes"));
|
||||
|
||||
const SIGNATURE_MESSAGE =
|
||||
"The signature of this message will be used to generate your RLN credentials. Anyone accessing it may send messages on your behalf, please only share with the RLN dApp";
|
||||
|
||||
run()
|
||||
.then(() => {
|
||||
console.log("Successfully started application.");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Failed at starting application with ", err.message);
|
||||
});
|
||||
|
||||
async function run() {
|
||||
const ui = initUI();
|
||||
const rln = await initRLN(ui);
|
||||
await initWaku(ui, rln);
|
||||
}
|
||||
|
||||
async function initRLN(ui) {
|
||||
const result = {
|
||||
encoder: undefined,
|
||||
rlnInstance: undefined,
|
||||
contract: undefined,
|
||||
};
|
||||
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
|
||||
|
||||
ui.setRlnStatus("WASM Blob download in progress...");
|
||||
const rlnInstance = await create();
|
||||
ui.setRlnStatus("WASM Blob download in progress... done!");
|
||||
|
||||
const rlnContract = await RLNContract.init(rlnInstance, {
|
||||
registryAddress: SEPOLIA_CONTRACT.address,
|
||||
provider: provider.getSigner(),
|
||||
});
|
||||
|
||||
result.contract = rlnContract;
|
||||
|
||||
// Keystore logic
|
||||
let keystore = initKeystore(ui);
|
||||
ui.createKeystoreOptions(keystore);
|
||||
|
||||
ui.onKeystoreImport(async (text) => {
|
||||
try {
|
||||
keystore = Keystore.fromString(text);
|
||||
ui.setKeystoreStatus("Imported keystore from json");
|
||||
} catch (err) {
|
||||
console.error("Failed to import keystore:", err);
|
||||
ui.setKeystoreStatus("Failed to import, fallback to current keystore");
|
||||
}
|
||||
ui.createKeystoreOptions(keystore);
|
||||
saveLocalKeystore(keystore);
|
||||
});
|
||||
|
||||
ui.onKeystoreExport(async () => {
|
||||
return keystore.toString();
|
||||
});
|
||||
|
||||
ui.onKeystoreRead(async (hash, password) => {
|
||||
return keystore.readCredential(hash, password);
|
||||
});
|
||||
|
||||
// Wallet logic
|
||||
window.ethereum.on("accountsChanged", ui.setAccount);
|
||||
window.ethereum.on("chainChanged", (chainId) => {
|
||||
const id = parseInt(chainId, 16);
|
||||
ui.disableIfNotSepolia(id);
|
||||
});
|
||||
ui.onConnectWallet(async () => {
|
||||
try {
|
||||
const accounts = await provider.send("eth_requestAccounts", []);
|
||||
ui.setAccount(accounts);
|
||||
const network = await provider.getNetwork();
|
||||
ui.disableIfNotSepolia(network.chainId);
|
||||
} catch (e) {
|
||||
console.log("No web3 provider available", e);
|
||||
}
|
||||
});
|
||||
|
||||
ui.onRetrieveDetails(async () => {
|
||||
const filter = rlnContract.contract.filters.MemberRegistered();
|
||||
|
||||
ui.disableRetrieveButton();
|
||||
await rlnContract.fetchMembers(rlnInstance);
|
||||
ui.enableRetrieveButton();
|
||||
|
||||
rlnContract.subscribeToMembers(rlnInstance);
|
||||
|
||||
const last = rlnContract.members.at(-1);
|
||||
|
||||
if (last) {
|
||||
ui.setLastMember(last.index, last.idCommitment);
|
||||
}
|
||||
|
||||
// make sure we have subscriptions to keep updating last item
|
||||
rlnContract.contract.on(filter, (_idCommitment, _index, event) => {
|
||||
ui.setLastMember(event.args.index, event.args.idCommitment);
|
||||
});
|
||||
});
|
||||
|
||||
let signature;
|
||||
let membershipId;
|
||||
let credentials;
|
||||
|
||||
ui.onWalletImport(async () => {
|
||||
const signer = provider.getSigner();
|
||||
|
||||
signature = await signer.signMessage(
|
||||
`${SIGNATURE_MESSAGE}. Nonce: ${Math.ceil(Math.random() * 1000)}`
|
||||
);
|
||||
credentials = await rlnInstance.generateSeededIdentityCredential(signature);
|
||||
|
||||
const idCommitment = ethers.utils.hexlify(credentials.IDCommitment);
|
||||
|
||||
rlnContract.members.forEach((m) => {
|
||||
if (m.idCommitment === idCommitment) {
|
||||
membershipId = m.index.toString();
|
||||
}
|
||||
});
|
||||
|
||||
if (membershipId) {
|
||||
result.encoder = new RLNEncoder(
|
||||
createEncoder({
|
||||
ephemeral: false,
|
||||
contentTopic: ContentTopic,
|
||||
}),
|
||||
rlnInstance,
|
||||
membershipId,
|
||||
credentials
|
||||
);
|
||||
}
|
||||
|
||||
ui.setMembershipInfo(membershipId, credentials);
|
||||
|
||||
const network = await provider.getNetwork();
|
||||
ui.enableRegisterButtonForSepolia(network.chainId);
|
||||
});
|
||||
|
||||
ui.onRegister(async () => {
|
||||
ui.setRlnStatus("Trying to register...");
|
||||
const memberInfo = signature
|
||||
? await rlnContract.registerWithSignature(rlnInstance, signature)
|
||||
: await rlnContract.registerWithKey(credentials);
|
||||
|
||||
membershipId = memberInfo.index.toNumber();
|
||||
|
||||
console.log(
|
||||
"Obtained index for current membership credentials",
|
||||
membershipId
|
||||
);
|
||||
|
||||
const password = ui.getKeystorePassword();
|
||||
|
||||
if (!password) {
|
||||
ui.setKeystoreStatus("Cannot add credentials, no password.");
|
||||
}
|
||||
|
||||
const keystoreHash = await keystore.addCredential(
|
||||
{
|
||||
membership: {
|
||||
treeIndex: membershipId,
|
||||
chainId: SEPOLIA_CONTRACT.chainId,
|
||||
address: SEPOLIA_CONTRACT.address,
|
||||
},
|
||||
identity:
|
||||
credentials ||
|
||||
rlnInstance.generateSeededIdentityCredential(signature),
|
||||
},
|
||||
password
|
||||
);
|
||||
saveLocalKeystore(keystore);
|
||||
ui.addKeystoreOption(keystoreHash);
|
||||
ui.setKeystoreStatus(`Added credential to Keystore`);
|
||||
|
||||
ui.setRlnStatus("Successfully registered.");
|
||||
ui.setMembershipInfo(membershipId, credentials, keystoreHash);
|
||||
ui.enableDialButton();
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
async function initWaku(ui, rln) {
|
||||
ui.setWakuStatus("Creating Waku node.");
|
||||
const node = await createLightNode();
|
||||
ui.setWakuStatus("Starting Waku node.");
|
||||
|
||||
await node.start();
|
||||
ui.setWakuStatus("Waku node started.");
|
||||
|
||||
const verifyMessage = (message) => {
|
||||
if (message.proofState === "verifying...") {
|
||||
try {
|
||||
console.log("Verifying proof without roots");
|
||||
console.time("proof_verify_timer");
|
||||
const res = message.verify(rln.contract.roots());
|
||||
console.timeEnd("proof_verify_timer");
|
||||
console.log("proof verified without roots", res);
|
||||
if (res === undefined) {
|
||||
message.proofState = "no proof attached";
|
||||
} else if (res) {
|
||||
message.proofState = "verified.";
|
||||
} else {
|
||||
message.proofState = "invalid!";
|
||||
}
|
||||
} catch (e) {
|
||||
message.proofState = "Error encountered, check console";
|
||||
console.error("Error verifying proof:", e);
|
||||
}
|
||||
|
||||
console.log("Verifying proof with roots", message.verify());
|
||||
}
|
||||
};
|
||||
|
||||
const onFilterMessage = (wakuMessage) => {
|
||||
const { timestamp, nick, text } = ProtoChatMessage.decode(
|
||||
wakuMessage.payload
|
||||
);
|
||||
|
||||
const time = new Date();
|
||||
time.setTime(Number(timestamp) * 1000);
|
||||
|
||||
if (wakuMessage.rateLimitProof) {
|
||||
console.log("Proof received:", wakuMessage.rateLimitProof);
|
||||
}
|
||||
|
||||
wakuMessage.proofState = !!wakuMessage.rateLimitProof
|
||||
? "verifying..."
|
||||
: "no proof attached";
|
||||
|
||||
wakuMessage.msg = `
|
||||
(${nick})
|
||||
<strong>${utils.bytesToUtf8(text)}</strong>
|
||||
<i>[${time.toISOString()}]</i>
|
||||
`;
|
||||
|
||||
verifyMessage(wakuMessage);
|
||||
ui.renderMessage(wakuMessage);
|
||||
};
|
||||
|
||||
ui.onDial(async (ma) => {
|
||||
ui.setWakuStatus("Dialing peer.");
|
||||
|
||||
// TODO(@weboko): move this fix into Waku.dial
|
||||
const multiaddr = MultiformatsMultiaddr.multiaddr(ma);
|
||||
await node.dial(multiaddr, ["filter", "lightpush"]);
|
||||
await waitForRemotePeer(node, ["filter", "lightpush"]);
|
||||
|
||||
ui.setWakuStatus("Waku node connected.");
|
||||
|
||||
const decoder = new RLNDecoder(
|
||||
rln.rlnInstance,
|
||||
createDecoder(ContentTopic)
|
||||
);
|
||||
|
||||
await node.filter.subscribe(decoder, onFilterMessage);
|
||||
|
||||
ui.setWakuStatus("Waku node subscribed.");
|
||||
ui.enableChatButtonsIfNickSet();
|
||||
});
|
||||
|
||||
ui.onSendMessage(async (nick, text) => {
|
||||
const timestamp = new Date();
|
||||
const msg = ProtoChatMessage.create({
|
||||
text,
|
||||
nick,
|
||||
timestamp: Math.floor(timestamp.valueOf() / 1000),
|
||||
});
|
||||
const payload = ProtoChatMessage.encode(msg).finish();
|
||||
console.log("Sending message with proof...");
|
||||
|
||||
ui.setSendingStatus("sending...");
|
||||
await node.lightPush.send(rln.encoder, { payload, timestamp });
|
||||
ui.setSendingStatus("sent!");
|
||||
|
||||
console.log("Message sent!");
|
||||
ui.clearMessageArea();
|
||||
});
|
||||
}
|
||||
|
||||
function initUI() {
|
||||
const statusSpan = document.getElementById("status");
|
||||
|
||||
// Blockchain Elements
|
||||
const addressDiv = document.getElementById("address");
|
||||
const connectWalletButton = document.getElementById("connect-wallet");
|
||||
const latestMembershipSpan = document.getElementById("latest-membership-id");
|
||||
const retrieveRLNDetailsButton = document.getElementById(
|
||||
"retrieve-rln-details"
|
||||
);
|
||||
|
||||
const importFromWalletButton = document.getElementById(
|
||||
"import-from-wallet-button"
|
||||
);
|
||||
|
||||
const keystoreHashDiv = document.getElementById("keystoreHash");
|
||||
const idDiv = document.getElementById("id");
|
||||
const secretHashDiv = document.getElementById("secret-hash");
|
||||
const commitmentDiv = document.getElementById("commitment");
|
||||
const trapdoorDiv = document.getElementById("trapdoor");
|
||||
const nullifierDiv = document.getElementById("nullifier");
|
||||
const registerButton = document.getElementById("register-button");
|
||||
|
||||
// Waku Elements
|
||||
const statusDiv = document.getElementById("waku-status");
|
||||
const remoteMultiAddrInput = document.getElementById("remote-multiaddr");
|
||||
const dialButton = document.getElementById("dial");
|
||||
|
||||
const nicknameInput = document.getElementById("nick-input");
|
||||
const textInput = document.getElementById("textInput");
|
||||
const sendButton = document.getElementById("sendButton");
|
||||
const sendingStatusSpan = document.getElementById("sending-status");
|
||||
const messagesList = document.getElementById("messagesList");
|
||||
|
||||
// Keystore
|
||||
const importKeystoreBtn = document.getElementById("importKeystore");
|
||||
const importKeystoreInput = document.getElementById("importKeystoreInput");
|
||||
const exportKeystore = document.getElementById("exportKeystore");
|
||||
const keystoreStatus = document.getElementById("keystoreStatus");
|
||||
const keystorePassword = document.getElementById("keystorePassword");
|
||||
const keystoreOptions = document.getElementById("keystoreOptions");
|
||||
const readKeystoreButton = document.getElementById("readKeystore");
|
||||
|
||||
// set initial state
|
||||
keystoreHashDiv.innerText = "not registered yet";
|
||||
idDiv.innerText = "not registered yet";
|
||||
registerButton.disabled = true;
|
||||
textInput.disabled = true;
|
||||
sendButton.disabled = true;
|
||||
dialButton.disabled = true;
|
||||
retrieveRLNDetailsButton.disabled = true;
|
||||
nicknameInput.disabled = true;
|
||||
|
||||
nicknameInput.onchange = enableChatIfNeeded;
|
||||
nicknameInput.onblur = enableChatIfNeeded;
|
||||
|
||||
function enableChatIfNeeded() {
|
||||
if (nicknameInput.value) {
|
||||
textInput.disabled = false;
|
||||
sendButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Keystore
|
||||
keystorePassword.onchange = enableRegisterIfNeeded;
|
||||
keystorePassword.onblur = enableRegisterIfNeeded;
|
||||
function enableRegisterIfNeeded() {
|
||||
if (keystorePassword.value && commitmentDiv.innerText !== "none") {
|
||||
registerButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// UI for RLN
|
||||
setRlnStatus(text) {
|
||||
statusSpan.innerText = text;
|
||||
},
|
||||
setMembershipInfo(id, credential, keystoreHash) {
|
||||
keystoreHashDiv.innerText = keystoreHash || "not registered yet";
|
||||
idDiv.innerText = id || "not registered yet";
|
||||
secretHashDiv.innerText = utils.bytesToHex(credential.IDSecretHash);
|
||||
commitmentDiv.innerText = utils.bytesToHex(credential.IDCommitment);
|
||||
nullifierDiv.innerText = utils.bytesToHex(credential.IDNullifier);
|
||||
trapdoorDiv.innerText = utils.bytesToHex(credential.IDTrapdoor);
|
||||
},
|
||||
setLastMember(index, _idCommitment) {
|
||||
try {
|
||||
const idCommitment = ethers.utils.zeroPad(
|
||||
ethers.utils.arrayify(_idCommitment),
|
||||
32
|
||||
);
|
||||
const indexInt = index.toNumber();
|
||||
console.debug(
|
||||
"IDCommitment registered in tree",
|
||||
idCommitment,
|
||||
indexInt
|
||||
);
|
||||
latestMembershipSpan.innerHTML = indexInt;
|
||||
} catch (err) {
|
||||
console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled
|
||||
}
|
||||
},
|
||||
disableIfNotSepolia(chainId) {
|
||||
if (!isSepolia(chainId)) {
|
||||
window.alert("Switch to Sepolia");
|
||||
|
||||
registerButton.disabled = true;
|
||||
this.disableRetrieveButton();
|
||||
} else {
|
||||
this.enableRetrieveButton();
|
||||
}
|
||||
},
|
||||
enableRetrieveButton() {
|
||||
retrieveRLNDetailsButton.disabled = false;
|
||||
},
|
||||
disableRetrieveButton() {
|
||||
retrieveRLNDetailsButton.disabled = true;
|
||||
},
|
||||
enableRegisterButtonForSepolia(chainId) {
|
||||
registerButton.disabled =
|
||||
isSepolia(chainId) &&
|
||||
keystorePassword.value &&
|
||||
commitmentDiv.innerText !== "none"
|
||||
? false
|
||||
: true;
|
||||
},
|
||||
getKeystorePassword() {
|
||||
return keystorePassword.value;
|
||||
},
|
||||
setAccount(accounts) {
|
||||
addressDiv.innerText = accounts.length ? accounts[0] : "";
|
||||
},
|
||||
onConnectWallet(fn) {
|
||||
connectWalletButton.addEventListener("click", async () => {
|
||||
await fn();
|
||||
importFromWalletButton.disabled = false;
|
||||
});
|
||||
},
|
||||
onRetrieveDetails(fn) {
|
||||
retrieveRLNDetailsButton.addEventListener("click", async () => {
|
||||
await fn();
|
||||
});
|
||||
},
|
||||
onWalletImport(fn) {
|
||||
importFromWalletButton.addEventListener("click", async () => {
|
||||
await fn();
|
||||
});
|
||||
},
|
||||
onRegister(fn) {
|
||||
registerButton.addEventListener("click", async () => {
|
||||
try {
|
||||
registerButton.disabled = true;
|
||||
await fn();
|
||||
registerButton.disabled = false;
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
registerButton.disabled = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// Keystore
|
||||
addKeystoreOption(id) {
|
||||
const option = document.createElement("option");
|
||||
option.innerText = id;
|
||||
option.setAttribute("value", id);
|
||||
keystoreOptions.appendChild(option);
|
||||
},
|
||||
createKeystoreOptions(keystore) {
|
||||
const ids = Object.keys(keystore.toObject().credentials || {});
|
||||
keystoreOptions.innerHTML = "";
|
||||
ids.forEach((v) => this.addKeystoreOption(v));
|
||||
},
|
||||
onKeystoreRead(fn) {
|
||||
readKeystoreButton.addEventListener("click", async (event) => {
|
||||
event.preventDefault();
|
||||
if (!keystoreOptions.value) {
|
||||
throw Error("No value selected to read from Keystore");
|
||||
}
|
||||
const credentials = await fn(
|
||||
keystoreOptions.value,
|
||||
keystorePassword.value
|
||||
);
|
||||
this.setMembershipInfo(
|
||||
credentials.membership.treeIndex,
|
||||
credentials.identity,
|
||||
keystoreOptions.value
|
||||
);
|
||||
});
|
||||
},
|
||||
setKeystoreStatus(text) {
|
||||
keystoreStatus.innerText = text;
|
||||
},
|
||||
onKeystoreImport(fn) {
|
||||
importKeystoreBtn.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
importKeystoreInput.click();
|
||||
});
|
||||
importKeystoreInput.addEventListener("change", async (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (!file) {
|
||||
console.error("No file selected");
|
||||
return;
|
||||
}
|
||||
const text = await file.text();
|
||||
fn(text);
|
||||
});
|
||||
},
|
||||
onKeystoreExport(fn) {
|
||||
exportKeystore.addEventListener("click", async (event) => {
|
||||
event.preventDefault();
|
||||
const filename = "keystore.json";
|
||||
const text = await fn();
|
||||
const file = new File([text], filename, {
|
||||
type: "application/json",
|
||||
});
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(file);
|
||||
link.download = filename;
|
||||
link.click();
|
||||
});
|
||||
},
|
||||
// UI for Waku
|
||||
setWakuStatus(text) {
|
||||
statusDiv.innerText = text;
|
||||
},
|
||||
setSendingStatus(text) {
|
||||
sendingStatusSpan.innerText = text;
|
||||
},
|
||||
renderMessage(message) {
|
||||
messagesList.innerHTML += `<li>${message.msg} - [epoch: ${message.epoch}, proof: ${message.proofState} ]</li>`;
|
||||
},
|
||||
enableDialButton() {
|
||||
dialButton.disabled = false;
|
||||
},
|
||||
enableChatButtonsIfNickSet() {
|
||||
if (nicknameInput.value) {
|
||||
textInput.disabled = false;
|
||||
sendButton.disabled = false;
|
||||
}
|
||||
},
|
||||
onDial(fn) {
|
||||
dialButton.addEventListener("click", async () => {
|
||||
const multiaddr = remoteMultiAddrInput.value;
|
||||
|
||||
if (!multiaddr) {
|
||||
this.setWakuStatus("Error: No multiaddr provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
await fn(multiaddr);
|
||||
nicknameInput.disabled = false;
|
||||
});
|
||||
},
|
||||
clearMessageArea() {
|
||||
textInput.value = null;
|
||||
setTimeout(() => {
|
||||
this.setSendingStatus("");
|
||||
}, 5000);
|
||||
},
|
||||
onSendMessage(fn) {
|
||||
sendButton.addEventListener("click", async () => {
|
||||
const nick = nicknameInput.value;
|
||||
const text = utils.utf8ToBytes(textInput.value);
|
||||
await fn(nick, text);
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function isSepolia(id) {
|
||||
return id === 11155111;
|
||||
}
|
||||
|
||||
function initKeystore(ui) {
|
||||
try {
|
||||
const text = readLocalKeystore();
|
||||
if (!text) {
|
||||
ui.setKeystoreStatus("Initialized empty keystore");
|
||||
return Keystore.create();
|
||||
}
|
||||
const keystore = Keystore.fromString(text);
|
||||
if (!keystore) {
|
||||
throw Error("Failed to create from string");
|
||||
}
|
||||
ui.setKeystoreStatus("Loaded from localStorage");
|
||||
return keystore;
|
||||
} catch (err) {
|
||||
console.error("Failed to init keystore:", err);
|
||||
ui.setKeystoreStatus("Initialized empty keystore");
|
||||
return Keystore.create();
|
||||
}
|
||||
}
|
||||
|
||||
function readLocalKeystore() {
|
||||
return localStorage.getItem("keystore");
|
||||
}
|
||||
|
||||
function saveLocalKeystore(keystore) {
|
||||
localStorage.setItem("keystore", keystore.toString());
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "Waku RLN",
|
||||
"description": "Use RLN in the browser, compatible with nwaku chat2 and go-waku chat2 RLN implementations.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "favicon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
}
|
||||
],
|
||||
"display": "standalone",
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
5
examples/rln-js/next-env.d.ts
vendored
Normal file
5
examples/rln-js/next-env.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
6
examples/rln-js/next.config.js
Normal file
6
examples/rln-js/next.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: "export",
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
7429
examples/rln-js/package-lock.json
generated
7429
examples/rln-js/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,15 +1,27 @@
|
||||
{
|
||||
"name": "@waku/rln-js-example",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"name": "rln-js",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "http-server"
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"next": "13.5.6"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "MIT OR Apache-2.0",
|
||||
"devDependencies": {
|
||||
"http-server": "^14.1.1"
|
||||
"typescript": "^5",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"autoprefixer": "^10",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "13.5.6"
|
||||
}
|
||||
}
|
||||
|
||||
6
examples/rln-js/postcss.config.js
Normal file
6
examples/rln-js/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
1
examples/rln-js/public/next.svg
Normal file
1
examples/rln-js/public/next.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
examples/rln-js/public/vercel.svg
Normal file
1
examples/rln-js/public/vercel.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
||||
|
After Width: | Height: | Size: 629 B |
BIN
examples/rln-js/src/app/favicon.ico
Normal file
BIN
examples/rln-js/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
27
examples/rln-js/src/app/globals.css
Normal file
27
examples/rln-js/src/app/globals.css
Normal file
@ -0,0 +1,27 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
22
examples/rln-js/src/app/layout.tsx
Normal file
22
examples/rln-js/src/app/layout.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
113
examples/rln-js/src/app/page.tsx
Normal file
113
examples/rln-js/src/app/page.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
|
||||
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
|
||||
Get started by editing
|
||||
<code className="font-mono font-bold">src/app/page.tsx</code>
|
||||
</p>
|
||||
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
|
||||
<a
|
||||
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{" "}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className="dark:invert"
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
|
||||
<Image
|
||||
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Docs{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Learn{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Learn about Next.js in an interactive course with quizzes!
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Templates{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Explore the Next.js 13 playground.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Deploy{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 1rem 2.5rem 1rem 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rcenter {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mu1 {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.w50 {
|
||||
width: 46%;
|
||||
}
|
||||
.w30 {
|
||||
width: 35%;
|
||||
}
|
||||
.w70 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.mf label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mf input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.mf input.p100 {
|
||||
width: 100%;
|
||||
}
|
||||
20
examples/rln-js/tailwind.config.ts
Normal file
20
examples/rln-js/tailwind.config.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
27
examples/rln-js/tsconfig.json
Normal file
27
examples/rln-js/tsconfig.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user