Skip to content

Commit

Permalink
Update unpersonalize page
Browse files Browse the repository at this point in the history
  • Loading branch information
@fulldecent
fulldecent committed Oct 18, 2024
1 parent c13582a commit 93d27a4
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 202 deletions.
4 changes: 2 additions & 2 deletions _layouts/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI=" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/ethers.umd.min.js" integrity="sha256-dOAMPiqczTEubVFU+cywkR0bNMtJvIIgJEopKgp3PCE=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/ethers.umd.min.js" integrity="sha256-/WbARlGSnGo3gGo36CF+a2qsB8foFq1Hj1JpC3QpvGE=" crossorigin="anonymous"></script>
</head>
<body class="bg-light">
<body class="text-bg-dark">
<nav class="navbar" style="background-color: #ffd700">
<div class="container-fluid">
<a class="navbar-brand text-dark" href="/">Su Squares&trade; <i class="bi bi-wrench"></i> tools &amp; tricks</a>
Expand Down
9 changes: 3 additions & 6 deletions grant.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,14 @@ <h1>Grant tokens</h1>
</div>
</div>


<div class="mb-3">
</div>


<hr>
<h2>Log</h2>
<pre id="log"></pre>
<button id="clear" class="btn btn-secondary" tabindex="-1">Clear</button>


