From 37bf6ba578b11925290e33353134971ab0482bf5 Mon Sep 17 00:00:00 2001 From: saml33 Date: Sun, 24 Sep 2023 22:55:00 +1000 Subject: [PATCH] more elements --- components/Layout.tsx | 15 ++- components/NavTabs.tsx | 35 +++++++ components/Positions.tsx | 180 +++++++++++++++++++---------------- components/StakeForm.tsx | 22 ++++- components/TopBar.tsx | 44 +++++++-- components/UnstakeForm.tsx | 6 +- components/faqs/FaqsPage.tsx | 50 ++++++++++ components/forms/Switch.tsx | 6 +- pages/faqs.tsx | 17 ++++ pages/index.tsx | 56 +++-------- styles/globals.css | 8 +- tailwind.config.js | 3 + yarn.lock | 7 +- 13 files changed, 291 insertions(+), 158 deletions(-) create mode 100644 components/NavTabs.tsx create mode 100644 components/faqs/FaqsPage.tsx create mode 100644 pages/faqs.tsx diff --git a/components/Layout.tsx b/components/Layout.tsx index 2548622..860cabc 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -24,11 +24,16 @@ const Layout = ({ children }: { children: ReactNode }) => {
-
- - {children} - - +
+
+
+ +
+ {children} +
+ + +
) diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx new file mode 100644 index 0000000..107084a --- /dev/null +++ b/components/NavTabs.tsx @@ -0,0 +1,35 @@ +type Values = string | number + +interface NavTabsProps { + activeValue: string + onChange: (x: T) => void + values: T[] + names?: Array +} + +const NavTabs = ({ + activeValue, + values, + names, + onChange, +}: NavTabsProps) => { + return ( + <> + {values.map((value, i) => ( + + ))} + + ) +} + +export default NavTabs diff --git a/components/Positions.tsx b/components/Positions.tsx index 6f41e9f..0030302 100644 --- a/components/Positions.tsx +++ b/components/Positions.tsx @@ -36,13 +36,16 @@ const Positions = ({ }, [group]) const positions = useMemo(() => { - if (!banks.length || !stakeAccounts?.length) return [] const positions = [] - for (const bank of banks) { - if (!bank) continue - const acct = stakeAccounts.find((acc) => acc.getTokenBalanceUi(bank) > 0) - const balance = acct ? acct.getTokenBalanceUi(bank) : 0 - positions.push({ balance, bank }) + if (banks.length) { + for (const bank of banks) { + if (!bank) continue + const acct = stakeAccounts?.find( + (acc) => acc.getTokenBalanceUi(bank) > 0, + ) + const balance = acct ? acct.getTokenBalanceUi(bank) : 0 + positions.push({ balance, bank }) + } } const sortedPositions = positions.sort((a, b) => b.balance - a.balance) return showInactivePositions @@ -50,8 +53,6 @@ const Positions = ({ : sortedPositions.filter((pos) => pos.balance > 0) }, [banks, showInactivePositions, stakeAccounts]) - console.log('positions', positions) - const numberOfPositions = useMemo(() => { if (!positions.length) return 0 return positions.filter((pos) => pos.balance > 0).length @@ -64,11 +65,11 @@ const Positions = ({ }) } - return positions.length ? ( -
-
-

{`You have ${numberOfPositions} active position${ - numberOfPositions > 1 ? 's' : '' + return ( + <> +

+

{`You have ${numberOfPositions} active position${ + numberOfPositions !== 1 ? 's' : '' }`}

-
- {positions.map((position, i) => { - const { balance, bank } = position - return bank ? ( -
-
-
- -
-

{formatTokenSymbol(bank.name)}

- + {positions.length ? ( + positions.map((position, i) => { + const { balance, bank } = position + return bank ? ( +
+
+
+
- {balance ? 'Opened 2 weeks ago' : 'No Position'} + +
+
+

+ {formatTokenSymbol(bank.name)} +

+ + {balance ? 'Opened 2 weeks ago' : 'No Position'} + +
+
+ +
+
+
+

Position Size

+ + {' '} + {formatTokenSymbol(bank.name)} + +
+
+

Est. APY

+ + {loadingRates ? ( + +
+ + ) : stakeRates?.[bank.name.toLowerCase()] ? ( + `${( + stakeRates?.[bank.name.toLowerCase()] * 100 + ).toFixed(2)}%` + ) : null} + +
+
+

Leverage

+ + {balance ? '3x' : '0x'} + +
+
+

Earned

+ + {balance ? '3.321 SOL' : '0 SOL'} + +
+
+

Liquidation Price

+ + {balance ? '1.234' : '0'}{' '} + {`${formatTokenSymbol(bank.name)}/SOL`}
-
-
-
-

Position Size

- - {' '} - {formatTokenSymbol(bank.name)} - -
-
-

Est. APY

- - {loadingRates ? ( - -
- - ) : stakeRates?.[bank.name.toLowerCase()] ? ( - `${(stakeRates?.[bank.name.toLowerCase()] * 100).toFixed( - 2, - )}%` - ) : null} - -
-
-

Leverage

- - {balance ? '3x' : '0x'} - -
-
-

Earned

- - {balance ? '3.321 SOL' : '0 SOL'} - -
-
-

Liquidation Price

- - {balance ? '1.234' : '0'}{' '} - {`${formatTokenSymbol(bank.name)}/SOL`} - -
-
-
- ) : null - })} + ) : null + }) + ) : ( +
+ Nothing to see here... +
+ )}
-
- ) : null + + ) } export default Positions diff --git a/components/StakeForm.tsx b/components/StakeForm.tsx index c09dbd1..807309f 100644 --- a/components/StakeForm.tsx +++ b/components/StakeForm.tsx @@ -41,6 +41,7 @@ import { MangoAccount } from '@blockworks-foundation/mango-v4' import { AnchorProvider } from '@project-serum/anchor' import useBankRates from 'hooks/useBankRates' import { Disclosure } from '@headlessui/react' +import SheenLoader from './shared/SheenLoader' const set = mangoStore.getState().set @@ -99,6 +100,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) { // const banks = useBanksWithBalances('walletBalance') const { usedTokens, totalTokens } = useMangoAccountAccounts() const { group } = useMangoGroup() + const groupLoaded = mangoStore((s) => s.groupLoaded) const { stakeBankDepositRate, borrowBankBorrowRate, @@ -320,14 +322,19 @@ function StakeForm({ token: selectedToken }: StakeFormProps) { {({ open }) => ( <>

Est. Net APY

- + + {estimatedNetAPY >= 0 + ? '+' + : estimatedNetAPY === 0 + ? '' + : '-'}
- +

{formatTokenSymbol(selectedToken)} Leveraged APY

+ {leveragedAPY > 0.01 ? '+' : ''} + {stakeBankDepositRate > 0.01 ? '+' : ''} + -
+ ) : !groupLoaded ? ( +
+ +
+ +
) : null}
{connected ? ( diff --git a/components/TopBar.tsx b/components/TopBar.tsx index 22c739d..9581f56 100644 --- a/components/TopBar.tsx +++ b/components/TopBar.tsx @@ -7,6 +7,8 @@ import ConnectWalletButton from './wallet/ConnectWalletButton' import useOnlineStatus from 'hooks/useOnlineStatus' import mangoStore from '@store/mangoStore' import ThemeToggle from './ThemeToggle' +import Link from 'next/link' +import { useRouter } from 'next/router' const TopBar = () => { const { connected } = useWallet() @@ -14,6 +16,8 @@ const TopBar = () => { const [copied, setCopied] = useState('') const isOnline = useOnlineStatus() + const router = useRouter() + const { pathname } = router useEffect(() => { setTimeout(() => setCopied(''), 2000) @@ -22,13 +26,15 @@ const TopBar = () => { return (
- logo + + logo + {!isOnline ? ( -
+

Your connection appears to be offline @@ -36,6 +42,10 @@ const TopBar = () => {

) : null}
+
+ + +
{connected ? : }
@@ -45,3 +55,25 @@ const TopBar = () => { } export default TopBar + +const NavLink = ({ + active, + path, + text, +}: { + active: boolean + path: string + text: string +}) => { + return ( + + + {text} + + + ) +} diff --git a/components/UnstakeForm.tsx b/components/UnstakeForm.tsx index 71c454d..7315bcb 100644 --- a/components/UnstakeForm.tsx +++ b/components/UnstakeForm.tsx @@ -298,14 +298,14 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) { {({ open }) => ( <>

Staked Amount

- +
- +

Staked Amount

diff --git a/components/faqs/FaqsPage.tsx b/components/faqs/FaqsPage.tsx new file mode 100644 index 0000000..634af64 --- /dev/null +++ b/components/faqs/FaqsPage.tsx @@ -0,0 +1,50 @@ +import { Disclosure } from '@headlessui/react' +import { ChevronDownIcon } from '@heroicons/react/20/solid' + +const FAQS = [ + { question: 'FAQ 1', answer: 'Answer' }, + { question: 'FAQ 2', answer: 'Answer' }, + { question: 'FAQ 3', answer: 'Answer' }, + { question: 'FAQ 4', answer: 'Answer' }, +] + +const FaqsPage = () => { + return ( +
+

FAQs

+

Need more info? Reach out to us on ...

+
+ {FAQS.map((faq) => { + const { question, answer } = faq + return ( + + {({ open }) => ( +
+ +
+

{question}

+ +
+ + +

{answer}

+ +
+ )} + + ) + })} +
+
+ ) +} + +export default FaqsPage diff --git a/components/forms/Switch.tsx b/components/forms/Switch.tsx index 4790425..7abf374 100644 --- a/components/forms/Switch.tsx +++ b/components/forms/Switch.tsx @@ -30,7 +30,7 @@ const Switch: FunctionComponent = ({ checked ? 'bg-th-success' : 'bg-th-bkg-4' } relative inline-flex ${ small ? 'h-4 w-8' : 'h-5 w-10' - } flex-shrink-0 cursor-pointer rounded-full + } inner-shadow-top-sm flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-th-fgd-4 ${ disabled ? 'opacity-60' : '' }`} @@ -50,8 +50,8 @@ const Switch: FunctionComponent = ({ : 'translate-x-0' } pointer-events-none inline-block ${ small ? 'h-3 w-3' : 'h-4 w-4' - } rounded-full - bg-white shadow ring-0 transition duration-200 ease-in-out`} + } inner-shadow-bottom-sm + rounded-full bg-white ring-0 transition duration-200 ease-in-out`} >
diff --git a/pages/faqs.tsx b/pages/faqs.tsx new file mode 100644 index 0000000..9a4fa45 --- /dev/null +++ b/pages/faqs.tsx @@ -0,0 +1,17 @@ +import FaqsPage from '@components/faqs/FaqsPage' +import type { NextPage } from 'next' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' + +export async function getStaticProps({ locale }: { locale: string }) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + }, + } +} + +const Faqs: NextPage = () => { + return +} + +export default Faqs diff --git a/pages/index.tsx b/pages/index.tsx index dfea153..6c09300 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,4 @@ +import NavTabs from '@components/NavTabs' import Positions from '@components/Positions' import Stake from '@components/Stake' import Stats from '@components/Stats' @@ -19,7 +20,7 @@ export async function getStaticProps({ locale }: { locale: string }) { } const Index: NextPage = () => { - const [activeTab, setActiveTab] = useState('Boost') + const [activeTab, setActiveTab] = useState('Boost!') const selectedToken = mangoStore((s) => s.selectedToken) useEffect(() => { @@ -41,51 +42,16 @@ const Index: NextPage = () => { }, [selectedToken]) return ( -
-
- - - - + <> +
+
-
+ ) } @@ -99,7 +65,7 @@ const TabContent = ({ setActiveTab: (tab: string) => void }) => { switch (activeTab) { - case 'Boost': + case 'Boost!': return case 'Positions': return diff --git a/styles/globals.css b/styles/globals.css index 4ff4572..6cc5176 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -98,6 +98,7 @@ th { --primary-1: theme('colors.light-theme.primary-1'); --primary-2: theme('colors.light-theme.primary-2'); --primary-3: theme('colors.light-theme.primary-3'); + --primary-4: theme('colors.light-theme.primary-4'); } [data-theme='Dark'] { @@ -124,6 +125,7 @@ th { --primary-1: theme('colors.dark-theme.primary-1'); --primary-2: theme('colors.dark-theme.primary-2'); --primary-3: theme('colors.dark-theme.primary-3'); + --primary-4: theme('colors.dark-theme.primary-4'); } /* Base */ @@ -158,7 +160,7 @@ h1, h2, h3, h4 { - @apply font-bold text-th-fgd-1; + @apply font-display text-th-fgd-1; } h1 { @@ -290,7 +292,7 @@ table p { } #range-slider-gradient .range-slider__thumb[data-upper] { - @apply h-7 w-4 rounded-full border border-th-primary-3 bg-th-primary-1 shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)]; + @apply border-th-primary-3 bg-th-primary-1 h-7 w-4 rounded-full border shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)]; } #range-slider-gradient .range-slider__range { @@ -382,7 +384,7 @@ table p { } .raised-button-primary { - @apply relative bg-th-primary-1 transition-none; + @apply bg-th-primary-1 relative transition-none; box-shadow: 0 4px var(--primary-3); } diff --git a/tailwind.config.js b/tailwind.config.js index e06702f..b85cc50 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -44,6 +44,7 @@ module.exports = { 'primary-1': '#99ADD9', 'primary-2': '#889FD3', 'primary-3': '#728DC8', + 'primary-4': '#627DB8', }, 'dark-theme': { active: { @@ -74,6 +75,7 @@ module.exports = { 'primary-1': '#99ADD9', 'primary-2': '#889FD3', 'primary-3': '#728DC8', + 'primary-4': '#627DB8', }, 'th-bkg-1': 'var(--bkg-1)', 'th-bkg-2': 'var(--bkg-2)', @@ -98,6 +100,7 @@ module.exports = { 'th-primary-1': 'var(--primary-1)', 'th-primary-2': 'var(--primary-2)', 'th-primary-3': 'var(--primary-3)', + 'th-primary-4': 'var(--primary-4)', }, cursor: { help: 'help', diff --git a/yarn.lock b/yarn.lock index 629d689..0078e3b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4051,12 +4051,7 @@ copy-to-clipboard@^3.3.1: dependencies: toggle-selection "^1.0.6" -core-js@^3: - version "3.29.0" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.29.0.tgz#0273e142b67761058bcde5615c503c7406b572d6" - integrity sha512-VG23vuEisJNkGl6XQmFJd3rEG/so/CNatqeE+7uZAwTSwFeB/qaO0be8xZYUNWprJ/GIwL8aMt9cj1kvbpTZhg== - -core-js@^3.22.4: +core-js@^3, core-js@^3.22.4: version "3.32.2" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.2.tgz#172fb5949ef468f93b4be7841af6ab1f21992db7" integrity sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==