Skip to content

Commit

Permalink
Add Header and change previous header to TokenInfo
Browse files Browse the repository at this point in the history
  • Loading branch information
@jriyyya
jriyyya committed Jan 7, 2025
1 parent 9a3f62c commit 1885bca
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 107 deletions.
112 changes: 9 additions & 103 deletions packages/client/src/pages/token/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,20 @@
import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
import Icon from "../../shared/components/Icon.tsx";
import FormatAddress from "../../shared/components/FormatAddress.tsx";
import ClipboardWrapper from "../../shared/components/ClipboardWrapper.tsx";

export default function Header() {
return (
<div className="flex flex-col gap-y-2 border border-border p-2 rounded-sm hover:cursor-pointer">
<div className="flex gap-x-2 items-start ">
<img
src={tokenData.imageUrl}
alt={tokenData.name}
className="w-1/4 object-cover aspect-square"
/>
<div className="flex flex-col">
<div className="flex text-sm flex-col">
<div className="flex w-full">
<h1>{tokenData.name}</h1>
<FlexSeparator size="full" />
<div className="flex">
<Icon name="Twitter" className="size-5" />

<FlexSeparator size="sm" />
<Icon name="MessageSquare" className="size-5" />

<FlexSeparator size="sm" />
<Icon name="Globe" className="size-5" />
</div>
</div>

<div className="flex w-full items-center">
<p className="bg-gradient-to-r text-xl w-max from-blue-400 via-purple-500 to-pink-600 bg-clip-text text-transparent font-bold">
{tokenData.ticker}
</p>
<FlexSeparator size="full" />
<div className="flex text-xs items-center">
<p className="whitespace-nowrap mr-1 text-foreground/50">
Created By:
</p>
<ClipboardWrapper textToBeCopied="0x9B28C43d4526202c316b9ab0ECCB757C4D9c5155">
<div className="flex items-center">
<FormatAddress address="0x9B28C43d4526202c316b9ab0ECCB757C4D9c5155" />
<FlexSeparator size="sm" />
<Icon name="Copy" className="size-5" />
</div>
</ClipboardWrapper>
</div>
</div>
</div>
<FlexSeparator size="xs" />
<p className="text-xs text-foreground/50">
{tokenData.description}
</p>
</div>
</div>
<div className="text-xs font-semibold flex flex-col bg-foreground/5 py-2 px-3 rounded-xs">
<div className="flex w-full">
<p>
Price
</p>
<FlexSeparator size="full" />
<p>
<span className="text-green-400 font-semibold font-mono">
+2.57%
</span>{" "}
{tokenData.price} PFRAX
</p>
</div>
<FlexSeparator size="md" />
<div className="flex w-full">
<p>
Market Cap
</p>
<FlexSeparator size="full" />
<p>
${tokenData.marketCap}
</p>
</div>
<div className="flex items-center">
<Icon name="ArrowLeft" className="size-4" />
<FlexSeparator size="sm" />
<p className="font-semibold">BTC / KLYRR</p>
<FlexSeparator size="full" />
<div className="flex">
<Icon name="Star" className="size-6" />
<FlexSeparator size="md" />
<div className="flex w-full">
<p>
24H Volume
</p>
<FlexSeparator size="full" />
<p>
240k PFRAX
</p>
</div>
<Icon name="Share" className="size-6" />
<FlexSeparator size="md" />
<div className="flex w-full">
<p>
Token Created
</p>
<FlexSeparator size="full" />
<p>
20H 32M Ago
</p>
</div>
<Icon name="TriangleAlert" className="size-6" />
</div>
</div>
);
}

const tokenData = {
name: "KhareedLoYarr",
createdBy: "0x9B28C43d4526202c316b9ab0ECCB757C4D9c5155",
ticker: "KLYRR",
marketCap: "2.2M",
price: "0.2",
description:
"Find & Download Free Graphic Resources for Random Nft Vectors, Stock Photos & PSD files. Free for commercial use High Quality Images. Find & Download the most popular Random Nft Photos on Freepik Free for commercial use High Quality Images.",
imageUrl:
"https://i.ytimg.com/vi/LW1i-axSoYE/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLA6NX3F_tN3cSQg084sPFcPOFS1ew",
};
126 changes: 126 additions & 0 deletions packages/client/src/pages/token/TokenInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
import Icon from "../../shared/components/Icon.tsx";
import FormatAddress from "../../shared/components/FormatAddress.tsx";
import ClipboardWrapper from "../../shared/components/ClipboardWrapper.tsx";

