Est. APR
14.89%
diff --git a/components/Layout.tsx b/components/Layout.tsx
index c2084ae..16efd8f 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,7 +1,6 @@
import { Fragment, ReactNode, useEffect, useMemo, useState } from 'react'
import { ArrowPathIcon } from '@heroicons/react/20/solid'
import mangoStore from '@store/mangoStore'
-import BottomBar from './mobile/BottomBar'
import TopBar from './TopBar'
import useLocalStorageState from '../hooks/useLocalStorageState'
import { ACCEPT_TERMS_KEY, SECONDS } from '../utils/constants'
@@ -26,16 +25,8 @@ const Layout = ({ children }: { children: ReactNode }) => {
className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} ${themeData.fonts.mono.variable} font-sans`}
>
-
-
-
- {/* note: overflow-x-hidden below prevents position sticky from working in activity feed */}
-
-
- {children}
-
+
+ {children}
diff --git a/components/Positions.tsx b/components/Positions.tsx
index 493a13f..3eb53b9 100644
--- a/components/Positions.tsx
+++ b/components/Positions.tsx
@@ -70,68 +70,70 @@ const Positions = ({
Show Inactive
- {positions.map((position, i) => {
- const { balance, bank } = position
- return bank ? (
-
-
-
-
+
+ {positions.map((position, i) => {
+ const { balance, bank } = position
+ return bank ? (
+
+
+
+
+
+
{formatTokenSymbol(bank.name)}
+
+ {balance ? 'Opened 2 weeks ago' : 'No Position'}
+
+
+
+
handleAddOrManagePosition(bank.name)}
+ secondary
+ >
+ {balance ? 'Manage' : 'Add Position'}
+
+
+
-
{formatTokenSymbol(bank.name)}
-
- {balance ? 'Opened 2 weeks ago' : 'No Position'}
+ Position Size
+
+ {balance} {formatTokenSymbol(bank.name)}
+
+
+
+
+
Leverage
+
+ {balance ? '3x' : '0x'}
+
+
+
+
Earned
+
+ {balance ? '3.321 SOL' : '0 SOL'}
+
+
+
+
Liquidation Price
+
+ {balance ? '1.234' : '0'}{' '}
+ {`${formatTokenSymbol(bank.name)}/SOL`}
-
handleAddOrManagePosition(bank.name)}
- secondary
- >
- {balance ? 'Manage' : 'Add Position'}
-
-
-
-
Position Size
-
- {balance} {formatTokenSymbol(bank.name)}
-
-
-
-
-
Leverage
-
- {balance ? '3x' : '0x'}
-
-
-
-
Earned
-
- {balance ? '3.321 SOL' : '0 SOL'}
-
-
-
-
Liquidation Price
-
- {balance ? '1.234' : '0'}{' '}
- {`${formatTokenSymbol(bank.name)}/SOL`}
-
-
-
-
- ) : null
- })}
+ ) : null
+ })}
+
) : null
}
diff --git a/components/Stake.tsx b/components/Stake.tsx
index 2d30a7b..5b52671 100644
--- a/components/Stake.tsx
+++ b/components/Stake.tsx
@@ -37,7 +37,7 @@ const Stake = () => {
@@ -56,7 +56,7 @@ const Stake = () => {
diff --git a/components/TokenButton.tsx b/components/TokenButton.tsx
index 43a5296..2dd1c25 100644
--- a/components/TokenButton.tsx
+++ b/components/TokenButton.tsx
@@ -1,6 +1,7 @@
import useStakeApr from 'hooks/useStakeAprs'
import Image from 'next/image'
import { formatTokenSymbol } from 'utils/tokens'
+import SheenLoader from './shared/SheenLoader'
const TokenButton = ({
handleTokenSelect,
@@ -11,7 +12,13 @@ const TokenButton = ({
selectedToken: string
handleTokenSelect: (v: string) => void
}) => {
- const { data: stakeAprs } = useStakeApr()
+ const {
+ data: stakeAprs,
+ isLoading: loadingStakeAprs,
+ isFetching: fetchingStakeAprs,
+ } = useStakeApr()
+
+ const loadingAprs = loadingStakeAprs || fetchingStakeAprs
return (
- {stakeAprs?.[tokenName.toLowerCase()]
- ? (stakeAprs?.[tokenName.toLowerCase()] * 100).toFixed(2)
- : null}
- %
+ {loadingAprs ? (
+
+
+
+ ) : stakeAprs?.[tokenName.toLowerCase()] ? (
+ `${(stakeAprs?.[tokenName.toLowerCase()] * 100).toFixed(2)}%`
+ ) : null}
diff --git a/components/shared/SheenLoader.tsx b/components/shared/SheenLoader.tsx
new file mode 100644
index 0000000..3a0a504
--- /dev/null
+++ b/components/shared/SheenLoader.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react'
+
+// Children should be a shape or set of shapes with a bg color to animate over
+
+const SheenLoader = ({
+ children,
+ className,
+}: {
+ children: ReactNode
+ className?: string
+}) => {
+ return (
+
+ )
+}
+
+export default SheenLoader
diff --git a/pages/index.tsx b/pages/index.tsx
index 5c8396a..72fab3a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -34,7 +34,7 @@ const Index: NextPage = () => {
}, [selectedToken])
return (
-