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

buy token button on mobile

This commit is contained in:
saml33 2023-09-26 14:41:37 +10:00
parent 1cc547b272
commit 1bfabb24d9
5 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Layout.tsx
View File

@ -27,10 +27,10 @@ const Layout = ({ children }: { children: ReactNode }) => {
>
<SunburstBackground className="text-th-primary-1" />
<div className={`relative min-h-screen`}>
<div className="absolute bottom-0 h-44 w-full border-b-[20px] border-th-primary-4 bg-gradient-to-b from-th-primary-3 to-th-primary-2" />
<div className="border-th-primary-4 from-th-primary-3 to-th-primary-2 absolute bottom-0 h-44 w-full border-b-[20px] bg-gradient-to-b" />
<div className="relative z-10">
<TopBar />
<div className="mx-auto max-w-3xl px-6 pb-12 md:pb-20 lg:px-12">
<div className="mx-auto max-w-3xl px-6 pb-20 lg:px-12">
{children}
</div>
<DeployRefreshManager />

32
components/Stake.tsx
View File

@ -6,12 +6,15 @@ import UnstakeForm from '@components/UnstakeForm'
import mangoStore from '@store/mangoStore'
import { STAKEABLE_TOKENS } from 'utils/constants'
import { formatTokenSymbol } from 'utils/tokens'
import { useViewport } from 'hooks/useViewport'
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
const set = mangoStore.getState().set
const Stake = () => {
const [activeFormTab, setActiveFormTab] = useState('Add')
const selectedToken = mangoStore((s) => s.selectedToken)
const { isDesktop } = useViewport()
const handleTokenSelect = useCallback((token: string) => {
set((state) => {
@ -53,15 +56,28 @@ const Stake = () => {
</div>
</div>
{activeFormTab === 'Add' ? (
<div className="fixed bottom-8 left-8">
<button className="raised-button text-shadow flex h-20 w-20 items-center justify-center rounded-full border border-th-button-hover p-3 text-center text-base font-extrabold">
<div>
<p className="text-th-bkg-1">Buy</p>
<p className="-mt-1.5 text-th-bkg-1">
{formatTokenSymbol(selectedToken)}
</p>
<div className="fixed bottom-0 left-0 w-full md:bottom-8 md:left-8 md:w-auto">
{isDesktop ? (
<a className="raised-button text-shadow flex h-20 w-20 cursor-pointer items-center justify-center rounded-full border border-th-button-hover p-3 text-center text-base font-extrabold">
<div>
<p className="text-th-bkg-1">Buy</p>
<p className="-mt-1.5 text-th-bkg-1">
{formatTokenSymbol(selectedToken)}
</p>
</div>
</a>
) : (
<div className="flex justify-end border-t-2 border-th-fgd-1 bg-th-bkg-1 px-4 py-3">
<a>
<div className="flex items-center">
<span className="mr-1.5 font-bold">{`Buy ${formatTokenSymbol(
selectedToken,
)}`}</span>
<ArrowTopRightOnSquareIcon className="-mt-0.5 h-5 w-5" />
</div>
</a>
</div>
</button>
)}
</div>
) : null}
</>

18
components/TopBar.tsx
View File

@ -24,8 +24,8 @@ const TopBar = () => {
return (
<div className="mb-8 flex h-20 items-center justify-between px-6">
<Link href="/" shallow={true}>
<div className="flex items-center">
<BoostLogo className="h-auto w-10 shrink-0 cursor-pointer" />
<div className="group flex items-center">
<BoostLogo className="h-auto w-10 shrink-0 cursor-pointer group-hover:animate-shake" />
<span className="text-shadow ml-2 text-[27px] font-black text-th-bkg-1">
Boost!
</span>
@ -39,7 +39,7 @@ const TopBar = () => {
{connected ? <ConnectedMenu /> : <ConnectWalletButton />}
</div>
{!isOnline ? (
<div className="bg-th-down absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full px-4 py-2 md:top-8">
<div className="absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full bg-th-down px-4 py-2 md:top-8">
<ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-th-fgd-1" />
<p className="ml-2 text-th-fgd-1">
Your connection appears to be offline
@ -52,9 +52,15 @@ const TopBar = () => {
export default TopBar
const NavLink = (
{ active, path, text }: { active: boolean; path: string; text: string },
) => {
const NavLink = ({
active,
path,
text,
}: {
active: boolean
path: string
text: string
}) => {
return (
<Link href={path} shallow={true}>
<span

13
components/wallet/ConnectedMenu.tsx
View File

@ -53,16 +53,19 @@ const ConnectedMenu = () => {
isDesktop ? 'w-44' : 'w-12'
} focus:outline-none`}
>
<div className="ml-1.5 flex items-center" id="account-step-one">
<div
className="flex items-center justify-center md:ml-1.5 md:justify-start"
id="account-step-one"
>
{!mangoAccountLoading ? (
<ProfileImage
imageSize="40"
placeholderSize="24"
imageSize={!isDesktop ? '32' : '40'}
placeholderSize={!isDesktop ? '20' : '24'}
isOwnerProfile
/>
) : (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-th-bkg-2">
<Loading className="h-6 w-6" />
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-2 md:h-10 md:w-10">
<Loading className="h-5 w-5 md:h-6 md:w-6" />
</div>
)}
{!loadProfileDetails && isDesktop ? (

4
styles/globals.css
View File

@ -295,7 +295,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 {
@ -372,7 +372,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);
}