Skip to content
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

Russell/update UI #25

Merged
merged 14 commits into from
May 13, 2024
Merged

Russell/update UI #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d1a6d2e
update mint page
Apr 15, 2024
78b0b6f
update minting page
Apr 18, 2024
163a016
update Total Estimated
Apr 18, 2024
af73d1b
Merge branch 'main' of https://github.com/stampchain-io/BTCStampsExpl…
Apr 18, 2024
e646e07
Merge branch 'russell/mint' of https://github.com/stampchain-io/BTCSt…
Apr 20, 2024
f658149
change api into quicknode
Apr 20, 2024
abf9fe4
update mint page
Apr 15, 2024
f58f87e
update minting page
Apr 18, 2024
fa31595
update Total Estimated
Apr 18, 2024
23a8094
change api into quicknode
Apr 20, 2024
9b623b8
Merge branch 'russell/mint' of https://github.com/stampchain-io/BTCSt…
Apr 26, 2024
f12721c
Merge branch 'main' of https://github.com/stampchain-io/BTCStampsExpl…
Apr 26, 2024
344e87d
update ui
Apr 29, 2024
233b33a
update gradient and etc
Apr 30, 2024
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
7 changes: 2 additions & 5 deletions components/BlockIssuancesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,7 @@ export default function BlockIssuancesTable(props: BlockIssuancesTableProps) {
return (
<div className="relative overflow-x-auto shadow-md sm:rounded-lg max-h-196">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 sm:h-auto">
<caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
Stamps
</caption>
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<thead className="bg-[#343434] uppercase text-xs text-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">Image</th>
<th scope="col" className="px-6 py-3">Stamp</th>
Expand All @@ -48,7 +45,7 @@ export default function BlockIssuancesTable(props: BlockIssuancesTableProps) {
? "cursed"
: "named";
return (
<tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
<tr className="bg-[#262424] border-b dark:border-gray-700">
<td className="px-0.5 py-0.5">
<a href={`/stamp/${issuance.cpid}`}>
<Stamp
Expand Down
84 changes: 7 additions & 77 deletions components/src20/SRC20HoldersInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,101 +4,31 @@ import { short_address } from "utils/util.ts";

interface HoldersInfoProps {
holders: {}[];
total_holders: number;
total_mints: number;
}
export const SRC20HoldersInfo = (props: HoldersInfoProps) => {
const { holders, total_holders, total_mints, total_sends } = props;
const { holders } = props;
const labels = holders
.map((holder) => parseFloat(holder.percentage))
.filter((percentage) => !isNaN(percentage));
// problem here with NaN values
// console.log(holders);

return (
<div class="mx-auto w-full p-4 flex flex-col md:flex-row space-between">
<div class="mx-auto w-full flex flex-col md:flex-row space-between">
<div class="flex flex-col gap-2 items-center w-full text-white">
<div class="flex flex-col gap-2 items-center w-full">
<div class="text-3xl font-bold text-center">
{total_holders}
</div>
<div class="text-xl font-bold text-center">
Total Holders
</div>
</div>
<Chart
type="pie"
width={350}
options={{
responsive: true,
devicePixelRatio: 1,
plugins: {
legend: {
display: false,
},
},
}}
data={{
datasets: [{
label: "Holders",
data: labels,
borderColor: transparentize("#fefefe", 0.9),
backgroundColor: [
transparentize(ChartColors.Red, 0.6),
transparentize(ChartColors.Orange, 0.6),
transparentize(ChartColors.Yellow, 0.6),
transparentize(ChartColors.Green, 0.6),
transparentize(ChartColors.Blue, 0.6),
],
borderWidth: 1,
}],
}}
/>
</div>

<div class="flex flex-col gap-2 items-center w-full text-white">
<div class="flex flex-row text-center items-center w-full">
<div class="flex flex-col gap-2 items-center w-full">
<div class="text-3xl font-bold text-center">
{total_mints}
</div>
<div class="text-xl font-bold text-center">
Total Mints
</div>
</div>
<div class="flex flex-col gap-2 items-center w-full">
<div class="text-3xl font-bold text-center">
{total_sends}
</div>
<div class="text-xl font-bold text-center">
Total Sends
</div>
</div>
<div class="flex flex-col gap-2 items-center w-full">
<div class="text-3xl font-bold text-center">
{total_sends + total_mints}
</div>
<div class="text-xl font-bold text-center">
TXs
</div>
</div>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg max-h-80 py-4 w-full">
<div class="relative shadow-md sm:rounded-lg w-full">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<caption class="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
Holders
</caption>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<thead class="table-fixed bg-[#343434] uppercase text-xs text-gray-700 dark:text-gray-400">
<tr class="w-full table table-fixed">
<th scope="col" class="px-6 py-3">address</th>
<th scope="col" class="px-6 py-3">amount</th>
<th scope="col" class="px-6 py-3">%</th>
</tr>
</thead>
<tbody>
<tbody class="table-fixed overflow-x-auto max-h-80 block">
{holders.map((src20) => {
return (
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
<tr class="w-full table table-fixed bg-[#262424] text-[#9D9B9B] border-b dark:border-gray-700">
<td class="px-6 py-4">
{short_address(src20.address)}
</td>
Expand Down
28 changes: 11 additions & 17 deletions components/src20/SRC20TX.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,20 @@ export const SRC20TX = (props: SRC20TXProps) => {
const { txs, total, type } = props;
if (type === "TRANSFER") {
return (
<div class="relative overflow-x-auto shadow-md sm:rounded-lg max-h-80 py-4 w-full">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<caption class="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
Transfers
</caption>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<div class="relative shadow-md sm:rounded-lg w-full">
<table class="text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="table-fixed text-xs text-gray-700 uppercase bg-[#343434] dark:text-gray-400">
<tr class="w-full table table-fixed">
<th scope="col" class="px-6 py-3">block</th>
<th scope="col" class="px-6 py-3">from</th>
<th scope="col" class="px-6 py-3">to</th>
<th scope="col" class="px-6 py-3">amount</th>
</tr>
</thead>
<tbody>
<tbody class="table-fixed overflow-x-auto max-h-80 block">
{txs.map((tx) => {
return (
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
<tr class="w-full table table-fixed bg-[#262424] text-[#9D9B9B] border-b dark:border-gray-700">
<td class="px-6 py-4">
{tx.block_index}
</td>
Expand All @@ -49,22 +46,19 @@ export const SRC20TX = (props: SRC20TXProps) => {
}
if (type === "MINT") {
return (
<div class="relative overflow-x-auto shadow-md sm:rounded-lg max-h-80 py-4 w-full">
<div class="relative shadow-md sm:rounded-lg w-full">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<caption class="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
Mints
</caption>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<thead class="table-fixed text-xs text-gray-700 uppercase bg-[#343434] dark:text-gray-400 w-[calc(100%-1em)]">
<tr class="w-full table table-fixed">
<th scope="col" class="px-6 py-3">block</th>
<th scope="col" class="px-6 py-3">address</th>
<th scope="col" class="px-6 py-3">amount</th>
</tr>
</thead>
<tbody>
<tbody class="table-fixed overflow-x-auto max-h-80 block">
{txs.map((tx) => {
return (
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
<tr class="w-full table table-fixed bg-[#262424] text-[#9D9B9B] border-b dark:border-gray-700">
<td class="px-6 py-4">
{tx.block_index}
</td>
Expand Down
150 changes: 105 additions & 45 deletions components/src20/SRC20TickHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,58 +4,118 @@ interface SRC20TickHeaderProps {
deployment: any;
mint_status: any;
total_holders: number;
total_mints: number;
total_sends: number;
}
export const SRC20TickHeader = (props) => {
const { deployment, mint_status, total_holders } = props;
export const SRC20TickHeader = (props: SRC20TickHeaderProps) => {
const { deployment, mint_status, total_holders, total_mints, total_sends } =
props;
return (
<div class="flex w-full flex-col md:flex-row gap-4 items-center justify-center">
<img
src={`/content/${deployment.tx_hash}.svg`}
class="w-full h-full md:w-60 md:h-60"
class="w-full md:w-2/5 h-full rounded-lg"
/>

<div class="relative w-full overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-center rtl:text-right text-gray-500 dark:text-gray-400 uppercase">
<tbody>
<tr class="border-b">
<th scope="row" class="whitespace-nowrap px-6 py-3">Tick</th>
<td class="whitespace-nowrap">
{convertToEmoji(deployment.tick)}
</td>
<th scope="row" class="whitespace-nowrap px-6 py-3">Block</th>
<td class="whitespace-nowrap">
{deployment.block_index}
</td>
<th scope="row" class="px-6 py-3">Time</th>
<td class="whitespace-nowrap">
{new Date(deployment.block_time).toLocaleString("default", {
month: "short",
year: "numeric",
})}
</td>
</tr>
<tr>
<th scope="row" class="whitespace-nowrap px-6 py-3">
Total Supply
</th>
<td class="whitespace-nowrap">
{deployment.max}
</td>
<th scope="row" class="whitespace-nowrap px-6 py-3">
Total Holders
</th>
<td class="whitespace-nowrap">
{total_holders}
</td>
<th scope="row" class="whitespace-nowrap px-6 py-3">
Total minted
</th>
<td class="whitespace-nowrap">
{mint_status.progress}%
</td>
</tr>
</tbody>
</table>
<div class="relative w-full md:w-3/5 overflow-x-auto flex flex-col gap-8 text-white">
<div class="flex flex-col gap-5">
<p class="text-5xl uppercase">{convertToEmoji(deployment.tick)}</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
</p>
</div>
<hr />
<div class="flex flex-col gap-5">
<p class="text-[#03A606] text-2xl font-semibold">Properties</p>
<div class="flex justify-between">
<div class="w-1/5 flex items-center justify-start">
<div class="flex flex-col">
<p class="text-2xl font-semibold">{total_holders}</p>
<p class="text-base">Total Holders</p>
</div>
</div>
<div class="border-r border-[#ffffff49]"></div>
<div class="w-2/5 flex items-center justify-center">
<div class="flex flex-col">
<p class="text-2xl font-semibold">{total_mints}</p>
<p class="text-base">Total Mints</p>
</div>
</div>
<div class="border-r border-[#ffffff49]"></div>
<div class="w-2/5 flex items-center justify-center">
<div class="flex flex-col">
<p class="text-2xl font-semibold">{total_sends}</p>
<p class="text-base">Total Sends</p>
</div>
</div>
<div class="border-r border-[#ffffff49]"></div>
<div class="w-1/5 flex items-center justify-end">
<div class="flex flex-col">
<p class="text-2xl font-semibold">
{total_sends + total_mints}
</p>
<p class="text-base">TXs</p>
</div>
</div>
</div>
</div>
<hr />
<div class="flex flex-col gap-5">
<p class="text-[#03A606] text-2xl font-semibold">Others</p>
<div class="flex justify-between">
<div class="w-1/3 flex items-center justify-start">
<div class="flex flex-col">
<p class="text-2xl font-semibold">
{convertToEmoji(deployment.tick)}
</p>
<p class="text-base">Tick</p>
</div>
</div>
<div class="border-r border-[#ffffff49]"></div>
<div class="w-2/5 flex items-center justify-center">
<div class="flex flex-col">
<p class="text-2xl font-semibold">{deployment.block_index}</p>
<p class="text-base">Block</p>
</div>
</div>
<div class="border-r border-[#ffffff49]"></div>
<div class="w-1/3 flex items-center justify-end">
<div class="flex flex-col">
<p class="text-2xl font-semibold">
{new Date(deployment.block_time).toLocaleString("default", {
month: "short",
year: "numeric",
})}
</p>
<p class="text-base">Time</p>
</div>
</div>
</div>
<div class="flex justify-between">
<div class="w-1/3 flex items-center justify-start">
<div class="flex flex-col">
<p class="text-2xl font-semibold">{deployment.max}</p>
<p class="text-base">Total Supply</p>
</div>
</div>
<div class="border-r border-[#ffffff49]"></div>
<div class="w-2/5 flex items-center justify-center">
<div class="flex flex-col">
<p class="text-2xl font-semibold">{total_holders}</p>
<p class="text-base">Total Holders</p>
</div>
</div>
<div class="border-r border-[#ffffff49]"></div>
<div class="w-1/3 flex items-center justify-end">
<div class="flex flex-col">
<p class="text-2xl font-semibold">{mint_status.progress}%</p>
<p class="text-base">Total minted</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
Expand Down
Loading
Loading