add app cta bar
This commit is contained in:
saml33
parent
eef2e2c709
commit
f659fe1548
|
|
@ -1,68 +0,0 @@
|
|||
import { FunctionComponent } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import tw from 'twin.macro'
|
||||
|
||||
export const idleGradient = 'bg-gradient-to-r from-yellow-100 to-white'
|
||||
export const activeGradient =
|
||||
'bg-gradient-to-bl from-yellow-300 via-primary-dark to-secondary-1-light'
|
||||
|
||||
const StyledButton = styled.button<ButtonProps>`
|
||||
:before {
|
||||
${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500`}
|
||||
${({ gray }) => (gray ? tw`bg-bkg-3` : tw`${activeGradient}`)}
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
:hover {
|
||||
:before {
|
||||
${tw`opacity-100`}
|
||||
}
|
||||
}
|
||||
|
||||
:focus {
|
||||
${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
|
||||
}
|
||||
|
||||
:active {
|
||||
:before {
|
||||
${tw`ring-2 ring-secondary-2-light ring-opacity-40`}
|
||||
}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
${tw`cursor-not-allowed opacity-60`}
|
||||
:before {
|
||||
${tw`hidden`}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
interface ButtonProps {
|
||||
className?: string
|
||||
gray?: boolean
|
||||
onClick?: () => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const ButtonWhite: FunctionComponent<ButtonProps> = ({
|
||||
children,
|
||||
className,
|
||||
gray,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
className={`${className} relative z-10 px-6 py-2 rounded-full text-bkg-4 hover:text-white font-bold ${
|
||||
gray ? 'bg-bkg-4' : idleGradient
|
||||
}`}
|
||||
gray={gray}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</StyledButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonWhite
|
||||
|
|
@ -1,325 +0,0 @@
|
|||
import Button from './shared/Button'
|
||||
import LinkLeft from './LinkLeft'
|
||||
import Link from './Link'
|
||||
|
||||
const PuzzlePieceIcon = () => (
|
||||
<svg
|
||||
width="31"
|
||||
height="31"
|
||||
viewBox="0 0 31 31"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15.5 2.90625C15.5 1.30117 16.8012 0 18.4062 0C20.0113 0 21.3125 1.30117 21.3125 2.90625V3.875C21.3125 4.94505 22.1799 5.8125 23.25 5.8125H29.0625C30.1326 5.8125 31 6.67995 31 7.75V13.5625C31 14.6326 30.1326 15.5 29.0625 15.5H28.0938C26.4887 15.5 25.1875 16.8012 25.1875 18.4062C25.1875 20.0113 26.4887 21.3125 28.0938 21.3125H29.0625C30.1326 21.3125 31 22.1799 31 23.25V29.0625C31 30.1326 30.1326 31 29.0625 31H23.25C22.1799 31 21.3125 30.1326 21.3125 29.0625V28.0938C21.3125 26.4887 20.0113 25.1875 18.4062 25.1875C16.8012 25.1875 15.5 26.4887 15.5 28.0938V29.0625C15.5 30.1326 14.6326 31 13.5625 31H7.75C6.67995 31 5.8125 30.1326 5.8125 29.0625V23.25C5.8125 22.1799 4.94505 21.3125 3.875 21.3125H2.90625C1.30117 21.3125 0 20.0113 0 18.4062C0 16.8012 1.30117 15.5 2.90625 15.5H3.875C4.94505 15.5 5.8125 14.6326 5.8125 13.5625V7.75C5.8125 6.67995 6.67995 5.8125 7.75 5.8125H13.5625C14.6326 5.8125 15.5 4.94505 15.5 3.875V2.90625Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear"
|
||||
x1="-15.5"
|
||||
y1="-5.8125"
|
||||
x2="53.2813"
|
||||
y2="31"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.520833" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const ShieldCheckIcon = () => (
|
||||
<svg
|
||||
width="31"
|
||||
height="32"
|
||||
viewBox="0 0 31 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.321833 5.96983C6.15035 5.89006 11.4609 3.6468 15.5 0C19.5391 3.6468 24.8497 5.89006 30.6782 5.96983C30.8898 7.24175 31 8.54838 31 9.88098C31 20.0928 24.5302 28.7803 15.5 32C6.46976 28.7803 0 20.0928 0 9.88098C0 8.54838 0.110173 7.24175 0.321833 5.96983ZM22.6825 13.2174C23.4392 12.4541 23.4392 11.2166 22.6825 10.4534C21.9259 9.6901 20.6991 9.6901 19.9425 10.4534L13.5625 16.8892L11.0575 14.3623C10.3009 13.599 9.07412 13.599 8.31748 14.3623C7.56084 15.1256 7.56084 16.3631 8.31748 17.1263L12.1925 21.0353C12.9491 21.7986 14.1759 21.7986 14.9325 21.0353L22.6825 13.2174Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear"
|
||||
x1="-46.5"
|
||||
y1="-11.7268"
|
||||
x2="31.4001"
|
||||
y2="38.4685"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.520833" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const ScaleIcon = () => (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16 0C17.1045 0 17.9999 0.89543 17.9999 2V4.64593L25.9086 7.80949L29.1052 6.21115C30.0931 5.71717 31.2945 6.11762 31.7884 7.10557C32.2824 8.09353 31.8819 9.29488 30.894 9.78885L28.4278 11.022L31.904 21.8614C32.1451 22.613 31.9215 23.436 31.3334 23.9624C29.9194 25.228 28.0473 26 25.9997 26C23.9521 26 22.08 25.228 20.666 23.9624C20.0779 23.436 19.8544 22.613 20.0954 21.8614L23.526 11.1645L17.9999 8.95407V28H21.9998C23.1044 28 23.9998 28.8954 23.9998 30C23.9998 31.1046 23.1044 32 21.9998 32H10.0002C8.89562 32 8.00022 31.1046 8.00022 30C8.00022 28.8954 8.89562 28 10.0002 28H14.0001V8.95407L8.47403 11.1645L11.9046 21.8614C12.1456 22.613 11.9221 23.436 11.334 23.9624C9.91997 25.228 8.04788 26 6.00027 26C3.95267 26 2.08058 25.228 0.666592 23.9624C0.0784726 23.436 -0.145058 22.613 0.0959823 21.8614L3.57223 11.022L1.10598 9.78885C0.118051 9.29488 -0.282387 8.09353 0.211578 7.10557C0.705543 6.11762 1.90686 5.71717 2.89479 6.21115L6.09139 7.80949L14.0001 4.64593V2C14.0001 0.89543 14.8955 0 16 0ZM6.00027 16.549L4.36384 21.6515C4.863 21.8757 5.41635 22 6.00027 22C6.5842 22 7.13755 21.8757 7.6367 21.6515L6.00027 16.549ZM25.9997 16.549L24.3633 21.6515C24.8624 21.8757 25.4158 22 25.9997 22C26.5837 22 27.137 21.8757 27.6362 21.6515L25.9997 16.549Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear"
|
||||
x1="-19.5"
|
||||
y1="-1.3609e-06"
|
||||
x2="85.5"
|
||||
y2="70"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.505208" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#111827" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const LightBulbIcon = () => (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18 2C18 0.895431 17.1046 0 16 0C14.8954 0 14 0.895431 14 2V4C14 5.10457 14.8954 6 16 6C17.1046 6 18 5.10457 18 4V2Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<path
|
||||
d="M27.3136 7.51461C28.0947 6.73356 28.0947 5.46723 27.3136 4.68619C26.5326 3.90514 25.2662 3.90514 24.4852 4.68619L23.071 6.1004C22.2899 6.88145 22.2899 8.14778 23.071 8.92883C23.852 9.70988 25.1184 9.70988 25.8994 8.92883L27.3136 7.51461Z"
|
||||
fill="url(#paint1_linear)"
|
||||
/>
|
||||
<path
|
||||
d="M32 16C32 17.1046 31.1046 18 30 18H28C26.8954 18 26 17.1046 26 16C26 14.8954 26.8954 14 28 14H30C31.1046 14 32 14.8954 32 16Z"
|
||||
fill="url(#paint2_linear)"
|
||||
/>
|
||||
<path
|
||||
d="M6.10038 8.92886C6.88143 9.70991 8.14776 9.70991 8.9288 8.92886C9.70985 8.14781 9.70985 6.88148 8.9288 6.10044L7.51459 4.68622C6.73354 3.90517 5.46721 3.90517 4.68616 4.68622C3.90511 5.46727 3.90512 6.7336 4.68616 7.51465L6.10038 8.92886Z"
|
||||
fill="url(#paint3_linear)"
|
||||
/>
|
||||
<path
|
||||
d="M6 16C6 17.1046 5.10457 18 4 18H2C0.895431 18 -2.38419e-07 17.1046 0 16C0 14.8954 0.895431 14 2 14H4C5.10457 14 6 14.8954 6 16Z"
|
||||
fill="url(#paint4_linear)"
|
||||
/>
|
||||
<path
|
||||
d="M12 28V26H20V28C20 30.2091 18.2091 32 16 32C13.7909 32 12 30.2091 12 28Z"
|
||||
fill="url(#paint5_linear)"
|
||||
/>
|
||||
<path
|
||||
d="M20.0018 24C20.031 23.3193 20.4152 22.7074 20.9536 22.2823C22.8091 20.8172 24 18.5477 24 16C24 11.5817 20.4183 8 16 8C11.5817 8 8 11.5817 8 16C8 18.5477 9.1909 20.8172 11.0464 22.2823C11.5848 22.7074 11.969 23.3193 11.9982 24H20.0018Z"
|
||||
fill="url(#paint6_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear"
|
||||
x1="-41"
|
||||
y1="-41"
|
||||
x2="29"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.583333" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear"
|
||||
x1="-41"
|
||||
y1="-41"
|
||||
x2="29"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.583333" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear"
|
||||
x1="-41"
|
||||
y1="-41"
|
||||
x2="29"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.583333" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear"
|
||||
x1="-41"
|
||||
y1="-41"
|
||||
x2="29"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.583333" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear"
|
||||
x1="-41"
|
||||
y1="-41"
|
||||
x2="29"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.583333" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear"
|
||||
x1="-41"
|
||||
y1="-41"
|
||||
x2="29"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.583333" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint6_linear"
|
||||
x1="-41"
|
||||
y1="-41"
|
||||
x2="29"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#E54033" />
|
||||
<stop offset="0.583333" stopColor="#FECA1A" />
|
||||
<stop offset="1" stopColor="#AFD803" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const CommunityCard = (props) => (
|
||||
<div className="flex col-span-2 xl:col-span-1">
|
||||
<div className="flex flex-col bg-th-fgd-4 border border-bkg-3 py-8 px-8 h-auto w-auto shadow-md rounded-xl transform transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-lg hover:bg-bkg-3">
|
||||
{' '}
|
||||
{props.icon}
|
||||
<p className="text-lg font-bold py-6 pb-2">{props.title}</p>
|
||||
<div className="flex flex-col">
|
||||
<p className="text-md text-white text-opacity-50 pb-2">
|
||||
{props.children}
|
||||
</p>
|
||||
<LinkLeft href={props.href}>{props.cta}</LinkLeft>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const CommunitySection = () => {
|
||||
return (
|
||||
<div className="">
|
||||
<div className="bg-th-bkg-3 border border-bkg-3 h-2150 transform -skew-y-3 pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-48 -mt-40 sm:mt-30">
|
||||
<div className="max-w-7xl mx-auto px-4 transform skew-y-3">
|
||||
<section className="py-12 px-3 lg:mt-60 md:mt-24 sm:mt-36 xs:mt-60">
|
||||
<div className="flex flex-wrap justify-center items-center lg:text-center md:text-center sm:text-left">
|
||||
<div className="px-2 order-1 lg:order-none">
|
||||
<h2 className="mb-6 leading-tight font-semibold font-heading lg:text-5xl md:text-4xl sm:text-4xl xs:text-3xl">
|
||||
Even better together.
|
||||
</h2>
|
||||
<p className="mb-8 text-white text-opacity-50 leading-relaxed lg:text-2xl md:text-2xl sm:text-2xl xs:text-lg">
|
||||
Mango wants to merge the liquidity and usability of CeFi with
|
||||
the permissionless innovation of DeFi. All our work is open
|
||||
source for anyone to use and contribute.
|
||||
</p>
|
||||
<div className="flex flex-row justify-center">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://discord.gg/2uwjsBc5yw"
|
||||
>
|
||||
<Button>Join discord</Button>
|
||||
</a>
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://docs.mango.markets/litepaper"
|
||||
>
|
||||
<Link>Learn more</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="py-12 px-3">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
|
||||
<CommunityCard
|
||||
icon={<PuzzlePieceIcon />}
|
||||
title="Open by default"
|
||||
cta="Find us on github"
|
||||
href="https://github.com/blockworks-foundation"
|
||||
>
|
||||
All pieces of the mango protocol puzzle are completely open
|
||||
source. Run it, mod it, improve it, we are a community driven
|
||||
organization.
|
||||
</CommunityCard>
|
||||
<CommunityCard
|
||||
icon={<ShieldCheckIcon />}
|
||||
title="Liquidator Program"
|
||||
cta="Become a liquidator"
|
||||
href="https://gitlab.com/OpinionatedGeek/mango-explorer/-/blob/master/Quickstart.md"
|
||||
>
|
||||
Liquidators protect the capital of lenders. They help ensure
|
||||
the protocol funds stay safe even when the markets move
|
||||
quickly and borrowers default.
|
||||
</CommunityCard>
|
||||
<CommunityCard
|
||||
icon={<ScaleIcon />}
|
||||
title="Market Making"
|
||||
cta="Become a market maker"
|
||||
href="https://gitlab.com/OpinionatedGeek/mango-explorer/-/blob/master/mango/marketmaking/simplemarketmaker.py"
|
||||
>
|
||||
Learn about market making on the mango protocol and earn $MNGO
|
||||
in return for providing liquidity to the traders on Mango
|
||||
Markets.
|
||||
</CommunityCard>
|
||||
<CommunityCard
|
||||
icon={<LightBulbIcon />}
|
||||
title="Want to help build?"
|
||||
cta="Become a contributor"
|
||||
href="https://trello.com/c/0iz8GfW6/32-how-to-use-this-board"
|
||||
>
|
||||
We always welcome new contributors! We commit to distribute
|
||||
the largest portion of the DAO’s power and wealth to future
|
||||
contributors.
|
||||
</CommunityCard>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CommunitySection
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
import { Fragment, FunctionComponent, ReactNode } from 'react'
|
||||
import { Listbox, Transition } from '@headlessui/react'
|
||||
|
||||
type DropMenuProps = {
|
||||
button: ReactNode
|
||||
buttonClassName?: string
|
||||
disabled?: boolean
|
||||
onChange: (...args: any[]) => any
|
||||
options: Array<any>
|
||||
value?: any
|
||||
}
|
||||
|
||||
const DropMenu: FunctionComponent<DropMenuProps> = ({
|
||||
button,
|
||||
buttonClassName,
|
||||
disabled,
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`relative`}>
|
||||
<Listbox value={value} onChange={onChange}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button
|
||||
className={`${buttonClassName} default-transition`}
|
||||
disabled={disabled}
|
||||
>
|
||||
{button}
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute z-50 mt-4 py-2 px-2 right-0 w-auto bg-th-bkg-2 shadow-lg rounded-md`}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<Listbox.Option key={option.name} value={option.name}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`p-2 hover:bg-th-bkg-3 hover:cursor-pointer hover:rounded-md hover:shadow-md tracking-wider ${
|
||||
selected && `text-th-primary`
|
||||
} ${option.icon && `flex items-center`}`}
|
||||
>
|
||||
{option.icon ? (
|
||||
<div className="mr-2">{option.icon}</div>
|
||||
) : null}
|
||||
{option.name}
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DropMenu
|
||||
|
|
@ -1,337 +0,0 @@
|
|||
import Button from './shared/Button'
|
||||
//import ButtonWhite from './ButtonWhite'
|
||||
|
||||
import {
|
||||
ReceiptTaxIcon,
|
||||
LightningBoltIcon,
|
||||
CurrencyDollarIcon,
|
||||
LibraryIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import LinkLeft from './LinkLeft'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Maximum capital efficiency.',
|
||||
description:
|
||||
"Every market is cross-collateralized. Mango's risk engine let's you utilize all your assets and derivative contracts as collateral.",
|
||||
icon: CurrencyDollarIcon,
|
||||
},
|
||||
{
|
||||
name: 'Sub-second latency.',
|
||||
description:
|
||||
'Instant order execution at the price of less than a cent. Low latency allows market makers to post tight spreads on the books. Oh, and liquidations are instant as well, so watch your exposure.',
|
||||
icon: LightningBoltIcon,
|
||||
},
|
||||
{
|
||||
name: 'The lowest fees.',
|
||||
description:
|
||||
'Trade with the lowest fee possible. SRM deposits are pooled for a collective discount. Mango is the first protocol to charge zero fees on margin borrowing & lending.',
|
||||
icon: ReceiptTaxIcon,
|
||||
},
|
||||
{
|
||||
name: 'Spot & perpetual markets.',
|
||||
description:
|
||||
'Trade spot markets and derivitive assets all in one unified experience. Spot margin with up to 5x leverage, perpetuals futures with up to 20x.',
|
||||
icon: LibraryIcon,
|
||||
},
|
||||
]
|
||||
|
||||
const FeatureSection = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="bg-th-bkg-3 transform -skew-y-3 pt-16 pb-32 lg:pb-48 mb-48 lg:mb-48 -mt-64">
|
||||
<div className="max-w-7xl mx-auto px-4 transform skew-y-3">
|
||||
<section className="py-16 md:py-28 px-4">
|
||||
<div className="relative pt-16 pb-12">
|
||||
<div className="relative">
|
||||
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
||||
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
|
||||
<div>
|
||||
<div className="mt-6">
|
||||
<h2 className="lg:text-4xl sm:text-3xl text-3xl text-white font-bold font-heading">
|
||||
Completely permissionless.
|
||||
</h2>
|
||||
<p className="mt-4 text-xl text-gray-400">
|
||||
Open source, all data is on-chain. Trade spot margined
|
||||
markets and leveraged perpetual futures all
|
||||
cross-collateralized with up to 10x leverage.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets/accounts"
|
||||
>
|
||||
<Button>Start trading today</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 sm:mt-16 lg:mt-0">
|
||||
<div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-650">
|
||||
<img
|
||||
className="-mt-20 w-full rounded-xl shadow-xl lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
|
||||
src="../img/feature-cta2.png"
|
||||
alt="mango markets"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<div className="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<svg
|
||||
className="absolute top-0 left-full transform -translate-x-1/2 -translate-y-3/4 lg:left-auto lg:right-full lg:translate-x-2/3 lg:translate-y-1/4"
|
||||
width={404}
|
||||
height={784}
|
||||
fill="none"
|
||||
viewBox="0 0 404 784"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="8b1b5f72-e944-4457-af67-0c6d15a99f38"
|
||||
x={0}
|
||||
y={0}
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
className="text-th-fgd-4"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width={404}
|
||||
height={784}
|
||||
fill="url(#8b1b5f72-e944-4457-af67-0c6d15a99f38)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div className="relative lg:grid lg:grid-cols-3 lg:gap-x-8">
|
||||
<div className="lg:col-span-1">
|
||||
<h2 className="lg:text-4xl sm:text-3xl text-3xl text-white font-bold font-heading">
|
||||
Love trading again.
|
||||
</h2>
|
||||
{/*
|
||||
<div className="pt-6">
|
||||
<blockquote>
|
||||
<div>
|
||||
<p className="text-base text-gray-500">
|
||||
“Cras velit quis eros eget rhoncus lacus
|
||||
ultrices sed diam. Sit orci risus aenean curabitur
|
||||
donec aliquet. Mi venenatis in euismod ut.”
|
||||
</p>
|
||||
</div>
|
||||
<footer className="mt-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="h-6 w-6 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="text-base font-bold text-mango-yellow">
|
||||
@troll_arse
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
|
||||
<dl className="mt-10 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt>
|
||||
<div className="flex items-center justify-center h-12 w-12 rounded-md bg-bkg-3 text-mango-yellow">
|
||||
<feature.icon
|
||||
className="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-5 text-xl my-3 font-semibold font-heading">
|
||||
{feature.name}
|
||||
</p>
|
||||
</dt>
|
||||
<dd className="mt-2 text-base text-gray-500">
|
||||
{feature.description}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<section className="py-16 md:py-28 px-4">
|
||||
<div className="relative pt-16 pb-12">
|
||||
<div className="relative">
|
||||
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
||||
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
|
||||
<div>
|
||||
<div className="mt-6">
|
||||
<h2 className="lg:text-4xl sm:text-3xl text-3xl text-white font-bold font-heading">
|
||||
More than an exchange.
|
||||
</h2>
|
||||
<p className="mt-4 text-xl text-gray-400">
|
||||
Mango gives full control and tracking over assets right
|
||||
from the account hub. Earn interest on deposits and borrow
|
||||
against collateral all in one single place.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets/accounts"
|
||||
>
|
||||
<Button>Open a 🥭 account</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/*
|
||||
<div className="mt-8 pt-6">
|
||||
<blockquote>
|
||||
<div>
|
||||
<p className="text-base text-gray-400">
|
||||
“Cras velit quis eros eget rhoncus lacus
|
||||
ultrices sed diam. Sit orci risus aenean curabitur
|
||||
donec aliquet. Mi venenatis in euismod ut.”
|
||||
</p>
|
||||
</div>
|
||||
<div className="z-0 relative -bottom-72 -right-96 lg:-bottom-96 ">
|
||||
<div className="absolute bottom-4 left-8 w-450 h-450 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-5 animate-blob"></div>
|
||||
<div className="absolute bottom-4 w-450 h-450 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-20 animate-blob animation-delay-4000"></div>
|
||||
<div className="absolute bottom-8 left-20 w-450 h-450 bg-mango-green mix-blend-screen rounded-full filter blur-2xl opacity-10 animate-blob animation-delay-2000"></div>
|
||||
</div>
|
||||
<footer className="mt-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="h-6 w-6 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="text-base font-bold text-mango-yellow">
|
||||
@troll_arse
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
*/}
|
||||
<div className="z-0 relative -bottom-72 -right-96 lg:-bottom-96 ">
|
||||
<div className="absolute bottom-4 left-8 w-450 h-450 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-5 animate-blob"></div>
|
||||
<div className="absolute bottom-4 w-450 h-450 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-20 animate-blob animation-delay-4000"></div>
|
||||
<div className="absolute bottom-8 left-20 w-450 h-450 bg-mango-green mix-blend-screen rounded-full filter blur-2xl opacity-10 animate-blob animation-delay-2000"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 sm:mt-16 lg:mt-0">
|
||||
<div className="z-10 pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-650">
|
||||
<img
|
||||
className="-mt-12 w-full rounded-xl shadow-xl lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
|
||||
src="../img/feature-cta1.png"
|
||||
alt="Inbox user interface"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="max-w-7xl mx-auto px-8">
|
||||
<div className="grid grid-cols-3 gap-6 mb-6">
|
||||
<div className="lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3">
|
||||
<div className="z-10 bg-th-fgd-4 border border-bkg-3 bg-product-one bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
|
||||
You are in control.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-lg">
|
||||
You have self-custody of your assets; no more centralized
|
||||
counter-party risk.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
|
||||
<div className="z-50 bg-th-fgd-4 border border-bkg-3 bg-product-two bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
|
||||
Fully customize your experience.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-lg">
|
||||
Complete control over layout, theme, and your trading view.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
|
||||
<div className="z-10 bg-th-fgd-4 border border-bkg-3 bg-product-three bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
|
||||
Trade management simplified.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-lg">
|
||||
Track your futures positions, liabilities, create
|
||||
sub-accounts and track progress overtime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3">
|
||||
<div className="z-10 bg-th-fgd-4 border border-bkg-3 bg-product-four bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
|
||||
Organically grown, fully opensource.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-lg">
|
||||
Mango markets are grown organically with no pesticides,
|
||||
trade and manage your assets with the best in class user
|
||||
interface, built by traders for traders.
|
||||
</p>
|
||||
<br />
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://github.com/blockworks-foundation/mango-ui-v3"
|
||||
>
|
||||
<LinkLeft>Run it yourself locally</LinkLeft>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeatureSection
|
||||
|
|
@ -1,255 +0,0 @@
|
|||
import { useState } from 'react'
|
||||
//import MangoPill from '../components/MangoPill'
|
||||
import Button from './shared/Button'
|
||||
import ButtonWhite from './ButtonWhite'
|
||||
|
||||
//const doNothing = (e) => {
|
||||
// e.stopPropagation()
|
||||
//}
|
||||
|
||||
const FooterSection = () => {
|
||||
const [done, setDone] = useState(false)
|
||||
const [email, setEmail] = useState('')
|
||||
|
||||
const handleChange = (e) => {
|
||||
setEmail(e.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
await fetch('/api/signup', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email }),
|
||||
})
|
||||
|
||||
setDone(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="z-50 mx-auto max-w-7xl pt-0 pb-16 px-8 my-16 mt-0">
|
||||
<div className="transform transition duration-200 ease-in-out hover:-translate-y-2 h-80 bg-bkg-2 border border-mango-orange rounded-xl shadow-md overflow-hidden lg:grid lg:grid-cols-2 lg:gap-2 mt-8 bg-bg-cta bg-cover bg-bottom bg-no-repeat">
|
||||
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
|
||||
<div className="lg:self-center">
|
||||
<h2 className="text-5xl font-extrabold text-white">
|
||||
<span className="block">
|
||||
Every market cross-collateralized.
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div className="pt-8">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets/market?name=BTC-PERP"
|
||||
>
|
||||
<ButtonWhite>Start trading now</ButtonWhite>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
|
||||
<img
|
||||
className="transform translate-x-2 translate-y-2 object-cover object-left-top sm:translate-x-12 lg:translate-y-16"
|
||||
src="../img/tilted.png"
|
||||
alt="mango markets"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-bg-texture bg-cover bg-bottom bg-no-repeat">
|
||||
<div className="max-w-7xl mx-auto ">
|
||||
<section className="py-8 px-4">
|
||||
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<h2 className="inline text-3xl font-extrabold sm:block sm:text-4xl">
|
||||
Want product news and updates?{' '}
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green sm:block sm:text-4xl">
|
||||
Sign up for our newsletter.
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<form className="mt-8 sm:flex" onSubmit={handleSubmit}>
|
||||
<label className="sr-only">Email address</label>
|
||||
{done ? (
|
||||
<span>Thank you for signing up! 🎉</span>
|
||||
) : (
|
||||
<>
|
||||
<input
|
||||
id="email-address"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="w-full px-5 py-2 placeholder-gray-400 text-black text-opacity-80 sm:max-w-xs border-gray-300 rounded-full focus:outline-none"
|
||||
placeholder="Drop us your email..."
|
||||
value={email}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<Button>
|
||||
<span className="">Sign me up!</span>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
<div className="w-full mt-4">
|
||||
<p className="text-xl text-white text-opacity-50">
|
||||
We promise to never spam and only send alpha.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="py-20 px-4">
|
||||
<div className="px-4 py-8 mx-auto">
|
||||
<div className="flex flex-wrap -mx-4 mb-8 lg:mb-16">
|
||||
<div className="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
|
||||
<a className="text-gray-600 text-2xl leading-none" href="#">
|
||||
<img
|
||||
className="h-8"
|
||||
src="img/logo_mango.svg"
|
||||
alt=""
|
||||
width="auto"
|
||||
/>
|
||||
</a>
|
||||
<p className="mt-5 mb-6 max-w-xs text-gray-500 leading-loose">
|
||||
Mango is a decentralized autonomous organization.{' '}
|
||||
</p>
|
||||
<div className="flex flex-row">
|
||||
<a
|
||||
className="flex h-6 w-6 m-2"
|
||||
href="https://github.com/blockworks-foundation"
|
||||
>
|
||||
<img className="mx-auto" src="socials/github.svg" />
|
||||
</a>
|
||||
<a
|
||||
className="flex h-6 w-6 m-2"
|
||||
href="https://discord.gg/2uwjsBc5yw"
|
||||
>
|
||||
<img className="mx-auto" src="socials/discord.svg" />
|
||||
</a>
|
||||
<a
|
||||
className="flex h-6 w-6 m-2"
|
||||
href="https://twitter.com/mangomarkets"
|
||||
>
|
||||
<img className="mx-auto" src="socials/twitter.svg" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-2/3 px-4">
|
||||
<div className="flex flex-wrap justify-between">
|
||||
<div className="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
|
||||
<h3 className="mb-6 text-lg font-bold font-heading">
|
||||
Products
|
||||
</h3>
|
||||
<ul className="text-sm">
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://trade.mango.markets/"
|
||||
>
|
||||
Spot Markets
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://trade.mango.markets/perp/BTC"
|
||||
>
|
||||
Perpetual Futures
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://trade.mango.markets/borrow"
|
||||
>
|
||||
Decentralized Lending
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://github.com/blockworks-foundation/mango-explorer/blob/main/docs/LiquidatorQuickstart.md"
|
||||
>
|
||||
Liquidator Program
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
|
||||
<h3 className="mb-6 text-lg font-bold font-heading">
|
||||
Developers
|
||||
</h3>
|
||||
<ul className="text-sm">
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://docs.mango.markets/"
|
||||
>
|
||||
Explore the docs
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://trello.com/c/0iz8GfW6/32-how-to-use-this-board"
|
||||
>
|
||||
Start contributing
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://github.com/blockworks-foundation/mango-explorer/blob/main/docs/MarketmakingIntroduction.md"
|
||||
>
|
||||
Become a market maker
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-1/2 lg:w-1/4">
|
||||
<h3 className="mb-6 text-lg font-bold font-heading">
|
||||
Contact
|
||||
</h3>
|
||||
<ul className="text-sm">
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://discord.gg/2uwjsBc5yw"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4">
|
||||
<a
|
||||
className="text-gray-500 hover:text-gray-600 transition duration-100 ease-in-out"
|
||||
href="https://twitter.com/mangomarkets"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-8">
|
||||
<p className="lg:text-center text-sm text-white text-opacity-20">
|
||||
All rights reserved © Blockworks Foundation 2021
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FooterSection
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
//import Button from './Button'
|
||||
//import Link from './Link'
|
||||
|
||||
import GradientText from './GradientText'
|
||||
|
||||
const HeroSectionMarkets = () => {
|
||||
return (
|
||||
<div className="">
|
||||
<section className="bg-hero-img bg-no-repeat bg-cover bg-top">
|
||||
<div className="sm:px-4 px-2 mx-auto">
|
||||
<div className="relative py-24 mb-56">
|
||||
<div className="max-w-4xl mb-16 mx-auto text-center">
|
||||
<h2 className="mb-3 lg:text-5xl sm:text-4xl text-3xl text-white font-bold font-heading">
|
||||
Trading & lending <GradientText>Mangofied.</GradientText>
|
||||
</h2>
|
||||
<p className="text-gray-400 sm:px-0 px-2 lg:text-2xl sm:text-xl text-lg">
|
||||
Mango provides markets with deep liquidity, spot margin,
|
||||
leveraged derivatives, and risk management tools
|
||||
for traders all while earning interest on collateral.
|
||||
</p>
|
||||
{/*
|
||||
<div className="flex lg:flex-row md:flex-row sm: flex-row xs:flex-col justify-center py-8">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets"
|
||||
>
|
||||
<Button>Start trading</Button>
|
||||
</a>
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://docs.mango.markets/tutorials/trade-on-mango.markets"
|
||||
>
|
||||
<div className="xs:relative mt-2 sm:mt-0 left-12 sm:left-0">
|
||||
<Link>Learn how to trade on Mango</Link>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/*
|
||||
<section className="py-12 px-3 bg-hero-img bg-no-repeat bg-cover">
|
||||
<div className="flex flex-wrap items-center text-center lg:text-left -mx-2">
|
||||
<div className="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
|
||||
<h2 className="text-5xl mb-6 leading-tight font-semibold font-heading">
|
||||
Simple, intuitive, and fast.{' '}
|
||||
</h2>
|
||||
<p className="mb-8 text-gray-400 leading-relaxed">
|
||||
The Mango margin protocol is a fully open-source margin trading
|
||||
exchange. Its best in class user interface provides access to
|
||||
deep liquidity and high leverage for traders, built by traders.{' '}
|
||||
</p>
|
||||
<div>
|
||||
<Button>Start trading</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroSectionMarkets
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import PercentPill from './PercentPill'
|
||||
|
||||
interface LendCardProps {
|
||||
name: string
|
||||
icon: string
|
||||
bg: string
|
||||
interest: { deposit: number; borrow: number }
|
||||
liquidity: { native: number; usd: number }
|
||||
}
|
||||
|
||||
const LendCard = (props: LendCardProps) => {
|
||||
const format = (val: number, digits: number) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
maximumFractionDigits: digits,
|
||||
}).format(val)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="max-w-xs flex-1 bg-th-fgd-4 border border-bkg-3 shadow-md rounded-xl py-4 px-4 h-auto w-auto m-2 transform transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-lg hover:bg-bkg-3"
|
||||
style={{
|
||||
backgroundBlendMode: 'overlay',
|
||||
backgroundImage: `url(${props.bg})`,
|
||||
backgroundPosition: '150px 1em',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'contain',
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row justify-center">
|
||||
<div className="pr-4">
|
||||
<div className="flex flex-row gap-x-2">
|
||||
{/*
|
||||
<img className="w-5 h-5 mt-1 mb-2" src={props.icon} alt={props.name} />
|
||||
*/}
|
||||
<p className="text-xl font-bold">{props.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-white text-opacity-50 text-bold">
|
||||
Deposit / Borrow
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
<PercentPill value={props.interest.deposit} />
|
||||
<PercentPill
|
||||
className="ml-2"
|
||||
value={props.interest.borrow}
|
||||
bg="bg-mango-red"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row gap-x-2">{/* Chart goes here */}</div>
|
||||
</div>
|
||||
<div className="px-2 mt-4">
|
||||
<div className="flex-row">
|
||||
<p className="text-white text-opacity-50 text-xs font-bold">
|
||||
Total Deposits
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-row">
|
||||
<p className="font-bold text-xl">
|
||||
${format(props.liquidity.usd, 0)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
<div className="flex-row mt-2">
|
||||
<p className="text-white text-opacity-50 text-xs">Total Borrows</p>
|
||||
</div>
|
||||
<div className="flex-row">
|
||||
<p className="">${format(props.liquidity.usd, 0)}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-row mt-2">
|
||||
<p className="text-white text-opacity-50 text-xs">
|
||||
Remaining Liquidity
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-row">
|
||||
<p className="">${format(props.liquidity.usd, 0)}</p>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LendCard
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import LendCard from './LendCard'
|
||||
import Button from './shared/Button'
|
||||
import Link from './Link'
|
||||
//import GradientText from './GradientText'
|
||||
import Marquee from 'react-fast-marquee'
|
||||
import React from 'react'
|
||||
|
||||
const LendSection = () => {
|
||||
const [stats, setStats] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
const loadStats = async () => {
|
||||
const response = await fetch(
|
||||
'https://mango-transaction-log.herokuapp.com/v3/stats/spot_stats_hourly?mango-group=mainnet.1'
|
||||
)
|
||||
setStats(await response.json())
|
||||
}
|
||||
loadStats()
|
||||
}, [])
|
||||
|
||||
const propsFor = (symbol) => {
|
||||
const defaults = {
|
||||
name: symbol,
|
||||
icon: `../token/icon-${symbol.toLowerCase()}.svg`,
|
||||
bg: `/token/mono/${symbol.toLowerCase()}.svg`,
|
||||
interest: { deposit: 0, borrow: 0 },
|
||||
liquidity: { native: 0, usd: 0 },
|
||||
}
|
||||
if (!stats) return defaults
|
||||
const filtered = stats.filter((s) => s.name == symbol)
|
||||
if (filtered.length == 0) return defaults
|
||||
const lastStats = filtered[filtered.length - 1]
|
||||
const lastPrice = lastStats.baseOraclePrice
|
||||
const native = lastStats.totalDeposits
|
||||
return {
|
||||
...defaults,
|
||||
interest: {
|
||||
deposit: lastStats.depositRate * 100,
|
||||
borrow: lastStats.borrowRate * 100,
|
||||
},
|
||||
liquidity: { native, usd: native * lastPrice },
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<section className="py-12 px-3 lg:mt-60 md:mt-24 sm:mt-36 xs:mt-36">
|
||||
<div className="flex flex-wrap mx-auto justify-center items-center lg:text-center md:text-center sm:text-left">
|
||||
<div className="justify-center px-2 order-1 lg:order-none">
|
||||
<h2 className="mb-6 leading-tight font-semibold font-heading lg:text-5xl md:text-4xl sm:text-4xl xs:text-3xl">
|
||||
Don't sell, utilize.
|
||||
</h2>
|
||||
<p className="mb-8 text-white text-opacity-50 leading-relaxed lg:text-2xl md:text-2xl sm:text-2xl xs:text-lg">
|
||||
Earn interest on deposits and take out fully collateralized
|
||||
loans against existing assets. The mango protocol's risk
|
||||
engine allows you to withdraw borrowed capital when you need.
|
||||
</p>
|
||||
<div className="flex flex-row justify-center">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets/borrow"
|
||||
>
|
||||
<Button>Open a 🥭 account</Button>
|
||||
</a>
|
||||
<a rel="noreferrer" target="_blank" href="/markets">
|
||||
<Link>Learn more</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="w-full mx-auto px-0">
|
||||
<section className="px-0 mt-28">
|
||||
<div className="flex flex-col justify-center items-center text-center">
|
||||
{/* <div className="flex flex-col mb-8">
|
||||
<GradientText>
|
||||
<span className="text-2xl font-bold leading-relaxed">
|
||||
Total Value Deposited
|
||||
</span>
|
||||
</GradientText>
|
||||
<div className="mt-4 inline-flex bg-th-fgd-4 shadow-md rounded-xl py-4 px-6 h-auto w-auto">
|
||||
<p className="px-2 text-3xl font-bold">$20,095,025.00</p>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="flex flex-col mb-12">
|
||||
{/* <GradientText>
|
||||
<span className="text-2xl font-bold leading-relaxed">
|
||||
Liquidity Available
|
||||
</span>
|
||||
</GradientText> */}
|
||||
<Marquee gradient={false}>
|
||||
<div className="z-10 mt-4 flex flex-wrap text-left">
|
||||
<LendCard {...propsFor('USDC')} />
|
||||
<LendCard {...propsFor('MNGO')} />
|
||||
<LendCard {...propsFor('BTC')} />
|
||||
<LendCard {...propsFor('ETH')} />
|
||||
<LendCard {...propsFor('SOL')} />
|
||||
<LendCard {...propsFor('SRM')} />
|
||||
<LendCard {...propsFor('RAY')} />
|
||||
<LendCard {...propsFor('COPE')} />
|
||||
<LendCard {...propsFor('USDT')} />
|
||||
|
||||
{/*
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets/borrow"
|
||||
>
|
||||
<div className="min-w-full flex-1 bg-th-fgd-4 border border-bkg-3 shadow-md rounded-xl py-4 px-4 h-auto m-2 transform transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-lg hover:bg-bkg-3">
|
||||
<p className="leading-tight font-extrabold font-heading text-5xl text-center">16+</p>
|
||||
<p className="text-md text-white text-opacity-50 text-bold text-center">assets coming soon</p>
|
||||
</div>
|
||||
</a>
|
||||
*/}
|
||||
</div>
|
||||
</Marquee>
|
||||
</div>
|
||||
<div className="z-0 relative -bottom-72 -left-8 lg:-bottom-96 ">
|
||||
<div className="absolute bottom-4 left-8 w-450 h-450 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-10 animate-blob"></div>
|
||||
<div className="absolute bottom-4 w-450 h-450 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-30 animate-blob animation-delay-4000"></div>
|
||||
<div className="absolute bottom-8 left-20 w-450 h-450 bg-mango-green mix-blend-screen rounded-full filter blur-2xl opacity-20 animate-blob animation-delay-2000"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 mt-20">
|
||||
<section className="px-3">
|
||||
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<div className="">
|
||||
<div className="z-10 relative">
|
||||
<img
|
||||
className="lg:h-1450 lg:w-auto lg:max-w-none"
|
||||
src="../img/borrow.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
<div className="lg:col-span-6">
|
||||
<div className="z-10 relative -right-60 pl-4 sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full">
|
||||
<img
|
||||
className="lg:h-750 lg:w-auto lg:max-w-none"
|
||||
src="../img/borrow.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LendSection
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import { FunctionComponent } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import tw from 'twin.macro'
|
||||
|
||||
const StyledButton = styled.a`
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
${tw`underline`}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
${tw`cursor-not-allowed opacity-60`}
|
||||
}
|
||||
`
|
||||
// default heroicon does not allow customizing stroke
|
||||
const ChevronRightIcon = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
interface LinkProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Link: FunctionComponent<LinkProps> = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
className={`${className} pr-5 flex z-10 px-8 py-2 text-fgd-1 relative rounded-full`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon
|
||||
className={`relative stroke-2 top-1 h-4 w-4 text-fgd-1 ml-1`}
|
||||
/>
|
||||
</StyledButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default Link
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import { FunctionComponent } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import tw from 'twin.macro'
|
||||
|
||||
const StyledButton = styled.a`
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
${tw`underline`}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
${tw`cursor-not-allowed opacity-60`}
|
||||
}
|
||||
`
|
||||
|
||||
// default heroicon does not allow customizing stroke
|
||||
const ChevronRightIcon = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
interface LinkLeftProps {
|
||||
className?: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
const LinkLeft: FunctionComponent<LinkLeftProps> = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
className={`${className} flex z-10 text-mango-yellow relative rounded-full`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon
|
||||
className={`relative stroke-2 top-1 h-4 w-4 text-fgd-1 ml-1`}
|
||||
/>
|
||||
</StyledButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default LinkLeft
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
const MangoPill = (props: any) => {
|
||||
return (
|
||||
<div
|
||||
className="inline-flex items-center relative h-6 px-2 py-1 bg-gradient-to-br from-mango-red to-yellow-500
|
||||
rounded-full lg:-top-3 md:-top-3 sm:-top-3 xs:-top-2"
|
||||
>
|
||||
<p className="text-white text-xs uppercase font-bold tracking-widest subpixel-antialiased">
|
||||
{props.children}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MangoPill
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
const MangoSale = () => {
|
||||
return (
|
||||
<div
|
||||
className="inline-flex items-center relative h-6 -top-4 px-2 py-1 bg-gradient-to-br from-mango-red to-yellow-500
|
||||
rounded-full"
|
||||
>
|
||||
<p className="text-white text-xs uppercase font-bold tracking-widest subpixel-antialiased">
|
||||
Sale
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MangoSale
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
import moment from 'moment'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import tailwindConfig from '../tailwind.config.js'
|
||||
|
||||
import PercentPill from './PercentPill'
|
||||
|
||||
interface MarketCardProps {
|
||||
name: string
|
||||
icon: string
|
||||
decimals: number
|
||||
}
|
||||
|
||||
const MarketCard = (props: MarketCardProps) => {
|
||||
const [candles, setCandles] = useState({
|
||||
t: [],
|
||||
c: [],
|
||||
o: [],
|
||||
h: [],
|
||||
l: [],
|
||||
v: [],
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const loadCandles = async () => {
|
||||
const symbol = props.name
|
||||
const resolution = '60' // hourly
|
||||
const from = moment().subtract(24, 'hours').format('X')
|
||||
const to = moment().format('X')
|
||||
const query = new URLSearchParams({
|
||||
symbol,
|
||||
resolution,
|
||||
from,
|
||||
to,
|
||||
}).toString()
|
||||
const response = await fetch(
|
||||
`https://serum-history.herokuapp.com/tv/history?${query}`
|
||||
)
|
||||
setCandles(await response.json())
|
||||
}
|
||||
loadCandles()
|
||||
}, [props.name])
|
||||
|
||||
const price = candles.c.length > 0 ? candles.c[candles.c.length - 1] : 0
|
||||
const change =
|
||||
candles.o.length > 0 ? ((price - candles.c[0]) / candles.c[0]) * 100 : 0
|
||||
const volume = candles.v.reduce((a, b) => a + b, 0)
|
||||
const graph =
|
||||
candles.t.length > 0
|
||||
? candles.t.map((t, i) => ({
|
||||
t,
|
||||
p: candles.c[i] - Math.min(...candles.l),
|
||||
}))
|
||||
: []
|
||||
|
||||
const format = (val: number, decimals = 0) => {
|
||||
const significance = Math.pow(10, decimals)
|
||||
const roundedVal = Math.round(val * significance) / significance
|
||||
return new Intl.NumberFormat('en-US').format(roundedVal)
|
||||
}
|
||||
|
||||
const colors = tailwindConfig.theme.extend.colors
|
||||
|
||||
return (
|
||||
<div className="flex-1 m-2 w-72">
|
||||
<div className="flex flex-col bg-th-fgd-4 border border-bkg-3 rounded-xl py-4 px-4 h-auto shadow-md transform transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-lg hover:bg-bkg-3">
|
||||
<div className="flex flex-row gap-x-2 align-bottom">
|
||||
<div className="flex flex-col flex-auto">
|
||||
<p className="text-sm text-white text-opacity-50">{props.name}</p>
|
||||
<p className="text-2xl">${format(price, props.decimals)}</p>
|
||||
</div>
|
||||
<div className="flex w-full">
|
||||
{graph.length > 0 && (
|
||||
<ResponsiveContainer>
|
||||
<AreaChart data={graph}>
|
||||
<ReferenceLine
|
||||
y={0}
|
||||
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
|
||||
strokeDasharray="3 3"
|
||||
strokeOpacity={0.6}
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey="p"
|
||||
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
|
||||
fill={colors[`secondary-${change > 0 ? 1 : 2}`].dark}
|
||||
fillOpacity={0.1}
|
||||
/>
|
||||
<XAxis dataKey="t" hide />
|
||||
<YAxis dataKey="p" hide />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-x-2 mt-1 items-center">
|
||||
<PercentPill value={change} />
|
||||
<p className="text-sm mt-1">
|
||||
<span className="text-white text-opacity-50">Vol:</span>{' '}
|
||||
{format(volume)} {props.name.split('/')[0]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarketCard
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
InformationCircleIcon,
|
||||
XCircleIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import useNotificationStore from '../stores/useNotificationStore'
|
||||
|
||||
const NotificationList = () => {
|
||||
const { notifications, set: setNotificationStore } = useNotificationStore(
|
||||
(s) => s
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (notifications.length > 0) {
|
||||
const id = setInterval(() => {
|
||||
setNotificationStore((state) => {
|
||||
state.notifications = notifications.slice(1, notifications.length)
|
||||
})
|
||||
}, 5000)
|
||||
|
||||
return () => {
|
||||
clearInterval(id)
|
||||
}
|
||||
}
|
||||
}, [notifications, setNotificationStore])
|
||||
|
||||
const reversedNotifications = [...notifications].reverse()
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6`}
|
||||
>
|
||||
<div className={`flex flex-col w-full`}>
|
||||
{reversedNotifications.map((n, idx) => (
|
||||
<Notification
|
||||
key={`${n.message}${idx}`}
|
||||
type={n.type}
|
||||
message={n.message}
|
||||
description={n.description}
|
||||
txid={n.txid}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Notification = ({ type, message, description, txid }) => {
|
||||
const [showNotification, setShowNotification] = useState(true)
|
||||
|
||||
if (!showNotification) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`max-w-sm w-full bg-th-bkg-3 shadow-lg rounded-md mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
|
||||
>
|
||||
<div className={`p-4`}>
|
||||
<div className={`flex items-center`}>
|
||||
<div className={`flex-shrink-0`}>
|
||||
{type === 'success' ? (
|
||||
<CheckCircleIcon className={`text-th-green h-9 w-9 mr-1`} />
|
||||
) : null}
|
||||
{type === 'info' && (
|
||||
<XCircleIcon className={`text-th-primary h-9 w-9 mr-1`} />
|
||||
)}
|
||||
{type === 'error' && (
|
||||
<InformationCircleIcon className={`text-th-red h-9 w-9 mr-1`} />
|
||||
)}
|
||||
</div>
|
||||
<div className={`ml-2 w-0 flex-1`}>
|
||||
<div className={`text-lg text-th-fgd-1`}>{message}</div>
|
||||
{description ? (
|
||||
<p className={`mt-0.5 text-base text-th-fgd-2`}>{description}</p>
|
||||
) : null}
|
||||
{txid ? (
|
||||
<a
|
||||
href={'https://explorer.solana.com/tx/' + txid}
|
||||
className="text-th-primary"
|
||||
>
|
||||
View transaction {txid.slice(0, 8)}...
|
||||
{txid.slice(txid.length - 8)}
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={`ml-4 flex-shrink-0 self-start flex`}>
|
||||
<button
|
||||
onClick={() => setShowNotification(false)}
|
||||
className={`bg-th-bkg-3 rounded-md inline-flex text-fgd-3 hover:text-th-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-th-primary`}
|
||||
>
|
||||
<span className={`sr-only`}>Close</span>
|
||||
<svg
|
||||
className={`h-5 w-5`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotificationList
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
interface PercentPillProps {
|
||||
value: number
|
||||
className?: string
|
||||
bg?: string
|
||||
}
|
||||
|
||||
const PercentPill = (props: PercentPillProps) => {
|
||||
const bg = props.bg || (props.value > 0 ? 'bg-green-500' : 'bg-mango-red')
|
||||
const displayValue = props.value.toFixed(props.value > 10 ? 0 : 1)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${props.className} ${bg} inline-flex text-xs h-5 mt-1 items-center px-2 py-1 uppercase font-bold rounded-full`}
|
||||
>
|
||||
<p>{displayValue}%</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PercentPill
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { MoonIcon, SunIcon } from '@heroicons/react/outline'
|
||||
import DropMenu from './DropMenu'
|
||||
import { MangoIcon } from './icons'
|
||||
|
||||
const THEMES = [
|
||||
{ name: 'Light', icon: <SunIcon className="h-4 w-4" /> },
|
||||
{ name: 'Dark', icon: <MoonIcon className="h-4 w-4" /> },
|
||||
{ name: 'Mango', icon: <MangoIcon className="stroke-current h-4 w-4" /> },
|
||||
]
|
||||
|
||||
const ThemeSwitch = () => {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { theme, setTheme } = useTheme()
|
||||
|
||||
// When mounted on client, now we can show the UI
|
||||
useEffect(() => setMounted(true), [])
|
||||
|
||||
return mounted ? (
|
||||
<DropMenu
|
||||
button={
|
||||
<div className="bg-th-bkg-4 flex items-center justify-center rounded-full w-8 h-8 text-th-fgd-1 focus:outline-none hover:text-th-primary">
|
||||
{THEMES.find((t) => t.name === theme).icon}
|
||||
</div>
|
||||
}
|
||||
value={theme}
|
||||
onChange={(theme) => setTheme(theme)}
|
||||
options={THEMES}
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-th-bkg-3 rounded-full w-8 h-8" />
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeSwitch
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
// import MarketCard from './MarketCard'
|
||||
import Button from './shared/Button'
|
||||
// import GradientText from './GradientText'
|
||||
import Link from './Link'
|
||||
// import Marquee from 'react-fast-marquee'
|
||||
import React from 'react'
|
||||
|
||||
const TradeSection = () => {
|
||||
return (
|
||||
<div className="">
|
||||
<div className="bg-gradient-to-br border border-bkg-3 from-th-bkg-3 via-th-bkg-3 to-th-bkg-2 h-auto transform -skew-y-3 lg:mb-48 lg:-mt-64 md:pt-48 md:mb-48 md:-mt-64 xs:my-0 overflow-hidden">
|
||||
{/* <div className="mx-auto px-0 transform skew-y-3">
|
||||
<section className="py-12 px-0 lg:mt-0 md:mt-0 sm:mt-28 ">
|
||||
<Marquee gradient={false} direction={'left'}>
|
||||
<div className="mx-auto">
|
||||
<div className="flex flex-row">
|
||||
<MarketCard
|
||||
name="MNGO/USDC"
|
||||
icon="../token/icon-mngo.svg"
|
||||
decimals={4}
|
||||
/>
|
||||
<MarketCard
|
||||
name="BTC/USDC"
|
||||
icon="../token/icon-btc.svg"
|
||||
decimals={0}
|
||||
/>
|
||||
<MarketCard
|
||||
name="ETH/USDC"
|
||||
icon="../token/icon-eth.svg"
|
||||
decimals={0}
|
||||
/>
|
||||
<MarketCard
|
||||
name="SOL/USDC"
|
||||
icon="../token/icon-sol.svg"
|
||||
decimals={2}
|
||||
/>
|
||||
<MarketCard
|
||||
name="SRM/USDC"
|
||||
icon="../token/icon-srm.svg"
|
||||
decimals={4}
|
||||
/>
|
||||
<MarketCard
|
||||
name="RAY/USDC"
|
||||
icon="../token/icon-ray.svg"
|
||||
decimals={4}
|
||||
/>
|
||||
<MarketCard
|
||||
name="COPE/USDC"
|
||||
icon="../token/icon-cope.svg"
|
||||
decimals={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Marquee>
|
||||
</section>
|
||||
</div> */}
|
||||
<div className="max-w-7xl mx-auto px-4 transform skew-y-3">
|
||||
<section className="py-12 px-3 lg:mt-28 md:mt-28 sm:mt-24 xs:mt-50">
|
||||
<div className="flex flex-wrap items-center lg:text-center md:text-center sm:text-left">
|
||||
<div className="px-2 order-1 lg:order-none mx-auto">
|
||||
<h2 className="mb-6 leading-tight font-semibold font-heading lg:text-5xl sm:text-4xl xs:text-3xl">
|
||||
Every market cross‑collateralized.
|
||||
</h2>
|
||||
<div className="">
|
||||
<p className="mb-8 text-white text-opacity-50 leading-relaxed sm:text-2xl xs:text-lg">
|
||||
Trade spot margined and perpetual futures markets,
|
||||
permissionless and all on-chain.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row justify-center">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets/"
|
||||
>
|
||||
<Button>Start trading</Button>
|
||||
</a>
|
||||
<a rel="noreferrer" target="_blank" href="/markets">
|
||||
<Link>Learn more</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/*
|
||||
<section className="px-3">
|
||||
<div className="flex flex-wrap justify-center items-center text-center">
|
||||
<div className="flex flex-col">
|
||||
<GradientText>
|
||||
<span className="text-2xl font-bold leading-relaxed">
|
||||
Volume
|
||||
</span>
|
||||
</GradientText>
|
||||
|
||||
<div className="mt-4 flex flex-row bg-th-fgd-4 shadow-md rounded-xl pt-5 pb-4 px-8 h-auto w-auto divide-x-2 divide-white divide-opacity-10">
|
||||
<div className="flex-1 inline-flex pr-4">
|
||||
<p className="px-2">1.3M</p>
|
||||
<p className="text-mango-yellow font-bold py-1 -mt-1">D</p>
|
||||
</div>
|
||||
<div className="flex-1 inline-flex px-4">
|
||||
<p className="px-2">32.4M</p>
|
||||
<p className="text-mango-yellow font-bold py-1 -mt-1">W</p>
|
||||
</div>
|
||||
<div className="flex-1 inline-flex pl-4">
|
||||
<p className="px-2">75.4M</p>
|
||||
<p className="text-mango-yellow font-bold py-1 -mt-1 uppercase">
|
||||
Cumulative
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
*/}
|
||||
</div>
|
||||
<div className="relative lg:top-14 md:top-16 sm:top-20 xs:top-8 transform skew-y-3">
|
||||
<img className="" alt="modals" src="../img/home_section.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TradeSection
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
const WalletIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="20"
|
||||
height="17"
|
||||
viewBox="0 0 20 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.625 8.24561C13.7276 8.24561 13 8.97325 13 9.87061C13 10.768 13.7276 11.4956 14.625 11.4956C15.5224 11.4956 16.25 10.768 16.25 9.87061C16.25 8.97325 15.5224 8.24561 14.625 8.24561ZM14 9.87061C14 9.52554 14.2799 9.24561 14.625 9.24561C14.9701 9.24561 15.25 9.52554 15.25 9.87061C15.25 10.2157 14.9701 10.4956 14.625 10.4956C14.2799 10.4956 14 10.2157 14 9.87061Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.25 0.25C1.59301 0.25 0.25 1.59301 0.25 3.25L0.250676 13.8083C0.250702 15.4652 1.59371 16.8083 3.25068 16.8083H17.2147C18.5735 16.8083 19.7507 15.755 19.7507 14.3708V5.37076C19.7507 4.51126 19.2968 3.77937 18.6275 3.34799C18.6257 2.86554 18.5949 2.24606 18.3863 1.7108C18.2324 1.31604 17.973 0.930835 17.5462 0.652726C17.1244 0.377893 16.6042 0.25 16 0.25H3.25ZM17.6434 4.51627C17.6217 4.50923 17.6004 4.50122 17.5796 4.4923C17.4681 4.45439 17.3457 4.43326 17.2147 4.43326H4.81318C4.39896 4.43326 4.06318 4.09747 4.06318 3.68326C4.06318 3.26904 4.39896 2.93326 4.81318 2.93326H17.1143C17.0993 2.67796 17.0651 2.45157 16.9887 2.2555C16.9238 2.08899 16.8395 1.98262 16.7273 1.90947C16.61 1.83305 16.3958 1.75 16 1.75H3.25C2.42146 1.75 1.75003 2.42141 1.75 3.24995L1.75068 13.8082C1.75068 14.6368 2.42212 15.3083 3.25068 15.3083H17.2147C17.8262 15.3083 18.2507 14.8477 18.2507 14.3708V5.37076C18.2507 5.01586 18.0156 4.67002 17.6434 4.51627Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default WalletIcon
|
||||
|
|
@ -1,642 +0,0 @@
|
|||
export const MangoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 22 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M19.3612 4.7088L19.3624 4.70878L19.3954 4.68752C15.1331 -2.5831 9.55993 3.14112 9.55993 3.14112L9.5679 3.15513L9.56692 3.15538C12.7718 8.77426 18.8625 5.02924 19.3612 4.7088Z"
|
||||
strokeWidth="2.5"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.4268 8.60034C11.4416 9.12103 12.5521 9.29944 13.6147 9.29636C14.2321 9.86347 14.7458 10.5296 15.2285 11.2136C15.4286 11.4993 15.6091 11.7982 15.7688 12.1084C16.1378 12.8191 16.4093 13.5711 16.6839 14.332C16.7644 14.555 16.8454 14.7792 16.929 15.003C16.9552 15.0988 16.9826 15.1946 17.0111 15.2905L17.0126 15.2902C17.4368 16.7451 18.0562 18.2994 18.8862 19.5826C19.1607 20.0042 19.4674 20.4037 19.8051 20.7767C19.8715 20.8486 19.9395 20.9198 20.0076 20.9911C20.3255 21.3241 20.6457 21.6596 20.8272 22.0792C21.0531 22.6022 21.0358 23.2037 20.8999 23.7571C20.2586 26.3656 17.7466 27.0509 15.3459 27.1141L15.3471 27.1111C14.447 27.1291 13.5531 27.062 12.7604 26.9808C12.7604 26.9808 8.93745 26.5851 5.69698 24.216L5.59239 24.1382C5.21415 23.8564 4.85332 23.5518 4.51186 23.2263C3.6036 22.3594 2.79544 21.3762 2.17743 20.2968C2.1801 20.2941 2.18277 20.2915 2.18543 20.2888L2.18982 20.2844C2.11668 20.1527 2.04656 20.0198 1.97946 19.8855C1.38159 18.6889 1.01722 17.3863 1.00072 16.0018C0.9726 13.6787 1.76736 11.2996 3.27803 9.57468L3.27642 9.57041C4.09436 8.67445 5.11672 7.97059 6.327 7.56987C7.08575 7.31635 7.8823 7.19462 8.68213 7.20997C9.16883 7.78148 9.76147 8.25316 10.4268 8.60034Z"
|
||||
strokeWidth="2.5"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const WalletIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="20"
|
||||
height="17"
|
||||
viewBox="0 0 20 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.625 8.24561C13.7276 8.24561 13 8.97325 13 9.87061C13 10.768 13.7276 11.4956 14.625 11.4956C15.5224 11.4956 16.25 10.768 16.25 9.87061C16.25 8.97325 15.5224 8.24561 14.625 8.24561ZM14 9.87061C14 9.52554 14.2799 9.24561 14.625 9.24561C14.9701 9.24561 15.25 9.52554 15.25 9.87061C15.25 10.2157 14.9701 10.4956 14.625 10.4956C14.2799 10.4956 14 10.2157 14 9.87061Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.25 0.25C1.59301 0.25 0.25 1.59301 0.25 3.25L0.250676 13.8083C0.250702 15.4652 1.59371 16.8083 3.25068 16.8083H17.2147C18.5735 16.8083 19.7507 15.755 19.7507 14.3708V5.37076C19.7507 4.51126 19.2968 3.77937 18.6275 3.34799C18.6257 2.86554 18.5949 2.24606 18.3863 1.7108C18.2324 1.31604 17.973 0.930835 17.5462 0.652726C17.1244 0.377893 16.6042 0.25 16 0.25H3.25ZM17.6434 4.51627C17.6217 4.50923 17.6004 4.50122 17.5796 4.4923C17.4681 4.45439 17.3457 4.43326 17.2147 4.43326H4.81318C4.39896 4.43326 4.06318 4.09747 4.06318 3.68326C4.06318 3.26904 4.39896 2.93326 4.81318 2.93326H17.1143C17.0993 2.67796 17.0651 2.45157 16.9887 2.2555C16.9238 2.08899 16.8395 1.98262 16.7273 1.90947C16.61 1.83305 16.3958 1.75 16 1.75H3.25C2.42146 1.75 1.75003 2.42141 1.75 3.24995L1.75068 13.8082C1.75068 14.6368 2.42212 15.3083 3.25068 15.3083H17.2147C17.8262 15.3083 18.2507 14.8477 18.2507 14.3708V5.37076C18.2507 5.01586 18.0156 4.67002 17.6434 4.51627Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const ResizeIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="21"
|
||||
height="22"
|
||||
viewBox="0 0 21 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M0.297393 19.2885C-0.0906675 18.8955 -0.0906675 18.2584 0.297393 17.8654L16.6671 1.2885C17.0552 0.895531 17.6843 0.895531 18.0724 1.2885C18.4605 1.68148 18.4605 2.31861 18.0724 2.71158L1.70268 19.2885C1.31462 19.6815 0.685454 19.6815 0.297393 19.2885Z" />
|
||||
<path d="M7.37259 20.2885C6.98453 19.8955 6.98453 19.2584 7.37259 18.8654L17.6673 8.4404C18.0554 8.04743 18.6845 8.04743 19.0726 8.4404C19.4606 8.83337 19.4606 9.47051 19.0726 9.86348L8.77788 20.2885C8.38982 20.6815 7.76065 20.6815 7.37259 20.2885Z" />
|
||||
<path d="M14.2222 19.8654C13.8341 20.2584 13.8341 20.8955 14.2222 21.2885C14.6103 21.6815 15.2394 21.6815 15.6275 21.2885L20.2972 16.5597C20.6853 16.1667 20.6853 15.5296 20.2972 15.1366C19.9091 14.7436 19.28 14.7436 18.8919 15.1366L14.2222 19.8654Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const MoveIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polyline points="5 9 2 12 5 15"></polyline>
|
||||
<polyline points="9 5 12 2 15 5"></polyline>
|
||||
<polyline points="15 19 12 22 9 19"></polyline>
|
||||
<polyline points="19 9 22 12 19 15"></polyline>
|
||||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||||
<line x1="12" y1="2" x2="12" y2="22"></line>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const RefreshClockwiseIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M20 4.00188L19.418 9.00188M19.418 9.00188C18.7542 7.36001 17.5643 5.98479 16.035 5.09174C14.5056 4.19869 12.7232 3.83829 10.967 4.06702C9.21086 4.29575 7.58021 5.10068 6.33063 6.35566C5.08105 7.61064 4.28316 9.24474 4.062 11.0019M19.418 9.00188H15M4 20.0019L4.581 15.0019M4.581 15.0019C5.2458 16.6428 6.43597 18.0169 7.96517 18.9092C9.49436 19.8014 11.2763 20.1614 13.0319 19.9328C14.7875 19.7041 16.4178 18.8998 17.6675 17.6456C18.9171 16.3915 19.7156 14.7583 19.938 13.0019M4.581 15.0019H9"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const TelegramIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M26.07 3.996a2.974 2.974 0 0 0-.933.223h-.004c-.285.113-1.64.683-3.7 1.547l-7.382 3.109c-5.297 2.23-10.504 4.426-10.504 4.426l.062-.024s-.359.118-.734.375a2.03 2.03 0 0 0-.586.567c-.184.27-.332.683-.277 1.11.09.722.558 1.155.894 1.394.34.242.664.355.664.355h.008l4.883 1.645c.219.703 1.488 4.875 1.793 5.836.18.574.355.933.574 1.207.106.14.23.257.379.351a1.119 1.119 0 0 0 .246.106l-.05-.012c.015.004.027.016.038.02.04.011.067.015.118.023.773.234 1.394-.246 1.394-.246l.035-.028 2.883-2.625 4.832 3.707.11.047c1.007.442 2.027.196 2.566-.238.543-.437.754-.996.754-.996l.035-.09 3.734-19.129c.106-.472.133-.914.016-1.343a1.807 1.807 0 0 0-.781-1.047 1.872 1.872 0 0 0-1.067-.27zm-.101 2.05c-.004.063.008.056-.02.177v.011l-3.699 18.93c-.016.027-.043.086-.117.145-.078.062-.14.101-.465-.028l-5.91-4.531-3.57 3.254.75-4.79 9.656-9c.398-.37.265-.448.265-.448.028-.454-.601-.133-.601-.133l-12.176 7.543-.004-.02-5.836-1.965v-.004l-.015-.003a.27.27 0 0 0 .03-.012l.032-.016.031-.011s5.211-2.196 10.508-4.426c2.652-1.117 5.324-2.242 7.379-3.11 2.055-.863 3.574-1.496 3.66-1.53.082-.032.043-.032.102-.032z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const ProfileIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 45.532 45.532"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M22.766,0.001C10.194,0.001,0,10.193,0,22.766s10.193,22.765,22.766,22.765c12.574,0,22.766-10.192,22.766-22.765
|
||||
S35.34,0.001,22.766,0.001z M22.766,6.808c4.16,0,7.531,3.372,7.531,7.53c0,4.159-3.371,7.53-7.531,7.53
|
||||
c-4.158,0-7.529-3.371-7.529-7.53C15.237,10.18,18.608,6.808,22.766,6.808z M22.761,39.579c-4.149,0-7.949-1.511-10.88-4.012
|
||||
c-0.714-0.609-1.126-1.502-1.126-2.439c0-4.217,3.413-7.592,7.631-7.592h8.762c4.219,0,7.619,3.375,7.619,7.592
|
||||
c0,0.938-0.41,1.829-1.125,2.438C30.712,38.068,26.911,39.579,22.761,39.579z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const AaveMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M30.1669 29.1499L18.9712 2.08213C18.3397 0.682666 17.4011 0 16.1637 0H15.1739C13.9365 0 12.9979 0.682666 12.3664 2.08213L7.49386 13.8752H3.80746C2.70666 13.8837 1.81067 14.7712 1.80213 15.8805V15.9061C1.81067 17.0069 2.70666 17.9029 3.80746 17.9115H5.7872L1.13653 29.1499C1.0512 29.3973 1 29.6533 1 29.9179C1 30.5493 1.19627 31.0443 1.54613 31.4283C1.896 31.8123 2.39947 32 3.03093 32C3.44906 31.9915 3.85013 31.8635 4.18293 31.616C4.54133 31.3685 4.7888 31.0101 4.98506 30.6005L10.1051 17.9029H13.6549C14.7557 17.8944 15.6517 17.0069 15.6602 15.8976V15.8464C15.6517 14.7456 14.7557 13.8496 13.6549 13.8411H11.7605L15.6688 4.10453L26.3184 30.592C26.5146 31.0016 26.7621 31.36 27.1205 31.6075C27.4533 31.8549 27.8629 31.9829 28.2725 31.9915C28.904 31.9915 29.3989 31.8037 29.7573 31.4197C30.1157 31.0357 30.3034 30.5408 30.3034 29.9093C30.312 29.6533 30.2693 29.3888 30.1669 29.1499Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const BtcMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M28.1127 12.8648C28.6164 9.50263 26.0546 7.69482 22.5545 6.48855L23.6902 1.93293L20.9183 1.24317L19.8115 5.67848C19.0833 5.49561 18.3358 5.32558 17.5899 5.15555L18.7047 0.691363L15.9328 0L14.7971 4.55401C14.194 4.41606 13.6005 4.28132 13.0262 4.13695L13.0294 4.12251L9.20528 3.16808L8.46739 6.12923C8.46739 6.12923 10.5254 6.60083 10.4821 6.62971C11.605 6.91042 11.8071 7.65312 11.7734 8.24342L10.4805 13.4327C10.5575 13.4519 10.657 13.4808 10.7693 13.5241L10.4757 13.4519L8.66309 20.7216C8.52514 21.0617 8.17705 21.5734 7.39105 21.3793C7.41992 21.4194 5.37631 20.8772 5.37631 20.8772L4 24.0501L7.6092 24.95C8.27971 25.1185 8.93739 25.2949 9.58384 25.4601L8.43692 30.0671L11.2072 30.7568L12.3429 26.2012C13.1 26.4049 13.8347 26.5942 14.5533 26.7739L13.4208 31.3102L16.1927 32L17.3396 27.4027C22.0685 28.2978 25.6231 27.9368 27.1198 23.6603C28.326 20.218 27.0604 18.2305 24.5725 16.936C26.3851 16.5189 27.7486 15.3271 28.1127 12.8648ZM21.7765 21.7483C20.9216 25.1922 15.1228 23.3299 13.2428 22.8631L14.7667 16.7595C16.6467 17.2295 22.6732 18.1583 21.7765 21.7483ZM22.6347 12.8151C21.8535 15.9479 17.0284 14.355 15.4644 13.9652L16.844 8.4311C18.4079 8.82089 23.4496 9.54755 22.6347 12.8151Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const CopeMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32ZM10 18C11.1046 18 12 17.1046 12 16C12 14.8954 11.1046 14 10 14C8.89543 14 8 14.8954 8 16C8 17.1046 8.89543 18 10 18ZM18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16C14 14.8954 14.8954 14 16 14C17.1046 14 18 14.8954 18 16ZM22 18C23.1046 18 24 17.1046 24 16C24 14.8954 23.1046 14 22 14C20.8954 14 20 14.8954 20 16C20 17.1046 20.8954 18 22 18Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const DogeMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M19.1393 8C19.1393 8 22.6931 8.68778 24.1307 12.4002C24.1307 12.4002 26.1892 17.2835 23.1392 21.6123C23.1392 21.6123 21.2346 24 18.8586 24H9V20.2254H11.0585V11.7814H9.03927L9.00015 8H19.1393ZM17.2969 20.184C18.1383 20.184 18.9116 19.0683 18.9116 19.0683C20.3607 16.8158 19.4338 13.9803 19.4338 13.9803C18.7346 11.9999 17.7339 11.7907 17.7339 11.7907H15.5739L15.6138 20.184H17.2969Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16ZM30 16C30 23.732 23.732 30 16 30C8.26801 30 2 23.732 2 16C2 8.26801 8.26801 2 16 2C23.732 2 30 8.26801 30 16Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const EthMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
d="M15.9995 0V11.8291L25.9976 16.2967L15.9995 0Z"
|
||||
fillOpacity="0.602"
|
||||
/>
|
||||
<path d="M15.9994 0L6 16.2967L15.9994 11.8291V0Z" />
|
||||
<path
|
||||
d="M15.9995 23.9626V32.0002L26.0043 18.1587L15.9995 23.9626Z"
|
||||
fillOpacity="0.602"
|
||||
/>
|
||||
<path d="M15.9994 32.0002V23.9612L6 18.1587L15.9994 32.0002Z" />
|
||||
<path
|
||||
d="M15.9995 22.1022L25.9976 16.297L15.9995 11.832V22.1022Z"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M6 16.297L15.9994 22.1022V11.832L6 16.297Z"
|
||||
fillOpacity="0.602"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const FidaMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path d="M16.896 0.0475557L9.53378 7.40889L0 16.9418L0.0222223 31.9787L15.0591 32.0009L22.4231 24.6364L31.9551 15.1049L32 0L16.896 0.0475557ZM17.428 1.32578L29.808 1.28889L22.7982 8.29867H10.456L17.428 1.32578ZM8.252 10.5018V22.844L1.3 29.7956L1.28089 17.4729L8.252 10.5018ZM14.5289 30.7195L2.20578 30.7027L9.15822 23.7511H21.5L14.5298 30.7209L14.5289 30.72V30.7195ZM9.53333 22.4698V9.57867H22.4231V22.4676H9.53289V22.4698H9.53333ZM23.7031 21.5467V9.20355L30.7129 2.19378L30.6751 14.5738L23.7031 21.5471V21.5467Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const FttMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M9.04627 2.00176C16.6964 1.99941 24.347 1.99941 31.9981 2.00176C32.0004 4.47459 32.0004 6.94699 31.9981 9.41896C24.3478 9.42131 16.6971 9.42131 9.04627 9.41896C9.04382 6.94613 9.04382 4.47373 9.04627 2.00176Z" />
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M0.00959986 12.2093C2.47772 12.1965 4.94627 12.1965 7.41525 12.2093C7.42805 14.6774 7.42805 17.146 7.41525 19.615C4.94638 19.6276 2.47783 19.6279 0.00959986 19.6156C-0.00319995 17.147 -0.00319995 14.6783 0.00959986 12.2093ZM9.05219 12.2093C14.5739 12.1976 20.0953 12.1976 25.6163 12.2093C25.628 14.6774 25.628 17.146 25.6163 19.615C20.0946 19.6265 14.5733 19.6265 9.05219 19.615C9.04066 17.1467 9.04066 14.6782 9.05219 12.2093Z"
|
||||
/>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M9.05926 22.4195C11.5232 22.3927 13.9867 22.3927 16.4498 22.4195C16.4754 24.8819 16.4758 27.3454 16.451 29.8102C13.987 29.8345 11.5235 29.8341 9.06054 29.8089C9.03494 27.3467 9.03451 24.8836 9.05926 22.4195Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const MediaMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path d="M31.9775 10.2549H31.975L26.8525 5.12745L31.975 0H31.9775V10.2549Z" />
|
||||
<path d="M32.0029 20.9302L32.0003 20.9327L26.8779 15.8027L32.0003 10.6753L32.0029 10.6778V20.9302Z" />
|
||||
<path d="M32.0029 31.6075H32.0003L26.8779 26.48L32.0003 21.3525H32.0029V31.6075Z" />
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M26.6915 26.2685H26.689V16.0162L26.6915 16.0137L31.8164 21.1411L26.6915 26.2685Z"
|
||||
/>
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M26.6915 15.5933L26.689 15.5908V5.33838H26.6915L31.8164 10.4658L26.6915 15.5933Z"
|
||||
/>
|
||||
<path d="M26.6888 26.2685L21.5664 21.141L26.6888 16.0161V26.2685Z" />
|
||||
<path d="M26.6888 15.5908L21.5664 10.4658L26.6888 5.33838V15.5908Z" />
|
||||
<path d="M26.4928 15.79L26.4978 15.7951L21.3729 20.9225L16.248 15.7951L16.2506 15.79H26.4928Z" />
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M16.2506 15.7974L16.248 15.7949L21.3729 10.6675L26.4978 15.7949L26.4928 15.7974H16.2506Z"
|
||||
/>
|
||||
<path d="M16.0469 26.2685V16.0137L21.1718 21.1411L16.0469 26.2685Z" />
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M16.0462 26.2685L10.9238 21.1411L16.0462 16.0137V26.2685Z"
|
||||
/>
|
||||
<path d="M15.8254 15.79L15.8279 15.7951L10.703 20.9225L5.58057 15.7951L5.58308 15.79H15.8254Z" />
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M5.58308 15.7974L5.58057 15.7949L10.703 10.6675L15.8279 15.7949L15.8254 15.7974H5.58308Z"
|
||||
/>
|
||||
<path d="M5.33594 26.2685V16.0161L10.4584 21.141L5.33594 26.2685Z" />
|
||||
<path d="M5.33594 15.5908V5.33838L10.4584 10.4658L5.33594 15.5908Z" />
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M5.33634 26.2685H5.33383L0.211426 21.1411L5.33383 16.0137L5.33634 16.0162V26.2685Z"
|
||||
/>
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M5.33634 15.5908L5.33383 15.5933L0.211426 10.4658L5.33383 5.33838H5.33634V15.5908Z"
|
||||
/>
|
||||
<path d="M0 31.6075V21.3525L5.12493 26.48L0 31.6075Z" />
|
||||
<path d="M0 20.9327V10.6753L5.12493 15.8027L0 20.9327Z" />
|
||||
<path d="M0 10.2549V0L5.12493 5.12745L0 10.2549Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const MerMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M14.5678 15.1015L2.45423 7.84666C1.88467 7.50536 1.37954 7.01974 0.971605 6.4211C0.563671 5.82245 0.262138 5.12403 0.0865205 4.37185L0 4L0.00846786 4.00626L12.083 11.1326C12.7192 11.5081 13.2752 12.0626 13.7067 12.7518C14.1382 13.441 14.4331 14.2458 14.5678 15.1015ZM12.5072 27.2736L6.03212 23.4947C5.50306 23.1861 5.03291 22.7421 4.65295 22.1925C4.27263 21.6424 3.99098 20.9996 3.82641 20.3048L3.69828 19.7655L3.74357 19.7912V19.7931L12.8617 25.1132C13.0174 25.2041 13.1905 25.2398 13.3617 25.2162C13.5393 25.1894 13.7038 25.1066 13.8311 24.9799C13.9666 24.8488 14.0704 24.6739 14.1304 24.4744C14.1909 24.2717 14.205 24.0581 14.1717 23.8492C14.0483 23.0742 13.7799 22.3456 13.3882 21.7212C12.9968 21.0971 12.4924 20.595 11.9162 20.2548L4.18353 15.6905C3.66331 15.3831 3.20052 14.9446 2.82498 14.4031C2.44945 13.8618 2.16927 13.2293 2.00249 12.5464C1.94836 12.3251 1.89829 12.1185 1.85779 11.947L1.8924 11.9661L12.2789 18.0977C13.2174 18.6518 14.038 19.4695 14.6757 20.4856C15.3134 21.5018 15.7504 22.688 15.9514 23.9501C16.039 24.499 16.0022 25.0605 15.8435 25.5933C15.6852 26.1179 15.4128 26.5781 15.0556 26.9227C14.6985 27.2673 14.2714 27.4823 13.8215 27.5442C13.3716 27.6064 12.9166 27.5125 12.5072 27.2736ZM17.4322 15.1015L29.5458 7.84666C30.1153 7.50536 30.6205 7.01974 31.0284 6.4211C31.4363 5.82245 31.7379 5.12403 31.9135 4.37185L32 4L31.9915 4.00626L19.917 11.1326C19.2808 11.5081 18.7248 12.0626 18.2933 12.7518C17.8618 13.441 17.5669 14.2458 17.4322 15.1015Z" />
|
||||
<path d="M19.4927 27.2739L25.9678 23.495C26.4968 23.1864 26.967 22.7424 27.3469 22.1927C27.7272 21.6427 28.0089 20.9999 28.1735 20.3051L28.3012 19.7658L28.2563 19.7915V19.7934L19.1382 25.1135C18.9879 25.2033 18.8117 25.2396 18.6382 25.2165C18.4605 25.1898 18.2961 25.1069 18.1688 24.9802C18.0275 24.84 17.9243 24.666 17.8691 24.4747C17.8088 24.272 17.7948 24.0583 17.8282 23.8495C17.9516 23.0745 18.22 22.3455 18.6117 21.7215C19.0031 21.0974 19.5071 20.5953 20.0836 20.2551L27.816 15.6905C28.3366 15.383 28.799 14.9449 29.1749 14.4033C29.5504 13.8621 29.8306 13.2296 29.9974 12.5466C30.0515 12.3254 30.1016 12.1188 30.1421 11.9473L30.1075 11.9664L19.721 18.0979C18.7825 18.652 17.9619 19.4697 17.3242 20.4859C16.6865 21.5021 16.2495 22.6883 16.0485 23.9504C15.9607 24.4992 15.9974 25.0608 16.156 25.5936C16.3143 26.1182 16.5867 26.5784 16.9439 26.923C17.301 27.2676 17.7281 27.4826 18.178 27.5449C18.6283 27.6067 19.0833 27.5128 19.4924 27.2739H19.4927Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const MngoMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
opacity="0.9"
|
||||
d="M19.0212 21.5435C17.4632 25.2678 14.4719 27.7339 10.8478 28.1074C10.7699 28.1178 9.77798 28.1961 9.23047 28.1556C13.529 31.2983 18.6002 31.8232 18.6002 31.8232C19.6859 31.9345 20.9149 32.0257 22.1483 31.9935C22.5826 30.8595 22.8271 29.5612 22.757 28.0881C22.5941 24.6669 24.5779 22.9105 26.7261 22.0094C25.6251 20.3072 24.8035 18.2455 24.2408 16.3154C22.5633 16.7617 20.433 18.165 19.0212 21.5435Z"
|
||||
/>
|
||||
<path d="M22.6894 28.0638C22.7599 29.5368 22.4646 30.8659 22.0303 31.9999C25.2148 31.9161 28.547 31.0069 29.3976 27.5467C29.5779 26.8126 29.6009 26.0147 29.3011 25.321C29.0088 24.6452 28.4454 24.134 27.9453 23.5932C27.4775 23.0764 27.0534 22.5218 26.6771 21.9351C24.5308 22.8365 22.5266 24.643 22.6894 28.0638Z" />
|
||||
<path d="M24.1304 15.9341C23.6411 14.6246 23.2245 13.3137 22.5913 12.0944C22.3796 11.683 22.1402 11.2864 21.8747 10.9074C21.2344 10.0001 20.553 9.11648 19.734 8.3642C18.3244 8.36828 16.8513 8.13162 15.5052 7.44092C14.1416 9.37503 12.5814 12.656 14.0095 16.4011C16.1184 21.9319 11.8388 25.7118 9.09229 28.0521L9.23102 28.1552C9.74596 28.1954 10.2635 28.188 10.7771 28.133C14.4009 27.7591 17.5654 25.2337 19.1234 21.5097C20.5356 18.1312 22.5899 16.8477 24.265 16.4011C24.2178 16.2453 24.1729 16.0896 24.1304 15.9341Z" />
|
||||
<path d="M6.1692 8.56934C4.06965 10.8692 2.96275 14.1035 3.00096 17.2599C3.02284 19.0964 3.50618 20.8243 4.29927 22.4116C4.41823 22.6497 4.54435 22.8846 4.67763 23.1164C9.09151 18.6858 7.49682 12.084 6.1692 8.56934Z" />
|
||||
<path
|
||||
opacity="0.9"
|
||||
d="M14.0839 16.4014C12.6558 12.6549 14.1811 9.3954 15.5428 7.46167C14.6448 6.99936 13.8459 6.3659 13.1911 5.59693C12.1301 5.57656 11.0734 5.73803 10.067 6.07433C8.4615 6.6059 7.10533 7.53957 6.02031 8.72807C7.31862 12.1656 8.87882 18.6234 4.5625 22.9568C5.38229 24.3886 6.45432 25.6929 7.65915 26.8428C8.13437 27.2958 8.63789 27.7182 9.16667 28.1074C11.9131 25.7682 16.1927 21.9322 14.0839 16.4014Z"
|
||||
/>
|
||||
<path d="M19.409 3.46675C22.3977 4.64598 24.4909 4.96536 26.0085 4.91974L26.0522 4.89155C20.3983 -4.75303 13.0054 2.84022 13.0054 2.84022L13.0161 2.85914C14.6108 2.57648 16.9285 2.48856 19.409 3.46675Z" />
|
||||
<path
|
||||
opacity="0.9"
|
||||
d="M19.4456 3.40024C16.9666 2.42354 14.6356 2.46064 13.0142 2.8594C17.2656 10.3132 25.3455 5.34474 26.0065 4.92001C24.4879 4.96563 22.4343 4.57948 19.4456 3.40024Z"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const RayMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M27.6636 12.0095V23.1677L15.5385 30.3318L3.4066 23.1677V8.83236L15.5385 1.66127L24.8572 7.1711L26.2637 6.34047L15.5385 0L2 8.00173V23.9983L15.5385 32L29.077 23.9983V11.1789L27.6636 12.0095Z" />
|
||||
<path d="M12.144 23.1747H10.1152V16.2113H16.8777C17.5175 16.204 18.1287 15.9393 18.5794 15.4742C19.0298 15.0092 19.2833 14.3813 19.2851 13.7263C19.2889 13.4025 19.2278 13.0813 19.1056 12.7825C18.9836 12.4837 18.8029 12.2137 18.5751 11.9889C18.3546 11.757 18.0906 11.5731 17.7988 11.4482C17.5072 11.3233 17.1939 11.26 16.8777 11.2622H10.1152V9.14404H16.8845C18.0695 9.1513 19.2041 9.63642 20.0422 10.4942C20.8801 11.352 21.3542 12.5133 21.3612 13.7263C21.3684 14.6549 21.0918 15.5625 20.57 16.3221C20.0898 17.0488 19.413 17.6165 18.6224 17.9557C17.8397 18.2097 17.0226 18.3359 16.2015 18.3294H12.144V23.1747Z" />
|
||||
<path d="M21.3133 23.0015H18.9465L17.1206 19.7412C17.8429 19.696 18.5555 19.5469 19.2373 19.2983L21.3133 23.0015Z" />
|
||||
<path d="M26.25 9.69088L27.6499 10.4869L29.0497 9.69088V8.00886L27.6499 7.17822L26.25 8.00886V9.69088Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const SolMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path d="M5.19951 22.1422C5.39263 21.9491 5.65815 21.8364 5.93977 21.8364H31.4786C31.9453 21.8364 32.1787 22.3997 31.8488 22.7296L26.8038 27.7746C26.6107 27.9677 26.3451 28.0804 26.0635 28.0804H0.52463C0.0579459 28.0804 -0.175396 27.5171 0.154501 27.1872L5.19951 22.1422Z" />
|
||||
<path d="M5.19951 3.30576C5.40067 3.11265 5.6662 3 5.93977 3H31.4786C31.9453 3 32.1787 3.56324 31.8488 3.89314L26.8038 8.93814C26.6107 9.13125 26.3451 9.2439 26.0635 9.2439H0.52463C0.0579459 9.2439 -0.175396 8.68066 0.154501 8.35077L5.19951 3.30576Z" />
|
||||
<path d="M26.8038 12.6637C26.6107 12.4706 26.3451 12.3579 26.0635 12.3579H0.52463C0.0579459 12.3579 -0.175396 12.9211 0.154501 13.251L5.19951 18.2961C5.39263 18.4892 5.65815 18.6018 5.93977 18.6018H31.4786C31.9453 18.6018 32.1787 18.0386 31.8488 17.7087L26.8038 12.6637Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const SrmMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M16.0422 26.2825C11.2198 26.2825 7.30371 22.3664 7.30371 17.544C7.30371 12.8559 15.2142 4.57619 15.5499 4.22933L15.9639 3.79297L16.389 4.21814C16.7359 4.565 24.7806 12.8447 24.7806 17.5328C24.7806 22.3664 20.8645 26.2825 16.0422 26.2825ZM15.975 5.48248C15.2813 6.23213 13.8268 7.85451 12.3834 9.75661C9.82119 13.1356 8.46735 15.8209 8.46735 17.5328C8.46735 21.7063 11.8687 25.1077 16.0422 25.1077C20.2156 25.1077 23.617 21.7063 23.617 17.5328C23.617 15.8209 22.2408 13.1356 19.6338 9.75661C18.168 7.8657 16.6799 6.23213 15.975 5.48248Z" />
|
||||
<path d="M16.042 29.0799C9.67558 29.0799 4.50635 23.8994 4.50635 17.5442C4.50635 11.3232 13.1889 2.6407 13.5581 2.28266C13.7819 2.05888 14.1623 2.05888 14.3861 2.28266C14.6098 2.50643 14.6098 2.88685 14.3861 3.11063C14.2966 3.20014 5.68117 11.8155 5.68117 17.5442C5.68117 23.2617 10.3357 27.9162 16.0532 27.9162C21.7707 27.9162 26.4252 23.2617 26.4252 17.5442C26.4252 15.1945 24.9036 11.9498 22.0168 8.13441C19.8015 5.21413 17.5749 2.99874 17.5525 2.97636C17.3175 2.75259 17.3175 2.38336 17.5525 2.14839C17.7763 1.91343 18.1455 1.91343 18.3805 2.14839C18.7609 2.51762 27.6001 11.312 27.6001 17.5442C27.5777 23.8994 22.4084 29.0799 16.042 29.0799Z" />
|
||||
<path d="M16.042 31.8769C8.2993 31.8769 2 25.5776 2 17.835C2 14.635 3.61119 10.6965 6.77762 6.14268C9.11608 2.78603 11.4098 0.391629 11.5105 0.290929C11.7343 0.0559642 12.1035 0.0559642 12.3385 0.27974C12.5734 0.503517 12.5734 0.872747 12.3497 1.10771C12.3273 1.13009 10.0112 3.54687 7.72867 6.8252C4.74126 11.1105 3.16364 14.9147 3.16364 17.835C3.16364 24.9287 8.93706 30.7133 16.042 30.7133C23.1469 30.7133 28.9203 24.9399 28.9203 17.835C28.9203 14.9147 27.3315 11.1105 24.3217 6.8252C22.0168 3.54687 19.6783 1.13009 19.6559 1.10771C19.4322 0.872747 19.4322 0.503517 19.6671 0.27974C19.9021 0.0559642 20.2713 0.0559642 20.4951 0.290929C20.8867 0.693726 30.0839 10.249 30.0839 17.835C30.0839 25.5776 23.7846 31.8769 16.042 31.8769Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const StepMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
opacity="0.4"
|
||||
d="M1.99121 8.03896L11.1807 2.68066V8.00879L6.60254 10.6807V16.0377L1.99121 18.6494V8.03896Z"
|
||||
/>
|
||||
<path d="M15.7631 0L29.5118 7.99871L24.9294 10.6649L11.1807 2.66624L15.7631 0Z" />
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M24.919 10.6605V15.9934L11.1714 7.99351V2.66064L24.919 10.6605Z"
|
||||
/>
|
||||
<path d="M11.161 8.00098L24.9098 15.9997L20.3274 18.6659L6.57861 10.6672L11.1614 8.00098H11.161Z" />
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M20.3266 18.6649V23.9978L6.57861 15.9979V10.665L20.3262 18.6649H20.3266Z"
|
||||
/>
|
||||
<path d="M6.59247 16.002L20.3412 24.0007L15.758 26.6669L2.00928 18.6682L6.59247 16.002Z" />
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M15.748 26.6628V31.9957L2 23.9954V18.6621L15.748 26.6624V26.6628Z"
|
||||
/>
|
||||
<path
|
||||
opacity="0.8"
|
||||
d="M15.7402 26.6643L20.2812 24.0466V18.7188L24.875 16V10.6875L29.4844 7.98438V24.0466L15.7402 31.997V26.6643Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const SushiMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12.1872 2.45254C10.104 2.28588 8.49309 2.79966 7.65982 3.96624L1.92428 11.9658C1.09101 13.1323 1.11868 14.8266 1.95195 16.7431C3.10464 19.3818 5.77117 22.5067 9.43758 25.1176C13.0901 27.7424 16.9093 29.27 19.7841 29.52C21.8533 29.6866 23.4782 29.1729 24.3114 28.0063L30.0331 20.0068C30.8664 18.8402 30.8388 17.1459 30.0055 15.2294C28.8667 12.5907 26.1862 9.46588 22.5337 6.84106C18.8673 4.23014 15.062 2.68863 12.1872 2.45254ZM29.1166 15.6182C29.7693 17.1459 29.9083 18.507 29.2416 19.4236L29.1999 19.493C28.5194 20.368 27.2278 20.6596 25.589 20.5346C22.8531 20.3124 19.2286 18.8263 15.7427 16.3265C12.2569 13.8267 9.68761 10.8685 8.59047 8.34093C7.93774 6.84104 7.7987 5.52168 8.42365 4.5912L8.45159 4.53573C9.11821 3.60524 10.4374 3.29965 12.1039 3.43853C14.8399 3.66073 18.4646 5.14671 21.9505 7.64653C25.4503 10.1464 28.0195 13.1045 29.1166 15.6182ZM23.9086 13.9101C23.367 12.6463 22.0756 11.1603 20.3257 9.91037C18.5897 8.66046 16.7704 7.92437 15.4094 7.79938C14.6316 7.74383 14.0066 7.86877 13.701 8.29929C13.3955 8.72982 13.4788 9.3548 13.7843 10.0631C14.3259 11.3269 15.6176 12.799 17.3675 14.0489C19.1174 15.2989 20.9228 16.0488 22.2977 16.1599C23.0615 16.2294 23.6864 16.1044 23.9919 15.6739C24.3113 15.2433 24.2281 14.6183 23.9086 13.9101ZM7.29195 6.82462C7.28714 6.70967 7.19006 6.62038 7.0751 6.62519C6.96015 6.62999 6.87087 6.72708 6.87567 6.84203L6.88937 7.06823C6.89845 7.18292 6.99878 7.26854 7.11347 7.25946C6.99972 7.27668 6.92407 7.40408 6.94129 7.51784C7.20579 9.26492 8.18307 10.9449 9.40447 12.4567C9.47677 12.5462 9.60793 12.5601 9.69743 12.4878C9.78692 12.4155 9.80086 12.2844 9.72856 12.1949C8.52755 10.7083 7.60178 9.09714 7.35323 7.45547C7.33669 7.34622 7.23569 7.25014 7.12695 7.25796C7.23479 7.24242 7.31343 7.14551 7.30471 7.03536L7.29195 6.82462ZM7.12695 7.25796C7.1225 7.2586 7.11801 7.2591 7.11347 7.25946C7.11798 7.25878 7.12247 7.25828 7.12695 7.25796ZM13.5676 16.0328C13.4804 15.9577 13.3489 15.9676 13.2739 16.0548C13.1988 16.142 13.2087 16.2735 13.2959 16.3486L13.4622 16.4911L13.6738 16.6687C13.7625 16.742 13.8938 16.7295 13.9671 16.6408C14.0404 16.5521 14.0279 16.4208 13.9392 16.3475L13.7324 16.174L13.5676 16.0328ZM14.3621 16.6869C14.2713 16.6161 14.1404 16.6323 14.0697 16.7231C13.999 16.8138 14.0152 16.9447 14.1059 17.0154C15.8562 18.38 17.9809 19.572 20.0896 20.4245C20.1963 20.4676 20.3177 20.4161 20.3609 20.3095C20.404 20.2028 20.3525 20.0814 20.2458 20.0383C18.1692 19.1987 16.0788 18.0253 14.3621 16.6869ZM27.1295 21.7185C27.2431 21.7003 27.3204 21.5934 27.3022 21.4798C27.2839 21.3662 27.177 21.2889 27.0634 21.3072L26.8028 21.3426C26.6884 21.3554 26.6061 21.4585 26.6189 21.5728C26.6318 21.6871 26.7348 21.7694 26.8492 21.7566L27.1295 21.7185Z"
|
||||
/>
|
||||
<g clipPath="url(#clip1)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.9507 18.6337L11.7713 18.8837C11.7431 18.9234 11.6883 18.9426 11.6172 18.9367C11.5254 18.9291 11.4037 18.8806 11.287 18.7969C11.1704 18.7132 11.0853 18.6135 11.0482 18.5291C11.02 18.4636 11.0204 18.4058 11.0491 18.3661L11.2281 18.116C11.2567 18.0763 11.3114 18.0572 11.3822 18.063C11.474 18.0706 11.5961 18.1192 11.7128 18.2029C11.8294 18.2865 11.9145 18.3863 11.9511 18.4707C11.9798 18.5361 11.9789 18.594 11.9507 18.6337ZM11.2761 18.1504C11.2946 18.1247 11.3317 18.118 11.3776 18.1218C11.4614 18.1287 11.5717 18.1744 11.6782 18.2508C11.7848 18.3271 11.8635 18.4171 11.8972 18.4942C11.9153 18.5364 11.9212 18.5737 11.9027 18.5993L11.9267 18.6165L11.9027 18.5993L11.7233 18.8494C11.7052 18.8751 11.6681 18.8817 11.6222 18.8779C11.5384 18.8711 11.4277 18.8254 11.3211 18.749C11.2146 18.6726 11.1358 18.5826 11.1026 18.5056C11.084 18.4633 11.0786 18.4261 11.0971 18.4005L11.2761 18.1504Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.2524 18.1394C11.3109 18.0577 11.5093 18.0996 11.6954 18.233C11.8815 18.3663 11.9851 18.541 11.9266 18.6227L11.7476 18.8727C11.6891 18.9544 11.4903 18.9125 11.3042 18.7791C11.118 18.6457 11.0145 18.4711 11.073 18.3894L11.2524 18.1394Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.2394 18.1239C11.2654 18.0875 11.3157 18.0714 11.3808 18.0766C11.4707 18.084 11.5896 18.1322 11.7042 18.2138C11.8183 18.2958 11.9021 18.3935 11.9377 18.4759C11.9637 18.5358 11.9646 18.5888 11.9385 18.6252L11.7597 18.8752C11.7337 18.9117 11.6829 18.9277 11.6182 18.9225C11.5284 18.9147 11.4091 18.867 11.2949 18.7849C11.1803 18.7033 11.097 18.6057 11.061 18.5232C11.0349 18.4633 11.0341 18.4104 11.0601 18.3739L11.2394 18.1239ZM11.9138 18.6074V18.607C11.9346 18.5783 11.9303 18.5358 11.9099 18.4881C11.8756 18.4095 11.7953 18.3171 11.6859 18.239C11.577 18.1608 11.4637 18.1144 11.3782 18.1075C11.3262 18.1031 11.2849 18.1127 11.2641 18.1417L11.2632 18.1435C11.2437 18.1726 11.248 18.2138 11.2684 18.2607C11.3027 18.3396 11.383 18.4321 11.4919 18.5102C11.6009 18.5883 11.7141 18.6348 11.7996 18.6417C11.8509 18.6456 11.8912 18.6365 11.9125 18.6092L11.9138 18.607V18.6074ZM11.6352 18.3097C11.6898 18.3488 11.7302 18.3952 11.7471 18.4347C11.7571 18.4568 11.7597 18.4764 11.7497 18.4898C11.7402 18.5033 11.7207 18.5072 11.6968 18.505C11.6538 18.5015 11.5974 18.4781 11.5427 18.439C11.488 18.4 11.4477 18.354 11.4307 18.3145C11.4212 18.2923 11.4186 18.2728 11.4281 18.2594C11.4377 18.2459 11.4572 18.242 11.4815 18.2437C11.5241 18.2476 11.5809 18.2706 11.6352 18.3097Z"
|
||||
fill="#0E0F23"
|
||||
/>
|
||||
<path
|
||||
d="M11.2217 18.2134C11.2265 18.3275 11.3389 18.4365 11.4252 18.5102C11.5454 18.6127 11.739 18.6895 11.8471 18.6721"
|
||||
stroke="white"
|
||||
strokeWidth="0.0130199"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeDasharray="0.03 0.03 0.33 0.33"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" />
|
||||
</clipPath>
|
||||
<clipPath id="clip1">
|
||||
<rect width="1" height="1" transform="translate(11 18)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const UniMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path d="M12.8988 7.28182C12.552 7.23228 12.5355 7.21577 12.7006 7.19926C13.0143 7.14972 13.7409 7.21577 14.2527 7.33135C15.4416 7.61205 16.5149 8.33858 17.6542 9.60999L17.9514 9.95674L18.3807 9.89069C20.2135 9.59348 22.0959 9.82465 23.6645 10.5512C24.0938 10.7493 24.7708 11.1456 24.8534 11.2447C24.8864 11.2777 24.9359 11.4923 24.9689 11.707C25.0845 12.4831 25.035 13.061 24.7873 13.5068C24.6552 13.7545 24.6552 13.8205 24.7378 14.0352C24.8038 14.2003 25.002 14.3159 25.1836 14.3159C25.5799 14.3159 25.9927 13.6884 26.1908 12.8133L26.2734 12.4665L26.422 12.6317C27.2641 13.5728 27.9246 14.8773 28.0236 15.8019L28.0567 16.0496L27.908 15.835C27.6604 15.4552 27.4292 15.2075 27.1155 14.9929C26.5541 14.6131 25.9596 14.4975 24.391 14.415C22.971 14.3324 22.1619 14.2168 21.3693 13.9526C20.0154 13.5068 19.3219 12.9289 17.7202 10.7988C17.0102 9.85767 16.5644 9.3458 16.1186 8.91649C15.1444 7.97532 14.1702 7.47996 12.8988 7.28182Z" />
|
||||
<path d="M25.2003 9.37895C25.2333 8.75149 25.3159 8.3387 25.4975 7.95892C25.5635 7.81032 25.6296 7.67822 25.6461 7.67822C25.6626 7.67822 25.6296 7.79381 25.5801 7.9259C25.448 8.28916 25.4315 8.80103 25.514 9.37895C25.6296 10.122 25.6791 10.2211 26.4717 11.0301C26.835 11.4099 27.2643 11.8888 27.4294 12.0869L27.7101 12.4502L27.4294 12.186C27.0826 11.8557 26.2901 11.2283 26.1084 11.1457C25.9929 11.0797 25.9763 11.0797 25.8938 11.1622C25.8277 11.2283 25.8112 11.3273 25.8112 11.8062C25.7947 12.5492 25.6956 13.0116 25.448 13.4904C25.3159 13.7381 25.2994 13.6885 25.4149 13.4078C25.4975 13.1932 25.514 13.0941 25.514 12.3841C25.514 10.9476 25.3489 10.6008 24.3417 10.0229C24.094 9.8743 23.6647 9.65965 23.417 9.54406C23.1528 9.42848 22.9547 9.32941 22.9712 9.32941C23.0042 9.29639 23.9784 9.57709 24.3582 9.74221C24.9361 9.97337 25.0352 9.98989 25.1012 9.97337C25.1507 9.92384 25.1838 9.79174 25.2003 9.37895Z" />
|
||||
<path d="M13.576 11.8387C12.8825 10.881 12.4366 9.39494 12.5357 8.28864L12.5687 7.94189L12.7339 7.97492C13.0311 8.02445 13.5429 8.2226 13.7906 8.3712C14.4511 8.76749 14.7483 9.31238 15.029 10.6664C15.1116 11.0626 15.2271 11.525 15.2767 11.6736C15.3592 11.9213 15.673 12.4992 15.9372 12.8624C16.1188 13.1266 16.0032 13.2587 15.5904 13.2257C14.963 13.1596 14.1209 12.5817 13.576 11.8387Z" />
|
||||
<path d="M24.3578 19.0217C21.0884 17.7008 19.9326 16.5614 19.9326 14.6295C19.9326 14.3488 19.9491 14.1177 19.9491 14.1177C19.9656 14.1177 20.0812 14.2167 20.2298 14.3323C20.8903 14.8607 21.6333 15.0919 23.6973 15.3891C24.9027 15.5707 25.5962 15.7028 26.2236 15.9175C28.2216 16.5779 29.46 17.9319 29.7572 19.7647C29.8397 20.2931 29.7902 21.3003 29.6581 21.8287C29.5425 22.2415 29.2123 23.0011 29.1297 23.0176C29.1132 23.0176 29.0802 22.935 29.0802 22.8029C29.0472 22.1094 28.7004 21.4489 28.1225 20.9371C27.429 20.3426 26.5374 19.8968 24.3578 19.0217Z" />
|
||||
<path d="M22.0464 19.5667C22.0134 19.319 21.9308 19.0053 21.8813 18.8732L21.7987 18.6255L21.9473 18.8071C22.162 19.0548 22.3271 19.352 22.4757 19.7648C22.5913 20.0785 22.5913 20.1776 22.5913 20.6895C22.5913 21.1848 22.5748 21.3004 22.4757 21.5811C22.3106 22.0269 22.1125 22.3407 21.7822 22.6874C21.1878 23.2983 20.4117 23.6286 19.3054 23.7772C19.1073 23.7937 18.5459 23.8432 18.0505 23.8763C16.8121 23.9423 15.9866 24.0744 15.2435 24.3386C15.1444 24.3716 15.0454 24.4046 15.0289 24.3881C14.9958 24.3551 15.5077 24.0579 15.9205 23.8598C16.4984 23.5791 17.0928 23.4304 18.3973 23.1993C19.0412 23.1002 19.7017 22.9681 19.8668 22.9021C21.5015 22.3902 22.3106 21.1188 22.0464 19.5667Z" />
|
||||
<path d="M23.5489 22.2253C23.1196 21.2841 23.0206 20.3925 23.2517 19.5504C23.2848 19.4678 23.3178 19.3853 23.3508 19.3853C23.3838 19.3853 23.4829 19.4348 23.582 19.5008C23.7801 19.6329 24.1929 19.8641 25.2497 20.442C26.5871 21.1685 27.3467 21.7299 27.875 22.3739C28.3374 22.9353 28.6181 23.5793 28.7502 24.3718C28.8327 24.8177 28.7832 25.8909 28.6676 26.3367C28.3044 27.7403 27.4788 28.8631 26.2734 29.507C26.0918 29.6061 25.9432 29.6721 25.9266 29.6721C25.9101 29.6721 25.9762 29.507 26.0753 29.3089C26.4715 28.4668 26.5211 27.6577 26.2239 26.7495C26.0422 26.1881 25.6625 25.5112 24.9029 24.3718C23.9948 23.0509 23.7801 22.7041 23.5489 22.2253Z" />
|
||||
<path d="M11.2476 27.2778C12.4695 26.2541 13.9721 25.5275 15.3591 25.2964C15.9535 25.1973 16.9442 25.2303 17.4891 25.3789C18.3642 25.6101 19.1568 26.1055 19.5696 26.7164C19.9659 27.3108 20.1475 27.8227 20.3292 28.962C20.3952 29.4078 20.4778 29.8702 20.4943 29.9692C20.6264 30.5637 20.8906 31.026 21.2208 31.2737C21.7327 31.6534 22.6243 31.67 23.4994 31.3397C23.648 31.2902 23.7801 31.2406 23.7801 31.2572C23.8132 31.2902 23.3673 31.5874 23.0701 31.736C22.6573 31.9507 22.3271 32.0167 21.8813 32.0167C21.0887 32.0167 20.4117 31.6039 19.8668 30.7783C19.7512 30.6132 19.5201 30.1344 19.3219 29.6885C18.744 28.3511 18.4468 27.9548 17.7698 27.509C17.1754 27.1292 16.4158 27.0466 15.8379 27.3273C15.0784 27.6906 14.8802 28.6648 15.4086 29.2592C15.6233 29.5069 16.0196 29.705 16.3498 29.7546C16.9607 29.8371 17.4891 29.3583 17.4891 28.7474C17.4891 28.3511 17.3405 28.1199 16.9442 27.9383C16.4158 27.7071 15.8379 27.9713 15.8544 28.4832C15.8544 28.6978 15.9535 28.8299 16.1682 28.929C16.3003 28.995 16.3003 28.995 16.2012 28.9785C15.7223 28.8795 15.6068 28.285 15.9865 27.9053C16.4489 27.4429 17.4231 27.6411 17.7533 28.285C17.8854 28.5492 17.9019 29.0776 17.7863 29.4078C17.5056 30.1344 16.7131 30.5141 15.904 30.2995C15.3591 30.1509 15.1279 30.0023 14.4674 29.3253C13.3116 28.1364 12.8658 27.9053 11.2146 27.6576L10.9009 27.608L11.2476 27.2778Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2.56214 0.71001C6.4094 5.38287 12.3372 12.6481 12.6344 13.0444C12.8821 13.3746 12.783 13.6883 12.3702 13.9195C12.139 14.0516 11.6602 14.1837 11.429 14.1837C11.1648 14.1837 10.8511 14.0516 10.6364 13.8369C10.4878 13.6883 9.84387 12.7472 8.39083 10.485C7.28453 8.75129 6.34336 7.31476 6.32684 7.29825C6.2608 7.26522 6.2608 7.26522 8.27524 10.8648C9.54666 13.1269 9.95946 13.936 9.95946 14.0351C9.95946 14.2497 9.89341 14.3653 9.62922 14.6625C9.1834 15.1579 8.98525 15.7193 8.83665 16.8916C8.67153 18.1961 8.22571 19.1207 6.95429 20.6894C6.21126 21.614 6.09568 21.7792 5.91405 22.1589C5.68288 22.6213 5.61683 22.8854 5.58381 23.4799C5.55079 24.1073 5.61683 24.5036 5.79846 25.098C5.96358 25.6264 6.14521 25.9732 6.59103 26.6502C6.97081 27.2446 7.20197 27.6904 7.20197 27.8555C7.20197 27.9876 7.235 27.9876 7.82942 27.8555C9.24944 27.5253 10.4218 26.9639 11.0658 26.2704C11.462 25.8411 11.5611 25.6099 11.5611 25.0155C11.5611 24.6357 11.5446 24.5531 11.4455 24.322C11.2804 23.9587 10.9667 23.6615 10.2897 23.1992C9.39805 22.5882 9.01828 22.0929 8.91921 21.4324C8.83665 20.871 8.93572 20.4912 9.43108 19.451C9.94294 18.3777 10.075 17.9319 10.1576 16.8421C10.2071 16.1486 10.2897 15.8679 10.4878 15.6533C10.7025 15.4221 10.8841 15.3395 11.396 15.2735C12.2381 15.1579 12.783 14.9432 13.2123 14.5304C13.5921 14.1837 13.7572 13.8369 13.7737 13.3251L13.7902 12.9453L13.5756 12.7141C12.7995 11.8225 2.05027 0 2.00073 0C1.98422 0 2.24841 0.313726 2.56214 0.71001ZM7.63128 24.1899C7.81291 23.8762 7.71384 23.4799 7.41663 23.2817C7.13593 23.1001 6.70662 23.1827 6.70662 23.4303C6.70662 23.4964 6.73964 23.5624 6.83871 23.5955C6.98732 23.678 7.00383 23.7606 6.88825 23.9422C6.77266 24.1238 6.77266 24.289 6.92127 24.4045C7.15244 24.5862 7.46616 24.4871 7.63128 24.1899Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.3189 15.5042C13.9226 15.6198 13.5428 16.0491 13.4272 16.4784C13.3612 16.7426 13.3942 17.2215 13.5098 17.3701C13.6914 17.6012 13.8565 17.6673 14.3189 17.6673C15.227 17.6673 16.0031 17.271 16.0856 16.7922C16.1682 16.3959 15.8214 15.851 15.3426 15.6033C15.0949 15.4712 14.583 15.4217 14.3189 15.5042ZM15.3756 16.3298C15.5077 16.1317 15.4582 15.917 15.2105 15.7684C14.7647 15.4877 14.0877 15.7189 14.0877 16.1482C14.0877 16.3628 14.4344 16.594 14.7647 16.594C14.9793 16.594 15.2765 16.4619 15.3756 16.3298Z"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const UsdtMonoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M16.023 15.7763C17.3269 15.7763 17.9114 15.7414 18.0245 15.7329L18.0207 15.732C22.0208 15.5547 25.0047 14.8571 25.0047 14.0237C25.0047 13.1903 22.0199 12.4927 18.0207 12.3145V15.0391C17.9085 15.0494 17.2854 15.1013 16.0409 15.1013C15.0039 15.1013 14.2535 15.057 13.9914 15.0381V12.3126C9.98372 12.4917 6.99236 13.1884 6.99236 14.0237C6.99236 14.859 9.98372 15.5566 13.9914 15.7329C14.2497 15.7452 14.986 15.7763 16.023 15.7763Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.0244761 14.4741L5.8592 2.21826C5.8783 2.17698 5.90893 2.14211 5.94741 2.11786C5.98588 2.0936 6.03055 2.081 6.07603 2.08156H25.9258C25.971 2.08144 26.0154 2.09436 26.0535 2.11877C26.0916 2.14318 26.1219 2.17804 26.1407 2.2192L31.9755 14.475C31.9977 14.5206 32.0047 14.5721 31.9955 14.622C31.9864 14.6719 31.9615 14.7175 31.9245 14.7522L16.1664 29.8514C16.1216 29.8943 16.062 29.9183 16 29.9183C15.9379 29.9183 15.8783 29.8943 15.8336 29.8514L0.075385 14.7513C0.0384323 14.7166 0.0135572 14.6709 0.00439729 14.6211C-0.00476259 14.5712 0.00227334 14.5197 0.0244761 14.4741ZM18.0245 9.59369V12.0326C22.5521 12.242 25.954 13.1385 25.954 14.2141C25.954 15.2898 22.5488 16.1873 18.0235 16.3957V24.214H13.9904V16.3985C9.45484 16.1892 6.04395 15.2917 6.04395 14.2151C6.04395 13.1385 9.45484 12.24 13.9904 12.0317V9.59369H8.41026V5.87451H23.6056V9.59369H18.0245Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const CumulativeSizeIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="14" y1="5" x2="16" y2="5"></line>
|
||||
<line x1="14" y1="10" x2="18" y2="10"></line>
|
||||
<line x1="14" y1="15" x2="20" y2="15"></line>
|
||||
<line x1="14" y1="20" x2="22" y2="20"></line>
|
||||
<line x1="10" y1="5" x2="8" y2="5"></line>
|
||||
<line x1="10" y1="10" x2="6" y2="10"></line>
|
||||
<line x1="10" y1="15" x2="4" y2="15"></line>
|
||||
<line x1="10" y1="20" x2="2" y2="20"></line>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const StepSizeIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="14" y1="5" x2="22" y2="5"></line>
|
||||
<line x1="14" y1="10" x2="18" y2="10"></line>
|
||||
<line x1="14" y1="15" x2="20" y2="15"></line>
|
||||
<line x1="14" y1="20" x2="16" y2="20"></line>
|
||||
<line x1="10" y1="5" x2="8" y2="5"></line>
|
||||
<line x1="10" y1="10" x2="4" y2="10"></line>
|
||||
<line x1="10" y1="15" x2="2" y2="15"></line>
|
||||
<line x1="10" y1="20" x2="6" y2="20"></line>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
|
||||
const imageClasses =
|
||||
'w-auto h-10 lg:h-12 rounded-md lg:rounded-lg border-2 border-th-bkg-4'
|
||||
|
||||
const AppStoreButtons = () => {
|
||||
const [mobileDevice, setMobileDevice] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const userAgent = navigator.userAgent
|
||||
if (/android/i.test(userAgent)) {
|
||||
setMobileDevice('android')
|
||||
}
|
||||
if (/iPad|iPhone|iPod/i.test(userAgent)) {
|
||||
setMobileDevice('ios')
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex space-x-3 lg:space-x-5">
|
||||
<a
|
||||
href="https://apps.apple.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className={`${imageClasses} ${
|
||||
mobileDevice === 'ios' ? 'animate-pulse border-th-active' : ''
|
||||
}`}
|
||||
src="/images/app-store-dark.png"
|
||||
alt="iOS App Store"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=markets.mango"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className={`${imageClasses} ${
|
||||
mobileDevice === 'android' ? 'animate-pulse border-th-active' : ''
|
||||
}`}
|
||||
src="/images/google-play-dark.png"
|
||||
alt="Google Play Store"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppStoreButtons
|
||||
|
|
@ -3,6 +3,7 @@ import SectionWrapper from '../shared/SectionWrapper'
|
|||
import ColorBlur from '../shared/ColorBlur'
|
||||
import { useTheme } from 'next-themes'
|
||||
import CheckBullet from '../shared/CheckBullet'
|
||||
import AppStoreButtons from './AppStoreButtons'
|
||||
|
||||
const AppTopSection = () => {
|
||||
const { t } = useTranslation(['common', 'mobile-app'])
|
||||
|
|
@ -18,29 +19,8 @@ const AppTopSection = () => {
|
|||
<CheckBullet>{t('mobile-app:bullet-3')}</CheckBullet>
|
||||
<CheckBullet>{t('mobile-app:bullet-4')}</CheckBullet>
|
||||
<CheckBullet>{t('mobile-app:bullet-5')}</CheckBullet>
|
||||
<div className="mt-8 flex space-x-6">
|
||||
<a
|
||||
href="https://apps.apple.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-auto h-12 rounded-lg"
|
||||
src="/images/app-store-dark.png"
|
||||
alt="iOS App Store"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=markets.mango"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-auto h-12 rounded-lg"
|
||||
src="/images/google-play-dark.png"
|
||||
alt="Google Play Store"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-8">
|
||||
<AppStoreButtons />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-7 relative h-48 sm:h-56 md:h-80 lg:h-full">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import { Transition } from '@headlessui/react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import AppStoreButtons from './AppStoreButtons'
|
||||
import { ArrowRightIcon } from '@heroicons/react/20/solid'
|
||||
|
||||
const CtaBar = () => {
|
||||
const { t } = useTranslation('mobile-app')
|
||||
const [show, setShow] = useState(true)
|
||||
// const [lastScrollY, setLastScrollY] = useState(0)
|
||||
|
||||
const controlNavbar = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const bottom =
|
||||
Math.ceil(window.innerHeight + window.scrollY) >=
|
||||
document.documentElement.scrollHeight
|
||||
if (window.scrollY > 800 && !bottom) {
|
||||
setShow(true)
|
||||
} else {
|
||||
setShow(false)
|
||||
}
|
||||
// if (bottom) {
|
||||
// setLastScrollY(0)
|
||||
// } else {
|
||||
// setLastScrollY(window.scrollY)
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('scroll', controlNavbar)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', controlNavbar)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Transition
|
||||
className="fixed bottom-0 w-full z-30 flex items-center justify-center md:justify-between page-x-padding py-4 bg-th-bkg-1 border-t border-th-bkg-3"
|
||||
show={show}
|
||||
enter="transition-all ease-in duration-300"
|
||||
enterFrom="translate-y-full"
|
||||
enterTo="translate-y-0"
|
||||
leave="transition-all ease-out duration-300"
|
||||
leaveFrom="translate-y-0"
|
||||
leaveTo="translate-y-full"
|
||||
>
|
||||
<div className="hidden md:flex md:items-center md:space-x-3">
|
||||
<p className="text-th-fgd-1 font-display">{t('available-platforms')}</p>
|
||||
<ArrowRightIcon className="sideways-bounce h-6 w-6 text-th-fgd-3" />
|
||||
</div>
|
||||
<AppStoreButtons />
|
||||
</Transition>
|
||||
)
|
||||
}
|
||||
|
||||
export default CtaBar
|
||||
|
|
@ -1,62 +1,32 @@
|
|||
import {
|
||||
ChevronRightIcon,
|
||||
CurrencyEuroIcon,
|
||||
GlobeAsiaAustraliaIcon,
|
||||
KeyIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { LinkButton } from '../shared/Button'
|
||||
import HeadingTagline from '../shared/HeadingTagline'
|
||||
import IconWithText from '../shared/IconWithText'
|
||||
import InlineImageWithText from '../shared/InlineImageWithText'
|
||||
import SectionWrapper from '../shared/SectionWrapper'
|
||||
import Steps from '../shared/Steps'
|
||||
import AppTopSection from './AppTopSection'
|
||||
import CtaBar from './CtaBar'
|
||||
|
||||
const STEPS = (t) => [
|
||||
const STEPS = [
|
||||
{
|
||||
desc: 'mobile-app:get-wallet-desc',
|
||||
desc: 'mobile-app:buy-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'mobile-app:get-wallet',
|
||||
children: (
|
||||
<div className="flex items-center space-x-6 mt-4 lg:mt-6">
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/phantom/bfnaelmomeimhlpmgjnjophhpkkoljpa"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('mobile-app:get-phantom')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/solflare-wallet/bhhhlbepdkbapadjdnnojkbgioiodbic"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('mobile-app:get-solflare')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
title: 'mobile-app:buy',
|
||||
},
|
||||
{
|
||||
desc: 'mobile-app:fund-wallet-desc',
|
||||
desc: 'mobile-app:invest-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'mobile-app:fund-wallet',
|
||||
title: 'mobile-app:invest',
|
||||
},
|
||||
{
|
||||
desc: 'mobile-app:connect-mango-desc',
|
||||
desc: 'mobile-app:stack-growth-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'mobile-app:connect-mango',
|
||||
},
|
||||
{
|
||||
desc: 'mobile-app:trade-earn-borrow-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'mobile-app:trade-earn-borrow',
|
||||
title: 'mobile-app:stack-growth',
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -81,6 +51,7 @@ const MobileAppPage = () => {
|
|||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<CtaBar />
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
|
|
@ -91,35 +62,20 @@ const MobileAppPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
<InlineImageWithText
|
||||
desc={t('mobile-app:token-listings-desc')}
|
||||
title={t('mobile-app:token-listings')}
|
||||
desc={t('mobile-app:send-payments-desc')}
|
||||
title={t('mobile-app:send-payments')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
/>
|
||||
<InlineImageWithText
|
||||
desc={t('mobile-app:earn-interest-desc')}
|
||||
title={t('mobile-app:earn-interest')}
|
||||
desc={t('mobile-app:accept-payments-desc')}
|
||||
title={t('mobile-app:accept-payments')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('mobile-app:deposit-now')}
|
||||
reverse
|
||||
/>
|
||||
<InlineImageWithText
|
||||
desc={t('mobile-app:risk-engine-desc')}
|
||||
title={t('mobile-app:risk-engine')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
/>
|
||||
<InlineImageWithText
|
||||
desc={t('mobile-app:borrow-any-token-desc')}
|
||||
title={t('mobile-app:borrow-any-token')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('mobile-app:borrow-now')}
|
||||
reverse
|
||||
/>
|
||||
</SectionWrapper>
|
||||
{/* <SectionWrapper>
|
||||
<h2 className="mb-4">{t('mobile-app:trading-bots-welcome')}</h2>
|
||||
|
|
@ -161,13 +117,13 @@ const MobileAppPage = () => {
|
|||
<SectionWrapper noPaddingX>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-12">
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<HeadingTagline text={t('mobile-app:getting-started')} />
|
||||
<h2>{t('mobile-app:steps-heading')}</h2>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<h2>{t('mobile-app:new-to-mango')}</h2>
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding flex justify-end">
|
||||
<HeadingTagline text={t('mobile-app:steps-tagline')} />
|
||||
</div>
|
||||
</div>
|
||||
<Steps steps={STEPS(t)} />
|
||||
<Steps steps={STEPS} />
|
||||
</SectionWrapper>
|
||||
{/* add the below when we have some textimonials */}
|
||||
{/* <SectionWrapper>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import FourOhfour from '../components/FourOhFour'
|
||||
import FourOhfour from '../components/404/FourOhFour'
|
||||
|
||||
const FourOh = () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
import NavBarBeta from '../components/navigation/TopNavigation'
|
||||
import HeroSectionMarkets from '../components/HeroSectionMarkets'
|
||||
import FeatureSection from '../components/FeatureSection'
|
||||
import FooterSection from '../components/FooterSection'
|
||||
|
||||
const Markets = () => {
|
||||
return (
|
||||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all overflow-hidden`}>
|
||||
<div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
|
||||
<NavBarBeta />
|
||||
<HeroSectionMarkets />
|
||||
<FeatureSection />
|
||||
<FooterSection />
|
||||
<div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Markets
|
||||
|
|
@ -1,15 +1,28 @@
|
|||
{
|
||||
"accept-payments": "Accept payments",
|
||||
"accept-payments-desc": "Accept payment from your friends by showing your QR code or sending them a payment request.",
|
||||
"access-everywhere": "Accessible wherever you are in the world",
|
||||
"available-platforms": "Download on iOS and Android",
|
||||
"bullet-1": "Pay and request funds using your mobile number.",
|
||||
"bullet-2": "Make instant payments globally.",
|
||||
"bullet-3": "Buy crypto with your bank account.",
|
||||
"bullet-4": "Swap between 100s of tokens.",
|
||||
"bullet-5": "Earn interest on your balances.",
|
||||
"buy": "Buy",
|
||||
"buy-desc": "Buy crypto with cash using your bank account or credit card.",
|
||||
"easy-to-use": "User-friendly crypto.",
|
||||
"easy-to-use-tagline": "Onboard your grandma to crypto.",
|
||||
"invest": "Invest",
|
||||
"invest-desc": "Earn interest on your tokens by participating in our secure decentralized lending markets. ",
|
||||
"multiple-currencies": "No need for math. Use your home currency",
|
||||
"fully-custodial": "You're in control. Your keys. Your coins",
|
||||
"page-heading": "Send & receive payments instantly.",
|
||||
"pay-instantly": "Pay friends instantly.",
|
||||
"pay-with-phone": "Pay and receive funds with your phone number"
|
||||
"pay-with-phone": "Pay and receive funds with your phone number",
|
||||
"send-payments": "Send payments",
|
||||
"send-payments-desc": "Send payments to any contacts on your phone using your local currency. People who do not have the app will be notified about the awaiting payment.",
|
||||
"stack-growth": "Stack",
|
||||
"stack-growth-desc": "Sleep well at night knowing your crypto is stacking in a secure environment.",
|
||||
"steps-heading": "Invest in crypto.",
|
||||
"steps-tagline": "A secure home for your long-term crypto holdings."
|
||||
}
|
||||
|
|
@ -241,3 +241,21 @@ li {
|
|||
background-image: radial-gradient(at 300% 100%, #5b48ad 0, transparent 75%);
|
||||
@apply bg-th-bkg-1;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
|
||||
@keyframes sideways-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.sideways-bounce {
|
||||
animation: sideways-bounce 1s infinite;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue