Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@pavlovdog
pavlovdog committed Nov 15, 2024
1 parent 9ba52ea commit 2953c48
Show file tree
Hide file tree
Showing 9 changed files with 305 additions and 239 deletions.
6 changes: 3 additions & 3 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"extends": ["next/core-web-vitals", "next/typescript"]
}
// {
// "extends": ["next/core-web-vitals", "next/typescript"]
// }
103 changes: 56 additions & 47 deletions src/app/add-stake/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { clipDecimals, ETH } from "@/utils";
import { MagicSpend } from "@/utils/magic-spend";
import config from "@/utils/wagmi-config";
import { useEffect, useState } from "react";
import { Chain, createPublicClient, formatEther, http, parseEther } from "viem";
import { Chain, formatEther, parseEther } from "viem";
import { useAccount, useBalance, useChainId, useSwitchChain } from "wagmi";
import { useWriteContract } from "wagmi";

Expand All @@ -22,8 +22,8 @@ export default function AddStake() {
address,
});

const { chains, switchChain } = useSwitchChain()
const chainId = useChainId()
const { switchChain } = useSwitchChain();
const chainId = useChainId();

const magicSpend = new MagicSpend(config);

Expand All @@ -32,8 +32,8 @@ export default function AddStake() {
});

useEffect(() => {
setIsMounted(true);
}, []);
setIsMounted(true);
}, []);

