Skip to content

Commit

Permalink
Merge pull request #55 from Benjtalkshow/fix-history-log-page
Browse files Browse the repository at this point in the history 
fix(dex): correct history log page display issue
  • Loading branch information
@Utilitycoder
Utilitycoder authored Dec 17, 2024
2 parents 2cd2f6d + eb3a434 commit 33cba27
Show file tree
Hide file tree
Showing 5 changed files with 1,327 additions and 383 deletions.
30 changes: 30 additions & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,33 @@ input:-webkit-autofill {
scrollbar-width: none;
}
}

.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #433B5A #170F2E;
}

.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #170F2E;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #433B5A;
border-radius: 4px;
border: 2px solid #170F2E;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #5A4F7D;
}

@media (max-width: 640px) {
.custom-scrollbar table {
table-layout: fixed;
}
}
317 changes: 85 additions & 232 deletions app/history/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,242 +1,95 @@
import btc from "../../public/coin-logos-svg/btc-logo.svg"
import eth from "../../public/coin-logos-svg/eth-logo.svg"
import sol from "../../public/coin-logos-svg/sol-logo.svg"
import strk from "../../public/coin-logos-svg/strk-logo.svg"
import usdc from "../../public/coin-logos-svg/usdc-logo.svg"
import usdt from "../../public/coin-logos-svg/usdt-logo.svg"
import graph from "../../public/coin-logos-svg/graph-logo.svg"
"use client"

import { history } from "@/constants/history";
import Image from "next/image";
import { useEffect, useRef } from "react";

