Skip to content

Modify nft overlays #2754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: staging
Choose a base branch
from
Open

Modify nft overlays #2754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
149de17
Modify nft overlays
umairkhannn May 19, 2025
359f624
Remove extra comments
umairkhannn May 19, 2025
c5a1cc9
Fix nft amt
umairkhannn May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions lib/saito/ui/saito-crypto/overlays/withdraw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,25 @@ class Withdraw {
async attachEvents() {
let this_withdraw = this;


if (document.querySelector('#nft-link')) {
document.querySelector('#nft-link').onclick = async (e) => {
let data = await this_withdraw.app.options.wallet.nft;
console.log("nft data:", data);

if (!Array.isArray(data) || !data.length) {
// create nft overlay
this_withdraw.app.connection.emit('saito-create-nft-render-request', {});

} else {
// send nft overlay
this_withdraw.app.connection.emit('saito-send-nft-render-request', {});
}

this_withdraw.overlay.close();
};
}

if (document.querySelector('#withdraw-input-address')) {
document.querySelector('#withdraw-input-address').onblur = async (e) => {
this.validateAddressInput();
Expand Down
12 changes: 10 additions & 2 deletions lib/saito/ui/saito-crypto/overlays/withdraw.template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,16 @@ module.exports = (app, mod, publickey = "", address = "") => {
<form class="withdrawal-form" id="withdrawal-form" action="/" method="POST">

<div class="saito-overlay-form" id="saito-withdraw-overlay">
<div class="saito-overlay-form-header">
<div class="saito-overlay-form-header-title">Send Token</div>

<div class="saito-overlay-form-header nft-title">
<div class="saito-overlay-form-header-title">
<div>
Send Token
</div>
<div class="nft-link" id="nft-link">
<span>send or create nft</span>
</div>
</div>
</div>

<div id="withdraw-step-one">
Expand Down
153 changes: 98 additions & 55 deletions lib/saito/ui/saito-nft/create-nft.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ class Nft {
this.callback = {};
this.utxo = [];

this.app.connection.on('saito-create-nft-render-request', () => {
this.render();
});

}

async render() {
Expand Down Expand Up @@ -71,62 +75,88 @@ class Nft {
true
);

document.querySelector('.data-nft-toggle').onclick = (e) => {
if (this.editing_mode === "image") {
let obj = this.createObject();
if (!obj.data) { obj.data = {}; }
e.target.style.opacity = "0.3";
document.querySelector(".textarea-container").innerHTML = `<textarea class="data-nft-textarea">${JSON.stringify(obj, null, 2)}</textarea>`;
} else {
alert("Please reload to return to image editor...");
}
}
// document.querySelector('.data-nft-toggle').onclick = (e) => {
// if (this.editing_mode === "image") {
// let obj = this.createObject();
// if (!obj.data) { obj.data = {}; }
// e.target.style.opacity = "0.3";
// document.querySelector(".textarea-container").innerHTML = `<textarea class="data-nft-textarea">${JSON.stringify(obj, null, 2)}</textarea>`;
// } else {
// alert("Please reload to return to image editor...");
// }
// }

document.querySelector('#nfts-fee').onchange = async (e) => {
nft_self.nft.fee = e.target.value;
let change = BigInt(nft_self.nft.amt) - BigInt(nft_self.nft.deposit) - BigInt(nft_self.nft.fee);
document.querySelector('#nfts-change').value = change.toString();
nft_self.nft.deposit = document.querySelector('#nfts-deposit').value;

let amt = this.app.wallet.convertNolanToSaito(BigInt(nft_self.nft.amt));
let deposit = this.app.wallet.convertNolanToSaito(BigInt(nft_self.nft.deposit));
let fee = this.app.wallet.convertNolanToSaito(BigInt(nft_self.nft.fee));

let change = amt - deposit - fee;
document.querySelector('#nfts-change').value = change;
}

document.querySelector('#nfts-deposit').onchange = async (e) => {
nft_self.nft.deposit = e.target.value;
let change = BigInt(nft_self.nft.amt) - BigInt(nft_self.nft.deposit) - BigInt(nft_self.nft.fee);
document.querySelector('#nfts-change').value = change.toString();
}
nft_self.nft.deposit = e.target.value;
nft_self.nft.fee = document.querySelector('#nfts-fee').value;

let amt = this.app.wallet.convertNolanToSaito(BigInt(nft_self.nft.amt));
let deposit = nft_self.nft.deposit;
let fee = nft_self.nft.fee;

document.querySelector('#nfts-change').onchange = async (e) => {
nft_self.nft.change = e.target.value;
let change = BigInt(nft_self.nft.amt) - BigInt(nft_self.nft.deposit) - BigInt(nft_self.nft.fee);
document.querySelector('#nfts-change').value = change.toString();
console.log("amt:", amt);
console.log("deposit:", deposit);
console.log("fee:", fee);

let change = amt - deposit - fee;

console.log("change:", change);


document.querySelector('#nfts-change').value = change;
}

// document.querySelector('#nfts-change').onchange = async (e) => {
// nft_self.nft.change = e.target.value;

// let amt = this.app.wallet.convertNolanToSaito(BigInt(nft_self.nft.amt));
// let deposit = this.app.wallet.convertNolanToSaito(BigInt(nft_self.nft.deposit));
// let fee = this.app.wallet.convertNolanToSaito(BigInt(nft_self.nft.fee));

// let change = amt - deposit - fee;

// document.querySelector('#nfts-change').value = change;
// }

document.querySelector('#create_nft').onclick = async (e) => {
let obj = this.createObject();

if (this.editing_mode === "image") {

alert("NFT: " + JSON.stringify(obj));
//alert("NFT: " + JSON.stringify(obj));

} else {

let ta = document.querySelector(".data-nft-textarea");
let obj2 = JSON.parse(ta.value);

alert("NFT2: " + JSON.stringify(obj2));


for (let key in obj2) {
if (key != id) {
obj.key = obj2.key
}
}

alert("NFT3: " + JSON.stringify(obj));
}

let amount = typeof nft_self.nft.amt === "string" ? BigInt(nft_self.nft.amt) : nft_self.nft.amt;
let depositAmt = typeof nft_self.nft.deposit === "string" ? BigInt(nft_self.nft.deposit) : nft_self.nft.deposit;
let fee = BigInt(nft_self.nft.fee);
let change = amount - depositAmt - fee;


let amount = BigInt(nft_self.nft.amt); // already in nolam
// convert saito to nolan
let depositAmt = this.app.wallet.convertSaitoToNolan(document.querySelector('#nfts-deposit').value);
let fee = this.app.wallet.convertSaitoToNolan(document.querySelector('#nfts-fee').value);
let change = this.app.wallet.convertSaitoToNolan(document.querySelector('#nfts-change').value);;

console.log("SUBMIT NFT: ");
console.log(nft_self.nft);
Expand Down Expand Up @@ -158,8 +188,23 @@ class Nft {
await nft_self.app.network.propagateTransaction(newtx);
console.log("propagateTransaction:", newtx);

let nft_list = await nft_self.app.wallet.getNftList();
console.log("NFT list: ", nft_list);




setTimeout(async function(){
let nft_list = await nft_self.app.wallet.getNftList();
console.log("Fetched NFT list: ", nft_list);

const nftArray = JSON.parse(nft_list);
await nft_self.app.wallet.saveNftList(nftArray);

console.log("Updated wallet nft list: ", nft_self.app.options.wallet.nft);

salert("NFT created successfully!");
}, 2000);

nft_self.overlay.close();

};

Expand Down Expand Up @@ -207,24 +252,28 @@ class Nft {
this.utxo = await this.fetchUtxo();

let html = ``;
for (let i = 0; i < this.utxo.length; i++) {

let utxo = this.utxo[i];
let block_id = utxo[1];
let tx_ordinal = utxo[2];
let slip_index = utxo[3];
let amount = BigInt(utxo[4]);

html += `<div class="utxo-div">
<input type="radio" value="${i+1}" class="utxo-selection-button" name="utxo-input">
<span>${amount} Nolans</span>
<span>-</span>
<span>${block_id} block_id</span>
<span>-</span>
<span>${tx_ordinal} tx_ordinal</span>
<span>-</span>
<span>${slip_index} slip_index</span>
</div>`;

if (false && !Array.isArray(this.utxo) || !this.utxo.length) {
html += `
<div>
No UTXO in available in wallet.
</div>
`;
} else {
for (let i = 0; i < this.utxo.length; i++) {

let utxo = this.utxo[i];
let block_id = utxo[1];
let tx_ordinal = utxo[2];
let slip_index = utxo[3];
let amount = this.app.wallet.convertNolanToSaito((BigInt(utxo[4])));


html += `<div class="utxo-div">
<input type="radio" value="${i+1}" class="utxo-selection-button" name="utxo-input">
<span>${amount} SAITO</span>
</div>`;
}
}

document.querySelector('#utxo-list').innerHTML = html;
Expand All @@ -236,12 +285,6 @@ class Nft {
let response = await fetch('/balance/' + publicKey);
let data = await response.text();

// slip.public_key = key[0..33].to_vec().try_into().unwrap();
// slip.block_id = u64::from_be_bytes(key[33..41].try_into().unwrap());
// slip.tx_ordinal = u64::from_be_bytes(key[41..49].try_into().unwrap());
// slip.slip_index = key[49];
// slip.amount

const parts = data.split('.snap');
let utxo = parts[1].trim().split(/\n|\s{2,}/)
.filter(line => line.trim() !== '')
Expand Down
12 changes: 9 additions & 3 deletions lib/saito/ui/saito-nft/create-nft.template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = (app, mod) => {

let html = `
<div class="container">
<div class="container create-nft-container">

<div class="utxo-slips">
<div class="instructions">
Expand All @@ -21,7 +21,13 @@ module.exports = (app, mod) => {
<p class="positive">Balance</p>
</div>
</div>
<div class="options"><div class="data-nft-toggle">switch to json</div></div>

<!--
<div class="options">
<div class="data-nft-toggle">switch to json</div>
</div>
-->

</div>
<div class="nft-creator nft-inactive">
<div class="inputs">
Expand All @@ -37,7 +43,7 @@ module.exports = (app, mod) => {
</div>
<div>
<label for="nfts-fee">Tx Fee</label>
<input type="number" id="nfts-fee" value="1">
<input type="number" id="nfts-fee" value="0">
</div>
<div>
<label for="nfts-change">Change</label>
Expand Down
Loading