blockworks-foundation
/
lev-stake-sol
mirror of https://github.com/blockworks-foundation/lev-stake-sol.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

rough layout

This commit is contained in:
saml33 2023-09-14 23:18:39 +10:00
parent a9b3a2594c
commit b16b08e9f5
14 changed files with 205 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/AccountStats.tsx
View File

@ -1,48 +1,47 @@
import useMangoGroup from 'hooks/useMangoGroup' // import useMangoGroup from 'hooks/useMangoGroup'
import { useMemo } from 'react' // import { useMemo } from 'react'
import FormatNumericValue from './shared/FormatNumericValue' // import FormatNumericValue from './shared/FormatNumericValue'
import useMangoAccount from 'hooks/useMangoAccount' // import useMangoAccount from 'hooks/useMangoAccount'
const AccountStats = ({ token }: { token: string }) => { const AccountStats = ({ token }: { token: string }) => {
const { mangoAccount } = useMangoAccount() // const { mangoAccount } = useMangoAccount()
const { group } = useMangoGroup() // const { group } = useMangoGroup()
const bank = useMemo(() => { // const bank = useMemo(() => {
if (!group) return undefined // if (!group) return undefined
return group.banksMapByName.get(token)?.[0] // return group.banksMapByName.get(token)?.[0]
}, [group, token]) // }, [group, token])
const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0 // const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0
return ( return (
<div className="my-8 ml-4 mr-8"> <>
<div className="grid grid-cols-2 gap-8"> <h2 className="mb-4 text-2xl">{`Boosted ${token}`}</h2>
<div className="grid grid-cols-1 gap-6">
<div> <div>
<div>Est. {token} APR</div> <p className="mb-1">Est. APR</p>
<div className="text-2xl font-bold">14.89%</div> <span className="text-2xl font-bold">14.89%</span>
</div> </div>
<div> <div>
<div>Max Leverage</div> <p className="mb-1">Max Leverage</p>
<div className="text-2xl font-bold">3x</div> <span className="text-2xl font-bold">3x</span>
</div> </div>
<div> <div>
<div>Available to borrow</div> <p className="mb-1">Capacity Remaining</p>
<div className="text-2xl font-bold">100,000</div> <span className="text-2xl font-bold">100,000 SOL</span>
</div> </div>
<div> <div>
<p className="mb-1">Total Staked</p>
<span className="text-2xl font-bold">{`100,000 ${token}`}</span>
</div>
{/* <div>
<div>Your position</div> <div>Your position</div>
<div className="text-2xl font-bold"> <div className="text-2xl font-bold">
{bank ? <FormatNumericValue value={position} decimals={6} /> : 0.0} {bank ? <FormatNumericValue value={position} decimals={6} /> : 0.0}
</div> </div>
</div> */}
</div> </div>
<div> </>
<div>Title Here</div>
</div>
<div>
<div>Title Here</div>
</div>
</div>
</div>
) )
} }

52
components/StakeForm.tsx
View File