const history =[
{
from:{
fromImage:btc,
toImage:usdc,
coinFrom:"bitcoin",
coinTo:"USDC"
},
to:{
coinTo:"USDC",
coinToAmount:1220,
coinFrom:"BTC",
coinFromAmount:0.34421,
},
percentage:29,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
}
},
{
from:{
fromImage:btc,
toImage:usdt,
coinFrom:"bitcoin",
coinTo:"USDT"
},
to:{
coinTo:"USDT",
coinToAmount:30,
coinFrom:"BTC",
coinFromAmount:900,
},
percentage:79,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
}
},
{
from:{
fromImage:graph,
toImage:usdt,
coinFrom:"the graph",
coinTo:"USDT"
},
to:{
coinTo:"USDT",
coinToAmount:30,
coinFrom:"GRT",
coinFromAmount:200,
},
percentage:90,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
}
},
{
from:{
fromImage:strk,
toImage:usdc,
coinFrom:"starknet",
coinTo:"USDT"
},
to:{
coinTo:"USDT",
coinToAmount:30,
coinFrom:"STRK",
coinFromAmount:900,
},
percentage:100,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
}
},
{
from:{
fromImage:eth,
toImage:usdc,
coinFrom:"ethereum",
coinTo:"USDC"
},
to:{
coinTo:"USDC",
coinToAmount:2500,
coinFrom:"ETH",
coinFromAmount:0.7,
},
percentage:29,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
}
},
{
from:{
fromImage:sol,
toImage:usdt,
coinFrom:"solana",
coinTo:"USDT"
},
to:{
coinTo:"USDT",
coinToAmount:300,
coinFrom:"SOL",
coinFromAmount:10,
},
percentage:79,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
}
},
{
from:{
fromImage:sol,
toImage:usdt,
coinFrom:"solana",
coinTo:"USDT"
},
to:{
coinTo:"USDT",
coinToAmount:300,
coinFrom:"SOL",
coinFromAmount:10,
},
percentage:79,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
}
},
{
from:{
fromImage:btc,
toImage:usdc,
coinFrom:"bitcoin",
coinTo:"USDC"
},
to:{
coinTo:"USDC",
coinToAmount:1220,
coinFrom:"BTC",
coinFromAmount:0.34421,
},
percentage:29,
date:{
day:"21.12.2024",
time:"GMT 21:08 PM",
export default function DexHistory() {
const tableRef = useRef<HTMLTableElement>(null);
const containerRef = useRef<HTMLDivElement>(null);

useEffect(() => {
const handleResize = () => {
if (tableRef.current && containerRef.current) {
const tableWidth = tableRef.current.scrollWidth;
const containerWidth = containerRef.current.clientWidth;
if (tableWidth > containerWidth) {
tableRef.current.style.width = `${tableWidth}px`;
} else {
tableRef.current.style.width = '100%';
}
},
]
}
};

export default function DexHistory(){
return(
<>
<div className="hidden md:block w-full h-[100px] bg-main-bg bg-cover" />
<section className="bg-cover bg-main-bg md:bg-inherit bg-center bg-no-repeat mt-10 pt-20 md:mt-0 md:py-16 pb-10 leading-[19.7px] h-screen flex flex-col justify-center items-center">
<h1 className="text-center capitalize pb-8 text-2xl text-main-white font-semibold">history log</h1>
{/* desktop */}
<div className="hidden sm:block w-[95%] md:w-[80%] lg:w-[60%] max-w-[800px] overflow-auto sm:h-[500px] md:h-[700px] mx-auto">
<div className="flex justify-between capitalize font-normal text-sm w-full border-b-[#170F2E] border-b pb-3 place-content-end">
<h3>from</h3>
<h3>to</h3>
<h3>percentage</h3>
<h3>autoSwapper</h3>
</div>
{history.map((data,index)=>{
return (<div className="grid grid-cols-4 place-content-between capitalize font-medium w-full py-5" key={index}>
<div className="flex items-center gap-[12px]">
<h1 className="text-dark-blue">{index+1}</h1>
<div className="flex gap-10 items-center">
<div className="flex relative">
<Image src={data.from.fromImage} alt="coin from" className="w-6 h-6" />
<Image src={data.from.toImage} alt="coin to" className="absolute left-5"/>
window.addEventListener('resize', handleResize);
handleResize();

return () => window.removeEventListener('resize', handleResize);
}, []);

return (
<>
<div className="hidden md:block w-full" />
<section className="bg-cover bg-main-bg md:bg-inherit bg-center bg-no-repeat mt-10 pt-20 md:mt-0 md:py-16 pb-10 leading-[19.7px] min-h-screen flex flex-col justify-center items-center">
<h1 className="text-center capitalize pb-8 text-2xl text-main-white font-semibold">history log</h1>

{/* Desktop, Tablet, and Mobile */}
<div
ref={containerRef}
className="w-full px-4 sm:w-[95%] md:w-[80%] lg:w-[60%] max-w-[800px] overflow-x-auto custom-scrollbar"
style={{
maxHeight: 'calc(100vh - 300px)',
overflowY: 'auto'
}}
>
<table ref={tableRef} className="w-full border-collapse min-w-[200px] sm:min-w-[640px]">
<thead>
<tr className="capitalize font-normal text-sm border-b border-[#170F2E] sticky top-0 bg-main-bg bg-no-repeat">
<th className="text-left pb-3 pr-4 sm:pr-4">from</th>
<th className="text-left pb-3 pr-2 sm:pr-4">to</th>
<th className="text-left pb-3 pr-2 sm:pr-4">percentage</th>
<th className="text-left pb-3">autoSwapper</th>
</tr>
</thead>
<tbody>
{history.map((data, index) => (
<tr key={index} className="border-b border-[#170F2E] last:border-b-0 text-sm sm:text-base">
<td className="py-3 sm:py-5 pr-4">
<div className="flex items-center gap-[8px] sm:gap-[12px]">
<span className="text-dark-blue text-xs sm:text-sm">{index + 1}</span>
<div className="flex gap-1 sm:gap-2 items-center">
<div className="relative w-8 sm:w-10 h-5 sm:h-6">
<Image src={data.from.fromImage} alt="coin from" className="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 z-10" />
<Image src={data.from.toImage} alt="coin to" className="absolute left-3 sm:left-4 w-5 h-5 sm:w-6 sm:h-6" />
</div>
<div className="capitalize text-main-white">
<h2 className="text-base">{data.from.coinFrom}</h2>
<h3 className="text-dark-blue text-sm">{data.from.coinTo}</h3>
<p className="text-sm sm:text-base">{data.from.coinFrom}</p>
<p className="text-dark-blue text-xs sm:text-sm">{data.from.coinTo}</p>
</div>
</div>
</div>
</div>
<div className="uppercase text-main-white place-self-start ml-12">
<h2 className="text-base">{data.to.coinFromAmount} {data.to.coinFrom}</h2>
<h3 className="text-dark-blue text-sm">{data.to.coinToAmount} {data.to.coinTo}</h3>
</td>
<td className="py-3 sm:py-5 pr-2 sm:pr-4">
<div className="uppercase text-main-white">
<p className="text-sm sm:text-base">{data.to.coinFromAmount} {data.to.coinFrom}</p>
<p className="text-dark-blue text-xs sm:text-sm">{data.to.coinToAmount} {data.to.coinTo}</p>
</div>
<div className="bg-[#100827] rounded-2xl w-fit h-fit place-self-center px-4 py-1">{data.percentage}%</div>
<div className="uppercase text-main-white place-self-end">
<h2 className="text-base">{data.date.day}</h2>
<h3 className="text-dark-blue text-sm">{data.date.time}</h3>
</td>
<td className="py-3 sm:py-5 pr-2 sm:pr-4">
<div className="bg-[#100827] rounded-2xl w-fit px-2 sm:px-4 py-1 text-xs sm:text-sm">{data.percentage}%</div>
</td>
<td className="py-3 sm:py-5">
<div className="uppercase text-main-white">
<p className="text-sm sm:text-base">{data.date.day}</p>
<p className="text-dark-blue text-xs sm:text-sm">{data.date.time}</p>
</div>
</div>)
})}
</div>

{/* mobile */}
<div className="sm:hidden leading-[19.07px] max-h-[400px] overflow-auto w-full px-10">
<div className="capitalize text-main-white flex justify-between border-b border-[#433B5A] pb-3">
<h2>token</h2>
<h2>amount</h2>
</div>
<div className="capitalize text-main-white flex flex-col justify-between">
{history.map((data, index)=>{
return(<div className="py-5 flex justify-between w-full" key={index}>

<div className="flex items-center gap-[12px]">
<h1 className="text-dark-blue">{index+1}</h1>
<div className="flex gap-10 items-center">
<div className="flex relative">
<Image src={data.from.fromImage} alt="coin from" className="w-6 h-6" />
<Image src={data.from.toImage} alt="coin to" className="absolute left-5"/>
</div>
<div className="capitalize text-main-white">
<h2 className="text-sm">{data.from.coinFrom}</h2>
<h3 className="text-dark-blue text-xs">{data.from.coinTo}</h3>
</div>
</div>
</div>
<div className="uppercase text-main-white text-start">
<h2 className="font-normal text-sm">{data.to.coinFromAmount} {data.to.coinFrom}</h2>
<h3 className="text-dark-blue font-semibold text-xs">{data.to.coinToAmount} {data.to.coinTo}</h3>
</div>
</div>
)})}
</div>
</div>
</section>
<div className="hidden md:block w-full h-[50px] bg-main-bg bg-cover bottom-0 transform rotate-180" />
</>

)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
</>
);
}
Loading

0 comments on commit 33cba27

Please sign in to comment.