From d1a6d2e8216d7bd8933f4e66232f6333bb0cac57 Mon Sep 17 00:00:00 2001 From: top0xdev Date: Mon, 15 Apr 2024 11:00:57 -0400 Subject: [PATCH 01/10] update mint page --- deno.json | 3 +- fresh.gen.ts | 4 + islands/UploadImage.tsx | 401 ++++++++++++++++++++++++++++++++++++++++ lib/controller/mint.ts | 9 + routes/mint/index.tsx | 35 ++++ 5 files changed, 451 insertions(+), 1 deletion(-) create mode 100644 islands/UploadImage.tsx create mode 100644 lib/controller/mint.ts create mode 100644 routes/mint/index.tsx diff --git a/deno.json b/deno.json index 0da0ab454..890025104 100644 --- a/deno.json +++ b/deno.json @@ -3,7 +3,7 @@ "tasks": { "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx", "start": "deno run -A main.ts", - "dev": "export ENV=development && deno run -A --watch=static/,routes/,components/,islands/ dev.ts", + "dev": "export ENV=development && deno run -A --watch=static/,routes/,components/,islands/ dev.ts --host", "build": "deno run -A dev.ts build", "docs": "deno run --allow-read --allow-write swagger.js", "fakebuild": "echo 'fake build'", @@ -30,6 +30,7 @@ "@preact/signals-core": "https://esm.sh/@preact/signals-core@1.5.1", "$std/": "https://deno.land/std@0.212.0/", "bigfloat/": "https://deno.land/x/bigfloat@v3.0.2/", + "@iconify/react": "npm:@iconify/react@4.1.1", "tailwindcss": "npm:tailwindcss@3.4.1", "tailwindcss/": "npm:/tailwindcss@3.4.1/", "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js", diff --git a/fresh.gen.ts b/fresh.gen.ts index fee55fd61..ec8ad7546 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -38,6 +38,7 @@ import * as $content_imgpath_ from "./routes/content/[...imgpath].tsx"; import * as $cursed_index from "./routes/cursed/index.tsx"; import * as $docs_index from "./routes/docs/index.tsx"; import * as $index from "./routes/index.tsx"; +import * as $mint_index from "./routes/mint/index.tsx"; import * as $s_id_ from "./routes/s/[...id].tsx"; import * as $src20_tick_ from "./routes/src20/[tick].tsx"; import * as $src20_index from "./routes/src20/index.tsx"; @@ -50,6 +51,7 @@ import * as $MempoolWeather from "./islands/MempoolWeather.tsx"; import * as $StampSearch from "./islands/StampSearch.tsx"; import * as $Toast_ToastComponent from "./islands/Toast/ToastComponent.tsx"; import * as $Toast_toast from "./islands/Toast/toast.tsx"; +import * as $UploadImage from "./islands/UploadImage.tsx"; import * as $Wallet_ConnectWallet from "./islands/Wallet/ConnectWallet.tsx"; import * as $Wallet_ConnectedModal from "./islands/Wallet/ConnectedModal.tsx"; import * as $Wallet_ConnectorsModal from "./islands/Wallet/ConnectorsModal.tsx"; @@ -109,6 +111,7 @@ const manifest = { "./routes/cursed/index.tsx": $cursed_index, "./routes/docs/index.tsx": $docs_index, "./routes/index.tsx": $index, + "./routes/mint/index.tsx": $mint_index, "./routes/s/[...id].tsx": $s_id_, "./routes/src20/[tick].tsx": $src20_tick_, "./routes/src20/index.tsx": $src20_index, @@ -123,6 +126,7 @@ const manifest = { "./islands/StampSearch.tsx": $StampSearch, "./islands/Toast/ToastComponent.tsx": $Toast_ToastComponent, "./islands/Toast/toast.tsx": $Toast_toast, + "./islands/UploadImage.tsx": $UploadImage, "./islands/Wallet/ConnectWallet.tsx": $Wallet_ConnectWallet, "./islands/Wallet/ConnectedModal.tsx": $Wallet_ConnectedModal, "./islands/Wallet/ConnectorsModal.tsx": $Wallet_ConnectorsModal, diff --git a/islands/UploadImage.tsx b/islands/UploadImage.tsx new file mode 100644 index 000000000..dc9f66240 --- /dev/null +++ b/islands/UploadImage.tsx @@ -0,0 +1,401 @@ +import { useState } from "preact/hooks"; +import { walletContext } from "store/wallet/wallet.ts"; +import axiod from "https://deno.land/x/axiod/mod.ts"; +import { api_post_mint } from "$lib/controller/mint.ts"; + +export function UploadImage() { + const { wallet, isConnected } = walletContext; + const { address } = wallet.value; + + const [file, setFile] = useState(null); + const [fee, setFee] = useState(22.3); + const [inssuance, setInssuance] = useState(1); + + const handleChangeFee = (e: any) => { + setFee(e.target.value); + }; + + const toBase64 = (file) => + new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = reject; + }); + + const handleImage = (e: any) => { + setFile(e.target.files[0]); + }; + + const handleDecrease = () => { + if (inssuance === 1) return; + setInssuance(inssuance - 1); + }; + + const handleIncrease = () => { + setInssuance(inssuance + 1); + }; + + const handleMint = async () => { + if (!isConnected.value) { + alert("Connect your wallet"); + return; + } + + if (file === null) { + alert("Upload your file"); + return; + } + const data = await toBase64(file); + axiod.post("https://stampchain.io/api/v2/olga/mint", { + sourceWallet: address, + qty: inssuance, + locked: true, + filename: file.name, + file: data, + satsPerKB: fee, + service_fee: null, + service_fee_address: null, + }).then( + (response) => { + console.log(response); + }, + ).catch((error) => console.log(error)); + }; + + return ( +
+
+
+ + {file !== null && ( + + )} + {file === null && + ( + + )} +
+ +
+ {file !== null && ( + + )} + {file === null && + ( + + )} +
+
+
+
+ + + + + + + + + +
+
+ + OPTIMIZED PREVIEW + +
+ + + + 56.51% +
+
+
+
+ Optimization +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ Note: There are no refunds + + Only mint if the preview is of acceptable quality! + + + Sometimes it's ok to not optimize! + +
+
+
+ + EFFECTIVE FEE RATE: ${fee / 10} sat/vB + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ RECOMMENDED: $15 sat/vB +
+
+ ASSET ISSUANCE +
+
+
{inssuance}
+
handleDecrease()} + > + + + +
+
handleIncrease()} + > + + + +
+
+
+ Total Estimated +
+ 0.001139 + + + +
+
+
+ Mint Stamp +
+
+ ); +} diff --git a/lib/controller/mint.ts b/lib/controller/mint.ts new file mode 100644 index 000000000..4b0dd4e1b --- /dev/null +++ b/lib/controller/mint.ts @@ -0,0 +1,9 @@ +import axiod from "https://deno.land/x/axiod@0.26.2/mod.ts"; + +export async function api_post_mint(data: any) { + try { + } catch (error) { + console.error(error); + return null; + } +} diff --git a/routes/mint/index.tsx b/routes/mint/index.tsx new file mode 100644 index 000000000..0dd05fa2a --- /dev/null +++ b/routes/mint/index.tsx @@ -0,0 +1,35 @@ +import { HandlerContext } from "$fresh/server.ts"; + +import { CommonClass, getClient } from "$lib/database/index.ts"; +import { useState } from "preact/hooks"; +import { paginate } from "utils/util.ts"; +import { UploadImage } from "$islands/UploadImage.tsx"; + +//TODO: Add pagination + +export const handler = { + async GET(req: Request, ctx: HandlerContext) { + try { + const url = new URL(req.url); + const body = {}; + return await ctx.render(body); + } catch (error) { + console.error(error); + const body = { error: `Error: Internal server error` }; + return ctx.render(body); + } + }, +}; + +export function MintPage(props) { + const { data, total, page, pages, limit } = props.data; + return ( +
+
+ Mint OLGA Stamp (P2WSH) +
+ +
+ ); +} +export default MintPage; From 78b0b6f7cc03911e8d95eed895e60aad16fdefbb Mon Sep 17 00:00:00 2001 From: top0xdev Date: Thu, 18 Apr 2024 09:44:16 -0400 Subject: [PATCH 02/10] update minting page --- islands/UploadImage.tsx | 396 +++++++++++++++++++++++++++++++--------- 1 file changed, 310 insertions(+), 86 deletions(-) diff --git a/islands/UploadImage.tsx b/islands/UploadImage.tsx index dc9f66240..3aa40022c 100644 --- a/islands/UploadImage.tsx +++ b/islands/UploadImage.tsx @@ -1,21 +1,77 @@ -import { useState } from "preact/hooks"; +import { useEffect, useState } from "preact/hooks"; import { walletContext } from "store/wallet/wallet.ts"; import axiod from "https://deno.land/x/axiod/mod.ts"; -import { api_post_mint } from "$lib/controller/mint.ts"; export function UploadImage() { const { wallet, isConnected } = walletContext; const { address } = wallet.value; + const btcIcon = ` + + `; + + const usdIcon = + ``; const [file, setFile] = useState(null); - const [fee, setFee] = useState(22.3); + const [fee, setFee] = useState(780); const [inssuance, setInssuance] = useState(1); + const [coinType, setCoinType] = useState("BTC"); + const [visible, setVisible] = useState(false); + const [txfee, setTxfee] = useState(0.001285); + const [mintfee, setMintfee] = useState(0.00015); + const [dust, setDust] = useState(0.000113); + const [total, setTotal] = useState(0.001547); + const [BTCPrice, setBTCPrice] = useState(60000); + + useEffect(() => { + const coins = document.getElementsByClassName("coin"); + for (var i = 0; i < coins.length; i++) coins[i].innerHTML = btcIcon; + }, []); + useEffect(() => { + axiod.get(`https://api.api-ninjas.com/v1/cryptoprice?symbol=BTCUSDT`, { + headers: { + "X-Api-Key": "5ML8663hYv3htd+L5OdccQ==gvWwdj58xzw4nqoa", + }, + }).then((res) => { + setBTCPrice(parseFloat(res.data.price)); + }); + }, [coinType]); const handleChangeFee = (e: any) => { setFee(e.target.value); }; - const toBase64 = (file) => + const handleChangeCoin = () => { + const switchToggle = document.querySelector("#switch-toggle"); + const coins = document.getElementsByClassName("coin"); + if (!switchToggle) return; + if (coinType === "USDT") { + switchToggle.classList.add("translate-x-full"); + for (var i = 0; i < coins.length; i++) coins[i].innerHTML = btcIcon; + setTimeout(() => { + switchToggle.innerHTML = btcIcon; + }, 150); + } else { + switchToggle.classList.remove("translate-x-full"); + for (var i = 0; i < coins.length; i++) coins[i].innerHTML = usdIcon; + setTimeout(() => { + switchToggle.innerHTML = usdIcon; + }, 150); + } + if (coinType === "BTC") setCoinType("USDT"); + else setCoinType("BTC"); + }; + + const toBase64 = (file: any) => new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); @@ -23,8 +79,24 @@ export function UploadImage() { reader.onerror = reject; }); + const getImageBlobFromUrl = async (url: any) => { + const fetchedImageData = await fetch(url); + const blob = await fetchedImageData.blob(); + return blob; + }; + const handleImage = (e: any) => { setFile(e.target.files[0]); + console.log(e.target.files[0]); + }; + + const removeImage = () => { + setFile(null); + }; + + const copyImage = async () => { + const blob = await getImageBlobFromUrl(URL.createObjectURL(file)); + await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]); }; const handleDecrease = () => { @@ -46,21 +118,23 @@ export function UploadImage() { alert("Upload your file"); return; } + const data = await toBase64(file); - axiod.post("https://stampchain.io/api/v2/olga/mint", { - sourceWallet: address, - qty: inssuance, - locked: true, - filename: file.name, - file: data, - satsPerKB: fee, - service_fee: null, - service_fee_address: null, - }).then( - (response) => { + axiod + .post("https://stampchain.io/api/v2/olga/mint", { + sourceWallet: address, + qty: inssuance, + locked: true, + filename: file.name, + file: data, + satsPerKB: fee, + service_fee: null, + service_fee_address: null, + }) + .then((response) => { console.log(response); - }, - ).catch((error) => console.log(error)); + }) + .catch((error) => console.log(error)); }; return ( @@ -80,60 +154,66 @@ export function UploadImage() { {file !== null && ( )} - {file === null && - ( -