const write = async () =>
writeContract({
Expand All @@ -51,13 +51,13 @@ export default function AddStake() {
};

const handleStake = async () => {
try {
setIsLoading(true)
await write()
try {
setIsLoading(true);
await write();
} catch (error) {
console.error('Error staking:', error)
console.error("Error staking:", error);
} finally {
setIsLoading(false)
setIsLoading(false);
}
};

Expand All @@ -72,7 +72,6 @@ export default function AddStake() {

try {
const balances = await magicSpend.getBalances(address);

setChainTokenBalances(balances);
} catch (error) {
console.error("Error loading balances:", error);
Expand Down Expand Up @@ -100,26 +99,36 @@ export default function AddStake() {
return (
<div className="flex gap-8 p-4 max-w-7xl mx-auto">
<div className="flex-1">
<div className="mb-6">
<h2 className="text-xl font-bold mb-2">Total Unstaked Balance</h2>
<BalanceCard balance={{ chain: "Total", token: "ETH", balance: totalBalance }} />
</div>
{isLoadingBalances ? (
<div className="flex items-center justify-center h-full">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div>
</div>
) : (
<>
<div className="mb-6">
<h2 className="text-xl font-bold mb-2">Total Unstaked Balance</h2>
<BalanceCard
balance={{ chain: "Total", token: "ETH", balance: totalBalance }}
/>
</div>

<h2 className="text-xl font-bold mb-4">Available Unstaked Balances</h2>
<div className="grid grid-cols-3 gap-4">
{chainTokenBalances.map((item, index) => (
<div
key={index}
className="p-4 border rounded-lg hover:shadow-lg transition-shadow cursor-pointer"
onClick={() => handleBalanceClick(item.chain, item.balance)}
>
<div className="font-medium text-gray-600">{item.chain}</div>
<div className="text-lg font-bold">
{clipDecimals(formatEther(item.balance))} {item.token}
</div>
<h2 className="text-xl font-bold mb-4">Available Unstaked Balances</h2>
<div className="grid grid-cols-3 gap-4">
{chainTokenBalances.map((item, index) => (
<div
key={index}
className="p-4 border rounded-lg hover:shadow-lg transition-shadow cursor-pointer"
onClick={() => handleBalanceClick(item.chain, item.balance)}
>
<div className="font-medium text-gray-600">{item.chain}</div>
<div className="text-lg font-bold">
{clipDecimals(formatEther(item.balance))} {item.token}
</div>
</div>
))}
</div>
))}
</div>
</>
)}
</div>

<div className="flex-1 max-w-lg">
Expand Down Expand Up @@ -159,7 +168,7 @@ export default function AddStake() {
type="number"
value={amount}
onChange={(e) => {
setAmount(e.target.value)
setAmount(e.target.value);
}}
placeholder="0.0"
className="flex-1 p-2 border rounded"
Expand All @@ -174,23 +183,23 @@ export default function AddStake() {
</div>

{isMounted && chainId === selectedChain.id ? (
<>
<button
onClick={handleStake}
disabled={!write || isLoading || amount === "0"}
className="w-full py-2 bg-purple-500 text-white rounded disabled:opacity-50"
>
{isLoading ? "Staking..." : "Stake"}
</button>

{parseFloat(amount) >= 0.1 && (
<div className="p-4 mt-2 bg-yellow-100 rounded-lg">
<span className="text-m font-bold text-yellow-700">
You are about to stake more than 0.1 ETH, be careful!
</span>
</div>
)}
</>
<>
<button
onClick={handleStake}
disabled={!write || isLoading || amount === "0"}
className="w-full py-2 bg-purple-500 text-white rounded disabled:opacity-50"
>
{isLoading ? "Staking..." : "Stake"}
</button>

{parseFloat(amount) >= 0.1 && (
<div className="p-4 mt-2 bg-yellow-100 rounded-lg">
<span className="text-m font-bold text-yellow-700">
You are about to stake more than 0.1 ETH, be careful!
</span>
</div>
)}
</>
) : (
<button
onClick={() => switchChain({ chainId: selectedChain.id })}
Expand Down
62 changes: 47 additions & 15 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,20 @@ import { useAccount, useBalance } from "wagmi";
import Link from "next/link";
import { formatEther } from "viem";
import { clipDecimals, getChain } from "@/utils";
import { MagicSpend, MagicSpendBalance, PimlicoMagicSpendStake } from "@/utils/magic-spend";
import {
MagicSpend,
MagicSpendBalance,
PimlicoMagicSpendStake,
} from "@/utils/magic-spend";
import config from "@/utils/wagmi-config";
import BalanceCard from "@/components/balance-card";

export default function Home() {
const [isMounted, setIsMounted] = useState(false);
const { address } = useAccount();
const magicSpend = new MagicSpend(config);
const [balances, setBalances] = useState<MagicSpendBalance[]>([]);
const [stakes, setStakes] = useState<PimlicoMagicSpendStake[]>([]);
const [isLoadingStakes, setIsLoadingStakes] = useState(true);

useEffect(() => {
setIsMounted(true);
Expand All @@ -23,25 +27,46 @@ export default function Home() {
useEffect(() => {
if (!address) return;

magicSpend.getBalances(address).then(setBalances);
magicSpend.getStakes(address).then(setStakes);
const loadStakes = async () => {
try {
const stakesData = await magicSpend.getStakes(address);
setStakes(stakesData);
} catch (error) {
console.error("Error loading stakes:", error);
} finally {
setIsLoadingStakes(false);
}
};

loadStakes();
}, [address]);

const balance = stakes.reduce((acc, curr) => acc + curr.amount, BigInt(0));

console.log(stakes);
if (isLoadingStakes) {
return (
<div className="flex items-center justify-center h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div>
</div>
);
}

return (
<div className="p-8 max-w-7xl mx-auto">
<div className="mb-8">
<div className="flex items-center gap-4 mb-4">
<h2 className="text-2xl font-bold">Your Balance</h2>
<Link href="/transfer" className="text-purple-600 hover:text-purple-800">
<Link
href="/transfer"
className="text-purple-600 hover:text-purple-800"
>
Transfer Tokens
</Link>
</div>
<p className="text-gray-600 mb-4">
This is your total Magic Spend token balance, available across all connected chains.
These tokens can be used instantly on any supported network, giving you seamless cross-chain liquidity.
This is your total Magic Spend token balance, available across all
connected chains. These tokens can be used instantly on any supported
network, giving you seamless cross-chain liquidity.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<BalanceCard balance={{ token: "ETH", balance }} primary={true} />
Expand All @@ -51,20 +76,27 @@ export default function Home() {
<div className="mb-8">
<div className="flex items-center gap-4 mb-4">
<h3 className="text-2xl font-bold">Staking Overview</h3>
<Link href="/add-stake" className="text-purple-600 hover:text-purple-800">
<Link
href="/add-stake"
className="text-purple-600 hover:text-purple-800"
>
Add Stake
</Link>
</div>
<p className="text-gray-600 mb-4">
Below are your individual stakes across different chains. The sum of these stakes determines your total balance shown above.
Below are your individual stakes across different chains. The sum of
these stakes determines your total balance shown above.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{stakes.map((stake) => (
<BalanceCard key={stake.chainId} balance={{
chain: getChain(stake.chainId).name,
token: 'ETH',
balance: stake.amount,
}} />
<BalanceCard
key={stake.chainId}
balance={{
chain: getChain(stake.chainId).name,
token: "ETH",
balance: stake.amount,
}}
/>
))}
</div>
</div>
Expand Down
Loading

0 comments on commit 2953c48

Please sign in to comment.