Skip to content

Commit

Permalink
ui ka system
Browse files Browse the repository at this point in the history
  • Loading branch information
@Suja16
Suja16 committed Dec 7, 2024
1 parent e3c7ed2 commit beab4c7
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 126 deletions.
53 changes: 28 additions & 25 deletions packages/nextjs/app/leaderboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,21 @@ export default function Leaderboard() {
rank: index + 1,
address: stake.user,
totalStaked: formatEther(BigInt(stake.totalStaked)),
id: stake.id
id: stake.id,
}));

const totalStaked = leaderboardData.reduce((sum: number, entry: LeaderboardEntry) => sum + Number(entry.totalStaked), 0);
const totalStaked = leaderboardData.reduce(
(sum: number, entry: LeaderboardEntry) => sum + Number(entry.totalStaked),
0,
);

return (
<div className="flex flex-col h-screen">
{/* Hero Section */}
<div className="bg-dark-surface py-8">
<div className="max-w-2xl mx-auto text-center">
<h1 className="text-4xl font-bold mb-4 text-neon-green glow-text">Top Stakers</h1>
<p className="text-gray-300">
The highest stakers on our platform are showcased here
</p>
<p className="text-gray-300">The highest stakers on our platform are showcased here</p>
</div>
</div>

Expand All @@ -79,29 +80,35 @@ export default function Leaderboard() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: index * 0.05 }}
className={`p-4 rounded-lg ${
entry.rank === 1 ? 'bg-dark-surface border border-neon-green shadow-neon-glow' :
entry.rank === 2 ? 'bg-dark-surface border border-gray-500' :
entry.rank === 3 ? 'bg-dark-surface border border-orange-600' :
'bg-dark-surface'
entry.rank === 1
? "bg-dark-surface border border-neon-green shadow-neon-glow"
: entry.rank === 2
? "bg-dark-surface border border-gray-500"
: entry.rank === 3
? "bg-dark-surface border border-orange-600"
: "bg-dark-surface"
} hover:bg-medium-surface transition-all duration-200 transform hover:scale-[1.02]`}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
entry.rank === 1 ? 'bg-neon-green text-black' :
entry.rank === 2 ? 'bg-gray-500' :
entry.rank === 3 ? 'bg-orange-600' :
'bg-medium-surface'
}`}>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${
entry.rank === 1
? "bg-neon-green text-black"
: entry.rank === 2
? "bg-gray-500"
: entry.rank === 3
? "bg-orange-600"
: "bg-medium-surface"
}`}
>
<span className="font-bold">{entry.rank}</span>
</div>
<span className="text-gray-300 font-mono">
{entry.address.slice(0, 6)}...{entry.address.slice(-4)}
</span>
</div>
<span className={`font-bold ${
entry.rank === 1 ? 'text-neon-green' : 'text-gray-300'
}`}>
<span className={`font-bold ${entry.rank === 1 ? "text-neon-green" : "text-gray-300"}`}>
{Number(entry.totalStaked).toFixed(4)} ETH
</span>
</div>
Expand All @@ -115,19 +122,15 @@ export default function Leaderboard() {
<div className="bg-dark-surface py-6">
<div className="max-w-2xl mx-auto grid grid-cols-2 gap-4 text-center">
<div>
<h3 className="text-2xl font-bold text-neon-green glow-text">
{leaderboardData.length}
</h3>
<h3 className="text-2xl font-bold text-neon-green glow-text">{leaderboardData.length}</h3>
<p className="text-gray-300">Total Stakers</p>
</div>
<div>
<h3 className="text-2xl font-bold text-neon-green glow-text">
{totalStaked.toFixed(4)} ETH
</h3>
<h3 className="text-2xl font-bold text-neon-green glow-text">{totalStaked.toFixed(4)} ETH</h3>
<p className="text-gray-300">Total Value Staked</p>
</div>
</div>
</div>
</div>
);
}
}
2 changes: 1 addition & 1 deletion packages/nextjs/app/leaderboard/queries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ export const LEADERBOARD = gql`
id
}
}
`;
`;
4 changes: 2 additions & 2 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ const Home: NextPage = () => {
</h1>

<div className="flex justify-center my-4">
<StepComponent currentSteps={2000} totalSteps={6000} />
<StatsComponent steps={2259} minutes={23} calories={68} stepsGoal={6000} />
</div>

<div className="flex justify-center my-4">
<StatsComponent steps={2259} minutes={23} calories={68} stepsGoal={6000} />
<StepComponent currentSteps={2000} totalSteps={6000} />
</div>

<div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
Expand Down
179 changes: 90 additions & 89 deletions packages/nextjs/components/NewHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,106 +2,107 @@ import React, { useState } from "react";
import Image from "next/image";
import "./Header.css";
import blockies from "ethereum-blockies";
import { useAccount, useConnect, useChainId, useSwitchChain, useDisconnect } from "wagmi";
import { base, baseSepolia, mainnet, optimism, sepolia } from "viem/chains";
import { useAccount, useChainId, useConnect, useDisconnect, useSwitchChain } from "wagmi";
import { injected } from "wagmi/connectors";
import { sepolia, baseSepolia, mainnet, base, optimism } from "viem/chains";

export const NewHeader = () => {
const { isConnected, address } = useAccount();
const { connect } = useConnect();
const { switchChain } = useSwitchChain();
const currentChainId = useChainId();
const { disconnect } = useDisconnect();
const [isWalletMenuOpen, setIsWalletMenuOpen] = useState(false);
const { isConnected, address } = useAccount();
const { connect } = useConnect();
const { switchChain } = useSwitchChain();
const currentChainId = useChainId();
const { disconnect } = useDisconnect();
const [isWalletMenuOpen, setIsWalletMenuOpen] = useState(false);

const identicon = address ? blockies.create({ seed: address }).toDataURL() : "";
const identicon = address ? blockies.create({ seed: address }).toDataURL() : "";

const networks = [
{ id: sepolia.id, name: sepolia.name, icon: "🔵", config: sepolia },
{ id: baseSepolia.id, name: baseSepolia.name, icon: "🟣", config: baseSepolia },
{ id: mainnet.id, name: mainnet.name, icon: "🌐", config: mainnet },
{ id: base.id, name: base.name, icon: "🔷", config: base },
{ id: optimism.id, name: optimism.name, icon: "🔴", config: optimism }
];

const currentNetwork = networks.find(network => network.id === currentChainId) || networks[0];
const networks = [
{ id: sepolia.id, name: sepolia.name, icon: "🔵", config: sepolia },
{ id: baseSepolia.id, name: baseSepolia.name, icon: "🟣", config: baseSepolia },
{ id: mainnet.id, name: mainnet.name, icon: "🌐", config: mainnet },
{ id: base.id, name: base.name, icon: "🔷", config: base },
{ id: optimism.id, name: optimism.name, icon: "🔴", config: optimism },
];

const handleNetworkSwitch = async (chainId: number) => {
try {
await switchChain({ chainId });
} catch (err) {
console.error("Failed to switch network:", err);
}
};
const currentNetwork = networks.find(network => network.id === currentChainId) || networks[0];

return (
<div className="header-container p-3 flex justify-between items-center">
{/* Left side - Logo */}
<div className="flex items-center">
<span className="text-xl font-bold text-white">StakeFIT</span>
</div>
const handleNetworkSwitch = async (chainId: number) => {
try {
await switchChain({ chainId });
} catch (err) {
console.error("Failed to switch network:", err);
}
};

return (
<div className="header-container p-3 flex justify-between items-center">
{/* Left side - Logo */}
<div className="flex items-center">
<span className="text-xl font-bold text-white">StakeFIT</span>
</div>

{/* Right side - Wallet Connection with Network Selection */}
{!isConnected ? (
<button
className="connect-button bg-primary px-4 py-2 rounded-lg text-white hover:bg-primary-focus"
onClick={() => connect({ connector: injected() })}
>
Connect Wallet
</button>
) : (
<div className="relative">
<button
className="connected-status flex items-center gap-3 bg-base-200 px-4 py-2 rounded-lg hover:bg-base-300"
onClick={() => setIsWalletMenuOpen(!isWalletMenuOpen)}
>
<span className="flex items-center gap-2">
<span>{currentNetwork.icon}</span>
<span className="text-white text-sm">{currentNetwork.name}</span>
</span>
<Image src={identicon} alt="Profile" className="profile-pic rounded-full" width={24} height={24} />
<div className="overflow-hidden w-24 text-ellipsis text-white">{address}</div>
</button>

{/* Right side - Wallet Connection with Network Selection */}
{!isConnected ? (
{isWalletMenuOpen && (
<div
className="absolute right-0 mt-2 w-56 bg-base-200 rounded-lg shadow-xl z-50
"
>
{/* Network Selection */}
<div className="p-2 border-b border-base-300">
<div className="text-sm text-base-content mb-2 px-2">Switch Network</div>
{networks.map(network => (
<button
key={network.id}
className={`w-full px-4 py-2 text-left hover:bg-base-300 flex items-center gap-2 rounded-lg
${currentChainId === network.id ? "bg-base-300" : ""}`}
onClick={() => handleNetworkSwitch(network.id)}
>
<span>{network.icon}</span>
<span className="text-white">{network.name}</span>
</button>
))}
</div>

{/* Wallet Actions */}
<div className="p-2">
<button
className="connect-button bg-primary px-4 py-2 rounded-lg text-white hover:bg-primary-focus"
onClick={() => connect({ connector: injected() })}
className="w-full px-4 py-2 text-left hover:bg-base-300 text-white rounded-lg flex items-center gap-2"
onClick={() => {
disconnect();
setIsWalletMenuOpen(false);
}}
>
Connect Wallet
<span>🔌</span>
<span>Disconnect</span>
</button>
) : (
<div className="relative">
<button
className="connected-status flex items-center gap-3 bg-base-200 px-4 py-2 rounded-lg hover:bg-base-300"
onClick={() => setIsWalletMenuOpen(!isWalletMenuOpen)}
>
<span className="flex items-center gap-2">
<span>{currentNetwork.icon}</span>
<span className="text-white text-sm">{currentNetwork.name}</span>
</span>
<Image src={identicon} alt="Profile" className="profile-pic rounded-full" width={24} height={24} />
<div className="overflow-hidden w-24 text-ellipsis text-white">
{address}
</div>
</button>

{isWalletMenuOpen && (
<div className="absolute right-0 mt-2 w-56 bg-base-200 rounded-lg shadow-xl z-50">
{/* Network Selection */}
<div className="p-2 border-b border-base-300">
<div className="text-sm text-base-content mb-2 px-2">Switch Network</div>
{networks.map((network) => (
<button
key={network.id}
className={`w-full px-4 py-2 text-left hover:bg-base-300 flex items-center gap-2 rounded-lg
${currentChainId === network.id ? 'bg-base-300' : ''}`}
onClick={() => handleNetworkSwitch(network.id)}
>
<span>{network.icon}</span>
<span className="text-white">{network.name}</span>
</button>
))}
</div>

{/* Wallet Actions */}
<div className="p-2">
<button
className="w-full px-4 py-2 text-left hover:bg-base-300 text-white rounded-lg flex items-center gap-2"
onClick={() => {
disconnect();
setIsWalletMenuOpen(false);
}}
>
<span>🔌</span>
<span>Disconnect</span>
</button>
</div>
</div>
)}
</div>
)}
</div>
</div>
)}
</div>
);
)}
</div>
);
};

export default NewHeader;
export default NewHeader;
16 changes: 7 additions & 9 deletions packages/nextjs/components/StepComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,23 @@ interface StepComponentProps {

const StepComponent: FC<StepComponentProps> = ({ currentSteps, totalSteps }) => {
const percentage = Math.round((currentSteps / totalSteps) * 100);

return (
<div className="flex items-center justify-between w-full rounded-xl bg-[#2d2c2e] p-4">
<div className="flex flex-col">
<span className="text-[#fbf8fe] text-4xl font-bold">
{currentSteps.toLocaleString()}
</span>
<span className="text-[#fbf8fe] text-4xl font-bold">{currentSteps.toLocaleString()}</span>
<span className="text-[#a3a2a7] text-lg">/{totalSteps.toLocaleString()} steps</span>
</div>

<div className="relative flex items-center">
<div className="relative w-32 h-3 bg-[#000001] rounded-full overflow-hidden">
<div
<div
className="absolute top-0 left-0 h-full bg-[#11ce6f] rounded-full transition-all duration-300"
style={{ width: `${percentage}%` }}
/>
</div>
<div
className="absolute -top-8 transition-all duration-300"
<div
className="absolute -top-8 transition-all duration-300 pointer-events-none"
style={{ left: `${percentage}%` }}
>
<div className="relative bg-[#11ce6f] text-[#fbf8fe] text-xs px-2 py-1 rounded-md -translate-x-1/2">
Expand All @@ -38,4 +36,4 @@ const StepComponent: FC<StepComponentProps> = ({ currentSteps, totalSteps }) =>
);
};

export default StepComponent;
export default StepComponent;

0 comments on commit beab4c7

Please sign in to comment.