Skip to content

Commit

Permalink
Merge branch 'feat/home-page' of github.com:DimensionDev/stake.mask.i…
Browse files Browse the repository at this point in the history 
…o into feat/home-page
  • Loading branch information
@beyond009
beyond009 committed May 5, 2024
2 parents 3f8b387 + 3b715a9 commit 8f399e8
Show file tree
Hide file tree
Showing 15 changed files with 481 additions and 211 deletions.
139 changes: 138 additions & 1 deletion src/abis/reward.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,138 @@
export const rewardABI = [{"type":"constructor","inputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"claim","inputs":[{"name":"_poolId","type":"uint8","internalType":"uint8"},{"name":"_amount","type":"uint256","internalType":"uint256"},{"name":"_proof","type":"bytes32[]","internalType":"bytes32[]"}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"createRewardPool","inputs":[{"name":"_rewardPool","type":"tuple","internalType":"struct Reward.RewardPool","components":[{"name":"unlocked","type":"bool","internalType":"bool"},{"name":"rewardToken","type":"address","internalType":"address"},{"name":"whitelistRoot","type":"bytes32","internalType":"bytes32"}]}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"emergencyWithdraw","inputs":[{"name":"_token","type":"address","internalType":"address"},{"name":"_amount","type":"uint256","internalType":"uint256"}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"owner","inputs":[],"outputs":[{"name":"","type":"address","internalType":"address"}],"stateMutability":"view"},{"type":"function","name":"renounceOwnership","inputs":[],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"rewardPools","inputs":[{"name":"","type":"uint256","internalType":"uint256"}],"outputs":[{"name":"unlocked","type":"bool","internalType":"bool"},{"name":"rewardToken","type":"address","internalType":"address"},{"name":"whitelistRoot","type":"bytes32","internalType":"bytes32"}],"stateMutability":"view"},{"type":"function","name":"transferOwnership","inputs":[{"name":"newOwner","type":"address","internalType":"address"}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"updateRewardPool","inputs":[{"name":"_poolId","type":"uint8","internalType":"uint8"},{"name":"_pool","type":"tuple","internalType":"struct Reward.RewardPool","components":[{"name":"unlocked","type":"bool","internalType":"bool"},{"name":"rewardToken","type":"address","internalType":"address"},{"name":"whitelistRoot","type":"bytes32","internalType":"bytes32"}]}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"userRewards","inputs":[{"name":"","type":"uint8","internalType":"uint8"},{"name":"","type":"address","internalType":"address"}],"outputs":[{"name":"","type":"uint256","internalType":"uint256"}],"stateMutability":"view"},{"type":"event","name":"OwnershipTransferred","inputs":[{"name":"previousOwner","type":"address","indexed":true,"internalType":"address"},{"name":"newOwner","type":"address","indexed":true,"internalType":"address"}],"anonymous":false},{"type":"event","name":"RewardClaimed","inputs":[{"name":"poolId","type":"uint8","indexed":true,"internalType":"uint8"},{"name":"account","type":"address","indexed":true,"internalType":"address"},{"name":"amount","type":"uint256","indexed":false,"internalType":"uint256"}],"anonymous":false},{"type":"event","name":"RewardPoolCreated","inputs":[{"name":"poolId","type":"uint8","indexed":true,"internalType":"uint8"},{"name":"unlocked","type":"bool","indexed":false,"internalType":"bool"},{"name":"rewardToken","type":"address","indexed":false,"internalType":"address"},{"name":"whitelistRoot","type":"bytes32","indexed":false,"internalType":"bytes32"}],"anonymous":false},{"type":"event","name":"RewardPoolUpdated","inputs":[{"name":"poolId","type":"uint8","indexed":true,"internalType":"uint8"},{"name":"unlocked","type":"bool","indexed":false,"internalType":"bool"},{"name":"rewardToken","type":"address","indexed":false,"internalType":"address"},{"name":"whitelistRoot","type":"bytes32","indexed":false,"internalType":"bytes32"}],"anonymous":false}] as const
export const rewardABI = [
{ type: 'constructor', inputs: [], stateMutability: 'nonpayable' },
{
type: 'function',
name: 'claim',
inputs: [
{ name: '_poolId', type: 'uint8', internalType: 'uint8' },
{ name: '_amount', type: 'uint256', internalType: 'uint256' },
{ name: '_proof', type: 'bytes32[]', internalType: 'bytes32[]' },
],
outputs: [],
stateMutability: 'nonpayable',
},
{
type: 'function',
name: 'createRewardPool',
inputs: [
{
name: '_rewardPool',
type: 'tuple',
internalType: 'struct Reward.RewardPool',
components: [
{ name: 'unlocked', type: 'bool', internalType: 'bool' },
{ name: 'rewardToken', type: 'address', internalType: 'address' },
{ name: 'whitelistRoot', type: 'bytes32', internalType: 'bytes32' },
],
},
],
outputs: [],
stateMutability: 'nonpayable',
},
{
type: 'function',
name: 'emergencyWithdraw',
inputs: [
{ name: '_token', type: 'address', internalType: 'address' },
{ name: '_amount', type: 'uint256', internalType: 'uint256' },
],
outputs: [],
stateMutability: 'nonpayable',
},
{
type: 'function',
name: 'owner',
inputs: [],
outputs: [{ name: '', type: 'address', internalType: 'address' }],
stateMutability: 'view',
},
{ type: 'function', name: 'renounceOwnership', inputs: [], outputs: [], stateMutability: 'nonpayable' },
{
type: 'function',
name: 'rewardPools',
inputs: [{ name: '', type: 'uint256', internalType: 'uint256' }],
outputs: [
{ name: 'unlocked', type: 'bool', internalType: 'bool' },
{ name: 'rewardToken', type: 'address', internalType: 'address' },
{ name: 'whitelistRoot', type: 'bytes32', internalType: 'bytes32' },
],
stateMutability: 'view',
},
{
type: 'function',
name: 'transferOwnership',
inputs: [{ name: 'newOwner', type: 'address', internalType: 'address' }],
outputs: [],
stateMutability: 'nonpayable',
},
{
type: 'function',
name: 'updateRewardPool',
inputs: [
{ name: '_poolId', type: 'uint8', internalType: 'uint8' },
{
name: '_pool',
type: 'tuple',
internalType: 'struct Reward.RewardPool',
components: [
{ name: 'unlocked', type: 'bool', internalType: 'bool' },
{ name: 'rewardToken', type: 'address', internalType: 'address' },
{ name: 'whitelistRoot', type: 'bytes32', internalType: 'bytes32' },
],
},
],
outputs: [],
stateMutability: 'nonpayable',
},
{
type: 'function',
name: 'userRewards',
inputs: [
{ name: '', type: 'uint8', internalType: 'uint8' },
{ name: '', type: 'address', internalType: 'address' },
],
outputs: [{ name: '', type: 'uint256', internalType: 'uint256' }],
stateMutability: 'view',
},
{
type: 'event',
name: 'OwnershipTransferred',
inputs: [
{ name: 'previousOwner', type: 'address', indexed: true, internalType: 'address' },
{ name: 'newOwner', type: 'address', indexed: true, internalType: 'address' },
],
anonymous: false,
},
{
type: 'event',
name: 'RewardClaimed',
inputs: [
{ name: 'poolId', type: 'uint8', indexed: true, internalType: 'uint8' },
{ name: 'account', type: 'address', indexed: true, internalType: 'address' },
{ name: 'amount', type: 'uint256', indexed: false, internalType: 'uint256' },
],
anonymous: false,
},
{
type: 'event',
name: 'RewardPoolCreated',
inputs: [
{ name: 'poolId', type: 'uint8', indexed: true, internalType: 'uint8' },
{ name: 'unlocked', type: 'bool', indexed: false, internalType: 'bool' },
{ name: 'rewardToken', type: 'address', indexed: false, internalType: 'address' },
{ name: 'whitelistRoot', type: 'bytes32', indexed: false, internalType: 'bytes32' },
],
anonymous: false,
},
{
type: 'event',
name: 'RewardPoolUpdated',
inputs: [
{ name: 'poolId', type: 'uint8', indexed: true, internalType: 'uint8' },
{ name: 'unlocked', type: 'bool', indexed: false, internalType: 'bool' },
{ name: 'rewardToken', type: 'address', indexed: false, internalType: 'address' },
{ name: 'whitelistRoot', type: 'bytes32', indexed: false, internalType: 'bytes32' },
],
anonymous: false,
},
] as const;
4 changes: 2 additions & 2 deletions src/app/stake/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
'use client'
'use client';

import { useState } from 'react';
import { useAccount } from 'wagmi';
Expand All @@ -14,7 +14,7 @@ export default function Stake() {
const [isOpen, setIsOpen] = useState(false);
const { address } = useAccount();
return (
<div className="flex h-full flex-col items-center bg-black px-[24px] w-full lg:max-w-[1200px] lg:p-0">
<div className="flex h-full w-full flex-col items-center bg-black px-[24px] lg:max-w-[1200px] lg:p-0">
<div
className="absolute flex h-[520px] w-full flex-col justify-end lg:pb-[120px]"
style={{
Expand Down
69 changes: 41 additions & 28 deletions src/components/EstimatedRewards/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
'use client'
'use client';

import { useQuery } from '@tanstack/react-query'
import { useAccount } from 'wagmi'
Expand All @@ -12,39 +12,52 @@ import { Image } from '@/esm/Image.js'
import { stakeAPI } from '@/providers/StakeAPI.js'

interface EstimatedRewardsProps {
rewardToken: string
rewardToken: string;
}

export function EstimatedRewards({ rewardToken }: EstimatedRewardsProps) {
const { address } = useAccount()
const { address } = useAccount();
const { data, isLoading, isError } = useQuery({
queryKey: ["profile", address],
queryFn: async () => { const { data } = await stakeAPI.getUserInfo(address as string, "1"); return data },
})
queryKey: ['profile', address],
queryFn: async () => {
const { data } = await stakeAPI.getUserInfo(address as string, '1');
return data;
},
});

const rewardPool = data?.reward_pool?.find((pool: any) => pool.name === rewardToken)
const rewardPool = data?.reward_pool?.find((pool: any) => pool.name === rewardToken);

return <div className="flex flex-col border-[1px] border-neutrals6 h-[196px] rounded-[16px] p-[16px] relative">
<Image src="/glow.png" width={360} height={230} alt='right' className='absolute top-[-30px] left-[-35px] z-50' />
<div className='text-white text-[20px] font-bold'>Estimated Rewards</div>
<div className='flex gap-[12px] mt-[12px] mb-[13px] items-center w-full justify-center'>
{
rewardToken === 'rss3' ? <RSS3 width={48} height={48} /> : <TON width={48} height={48} />
}
<div className='flex flex-col'>
<div className='text-neutrals1 text-[24px] w-full'>{Number(rewardPool?.amount).toFixed(2) || 0}</div>
<div className='text-neutrals1 text-[16px] w-full'>{rewardToken === 'rss3' ? "RSS3" : "TON"}</div>
return (
<div className="relative flex h-[196px] flex-col rounded-[16px] border-[1px] border-neutrals6 p-[16px]">
<Image
src="/glow.png"
width={360}
height={230}
alt="right"
className="absolute left-[-35px] top-[-30px] z-50"
/>
<div className="text-[20px] font-bold text-white">Estimated Rewards</div>
<div className="mb-[13px] mt-[12px] flex w-full items-center justify-center gap-[12px]">
{rewardToken === 'rss3' ? <RSS3 width={48} height={48} /> : <TON width={48} height={48} />}
<div className="flex flex-col">
<div className="w-full text-[24px] text-neutrals1">
{Number(rewardPool?.amount).toFixed(2) || 0}
</div>
<div className="w-full text-[16px] text-neutrals1">{rewardToken === 'rss3' ? 'RSS3' : 'TON'}</div>
</div>
</div>
<MainButton
onClick={() => {
if (!rewardPool) return;
writeContract({
...REWARD_CONTRACT,
functionName: 'claim',
args: [rewardPool.reward_pool_id, BigInt(rewardPool.big_amount), [rewardPool.proof]],
});
}}
>
Claim
</MainButton>
</div>
<MainButton onClick={() => {
if (!rewardPool) return
writeContract({
...REWARD_CONTRACT,
functionName: 'claim',
args: [rewardPool.reward_pool_id, BigInt(rewardPool.big_amount), [rewardPool.proof]],
})
}} >
Claim
</MainButton>
</div>
);
}
9 changes: 6 additions & 3 deletions src/components/Header/ConnectWalletButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function ConnectWalletButton({ small = false }: ConnectWalletButtonProps)
return (
<button
ref={anchorRef}
className={`flex items-center gap-[4px] rounded-[99px] justify-center p-[2px] pr-[6px] text-center text-[14px] font-normal leading-[22px] text-neutrals9 ${small ? 'w-[124px] h-[32px] pr-0' : ''}`}
className={`flex items-center justify-center gap-[4px] rounded-[99px] p-[2px] pr-[6px] text-center text-[14px] font-normal leading-[22px] text-neutrals9 ${small ? 'h-[32px] w-[124px] pr-0' : ''}`}
style={{ background: 'var(--line-purple)' }}
onClick={() => {
isConnected ? setOpen(!open) : openConnectModal?.();
Expand Down Expand Up @@ -63,8 +63,11 @@ export function ConnectWalletButton({ small = false }: ConnectWalletButtonProps)
{small ? null : (
<div className={`flex rounded-[99px] p-[8px]`}>
<Image src="/wallet.svg" alt="Wallet" width={20} height={20} />
</div>)}
<div className="text-[14px] font-bold text-neutrals9 text-center">{small ? "Connect Wallet" : "Connect your wallet"}</div>
</div>
)}
<div className="text-center text-[14px] font-bold text-neutrals9">
{small ? 'Connect Wallet' : 'Connect your wallet'}
</div>
</>
)}
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/ConnectXButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function ConnectXButton() {
<Account />
) : (
<button
className=" flex items-center gap-[4px] rounded-full justify-center px-[24px] py-[8px] text-center text-[14px] font-normal leading-[16px] w-[124px] text-neutrals9"
className=" flex w-[124px] items-center justify-center gap-[4px] rounded-full px-[24px] py-[8px] text-center text-[14px] font-normal leading-[16px] text-neutrals9"
style={{ background: 'var(--line-purple)' }}
onClick={() => {
signIn('twitter');
Expand Down
2 changes: 1 addition & 1 deletion src/components/MainButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function MainButton({ children, onClick, className, style }: MainButtonPr
return (
<button
className={
'flex items-center justify-center gap-[12px] z-50 rounded-full px-[16px] py-[12px] text-[14px] font-bold text-neutrals9 cursor-pointer ' +
'z-50 flex cursor-pointer items-center justify-center gap-[12px] rounded-full px-[16px] py-[12px] text-[14px] font-bold text-neutrals9 ' +
className
}
style={style || { background: 'var(--line-purple)' }}
Expand Down
67 changes: 42 additions & 25 deletions src/components/ProfileCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,48 @@ import { formatAddress } from '@/helpers/formatAddress.js';
import { stakeAPI } from '@/providers/StakeAPI.js';

export function ProfileCard() {
const { address } = useAccount();
const { data, isLoading, isError } = useQuery({
queryKey: ["profile", address],
queryFn: async () => { const { data } = await stakeAPI.getUserInfo(address as string, "1"); return data },
})
const { address } = useAccount();
const { data, isLoading, isError } = useQuery({
queryKey: ['profile', address],
queryFn: async () => {
const { data } = await stakeAPI.getUserInfo(address as string, '1');
return data;
},
});

return <div className="flex flex-col relative w-full mt-[10px]">
<div className="h-[50px]" />
<div className="absolute w-full h-[130px] z-10 top-[50px]" style={{ background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)' }} />
<div className="flex absolute gap-[12px] items-start">
<div className="flex items-center gap-[8px]">
<div className="rounded-[99px] border-[2px] border-white top-[10px] relative w-[64px] h-[64px]">
<Image src={data?.twitter_image ? data?.twitter_image : "/mask-network.svg"} alt="avatar" layout="fill" objectFit="cover" />
return (
<div className="relative mt-[10px] flex w-full flex-col">
<div className="h-[50px]" />
<div
className="absolute top-[50px] z-10 h-[130px] w-full"
style={{ background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)' }}
/>
<div className="absolute flex items-start gap-[12px]">
<div className="flex items-center gap-[8px]">
<div className="relative top-[10px] h-[64px] w-[64px] rounded-[99px] border-[2px] border-white">
<Image
src={data?.twitter_image ? data?.twitter_image : '/mask-network.svg'}
alt="avatar"
layout="fill"
objectFit="cover"
/>
</div>
<div className="-mt-[10px] text-[32px] font-bold leading-[40px] text-white">
{data?.twitter_display_name
? data.twitter_display_name
: address && formatAddress(address as string)}
</div>
</div>
</div>
<div
className="flex h-[130px] flex-col items-end justify-end rounded-[16px] p-[16px]"
style={{ background: 'var(--line-purple)' }}
>
<div className="z-50 flex flex-col">
<div className="text-end text-[32px] text-white">{data?.score}</div>
<div className="text-[16px] text-white/50">TOTAL POINTS</div>
</div>
</div>
</div>
<div className="text-white text-[32px] font-bold leading-[40px] -mt-[10px]">
{data?.twitter_display_name ? data.twitter_display_name : address && formatAddress(address as string)}
</div>
</div>
</div>
<div className="rounded-[16px] h-[130px] flex justify-end items-end p-[16px] flex-col" style={{ background: 'var(--line-purple)' }}>
<div className="flex flex-col z-50">
<div className="text-[32px] text-white text-end">{data?.score}</div>
<div className="text-white/50 text-[16px]">TOTAL POINTS</div>
</div>
</div>

</div>
);
}
Loading

0 comments on commit 8f399e8

Please sign in to comment.