<script>
const suSquaresAddress = "0xE9e3F9cfc1A64DFca53614a0182CFAD56c10624F";
const suSquaresABI = [
Expand All @@ -38,12 +35,12 @@ <h2>Log</h2>

document.getElementById("grant").addEventListener("click", async function() {
await ethereum.request({ method: "eth_requestAccounts" });
const provider = new ethers.BrowserProvider(window.ethereum); // Updated for Ethers v6
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner(); // 'getSigner' now returns a Promise in Ethers v6
const suSquaresContract = new ethers.Contract(suSquaresAddress, suSquaresABI, signer); // No need for 'connect' method in Ethers v6
const suSquaresContract = new ethers.Contract(suSquaresAddress, suSquaresABI, signer);

const address = document.getElementById("address").value;
const tokenId = parseInt(document.getElementById("tokenId").value);
const address = document.getElementById("address").value;
const tx = await suSquaresContract.grantToken(tokenId, address, { gasLimit: 200000 });

// Log the transaction
Expand Down
265 changes: 71 additions & 194 deletions unpersonalize.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,219 +2,96 @@
title: Unpersonalize
layout: page
---
<h1 class="display-2">Unpersonalize (on main contract)</h1>
<h1>Unpersonalize square (on main contract)</h1>
<p class="lead">
<em>If you have any questions, please mail <a href="mailto:[email protected]?subject=Personalize+underlay">[email protected]</a>.</em>
</p>
<p class="lead alert alert-info">
<i class="bi bi-info-circle"></i>
The page only applies to Su Squares that were personalized using the old expensive way. This allows you to personalize going forward using the new cheaper way.
<!--
<p>
Your Square is displayed on TenThousandSu.com to show:
</p>
<p class="lead">
Your Square is displayed on TenThousandSu.com based on 1) how it is personalized (if at all) on the main contract and 2) how it is personalized (if at all) on the underlay contract. This tool allows you to remove your personalization on the main contract. Typically people will want to use this to get access to the cheaper and newer underlay contract. Learn more about our personalization underlay on our <a href="https://tenthousandsu.com/articles/2021-09-17-project-history">announcement page</a>.
</p>

<div class="step-1-not-done">
<h2 class="display-4">Step 1: Install MetaMask</h2>
<p>To personalize use Edge/Chrome/Firefox/Opera and <a target="_blank" href="https://metamask.io/">Install MetaMask</a> or compatible software to continue. Then reload this page.</p>
</div>
<div class="step-1-done" style="display:none">
<p>&#x2705; Step 1: Web3 environment enabled</p>
</div>

<div class="step-2-not-done">
<h2 class="display-4">Step 2: Login to Mainnet</h2>
<p>Switch to <strong>Ethereum Mainnet</strong> and login to your MetaMask wallet. Then reload this page.</p>
</div>
<div class="step-2-done" style="display:none">
<p>&#x2705; Step 2: Using Ethereum<sup>&reg;</sup> Mainnet</p>
</div>

<div class="step-2-done" style="display:none">
<h2 class="display-4">Step 3: Unpersonalize</h2>
<div class="mb-3 row align-items-center lead">
<label for="square-number" class="col-sm-2 col-form-label">Square number</label>
<div class="col-md-4">
<input type="number" min="1" max="10000" required id="square-number" class="form-control form-control-lg">
</div>
<div class="col-auto">
<span class="form-text">
Must be owned by the wallet you are currently using
</span>
</div>
</div>

<div class="mb-3 row align-items-center lead">
<div class="offset-md-2 col-md-4">
<button id="check" class="btn btn-info btn-lg">
Check status of Square
</button>
</div>
<div class="col-auto">
<span class="form-text">
Check your Square before proceeding
</span>
</div>
<ol>
<li>If personalized on the main contract: the main contract personalization; or otherwise</li>
<li>If personalized on the underlay contract: the underlay contract personalization; or otherwise</li>
<li>"Not personalized".</li>
</ol>
-->
<p class="lead">This tool allows you to remove <a href=="list-personalized-on-main-contract">any personalization your Square may have had</a> on the main contract. So going forward you can use the cheaper (and now default) underlay contract.</p>
<p class="lead">If you are attempting to use this tool and see an error message, please stop and contact mail <a href="mailto:[email protected]?subject=Personalize+underlay">[email protected]</a> so we can make sure it works for you without error.</p>

<div class="row">
<div class="col-md-3">
<label for="tokenId" class="form-label">Token ID</label>
<input id="tokenId" class="form-control" type="number" min="1" max="10000" required list="tokenId-datalist">
<datalist id="tokenId-datalist"></datalist>
</div>

<div class="mb-3 row align-items-center lead">
<div class="offset-md-2 col-md-4">
<button id="unpersonalizeFree" class="btn btn-warning btn-lg">
Unpersonalize (free + gas)
</button>
</div>
<div class="col-auto">
<span class="form-text">
If you personalized on the main contract once or twice before
</span>
</div>
</div>

<div class="mb-3 row align-items-center lead">
<div class="offset-md-2 col-md-4">
<button id="unpersonalizePaid" class="btn btn-warning btn-lg">
Unpersonalize (0.01 Ether + gas)
</button>
</div>
<div class="col-auto">
<span class="form-text">
If you personalized on the main contract 3+ times before
</span>
</div>
<div class="col-md-3">
<label for="unpersonalize" class="form-label">Do it</label>
<button id="unpersonalize" class="btn btn-primary d-grid">Unpersonalize</button>
</div>
</div>

<div id="receipts">
<div class="mb-3">
</div>

<script type="module">
import { ethers } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
<hr>
<h2>Log</h2>
<pre id="log"></pre>
<button id="clear" class="btn btn-secondary" tabindex="-1">Clear</button>

<script>
/* Populate possible values for the Square to unpersonalize */
fetch("https://TenThousandSu.com/build/squarePersonalizations.json")
.then(response => response.json())
.then(squarePersonalizations => {
const datalist = document.getElementById("tokenId-datalist");
for (let i = 1; i <= 10000; i++) {
if (squarePersonalizations && squarePersonalizations[i-1]) {
continue;
}
const option = document.createElement("option");
option.value = i;
datalist.appendChild(option);
}
});

'use strict';
const suSquaresAddress = "0xE9e3F9cfc1A64DFca53614a0182CFAD56c10624F";
const suSquaresABI = [
"function personalizeSquare(uint256 tokenId, bytes rgbData, string title, string href)",
"function ownerOf(uint256 tokenId) view returns (address)"
];

document.addEventListener("DOMContentLoaded", function() {
document.getElementById("unpersonalize").addEventListener("click", async function() {
await ethereum.request({ method: "eth_requestAccounts" });
const provider = new ethers.BrowserProvider(window.ethereum);
const contractAddress = "0xE9e3F9cfc1A64DFca53614a0182CFAD56c10624F";
const contractABI = [
"function suSquares(uint256 squareId) view returns (uint256 version, bytes rgbData, string title, string href)",
"function personalizeSquare(uint256 squareId, bytes rgbData, string title, string href) payable",
"function ownerOf(uint256 squareId) view returns (address owner)"
];
const priceIfNeedToPay = 10000000000000000n; // 0.01 Ether

provider.getBlockNumber().then(() => {
document.querySelector(".step-1-done").style.display = 'block';
document.querySelector(".step-1-not-done").style.display = 'none';
provider.getNetwork().then(network => {
if (network.chainId === 1) {
document.querySelector(".step-2-done").style.display = 'block';
document.querySelector(".step-2-not-done").style.display = 'none';
}
});
});

document.getElementById("square-number").addEventListener("input", function () {
const squareNumberInput = document.getElementById("square-number");
const squareNumber = squareNumberInput.value;
if (squareNumber >= 1 && squareNumber <= 10000) {
squareNumberInput.classList.add("is-valid");
squareNumberInput.classList.remove("is-invalid");
} else {
squareNumberInput.classList.add("is-invalid");
squareNumberInput.classList.remove("is-valid");
}
});

document.getElementById("check").addEventListener("click", async function () {
const squareNumber = document.getElementById("square-number").value;
if (!(squareNumber >= 1 && squareNumber <= 10000)) {
alert("Invalid Square number, please try again.");
const signer = await provider.getSigner(); // 'getSigner' now returns a Promise in Ethers v6
const suSquaresContract = new ethers.Contract(suSquaresAddress, suSquaresABI, signer);

const tokenId = parseInt(document.getElementById("tokenId").value);
const rgbDataHex = "0x" + "00".repeat(300);
const title = "";
const href = "";

// Confirm if this tokenId is not on the datalist
const datalist = document.getElementById("tokenId-datalist");
if (!Array.from(datalist.children).map(option => option.value).includes(tokenId.toString())) {
if (!confirm("It seems that Square is NOT personalized on the main contract and there is no need to proceed. Are you sure you want to proceed?")) {
return;
}
}

const contract = new ethers.Contract(contractAddress, contractABI, provider);
try {
const ownerLookupResult = await contract.ownerOf(squareNumber);
alert("The owner of this Square is " + ownerLookupResult + ". Be sure to use that account with the buttons below.");

const result = await contract.suSquares(squareNumber);
if (result.version === 0n) {
alert("This Square has not been personalized on the main contract before. No need to proceed here.");
return;
}
if (result.title === "" && result.href === "" && result.rgbData === "0x") {
alert("This Square has already been unpersonalized.");
return;
}
if (result.title === "" && result.href === "" && result.rgbData === ("0x" + "00".repeat(300))) {
alert("This Square has already been unpersonalized.");
return;
}
if (result.version === 1n) {
alert("This Square has been personalized once before. Proceed with the FREE button below.");
return;
}
if (result.version === 2n) {
alert("This Square has been personalized twice before. Proceed with the FREE button below.");
return;
}
if (result.version > 2n) {
alert("This Square has been personalized " + result.version + " times before. Proceed with the 0.01 Ether button below.");
return;
}
} catch (error) {
console.error(error);
alert("Error checking square status: " + error.message);
}
});

document.getElementById("unpersonalizeFree").addEventListener("click", async function () {
const squareNumber = document.getElementById("square-number").value;
if (!(squareNumber >= 1 && squareNumber <= 10000)) {
alert("Invalid Square number, please try again.");
// Confirm if this tokenId is not owned by the signer
const owner = await suSquaresContract.ownerOf(tokenId);
if (owner !== await signer.getAddress()) {
if (!confirm("It seems that Square is NOT owned by you and this transaction should fail. Are you sure you want to proceed?")) {
return;
}
const title = "";
const href = "";
const rgbData = Array(300).fill(0);
}

await ethereum.request({ method: 'eth_requestAccounts' });
const signer = await provider.getSigner();
const contract = new ethers.Contract(contractAddress, contractABI, signer);
try {
const tx = await contract.personalizeSquare(squareNumber, rgbData, title, href);
const receipt = await tx.wait();
document.getElementById("receipts").innerText += squareNumber + " https://etherscan.io/tx/" + receipt.hash + "\n";
} catch (error) {
console.error(error.message);
alert(error.message);
}
});
// Go
const tx = await suSquaresContract.personalizeSquare(tokenId, rgbDataHex, title, href, { gasLimit: 200000 });

document.getElementById("unpersonalizePaid").addEventListener("click", async function () {
const squareNumber = document.getElementById("square-number").value;
if (!(squareNumber >= 1 && squareNumber <= 10000)) {
alert("Invalid Square number, please try again.");
return;
}
const title = "";
const href = "";
const rgbData = Array(300).fill(0);

await ethereum.request({ method: 'eth_requestAccounts' });
const signer = await provider.getSigner();
const contract = new ethers.Contract(contractAddress, contractABI, signer);
const overrides = {
value: priceIfNeedToPay
};
try {
const tx = await contract.personalizeSquare(squareNumber, rgbData, title, href, overrides);
const receipt = await tx.wait();
document.getElementById("receipts").innerText += squareNumber + " https://etherscan.io/tx/" + receipt.hash + "\n";
} catch (error) {
console.error(error.message);
alert(error.message);
}
});
// Log the transaction
document.getElementById("log").innerText += tokenId + " https://etherscan.io/tx/" + tx.hash + "\n";
});
</script>

0 comments on commit 93d27a4

Please sign in to comment.