Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

completed faq feature #889

Merged
merged 1 commit into from
Jul 3, 2023
Merged

completed faq feature #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion public/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -670,5 +670,20 @@
"goBack": "Go Back",
"pageNotFound": "Page not found",
"pageNotFoundDesc": "Oh dear dragon friend, it seems like the treasure you seek is not to be found. We encourage you to spread your wings and fly back to start your quest a new.",
"perpsBannerText": "QuickPerps is a Decentralized Perpetual Exchange designed to provide a range of trading features and deep liquidity for blue chip crypto assets. <alink>View</alink>"
"perpsBannerText": "QuickPerps is a Decentralized Perpetual Exchange designed to provide a range of trading features and deep liquidity for blue chip crypto assets. <alink>View</alink>",
"faqs": "FAQs",
"faq-1-title": "What is QuickSwap?",
"faq-1-content": "QuickSwap is the leading DEX on Polygon PoS, Polygon zkEVM, and Dogechain that’s fully decentralized and community-driven, building a comprehensive suite of DeFi products called the DragonFi ecosystem. It’s renowned for its high-performance, cost-efficient DeFi platforms, and pioneering role in onboarding new users and capital to the broader Polygon ecosystem.",
"faq-2-title": "What makes QuickSwap unique from other DEXs?",
"faq-2-content": "<underline>The QuickSwap DEX</underline> lets users perform their favorite DeFi actions such as swapping, LPing, staking, and farming to earn rewards. But QuickSwap also comes built with other useful features that set it apart, including QuickPerps (a decentralized Perpetual Exchange), a Gamma V3 integration (enabling active liquidity management), dTWAP/limit orders, and an on-site Gaming Hub built by VersaGames.",
"faq-3-title": "What is $QUICK?",
"faq-3-content": "<underline>$QUICK</underline> is QuickSwap’s native utility token that primarily serves as a governance token through which QuickSwap community members may vote on proposals issued by the team. $QUICK can also be staked in the Dragon’s Lair to earn additional rewards directly on-chain on the QuickSwap DEX.<break/><break/>Users on QuickSwap can also farm $QUICK by staking their LP tokens.",
"faq-4-title": "How does governance work in the QuickSwap DAO?",
"faq-4-content": "The QuickSwap DAO is composed of a series of smart contracts that allow $QUICK holders to exercise decision-making powers by voting on governance proposals put forth by the QuickSwap team.<break/><break/>Previous proposals and voting results are available on QuickSwap’s Snapshot page: <alink>https://snapshot.org/#/quickvote.eth</alink>",
"faq-5-title": "What is the Dragon’s Lair?",
"faq-5-content": "QuickSwap's Dragon's Lair lets users put their $QUICK tokens to work and earn additional rewards.<break/><break/>Users can either stake $QUICK to receive $dQUICK and earn staking rewards, or stake $QUICK in Dragon's Syrup Pools to earn yields in tokens from participating projects.<break/><break/>Note that staking in the Dragon’s Lair is only supported for New $QUICK. Users can convert from Old $QUICK to New $QUICK here: <alink>https://quickswap.exchange/#/convert</alink>.",
"faq-6-title": "What is QuickSwap’s Gamma V3 integration?",
"faq-6-content": "For QuickSwap’s V3, users can select designated price ranges for depositing their liquidity in pools, which means greater capital efficiency for LPs but manual adjusting of portfolio liquidity if prices fall out of range.<break/><break/>By integrating Gamma, QuickSwap V3 now supports active liquidity management, where users V3 LP positions are managed by the platform with auto-compounding rewards - that way, users never have to manually adjust their positions when assets fall out of designated price ranges.<break/><break/>Users can also stake their LP tokens in select Gamma V3 farms to earn additional yield in farming rewards.",
"faq-7-title": "What is QuickPerps?",
"faq-7-content": "<underline>QuickPerps</underline> is a decentralized Perpetual Exchange deployed on Polygon zkEVM where users can open long or short positions with up to 50x leverage on supported blue chip assets: $BTC, $ETH, $MATIC, $USDT, $USDC, and $DAI. It also supports a number of unique features that vastly improve user experience, including cross-usable assets, zero price impact on opening and closing positions, auto-compounding rewards, referral program, and high-value reward schemes for staking $QLP, an index token that users earn by providing liquidity."
}
139 changes: 137 additions & 2 deletions src/pages/LandingPage/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import React, { lazy, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Box, Grid } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Grid,
Typography,
} from '@material-ui/core';
import { ExpandMoreOutlined } from '@material-ui/icons';
import { useTranslation, Trans } from 'react-i18next';
import Motif from 'assets/images/Motif.svg';
import BuyWithFiat from 'assets/images/featured/BuyWithFiatNoPad.png';
import Analytics from 'assets/images/featured/Analytics.svg';
Expand All @@ -22,6 +30,7 @@ import 'pages/styles/landing.scss';
import { useIsV2 } from 'state/application/hooks';
import { getConfig } from 'config';
import { useActiveWeb3React } from 'hooks';