export default function TokenInfo() {
return (
<div className="flex flex-col gap-y-2 border border-border p-2 rounded-sm hover:cursor-pointer">
<div className="flex gap-x-2 items-start ">
<img
src={tokenData.imageUrl}
alt={tokenData.name}
className="w-1/4 object-cover aspect-square"
/>
<div className="flex flex-col">
<div className="flex text-sm flex-col">
<div className="flex w-full">
<h1>{tokenData.name}</h1>

<FlexSeparator size="full" />
<div className="flex text-xs items-center">
<p className="whitespace-nowrap mr-1 text-foreground/50">
Created By:
</p>
<ClipboardWrapper textToBeCopied="0x9B28C43d4526202c316b9ab0ECCB757C4D9c5155">
<div className="flex items-center">
<FormatAddress address="0x9B28C43d4526202c316b9ab0ECCB757C4D9c5155" />
<FlexSeparator size="sm" />
<Icon name="Copy" className="size-5" />
</div>
</ClipboardWrapper>
</div>
</div>

<div className="flex w-full items-center">
<p className="bg-gradient-to-r text-xl w-max from-blue-400 via-purple-500 to-pink-600 bg-clip-text text-transparent font-bold">
{tokenData.ticker}
</p>
</div>
</div>
<FlexSeparator size="xs" />
<p className="text-xs text-foreground/50">
{tokenData.description}
</p>
</div>
</div>
<div className="text-xs font-semibold flex flex-col bg-foreground/5 py-2 px-3 rounded-xs">
<div className="flex w-full">
<p>
Price
</p>
<FlexSeparator size="full" />
<p>
<span className="text-green-400 font-semibold font-mono">
+2.57%
</span>{" "}
{tokenData.price} PFRAX
</p>
</div>
<FlexSeparator size="md" />
<div className="flex w-full">
<p>
Market Cap
</p>
<FlexSeparator size="full" />
<p>
${tokenData.marketCap}
</p>
</div>
<FlexSeparator size="md" />
<div className="flex w-full">
<p>
24H Volume
</p>
<FlexSeparator size="full" />
<p>
240k PFRAX
</p>
</div>
<FlexSeparator size="md" />
<div className="flex w-full">
<p>
Token Created
</p>
<FlexSeparator size="full" />
<p>
20H 32M Ago
</p>
</div>
<FlexSeparator size="md" />
<div className="flex w-full">
<p>
Socials
</p>
<FlexSeparator size="full" />
<div className="flex gap-x-1">
<img
src="https://www.freepnglogos.com/uploads/logo-website-png/logo-website-website-icon-with-png-and-vector-format-for-unlimited-22.png"
className="w-5 rounded-md"
/>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/X_logo.jpg/640px-X_logo.jpg"
className="w-5 rounded-md"
/>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1200px-Telegram_logo.svg.png"
className="w-5 rounded-md"
/>
</div>
</div>
</div>
</div>
);
}

const tokenData = {
name: "KhareedLoYarr",
createdBy: "0x9B28C43d4526202c316b9ab0ECCB757C4D9c5155",
ticker: "KLYRR",
marketCap: "2.2M",
price: "0.2",
description:
"Find & Download Free Graphic Resources for Random Nft Vectors, Stock Photos & PSD files. Free for commercial use High Quality Images. Find & Download the most popular Random Nft Photos on Freepik Free for commercial use High Quality Images.",
imageUrl:
"https://i.ytimg.com/vi/LW1i-axSoYE/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLA6NX3F_tN3cSQg084sPFcPOFS1ew",
};
4 changes: 2 additions & 2 deletions packages/client/src/pages/token/Trader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import Icon from "../../shared/components/Icon.tsx";
import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
Expand Down Expand Up @@ -50,7 +50,7 @@ export default function Trader() {
>
<div className="flex flex-col relative gap-y-2">
<div className="self-start text-yellow-400 text-sm animate-pulse flex items-center">
<Icon name="FileWarning" className="size-5" />
<Icon name="CircleAlert" className="size-5" />
<FlexSeparator size="sm" />
<p className="whitespace-nowrap">
You are {tradeState.toLowerCase()}ing {token.symbol} for {"FRAX"}
Expand Down
7 changes: 5 additions & 2 deletions packages/client/src/pages/token/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
import Header from "./Header.tsx";
import TokenInfo from "./TokenInfo.tsx";
import Trader from "./Trader.tsx";

export default function () {
Expand All @@ -11,12 +12,14 @@ export default function () {
<div className={"p-page flex flex-col overflow-hidden"}>
<Header />
<FlexSeparator size="md" />
<TokenInfo />
<FlexSeparator size="md" />
<div className="flex text-xs gap-x-4 text-foreground/50 items-center">
<p className="whitespace-nowrap">Chart</p>
<p className="bg-foreground/10 px-4 py-1 rounded-xl whitespace-nowrap text-foreground">
Buy/Sell
</p>
<p className="whitespace-nowrap">Chart</p>
<p className="whitespace-nowrap">Engage</p>
<p className="whitespace-nowrap">Chat</p>
</div>

<FlexSeparator size="sm" />
Expand Down

0 comments on commit 1885bca

Please sign in to comment.