Skip to content

Commit

Permalink
rough layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@saml33
saml33 committed Sep 14, 2023
1 parent a9b3a25 commit b16b08e
Show file tree
Hide file tree
Showing 14 changed files with 205 additions and 215 deletions.
53 changes: 26 additions & 27 deletions components/AccountStats.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,47 @@
import useMangoGroup from 'hooks/useMangoGroup'
import { useMemo } from 'react'
import FormatNumericValue from './shared/FormatNumericValue'
import useMangoAccount from 'hooks/useMangoAccount'
// import useMangoGroup from 'hooks/useMangoGroup'
// import { useMemo } from 'react'
// import FormatNumericValue from './shared/FormatNumericValue'
// import useMangoAccount from 'hooks/useMangoAccount'

const AccountStats = ({ token }: { token: string }) => {
const { mangoAccount } = useMangoAccount()
const { group } = useMangoGroup()
// const { mangoAccount } = useMangoAccount()
// const { group } = useMangoGroup()

const bank = useMemo(() => {
if (!group) return undefined
return group.banksMapByName.get(token)?.[0]
}, [group, token])
// const bank = useMemo(() => {
// if (!group) return undefined
// return group.banksMapByName.get(token)?.[0]
// }, [group, token])

const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0
// const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0

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>Est. {token} APR</div>
<div className="text-2xl font-bold">14.89%</div>
<p className="mb-1">Est. APR</p>
<span className="text-2xl font-bold">14.89%</span>
</div>
<div>
<div>Max Leverage</div>
<div className="text-2xl font-bold">3x</div>
<p className="mb-1">Max Leverage</p>
<span className="text-2xl font-bold">3x</span>
</div>
<div>
<div>Available to borrow</div>
<div className="text-2xl font-bold">100,000</div>
<p className="mb-1">Capacity Remaining</p>
<span className="text-2xl font-bold">100,000 SOL</span>
</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 className="text-2xl font-bold">
{bank ? <FormatNumericValue value={position} decimals={6} /> : 0.0}
</div>
</div>
<div>
<div>Title Here</div>
</div>
<div>
<div>Title Here</div>
</div>
</div> */}
</div>
</div>
</>
)
}

Expand Down
94 changes: 54 additions & 40 deletions components/StakeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { floorToDecimal, withValueLimit } from 'utils/numbers'
import BankAmountWithValue from './shared/BankAmountWithValue'
// import useBanksWithBalances from 'hooks/useBanksWithBalances'
import { isMangoError } from 'types'
import TokenListButton from './shared/TokenListButton'
// import TokenListButton from './shared/TokenListButton'
import TokenLogo from './shared/TokenLogo'
import SecondaryConnectButton from './shared/SecondaryConnectButton'
import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
Expand Down Expand Up @@ -94,7 +94,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
const { group } = useMangoGroup()

const stakeBank = useMemo(() => {
return group?.banksMapByName.get(selectedToken)?.[0]
const bankName = selectedToken === 'mSOL' ? 'MSOL' : selectedToken
return group?.banksMapByName.get(bankName)?.[0]
}, [selectedToken, group])

const solBank = useMemo(() => {
Expand Down Expand Up @@ -236,8 +237,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
/> */}
</EnterBottomExitBottom>
<FadeInFadeOut show={!showTokenList}>
<div className="m-6 flex flex-col justify-between">
<div>
<div className="flex flex-col justify-between">
<div className="pb-8">
<SolBalanceWarnings
amount={inputAmount}
className="mb-4"
Expand All @@ -246,7 +247,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
/>
<div className="grid grid-cols-2">
<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">
<MaxAmountButton
decimals={tokenMax.maxDecimals}
Expand All @@ -265,38 +266,49 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</Tooltip>
</div>
</div>
<div className="col-span-1">
{/* <div className="col-span-1">
<TokenListButton
token={selectedToken}
logo={<TokenLogo bank={stakeBank} />}
setShowList={setShowTokenList}
/>
</div>
<div className="col-span-1">
<NumberFormat
name="amountIn"
id="amountIn"
inputMode="decimal"
thousandSeparator=","
allowNegative={false}
isNumericString={true}
decimalScale={6}
className={
'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"
value={inputAmount}
onValueChange={(e: NumberFormatValues) => {
setInputAmount(
!Number.isNaN(Number(e.value)) ? e.value : '',
)
}}
isAllowed={withValueLimit}
/>
</div> */}
<div className="col-span-2">
<div className="relative">
<NumberFormat
name="amountIn"
id="amountIn"
inputMode="decimal"
thousandSeparator=","
allowNegative={false}
isNumericString={true}
decimalScale={6}
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"
placeholder="0.00"
value={inputAmount}
onValueChange={(e: NumberFormatValues) => {
setInputAmount(
!Number.isNaN(Number(e.value)) ? e.value : '',
)
}}
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>Leverage: {leverage}x</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
amount={leverage}
leverageMax={3}
Expand All @@ -306,7 +318,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</div>
{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">
<p>{t('deposit-amount')}</p>
<BankAmountWithValue
Expand All @@ -315,19 +327,21 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
/>
</div>
<div className="flex justify-between">
<p>SOL borrowed</p>
<p>SOL Borrowed</p>
{solBank ? (
<FormatNumericValue
value={solAmountToBorrow}
decimals={3}
/>
<span className="text-th-fgd-1">
<FormatNumericValue
value={solAmountToBorrow}
decimals={3}
/>
</span>
) : null}
</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">
<p>{selectedToken} Leveraged APR</p>
<span>
<span className="text-th-fgd-1">
<FormatNumericValue
value={7.28 * leverage}
decimals={2}
Expand All @@ -337,7 +351,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</div>
<div className="flex justify-between">
<p>{selectedToken} Deposit Rate</p>
<span>
<span className="text-th-fgd-1">
<FormatNumericValue
value={stakeBank.getDepositRateUi()}
decimals={2}
Expand All @@ -347,7 +361,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</div>
<div className="flex justify-between">
<p>SOL Borrow Rate</p>
<span>
<span className="text-th-fgd-1">
<FormatNumericValue
value={solBank.getDepositRateUi()}
decimals={2}
Expand Down
21 changes: 13 additions & 8 deletions components/TokenButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,23 @@ const TokenButton = ({
handleTokenSelect: (v: string) => void
}) => {
return (
<button onClick={() => handleTokenSelect(tokenName)}>
<div
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 ? 'border-black' : ''
}`}
>
<button
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 ${
selectedToken === tokenName ? 'bg-th-bkg-2' : ''
}`}
onClick={() => handleTokenSelect(tokenName)}
>
<div className="flex flex-col items-center">
<Image
src={`/icons/${tokenName.toLowerCase()}.svg`}
width={100}
height={100}
width={40}
height={40}
alt="Select a token"
/>
<span className="mt-2 text-lg font-bold text-th-fgd-1">
{tokenName}
</span>
<span>14.89%</span>
</div>
</button>
)
Expand Down
Loading

0 comments on commit b16b08e

Please sign in to comment.