const SwapSection = lazy(() => import('./SwapSection'));
const BuyFiatSection = lazy(() => import('./BuyFiatSection'));
const GlobalSection = lazy(() => import('./GlobalSection'));
Expand Down Expand Up @@ -121,6 +130,112 @@ const LandingPage: React.FC = () => {
},
];

const faqs = [
{
header: t('faq-1-title'),
content: <Box>{t('faq-1-content')}</Box>,
},
{
header: t('faq-2-title'),
content: (
<Box>
<Trans
i18nKey='faq-2-content'
components={{
underline: <u></u>,
}}
/>
</Box>
),
},
{
header: t('faq-3-title'),
content: (
<Box>
<Trans
i18nKey='faq-3-content'
components={{
underline: <u></u>,
break: <br />,
}}
/>
</Box>
),
},
{
header: t('faq-4-title'),
content: (
<Box>
<Trans
i18nKey='faq-4-content'
components={{
underline: <u></u>,
break: <br />,
alink: (
<a
className='text-primary'
href='https://snapshot.org/#/quickvote.eth'
rel='noreferrer'
target='_blank'
/>
),
}}
/>
</Box>
),
},
{
header: t('faq-5-title'),
content: (
<Box>
<Trans
i18nKey='faq-5-content'
components={{
underline: <u></u>,
break: <br />,
alink: (
<a
className='text-primary'
href='https://quickswap.exchange/#/convert'
rel='noreferrer'
target='_blank'
/>
),
}}
/>
</Box>
),
},
{
header: t('faq-6-title'),
content: (
<Box>
<Trans
i18nKey='faq-6-content'
components={{
underline: <u></u>,
break: <br />,
}}
/>
</Box>
),
},
{
header: t('faq-7-title'),
content: (
<Box>
<Trans
i18nKey='faq-7-content'
components={{
underline: <u></u>,
break: <br />,
}}
/>
</Box>
),
},
];

const history = useHistory();
const { updateIsV2 } = useIsV2();

Expand Down Expand Up @@ -198,6 +313,26 @@ const LandingPage: React.FC = () => {
))}
</Grid>
</Box>
<Box className='communityContainer'>
<Box className='featureHeading'>
<h3>{t('faqs')}</h3>
<Box className='featureDivider' />
</Box>
<Box className=''>
{faqs.map((val, i) => (
<Accordion key={`accordation-{i}`}>
<AccordionSummary
expandIcon={<ExpandMoreOutlined />}
aria-controls='panel1a-content'
id='panel1a-header'
>
<Typography>{val.header}</Typography>
</AccordionSummary>
<AccordionDetails>{val.content}</AccordionDetails>
</Accordion>
))}
</Box>
</Box>
<Box className='communityContainer'>
<Box className='featureHeading'>
<h3>{t('joinCommunity')}</h3>
Expand Down
Loading