Skip to content

Commit

Permalink
add position cards
Browse files Browse the repository at this point in the history
  • Loading branch information
saml33 committed Sep 15, 2023
1 parent eebf0dd commit b75b116
Show file tree
Hide file tree
Showing 10 changed files with 114 additions and 44 deletions.
4 changes: 3 additions & 1 deletion components/AccountStats.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { formatTokenSymbol } from 'utils/tokens'

const AccountStats = ({ token }: { token: string }) => {
return (
<>
<h2 className="mb-4 text-2xl">{`Boosted ${token}`}</h2>
<h2 className="mb-4 text-2xl">{`Boosted ${formatTokenSymbol(token)}`}</h2>
<div className="grid grid-cols-1 gap-6">
<div>
<p className="mb-1">Est. APR</p>
Expand Down
104 changes: 87 additions & 17 deletions components/Positions.tsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,116 @@
import useMangoGroup from 'hooks/useMangoGroup'
import { useMemo } from 'react'
import useMangoAccount from 'hooks/useMangoAccount'
import { STAKEABLE_TOKENS } from 'utils/constants'
import TokenLogo from './shared/TokenLogo'
import Button from './shared/Button'
import { formatTokenSymbol } from 'utils/tokens'
import mangoStore from '@store/mangoStore'

const Positions = () => {
const { mangoAccount } = useMangoAccount()
const set = mangoStore.getState().set

const Positions = ({
setActiveTab,
}: {
setActiveTab: (tab: string) => void
}) => {
const { group } = useMangoGroup()

const banks = useMemo(() => {
if (!group) return []
const positionBanks = []
for (const token of STAKEABLE_TOKENS) {
const tokenName = token === 'mSOL' ? 'MSOL' : token
const bank = group.banksMapByName.get(tokenName)?.[0]
const bank = group.banksMapByName.get(token)?.[0]
positionBanks.push(bank)
}
return positionBanks
}, [group])

const positions = useMemo(() => {
if (!banks.length || !mangoAccount) return []
if (!banks.length) return []
const positions = []
for (const bank of banks) {
let balance = 0
if (bank) {
balance = mangoAccount.getTokenBalanceUi(bank)
if (bank?.name === 'JitoSOL') {
balance = 100
}
positions.push({ balance, bank })
}
return positions
}, [banks, mangoAccount])
return positions.sort((a, b) => b.balance - a.balance)
}, [banks])

console.log(banks)
console.log(positions)
const handleAddOrManagePosition = (token: string) => {
setActiveTab('Stake')
set((state) => {
state.selectedToken = token
})
}

return positions.length ? (
<div></div>
) : (
<div className="flex justify-center rounded-2xl border border-th-fgd-1 p-6">
<span>No positions found</span>
<div className="space-y-3">
{positions.map((position, i) => {
const { balance, bank } = position
return bank ? (
<div
className="rounded-2xl border border-th-fgd-1 p-6"
key={i + balance}
>
<div className="mb-6 flex items-center justify-between border-b border-th-bkg-4 pb-6">
<div className="flex items-center space-x-3">
<TokenLogo bank={bank} size={40} />
<div>
<h3>{formatTokenSymbol(bank.name)}</h3>
<span
className={`text-sm ${
balance ? 'text-th-fgd-1' : 'text-th-fgd-4'
}`}
>
{balance ? 'Opened 2 weeks ago' : 'No Position'}
</span>
</div>
</div>
<Button
onClick={() => handleAddOrManagePosition(bank.name)}
secondary
>
{balance ? 'Manage' : 'Add Position'}
</Button>
</div>
<div className="grid grid-cols-5 gap-4">
<div>
<p className="mb-1">Position Size</p>
<span className="text-xl font-bold">
{balance} {formatTokenSymbol(bank.name)}
</span>
</div>
<div>
<p className="mb-1">Est. APR</p>
<span className="text-xl font-bold">14.89%</span>
</div>
<div>
<p className="mb-1">Leverage</p>
<span className="text-xl font-bold">
{balance ? '3x' : '0x'}
</span>
</div>
<div>
<p className="mb-1">Earned</p>
<span className="text-xl font-bold">
{balance ? '3.321 SOL' : '0 SOL'}
</span>
</div>
<div>
<p className="mb-1">Liquidation Price</p>
<span className="text-xl font-bold">
{balance ? '1.234' : '0'}{' '}
{`${formatTokenSymbol(bank.name)}/SOL`}
</span>
</div>
</div>
</div>
) : null
})}
</div>
)
) : null
}

export default Positions
4 changes: 2 additions & 2 deletions components/Stake.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Stake = () => {

return (
<>
<div className="grid grid-cols-4 rounded-t-2xl border border-b-0 border-th-fgd-1">
<div className="grid grid-cols-5 rounded-t-2xl border border-b-0 border-th-fgd-1">
{STAKEABLE_TOKENS.map((token) => (
<TokenButton
key={token}
Expand All @@ -35,7 +35,7 @@ const Stake = () => {
/>
))}
</div>
<div className="grid max-w-4xl grid-cols-12">
<div className="grid grid-cols-12">
<div
className={`col-span-7 rounded-bl-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
>
Expand Down
7 changes: 3 additions & 4 deletions components/StakeForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
// INPUT_TOKEN_DEFAULT,
} from '../utils/constants'
import { notify } from '../utils/notifications'
import { TokenAccount } from '../utils/tokens'
import { TokenAccount, formatTokenSymbol } from '../utils/tokens'
// import ActionTokenList from './account/ActionTokenList'
import Label from './forms/Label'
import Button, { IconButton } from './shared/Button'
Expand Down Expand Up @@ -94,8 +94,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
const { group } = useMangoGroup()

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

const solBank = useMemo(() => {
Expand Down Expand Up @@ -298,7 +297,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
</div>
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<span className="font-bold text-th-fgd-1">
{selectedToken}
{formatTokenSymbol(selectedToken)}
</span>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion components/TokenButton.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import useStakeApr from 'hooks/useStakeAprs'
import Image from 'next/image'
import { formatTokenSymbol } from 'utils/tokens'

const TokenButton = ({
handleTokenSelect,
Expand Down Expand Up @@ -27,7 +28,7 @@ const TokenButton = ({
alt="Select a token"
/>
<span className="mt-2 text-lg font-bold text-th-fgd-1">
{tokenName}
{formatTokenSymbol(tokenName)}
</span>
<span>
{stakeAprs?.[tokenName.toLowerCase()]
Expand Down
7 changes: 3 additions & 4 deletions components/UnstakeForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
// INPUT_TOKEN_DEFAULT,
} from '../utils/constants'
import { notify } from '../utils/notifications'
import { TokenAccount } from '../utils/tokens'
import { TokenAccount, formatTokenSymbol } from '../utils/tokens'
// import ActionTokenList from './account/ActionTokenList'
import Label from './forms/Label'
import Button, { IconButton } from './shared/Button'
Expand Down Expand Up @@ -79,8 +79,7 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
const { mangoAccount } = useMangoAccount()

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

const solBank = useMemo(() => {
Expand Down Expand Up @@ -265,7 +264,7 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
</div>
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<span className="font-bold text-th-fgd-1">
{selectedToken}
{formatTokenSymbol(selectedToken)}
</span>
</div>
</div>
Expand Down
16 changes: 11 additions & 5 deletions pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const Index: NextPage = () => {
}, [selectedToken])

return (
<div className="mx-auto max-w-4xl flex-col pb-20">
<div className="mx-auto max-w-5xl flex-col pb-20">
<div className="mb-6 grid grid-cols-3 rounded-xl border border-th-fgd-1">
<button
className={`col-span-1 mx-auto w-full rounded-l-xl border-r border-th-fgd-1 py-4 font-bold ${
Expand All @@ -54,7 +54,7 @@ const Index: NextPage = () => {
}`}
onClick={() => setActiveTab('Positions')}
>
Your Positions
Positions
</button>
<button
className={`col-span-1 mx-auto w-full rounded-r-xl py-4 font-bold ${
Expand All @@ -67,19 +67,25 @@ const Index: NextPage = () => {
Transaction History
</button>
</div>
<TabContent activeTab={activeTab} />
<TabContent activeTab={activeTab} setActiveTab={setActiveTab} />
</div>
)
}

export default Index

const TabContent = ({ activeTab }: { activeTab: string }) => {
const TabContent = ({
activeTab,
setActiveTab,
}: {
activeTab: string
setActiveTab: (tab: string) => void
}) => {
switch (activeTab) {
case 'Stake':
return <Stake />
case 'Positions':
return <Positions />
return <Positions setActiveTab={setActiveTab} />
case 'History':
return <TransactionHistory />
default:
Expand Down
2 changes: 1 addition & 1 deletion styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -466,7 +466,7 @@ h2 {
}

h3 {
@apply text-lg;
@apply text-xl;
}

p {
Expand Down
2 changes: 1 addition & 1 deletion utils/constants.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { PublicKey } from '@metaplex-foundation/js'

// lev stake
export const STAKEABLE_TOKENS = ['mSOL', 'JitoSOL', 'stSOL', 'bSOL']
export const STAKEABLE_TOKENS = ['MSOL', 'JitoSOL', 'stSOL', 'bSOL', 'LDO']
// end

export const LAST_ACCOUNT_KEY = 'mangoAccount-0.4'
Expand Down
9 changes: 1 addition & 8 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6883,14 +6883,7 @@ [email protected]:
dependencies:
whatwg-url "^5.0.0"

node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7:
version "2.6.12"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba"
integrity sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==
dependencies:
whatwg-url "^5.0.0"

node-fetch@~2.6.1:
node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@~2.6.1:
version "2.6.13"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.13.tgz#a20acbbec73c2e09f9007de5cda17104122e0010"
integrity sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==
Expand Down

0 comments on commit b75b116

Please sign in to comment.