-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* StakableBar setup * added checkered-blue color to css * put balances into a hook, fixed StakableBar * removed comment * removed unused variable * refactored useTokenBalances hook * refactored variables from hooks * fixed naminig of astBalance --------- Co-authored-by: greypixel <[email protected]>
- Loading branch information
1 parent
1cf449e
commit 9c93137
Showing
10 changed files
with
225 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { FC } from "react"; | ||
| import { calculateTokenProportions } from "../utils/calculateTokenProportions"; | ||
| import { twJoin } from "tailwind-merge"; | ||
| import { BsCircleFill } from "react-icons/bs"; | ||
| import "../../../index.css"; | ||
| import { useTokenBalances } from "../../../hooks/useTokenBalances"; | ||
|
|
||
| interface StakableBarProps { | ||
| mode: "stake" | "unstake"; | ||
| } | ||
|
|
||
| /** | ||
| * | ||
| * @param unstakable - balance of sAST available to unstake | ||
| * @param staked - total amount of SAST | ||
| * @param stakable - amount of available AST | ||
| * @returns | ||
| */ | ||
| export const StakableBar: FC<StakableBarProps> = ({ mode }) => { | ||
| const { | ||
| ustakableSAstBalanceFormatted: unstakable, | ||
| sAstBalanceFormatted: staked, | ||
| astBalanceFormatted: stakable, | ||
| } = useTokenBalances(); | ||
|
|
||
| const { unstakablePercent, stakedPercent, stakablePercent } = | ||
| calculateTokenProportions({ | ||
| unstakable: +unstakable, | ||
| staked: +staked, | ||
| stakable: +stakable, | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="flex w-full flex-col space-y-3"> | ||
| {mode === "stake" && ( | ||
| <> | ||
| <div className="m-auto mt-6 flex h-3 w-full flex-row rounded-full"> | ||
| <div | ||
| style={{ flexBasis: `${unstakablePercent}%` }} | ||
| className="checkered-blue rounded-l-full" | ||
| ></div> | ||
| <div | ||
| style={{ flexBasis: `${stakedPercent}%` }} | ||
| className="bg-accent-blue" | ||
| ></div> | ||
| <div | ||
| style={{ flexBasis: `${stakablePercent}%` }} | ||
| className="rounded-r-full bg-accent-gray" | ||
| ></div> | ||
| </div> | ||
| <div className="flex flex-row items-center"> | ||
| <div className="checkered-blue rounded-full"> | ||
| <BsCircleFill className="text-transparent" /> | ||
| </div> | ||
| <span className="mx-2">{unstakable}</span> | ||
| unstakable | ||
| </div> | ||
| <div className="flex flex-row items-center"> | ||
| <BsCircleFill className="text-blue-500" /> | ||
| <span className="mx-2">{staked}</span>staked | ||
| </div> | ||
| <div className="flex flex-row items-center"> | ||
| <BsCircleFill className="text-accent-gray" /> | ||
| <span className="mx-2">{stakable}</span>stakable | ||
| </div> | ||
| </> | ||
| )} | ||
| {mode === "unstake" && ( | ||
| <> | ||
| <div className="m-auto mt-6 flex h-3 w-[100%] flex-row rounded-full"> | ||
| <div | ||
| className={twJoin(["w-full rounded-full bg-accent-gray"])} | ||
| // style={{ flexBasis: `${stakablePercent}%` }} | ||
| ></div> | ||
| </div> | ||
| <div className="flex flex-row items-center"> | ||
| <BsCircleFill className="text-accent-gray" /> | ||
| <span className="mx-2">{stakable}</span>stakable | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| type PercentObject = { | ||
| unstakablePercent: number; | ||
| stakedPercent: number; | ||
| stakablePercent: number; | ||
| }; | ||
|
|
||
| export const calculateTokenProportions = ({ | ||
| unstakable, | ||
| staked, | ||
| stakable, | ||
| }: { | ||
| unstakable: number; | ||
| staked: number; | ||
| stakable: number; | ||
| }): PercentObject => { | ||
| const totalBalance = unstakable + staked + stakable; | ||
|
|
||
| return { | ||
| unstakablePercent: (unstakable / totalBalance) * 100, | ||
| stakedPercent: (staked / totalBalance) * 100, | ||
| stakablePercent: (stakable / totalBalance) * 100, | ||
| }; | ||
| }; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { useAccount, useContractReads } from "wagmi"; | ||
| import { useContractAddresses } from "../config/hooks/useContractAddress"; | ||
| import { ContractTypes } from "../config/ContractAddresses"; | ||
| import { stakingAbi } from "../contracts/stakingAbi"; | ||
| import { astAbi } from "../contracts/astAbi"; | ||
| import { format } from "@greypixel_/nicenumbers"; | ||
|
|
||
| export const useTokenBalances = () => { | ||
| const { address, isConnected } = useAccount(); | ||
| const [sAstAddress] = useContractAddresses([ContractTypes.AirSwapStaking], { | ||
| defaultChainId: 1, | ||
| useDefaultAsFallback: true, | ||
| }); | ||
|
|
||
| const [AirSwapToken] = useContractAddresses([ContractTypes.AirSwapToken], { | ||
| defaultChainId: 1, | ||
| useDefaultAsFallback: true, | ||
| }); | ||
| const airSwapTokenContract = { | ||
| address: AirSwapToken.address, | ||
| chain: AirSwapToken.chainId, | ||
| abi: astAbi, | ||
| }; | ||
|
|
||
| const airSwapStakingContract = { | ||
| address: sAstAddress.address, | ||
| chain: sAstAddress.chainId, | ||
| abi: stakingAbi, | ||
| }; | ||
|
|
||
| const { data } = useContractReads({ | ||
| contracts: [ | ||
| { | ||
| ...airSwapStakingContract, | ||
| functionName: "available", | ||
| args: [address as `0x${string}`], | ||
| }, | ||
| { | ||
| ...airSwapStakingContract, | ||
| functionName: "balanceOf", | ||
| args: [address as `0x${string}`], | ||
| }, | ||
| { | ||
| ...airSwapTokenContract, | ||
| functionName: "balanceOf", | ||
| args: [address as `0x${string}`], | ||
| }, | ||
| ], | ||
| enabled: !!isConnected, | ||
| }); | ||
|
|
||
| const unstakableSAstBalanceRaw = (data && data[0].result) || 0; | ||
| const sAstBalanceRaw = (data && data[1].result) || 0; | ||
| const astBalanceRaw = (data && data[2].result) || 0; | ||
|
|
||
| const ustakableSAstBalanceFormatted = | ||
| format((data && data[0].result) || 0, { tokenDecimals: 4 }) || 0; | ||
| const sAstBalanceFormatted = | ||
| format(data && data[1].result, { tokenDecimals: 4 }) || 0; | ||
|
|
||
| const astBalanceFormatted = | ||
| format(data && data[2].result, { tokenDecimals: 4 }) || 0; | ||
|
|
||
| return { | ||
| unstakableSAstBalanceRaw, | ||
| ustakableSAstBalanceFormatted, | ||
| sAstBalanceRaw, | ||
| sAstBalanceFormatted, | ||
| astBalanceRaw, | ||
| astBalanceFormatted, | ||
| }; | ||
| }; |
Oops, something went wrong.