@ -23,7 +23,7 @@ import { floorToDecimal, withValueLimit } from 'utils/numbers'
import BankAmountWithValue from './shared/BankAmountWithValue' import BankAmountWithValue from './shared/BankAmountWithValue'
// import useBanksWithBalances from 'hooks/useBanksWithBalances' // import useBanksWithBalances from 'hooks/useBanksWithBalances'
import { isMangoError } from 'types' import { isMangoError } from 'types'
import TokenListButton from './shared/TokenListButton' // import TokenListButton from './shared/TokenListButton'
import TokenLogo from './shared/TokenLogo' import TokenLogo from './shared/TokenLogo'
import SecondaryConnectButton from './shared/SecondaryConnectButton' import SecondaryConnectButton from './shared/SecondaryConnectButton'
import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts' import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
@ -94,7 +94,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
const { group } = useMangoGroup() const { group } = useMangoGroup()
const stakeBank = useMemo(() => { const stakeBank = useMemo(() => {
return group?.banksMapByName.get(selectedToken)?.[0] const bankName = selectedToken === 'mSOL' ? 'MSOL' : selectedToken
return group?.banksMapByName.get(bankName)?.[0]
}, [selectedToken, group]) }, [selectedToken, group])
const solBank = useMemo(() => { const solBank = useMemo(() => {
@ -236,8 +237,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
/> */} /> */}
</EnterBottomExitBottom> </EnterBottomExitBottom>
<FadeInFadeOut show={!showTokenList}> <FadeInFadeOut show={!showTokenList}>
<div className="m-6 flex flex-col justify-between"> <div className="flex flex-col justify-between">
<div> <div className="pb-8">
<SolBalanceWarnings <SolBalanceWarnings
amount={inputAmount} amount={inputAmount}
className="mb-4" className="mb-4"
@ -246,7 +247,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
/> />
<div className="grid grid-cols-2"> <div className="grid grid-cols-2">
<div className="col-span-2 flex justify-between"> <div className="col-span-2 flex justify-between">
<Label text={`Stake Token`} /> <Label text="Amount" />
<div className="mb-2 flex items-center space-x-2"> <div className="mb-2 flex items-center space-x-2">
<MaxAmountButton <MaxAmountButton
decimals={tokenMax.maxDecimals} decimals={tokenMax.maxDecimals}
@ -265,14 +266,15 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<div className="col-span-1"> {/* <div className="col-span-1">
<TokenListButton <TokenListButton
token={selectedToken} token={selectedToken}
logo={<TokenLogo bank={stakeBank} />} logo={<TokenLogo bank={stakeBank} />}
setShowList={setShowTokenList} setShowList={setShowTokenList}
/> />
</div> </div> */}
<div className="col-span-1"> <div className="col-span-2">
<div className="relative">
<NumberFormat <NumberFormat
name="amountIn" name="amountIn"
id="amountIn" id="amountIn"
@ -281,9 +283,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
allowNegative={false} allowNegative={false}
isNumericString={true} isNumericString={true}
decimalScale={6} decimalScale={6}
className={ className="w-full rounded-xl border border-th-input-border bg-th-input-bkg p-3 pl-12 pr-4 text-left font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4"
'w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4'
}
placeholder="0.00" placeholder="0.00"
value={inputAmount} value={inputAmount}
onValueChange={(e: NumberFormatValues) => { onValueChange={(e: NumberFormatValues) => {
@ -293,10 +293,22 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
}} }}
isAllowed={withValueLimit} isAllowed={withValueLimit}
/> />
<div className="absolute left-4 top-1/2 -translate-y-1/2">
<TokenLogo bank={stakeBank} size={24} />
</div>
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<span className="font-bold text-th-fgd-1">
{selectedToken}
</span>
</div> </div>
</div> </div>
<div className="mt-3"> </div>
<div>Leverage: {leverage}x</div> </div>
<div className="mt-4">
<div className="flex items-center justify-between">
<Label text="Leverage" />
<p className="font-bold text-th-fgd-1">{leverage}x</p>
</div>
<LeverageSlider <LeverageSlider
amount={leverage} amount={leverage}
leverageMax={3} leverageMax={3}
@ -306,7 +318,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</div> </div>
{stakeBank && solBank ? ( {stakeBank && solBank ? (
<> <>
<div className="mt-2 space-y-1.5 px-2 py-4 text-sm"> <div className="mt-2 space-y-1.5 px-2 py-4">
<div className="flex justify-between"> <div className="flex justify-between">
<p>{t('deposit-amount')}</p> <p>{t('deposit-amount')}</p>
<BankAmountWithValue <BankAmountWithValue
@ -315,19 +327,21 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
/> />
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<p>SOL borrowed</p> <p>SOL Borrowed</p>
{solBank ? ( {solBank ? (
<span className="text-th-fgd-1">
<FormatNumericValue <FormatNumericValue
value={solAmountToBorrow} value={solAmountToBorrow}
decimals={3} decimals={3}
/> />
</span>
) : null} ) : null}
</div> </div>
</div> </div>
<div className="space-y-1.5 border-t border-th-bkg-3 px-2 py-4 text-sm "> <div className="space-y-1.5 border-t border-th-bkg-3 px-2 pt-4">
<div className="flex justify-between"> <div className="flex justify-between">
<p>{selectedToken} Leveraged APR</p> <p>{selectedToken} Leveraged APR</p>
<span> <span className="text-th-fgd-1">
<FormatNumericValue <FormatNumericValue
value={7.28 * leverage} value={7.28 * leverage}
decimals={2} decimals={2}
@ -337,7 +351,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<p>{selectedToken} Deposit Rate</p> <p>{selectedToken} Deposit Rate</p>
<span> <span className="text-th-fgd-1">
<FormatNumericValue <FormatNumericValue
value={stakeBank.getDepositRateUi()} value={stakeBank.getDepositRateUi()}
decimals={2} decimals={2}
@ -347,7 +361,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<p>SOL Borrow Rate</p> <p>SOL Borrow Rate</p>
<span> <span className="text-th-fgd-1">
<FormatNumericValue <FormatNumericValue
value={solBank.getDepositRateUi()} value={solBank.getDepositRateUi()}
decimals={2} decimals={2}

17
components/TokenButton.tsx
View File

@ -10,18 +10,23 @@ const TokenButton = ({
handleTokenSelect: (v: string) => void handleTokenSelect: (v: string) => void
}) => { }) => {
return ( return (
<button onClick={() => handleTokenSelect(tokenName)}> <button
<div className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4 first:rounded-tl-2xl last:rounded-tr-2xl last:border-transparent hover:cursor-pointer ${
className={`h-16 w-16 rounded-full border bg-th-bkg-1 p-4 hover:cursor-pointer hover:border-2 hover:border-orange-400 ${ selectedToken === tokenName ? 'bg-th-bkg-2' : ''
selectedToken === tokenName ? 'border-black' : ''
}`} }`}
onClick={() => handleTokenSelect(tokenName)}
> >
<div className="flex flex-col items-center">
<Image <Image
src={`/icons/${tokenName.toLowerCase()}.svg`} src={`/icons/${tokenName.toLowerCase()}.svg`}
width={100} width={40}
height={100} height={40}
alt="Select a token" alt="Select a token"
/> />
<span className="mt-2 text-lg font-bold text-th-fgd-1">
{tokenName}
</span>
<span>14.89%</span>
</div> </div>
</button> </button>
) )

37
components/UnstakeForm.tsx
View File

@ -23,7 +23,7 @@ import { floorToDecimal, withValueLimit } from 'utils/numbers'
import BankAmountWithValue from './shared/BankAmountWithValue' import BankAmountWithValue from './shared/BankAmountWithValue'
// import useBanksWithBalances from 'hooks/useBanksWithBalances' // import useBanksWithBalances from 'hooks/useBanksWithBalances'
import { isMangoError } from 'types' import { isMangoError } from 'types'
import TokenListButton from './shared/TokenListButton' // import TokenListButton from './shared/TokenListButton'
import TokenLogo from './shared/TokenLogo' import TokenLogo from './shared/TokenLogo'
import SecondaryConnectButton from './shared/SecondaryConnectButton' import SecondaryConnectButton from './shared/SecondaryConnectButton'
import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts' import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
@ -79,7 +79,8 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
const { mangoAccount } = useMangoAccount() const { mangoAccount } = useMangoAccount()
const stakeBank = useMemo(() => { const stakeBank = useMemo(() => {
return group?.banksMapByName.get(selectedToken)?.[0] const bankName = selectedToken === 'mSOL' ? 'MSOL' : selectedToken
return group?.banksMapByName.get(bankName)?.[0]
}, [selectedToken, group]) }, [selectedToken, group])
const solBank = useMemo(() => { const solBank = useMemo(() => {
@ -203,8 +204,8 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
/> */} /> */}
</EnterBottomExitBottom> </EnterBottomExitBottom>
<FadeInFadeOut show={!showTokenList}> <FadeInFadeOut show={!showTokenList}>
<div className="m-6 flex flex-col justify-between"> <div className="flex flex-col justify-between">
<div> <div className="pb-8">
<SolBalanceWarnings <SolBalanceWarnings
amount={inputAmount} amount={inputAmount}
className="mb-4" className="mb-4"
@ -213,7 +214,7 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
/> />
<div className="grid grid-cols-2"> <div className="grid grid-cols-2">
<div className="col-span-2 flex justify-between"> <div className="col-span-2 flex justify-between">
<Label text={`Stake Token`} /> <Label text="Amount" />
<div className="mb-2 flex items-center space-x-2"> <div className="mb-2 flex items-center space-x-2">
<MaxAmountButton <MaxAmountButton
decimals={tokenMax.maxDecimals} decimals={tokenMax.maxDecimals}
@ -232,14 +233,15 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<div className="col-span-1"> {/* <div className="col-span-1">
<TokenListButton <TokenListButton
token={selectedToken} token={selectedToken}
logo={<TokenLogo bank={stakeBank} />} logo={<TokenLogo bank={stakeBank} />}
setShowList={setShowTokenList} setShowList={setShowTokenList}
/> />
</div> </div> */}
<div className="col-span-1"> <div className="col-span-2">
<div className="relative">
<NumberFormat <NumberFormat
name="amountIn" name="amountIn"
id="amountIn" id="amountIn"
@ -248,9 +250,7 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
allowNegative={false} allowNegative={false}
isNumericString={true} isNumericString={true}
decimalScale={stakeBank?.mintDecimals || 6} decimalScale={stakeBank?.mintDecimals || 6}
className={ className="w-full rounded-xl border border-th-input-border bg-th-input-bkg p-3 pl-12 pr-4 text-left font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4"
'w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4'
}
placeholder="0.00" placeholder="0.00"
value={inputAmount} value={inputAmount}
onValueChange={(e: NumberFormatValues) => { onValueChange={(e: NumberFormatValues) => {
@ -260,13 +260,22 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
}} }}
isAllowed={withValueLimit} isAllowed={withValueLimit}
/> />
<div className="absolute left-4 top-1/2 -translate-y-1/2">
<TokenLogo bank={stakeBank} size={24} />
</div>
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<span className="font-bold text-th-fgd-1">
{selectedToken}
</span>
</div>
</div>
</div> </div>
</div> </div>
{stakeBank && solBank ? ( {stakeBank && solBank ? (
<> <>
<div className="mt-2 space-y-1.5 px-2 py-4 text-sm"> <div className="mt-2 space-y-1.5 px-2 pt-4">
<div className="flex justify-between"> <div className="flex justify-between">
<p>Staked amount</p> <p>Staked Amount</p>
<BankAmountWithValue <BankAmountWithValue
amount={tokenMax.maxAmount} amount={tokenMax.maxAmount}
bank={stakeBank} bank={stakeBank}
@ -275,7 +284,9 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
<div className="flex justify-between"> <div className="flex justify-between">
<p>SOL borrowed</p> <p>SOL borrowed</p>
{solBank ? ( {solBank ? (
<span className="text-th-fgd-1">
<FormatNumericValue value={solBorrowed} decimals={3} /> <FormatNumericValue value={solBorrowed} decimals={3} />
</span>
) : null} ) : null}
</div> </div>
</div> </div>

4
components/forms/Label.tsx
View File

@ -7,7 +7,9 @@ const Label = ({
optional?: boolean optional?: boolean
className?: string className?: string
}) => ( }) => (
<p className={`mb-2 text-left text-sm text-th-fgd-3 ${className}`}> <p
className={`mb-2 text-left text-base font-bold text-th-fgd-2 ${className}`}
>
{text}{' '} {text}{' '}
{optional ? ( {optional ? (
<span className="ml-1 text-xs text-th-fgd-4">(Optional)</span> <span className="ml-1 text-xs text-th-fgd-4">(Optional)</span>

4
components/shared/BankAmountWithValue.tsx
View File

@ -16,13 +16,13 @@ const BankAmountWithValue = ({
value?: number value?: number
}) => { }) => {
return ( return (
<p className={`font-mono text-th-fgd-2 ${stacked ? 'text-right' : ''}`}> <p className={`font-mono text-th-fgd-1 ${stacked ? 'text-right' : ''}`}>
<> <>
<FormatNumericValue <FormatNumericValue
value={amount} value={amount}
decimals={amount && fixDecimals ? bank.mintDecimals : undefined} decimals={amount && fixDecimals ? bank.mintDecimals : undefined}
/>{' '} />{' '}
<span className={`text-th-fgd-4 ${stacked ? 'block' : ''}`}> <span className={`text-th-fgd-3 ${stacked ? 'block' : ''}`}>
<FormatNumericValue <FormatNumericValue
value={value ? value : Number(amount) * bank.uiPrice} value={value ? value : Number(amount) * bank.uiPrice}
decimals={fixDecimals ? 2 : undefined} decimals={fixDecimals ? 2 : undefined}

4
components/shared/Button.tsx
View File

@ -33,7 +33,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
<button <button
onClick={onClick} onClick={onClick}
disabled={disabled} disabled={disabled}
className={`rounded-md ${ className={`rounded-xl ${
themeData.buttonStyle === 'raised' themeData.buttonStyle === 'raised'
? 'raised-button' ? 'raised-button'
: secondary : secondary
@ -43,7 +43,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
size === 'medium' size === 'medium'
? 'h-10 px-4' ? 'h-10 px-4'
: size === 'large' : size === 'large'
? 'h-12 px-6' ? 'h-14 px-8'
: 'h-8 px-3' : 'h-8 px-3'
} font-display ${ } font-display ${
theme === 'High Contrast' && !secondary theme === 'High Contrast' && !secondary

2
components/shared/MaxAmountButton.tsx
View File

@ -23,7 +23,7 @@ const MaxAmountButton = ({
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
> >
<p className="mr-1 text-th-fgd-4">{label}:</p> <p className="mr-1 text-th-fgd-2">{label}:</p>
<span className="font-mono"> <span className="font-mono">
<FormatNumericValue value={value} decimals={decimals} /> <FormatNumericValue value={value} decimals={decimals} />
</span> </span>

20
components/shared/TabUnderline.tsx
View File

@ -18,21 +18,9 @@ const TabUnderline = <T extends Values>({
fillWidth = true, fillWidth = true,
}: TabUnderlineProps<T>) => { }: TabUnderlineProps<T>) => {
return ( return (
<div className={`relative mb-3 border-b border-th-bkg-3 pb-1 font-bold`}>
<div <div
className={`relative mb-3 border-b border-th-bkg-3 ${ className={`absolute bottom-[-1px] left-0 h-1 bg-th-active`}
values.includes('buy' as T) || values.includes('sell' as T)
? 'pb-1 font-display md:pb-2.5'
: 'pb-1 font-bold'
} md:-mt-2.5`}
>
<div
className={`absolute bottom-[-1px] left-0 h-0.5 ${
activeValue === 'buy'
? 'bg-th-up'
: activeValue === 'sell'
? 'bg-th-down'
: 'bg-th-active'
}`}
style={{ style={{
maxWidth: !fillWidth ? '176px' : '', maxWidth: !fillWidth ? '176px' : '',
transform: `translateX(${ transform: `translateX(${
@ -48,8 +36,8 @@ const TabUnderline = <T extends Values>({
className={`relative flex h-10 w-1/2 ${ className={`relative flex h-10 w-1/2 ${
fillWidth ? '' : 'max-w-[176px]' fillWidth ? '' : 'max-w-[176px]'
} }
cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 focus-visible:text-th-fgd-2 md:h-auto md:rounded-none md:hover:opacity-100 ${ cursor-pointer items-center justify-center whitespace-nowrap rounded pb-2 focus-visible:text-th-fgd-2 md:h-auto md:rounded-none md:hover:opacity-100 ${
small ? 'text-sm' : 'text-sm lg:text-base' small ? 'text-sm' : 'text-lg lg:text-xl'
} }
${ ${
activeValue === value activeValue === value

2
pages/_app.tsx
View File

@ -132,7 +132,7 @@ function MyApp({ Component, pageProps }: AppProps) {
autoConnect={autoConnect} autoConnect={autoConnect}
> >
<MangoProvider /> <MangoProvider />
<ThemeProvider storageKey={THEME_KEY}> <ThemeProvider defaultTheme="Light" storageKey={THEME_KEY}>
<PageTitle /> <PageTitle />
<Layout> <Layout>
<Component {...pageProps} /> <Component {...pageProps} />

4
pages/_document.tsx
View File

@ -12,10 +12,10 @@ class MyDocument extends Document {
></Script> ></Script>
</Head> </Head>
<body className="hide-scroll"> <body className="hide-scroll">
<div className="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-lime-600 via-yellow-300 to-red-600"> {/* <div className="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-lime-600 via-yellow-300 to-red-600"> */}
<Main /> <Main />
<NextScript /> <NextScript />
</div> {/* </div> */}
</body> </body>
</Html> </Html>
) )

99
pages/index.tsx
View File

@ -7,9 +7,10 @@ import mangoStore from '@store/mangoStore'
import type { NextPage } from 'next' import type { NextPage } from 'next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { ACCOUNT_ACTION_MODAL_INNER_HEIGHT } from 'utils/constants'
import { ACCOUNT_PREFIX } from 'utils/transactions' import { ACCOUNT_PREFIX } from 'utils/transactions'
const STAKEABLE_TOKENS = ['mSOL', 'JitoSOL', 'stSOL', 'LDO']
export async function getStaticProps({ locale }: { locale: string }) { export async function getStaticProps({ locale }: { locale: string }) {
return { return {
props: { props: {
@ -22,7 +23,8 @@ const set = mangoStore.getState().set
const Index: NextPage = () => { const Index: NextPage = () => {
const [activeTab, setActiveTab] = useState('Stake') const [activeTab, setActiveTab] = useState('Stake')
const [selectedToken, setSelectedToken] = useState('MSOL') const [activeFormTab, setActiveFormTab] = useState('Add')
const [selectedToken, setSelectedToken] = useState(STAKEABLE_TOKENS[0])
useEffect(() => { useEffect(() => {
const mangoAccounts = mangoStore.getState().mangoAccounts const mangoAccounts = mangoStore.getState().mangoAccounts
@ -45,68 +47,67 @@ const Index: NextPage = () => {
}, []) }, [])
return ( return (
<div className="m-auto max-w-4xl flex-col"> <div className="mx-auto max-w-4xl flex-col pb-20">
<div className="flex-col"> <div className="flex-col">
{/* <div className="mb-4 text-center text-5xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl"> {/* <div className="mb-4 text-center text-5xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
LEVERAGE STAKE SOL LEVERAGE STAKE SOL
</div> */} </div> */}
<div className="mt-8 flex justify-center space-x-4"> <div className="mb-6 grid grid-cols-2 rounded-xl border border-th-fgd-1">
<div className="flex-col"> <button
<TokenButton className={`col-span-1 mx-auto w-full rounded-l-xl border-r border-th-fgd-1 py-4 font-bold ${
handleTokenSelect={handleTokenSelect} activeTab === 'Stake'
selectedToken={selectedToken} ? 'bg-th-bkg-2 text-th-fgd-1'
tokenName="MSOL" : 'text-th-fgd-3'
/> }`}
<div className="text-center">mSOL</div> onClick={() => setActiveTab('Stake')}
</div>
<div className="flex-col">
<TokenButton
handleTokenSelect={handleTokenSelect}
selectedToken={selectedToken}
tokenName="JitoSOL"
/>
<div className="text-center">JitoSOL</div>
</div>
<div className="flex-col">
<TokenButton
handleTokenSelect={handleTokenSelect}
selectedToken={selectedToken}
tokenName="stSOL"
/>
<div className="text-center">stSOL</div>
</div>
<div className="flex-col">
<TokenButton
handleTokenSelect={handleTokenSelect}
selectedToken={selectedToken}
tokenName="LDO"
/>
<div className="text-center">LDO</div>
</div>
</div>
</div>
<div className="mt-4 flex w-full max-w-4xl">
<div
className={`min-h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] relative z-20 rounded-xl border border-black bg-th-bkg-1 p-2 text-th-fgd-1`}
> >
<div className={`relative h-[500px]`}> Stake
<div className="m-6"> </button>
<button
className={`col-span-1 mx-auto w-full rounded-r-xl py-4 font-bold ${
activeTab === 'Positions'
? 'bg-th-bkg-2 text-th-fgd-1'
: 'text-th-fgd-3'
}`}
onClick={() => setActiveTab('Positions')}
>
Your Positions
</button>
</div>
{/* <h2 className="mb-4 text-xl">Tokens</h2> */}
<div className="grid grid-cols-4 rounded-t-2xl border border-b-0 border-th-fgd-1">
{STAKEABLE_TOKENS.map((token) => (
<TokenButton
key={token}
handleTokenSelect={handleTokenSelect}
selectedToken={selectedToken}
tokenName={token}
/>
))}
</div>
</div>
<div className="grid max-w-4xl grid-cols-12">
<div
className={`col-span-7 rounded-bl-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
>
<div className={`p-8 pt-6`}>
<div className="pb-2">
<TabUnderline <TabUnderline
activeValue={activeTab} activeValue={activeFormTab}
values={['Stake', 'Unstake']} values={['Add', 'Remove']}
onChange={(v) => setActiveTab(v)} onChange={(v) => setActiveFormTab(v)}
/> />
</div> </div>
{activeTab === 'Stake' ? ( {activeFormTab === 'Add' ? (
<StakeForm onSuccess={onClose} token={selectedToken} /> <StakeForm onSuccess={onClose} token={selectedToken} />
) : null} ) : null}
{activeTab === 'Unstake' ? ( {activeFormTab === 'Remove' ? (
<UnstakeForm onSuccess={onClose} token={selectedToken} /> <UnstakeForm onSuccess={onClose} token={selectedToken} />
) : null} ) : null}
</div> </div>
</div> </div>
<div <div
className={`min-h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] relative z-10 -ml-4 rounded rounded-r-xl border-y border-r border-black bg-th-bkg-2 p-2 pl-8 text-th-fgd-1`} className={`col-span-5 rounded-br-2xl border-y border-r border-th-fgd-1 bg-th-bkg-2 p-8 pt-6`}
> >
<AccountStats token={selectedToken} /> <AccountStats token={selectedToken} />
</div> </div>

8
styles/globals.css
View File

@ -425,7 +425,7 @@ th {
/* Base */ /* Base */
body { body {
@apply font-body text-sm font-medium tracking-wider; @apply font-body text-base font-medium leading-tight tracking-wider;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@ -470,11 +470,11 @@ h3 {
} }
p { p {
@apply text-th-fgd-3; @apply text-th-fgd-2;
} }
li { li {
@apply text-sm text-th-fgd-3; @apply text-base text-th-fgd-3;
} }
a { a {
@ -518,7 +518,7 @@ input[type='text'] {
/* Table */ /* Table */
table p { table p {
@apply font-mono text-sm text-th-fgd-2; @apply font-mono text-base text-th-fgd-2;
} }
/* Scrollbars */ /* Scrollbars */

42
yarn.lock
View File

@ -5975,14 +5975,7 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA== integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
is-core-module@^2.11.0, is-core-module@^2.9.0: is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.9.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
dependencies:
has "^1.0.3"
is-core-module@^2.13.0:
version "2.13.0" version "2.13.0"
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ== integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
@ -7342,7 +7335,7 @@ postcss@8.4.14:
picocolors "^1.0.0" picocolors "^1.0.0"
source-map-js "^1.0.2" source-map-js "^1.0.2"
postcss@^8.1.7: postcss@^8.1.7, postcss@^8.4.23, postcss@^8.4.4:
version "8.4.29" version "8.4.29"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw== integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
@ -7351,15 +7344,6 @@ postcss@^8.1.7:
picocolors "^1.0.0" picocolors "^1.0.0"
source-map-js "^1.0.2" source-map-js "^1.0.2"
postcss@^8.4.23, postcss@^8.4.4:
version "8.4.28"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.28.tgz#c6cc681ed00109072816e1557f889ef51cf950a5"
integrity sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==
dependencies:
nanoid "^3.3.6"
picocolors "^1.0.0"
source-map-js "^1.0.2"
preact@10.4.1: preact@10.4.1:
version "10.4.1" version "10.4.1"
resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431" resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
@ -7887,16 +7871,7 @@ resolve-pkg-maps@^1.0.0:
resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f" resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw== integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
resolve@^1.1.7, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2: resolve@^1.1.7, resolve@^1.20.0, resolve@^1.21.0, resolve@^1.22.1, resolve@^1.22.2:
version "1.22.2"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
dependencies:
is-core-module "^2.11.0"
path-parse "^1.0.7"
supports-preserve-symlinks-flag "^1.0.0"
resolve@^1.21.0:
version "1.22.4" version "1.22.4"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg== integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@ -8090,16 +8065,11 @@ secp256k1@^4.0.1, secp256k1@^4.0.2:
node-addon-api "^2.0.0" node-addon-api "^2.0.0"
node-gyp-build "^4.2.0" node-gyp-build "^4.2.0"
semver@^6.0.0: semver@^6.0.0, semver@^6.3.0:
version "6.3.1" version "6.3.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
semver@^6.3.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.4: semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.4:
version "7.5.4" version "7.5.4"
resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@ -8733,7 +8703,7 @@ typescript-collections@^1.3.3:
resolved "https://registry.yarnpkg.com/typescript-collections/-/typescript-collections-1.3.3.tgz#62d50d93c018c094d425eabee649f00ec5cc0fea" resolved "https://registry.yarnpkg.com/typescript-collections/-/typescript-collections-1.3.3.tgz#62d50d93c018c094d425eabee649f00ec5cc0fea"
integrity sha512-7sI4e/bZijOzyURng88oOFZCISQPTHozfE2sUu5AviFYk5QV7fYGb6YiDl+vKjF/pICA354JImBImL9XJWUvdQ== integrity sha512-7sI4e/bZijOzyURng88oOFZCISQPTHozfE2sUu5AviFYk5QV7fYGb6YiDl+vKjF/pICA354JImBImL9XJWUvdQ==
typescript@4.9.4, typescript@^4.6.2: typescript@4.9.4:
version "4.9.4" version "4.9.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg== integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
@ -8743,7 +8713,7 @@ typescript@^3.9.10, typescript@^3.9.5, typescript@^3.9.7:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q== integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
typescript@^4.2.3: typescript@^4.2.3, typescript@^4.6.2:
version "4.9.5" version "4.9.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==