From c52ff56b1b279f322b2d4ec791693062c0eea289 Mon Sep 17 00:00:00 2001 From: GeorginaShall <123496642+GeorginaShall@users.noreply.github.com> Date: Wed, 8 Jan 2025 16:04:44 +0200 Subject: [PATCH] APT-1605 APT-1616 APT-1621 : Loading splash - add token to wallet - bg not working on some devices (#20) * APT-1605-APT-1616-APT-1621 * add-token-method --- public/static/stake-background.webp | Bin 0 -> 16696 bytes src/components/stakingPoolDetailsView.tsx | 267 ++++++++++++++-------- src/pages/_app.tsx | 48 +++- src/pages/_document.tsx | 2 +- tailwind.config.ts | 6 +- 5 files changed, 224 insertions(+), 99 deletions(-) create mode 100644 public/static/stake-background.webp diff --git a/public/static/stake-background.webp b/public/static/stake-background.webp new file mode 100644 index 0000000000000000000000000000000000000000..814eeaf635b61bfaae82d5a85577c8e519bc9c7e GIT binary patch literal 16696 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 void; } -const StakingPoolDetailsView: React.FC = ({ +const StakingPoolDetailsView: React.FC< + StakingPoolDetailsViewProps +> = ({ stakingPoolData, userStakingPoolData, userUnstakingPoolData, }) => { - - const { - zilAvailable, - } = WalletConnector.useContainer(); + const { zilAvailable } = WalletConnector.useContainer(); const [selectedPane, setSelectedPane] = useState('Stake'); const colorInfoEntry = (title: string, value: string | null) => (
-
- { value } -
-
- { title } -
+
{value}
+
{title}
- ) + ); - const greyInfoEntry = (title: string, value: string | JSX.Element | null) => ( + const greyInfoEntry = ( + title: string, + value: string | JSX.Element | null + ) => (
- { - value ? ( -
- { value } -
- ) : ( -
- ) - } -
- { title } + {value ? ( +
+ {value} +
+ ) : ( +
+ )} +
+ {title}
- ) - - const pendingUnstakesValue = userUnstakingPoolData?.filter( - (item) => item.availableAt > DateTime.now() - ).reduce( - (acc, item) => acc + item.zilAmount, - 0n ); - const availableToClaim = userUnstakingPoolData?.filter( - (item) => item.availableAt <= DateTime.now() - ).reduce( - (acc, item) => acc + item.zilAmount, - 0n + const pendingUnstakesValue = userUnstakingPoolData + ?.filter((item) => item.availableAt > DateTime.now()) + .reduce((acc, item) => acc + item.zilAmount, 0n); + + const availableToClaim = userUnstakingPoolData + ?.filter((item) => item.availableAt <= DateTime.now()) + .reduce((acc, item) => acc + item.zilAmount, 0n); + + const doesUserHoldAnyFundsInThisPool = !!( + userStakingPoolData?.stakingTokenAmount || + pendingUnstakesValue || + availableToClaim ); - const doesUserHoldAnyFundsInThisPool = !!(userStakingPoolData?.stakingTokenAmount || pendingUnstakesValue || availableToClaim); + const humanReadableStakingToken = (value: bigint) => + formatUnitsToHumanReadable( + value, + stakingPoolData.definition.tokenDecimals + ); - const humanReadableStakingToken = (value: bigint) => formatUnitsToHumanReadable(value, stakingPoolData.definition.tokenDecimals); + const { watchAsset } = useWatchAsset(); + + const handleClickAaddToken = () => + watchAsset( + { + type: 'ERC20', + options: { + address: stakingPoolData.definition.tokenAddress, + symbol: stakingPoolData.definition.tokenSymbol, + decimals: stakingPoolData.definition.tokenDecimals, + }, + }, + { + onSuccess: (data) => { + console.log('Asset watched successfully:', data); + }, + onError: (error) => { + console.error('Failed to watch the asset:', error); + }, + } + ); return ( -
- + {stakingPoolData.definition.name} - + {stakingPoolData.definition.tokenSymbol}
+
+ +
- {doesUserHoldAnyFundsInThisPool && -
- { colorInfoEntry("Available to stake", `${formatUnitsToHumanReadable(zilAvailable || 0n, 18)} ZIL`) } - { colorInfoEntry("Staked", `${humanReadableStakingToken(userStakingPoolData?.stakingTokenAmount || 0n)} ${stakingPoolData.definition.tokenSymbol}`) } - { colorInfoEntry("Unstake", pendingUnstakesValue ? `${humanReadableStakingToken(pendingUnstakesValue)} ${stakingPoolData.definition.tokenSymbol}`: "-" ) } - { colorInfoEntry("Available to claim", availableToClaim ? `${humanReadableStakingToken(availableToClaim)} ${stakingPoolData.definition.tokenSymbol}` : "-") } -
- } + {doesUserHoldAnyFundsInThisPool && ( +
+ {colorInfoEntry( + 'Available to stake', + `${formatUnitsToHumanReadable( + zilAvailable || 0n, + 18 + )} ZIL` + )} + {colorInfoEntry( + 'Staked', + `${humanReadableStakingToken( + userStakingPoolData?.stakingTokenAmount || 0n + )} ${stakingPoolData.definition.tokenSymbol}` + )} + {colorInfoEntry( + 'Unstake', + pendingUnstakesValue + ? `${humanReadableStakingToken( + pendingUnstakesValue + )} ${stakingPoolData.definition.tokenSymbol}` + : '-' + )} + {colorInfoEntry( + 'Available to claim', + availableToClaim + ? `${humanReadableStakingToken(availableToClaim)} ${ + stakingPoolData.definition.tokenSymbol + }` + : '-' + )} +
+ )}
- { greyInfoEntry("Voting power", stakingPoolData.data && formatPercentage(stakingPoolData.data.votingPower)) } - { greyInfoEntry("Total supply", stakingPoolData.data && `${humanReadableStakingToken(stakingPoolData.data.tvl)} ${stakingPoolData.definition.tokenSymbol}`) } - { greyInfoEntry("Commission", stakingPoolData.data && formatPercentage(stakingPoolData.data.commission)) } - { greyInfoEntry("", stakingPoolData.data && - ( + {greyInfoEntry( + 'Voting power', + stakingPoolData.data && + formatPercentage(stakingPoolData.data.votingPower) + )} + {greyInfoEntry( + 'Total supply', + stakingPoolData.data && + `${humanReadableStakingToken( + stakingPoolData.data.tvl + )} ${stakingPoolData.definition.tokenSymbol}` + )} + {greyInfoEntry( + 'Commission', + stakingPoolData.data && + formatPercentage(stakingPoolData.data.commission) + )} + {greyInfoEntry( + '', + stakingPoolData.data && ( <> 1 ZIL ~
- {stakingPoolData.data.zilToTokenRate.toPrecision(3)} {stakingPoolData.definition.tokenSymbol} + {stakingPoolData.data.zilToTokenRate.toPrecision( + 3 + )}{' '} + {stakingPoolData.definition.tokenSymbol} - )) } + ) + )}
- { - ['Stake', 'Unstake', 'Claim'].map((pane) => ( -
setSelectedPane(pane)} - > - {pane} -
- )) - } + {['Stake', 'Unstake', 'Claim'].map((pane) => ( +
setSelectedPane(pane)} + > + {pane} +
+ ))}
- { - selectedPane === 'Stake' ? ( - - ) : selectedPane === 'Unstake' ? ( - - ) : ( - - ) - } - + {selectedPane === 'Stake' ? ( + + ) : selectedPane === 'Unstake' ? ( + + ) : ( + + )}
- ) - -} + ); +}; -export default StakingPoolDetailsView; \ No newline at end of file +export default StakingPoolDetailsView; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a242c4d..2c207dd 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -18,6 +18,7 @@ import { AppConfigStorage } from "@/contexts/appConfigStorage"; export default function App({ Component, pageProps }: AppProps) { const queryClient = new QueryClient(); const [appConfig, setAppConfig] = useState(null); + const [loadingPercentage, setLoadingPercentage] = useState(0); useEffect(() => { fetch("/api/config") @@ -26,10 +27,51 @@ export default function App({ Component, pageProps }: AppProps) { .catch(console.error); }, []); + useEffect(() => { + const fetchConfig = async () => { + try { + const res = await fetch("/api/config"); + const reader = res.body?.getReader(); + const contentLength = res.headers.get("Content-Length"); + + if (reader && contentLength) { + const totalLength = parseInt(contentLength, 10); + let loaded = 0; + while (true) { + const { done, value } = await reader.read(); + if (done) break; + + loaded += value?.length || 0; + const progress = Math.round((loaded / totalLength) * 100); + setLoadingPercentage(progress); + } + } + + const data = await res.json(); + setAppConfig(data); + } catch (error) { + console.error(error); + } + }; - if (!appConfig) { - return
Loading...
// APT-1605 - } + fetchConfig(); + }, []); + + + if (!appConfig) { + return( +
+
+
+
+
+
{loadingPercentage}%
+
+ ) +} return ( diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 642e44c..e456a0a 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -4,7 +4,7 @@ export default function Document() { return ( - +
diff --git a/tailwind.config.ts b/tailwind.config.ts index c4cc5d3..ea66437 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,8 +13,9 @@ const config: Config = { "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 'primary-gradient' : 'radial-gradient(120.62% 683.52% at 110.84% 156.15%, #C5FFFD 6.84%, rgba(111, 255, 194, 0.760784) 48.36%, #00DABA 100%)', - 'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)', - 'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)', + 'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)', + 'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)', + 'colorful-gradient':'linear-gradient(270deg, #00DABA 8%, #4AA1A3 23%, #8A7191 36%, #B15485 46%, #C14981 51%, #A73993 62%, #8726AA 78%, #741BB7 91%, #6D17BD 100%)', }, colors: { black1: '#010101', @@ -56,6 +57,7 @@ const config: Config = { '48': '48px', '64': '64px', '80': '80px', + '114': '114px' }, fontFamily: { "int-light": "interLight",