-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add buy klima view to dapp * update dapp to latest designs * update locales * update text and translations * update KLIMA text
- Loading branch information
Showing
11 changed files
with
2,585 additions
and
1,925 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,115 @@ | ||
| import { t, Trans } from "@lingui/macro"; | ||
| import Payment from "@mui/icons-material/Payment"; | ||
| import { providers } from "ethers"; | ||
|
|
||
| import { Anchor, ButtonPrimary, Text } from "@klimadao/lib/components"; | ||
| import { urls } from "@klimadao/lib/constants"; | ||
| import { useWeb3 } from "@klimadao/lib/utils"; | ||
| import LoginIcon from "@mui/icons-material/Login"; | ||
| import { Trans, t } from "@lingui/macro"; | ||
| import { CelebrationOutlined, TrendingUpOutlined } from "@mui/icons-material"; | ||
| import Payment from "@mui/icons-material/Payment"; | ||
| import { BalancesCard } from "components/BalancesCard"; | ||
| import { DisclaimerModal } from "components/DisclaimerModal"; | ||
| import { ImageCard } from "components/ImageCard"; | ||
| import * as styles from "../styles"; | ||
| import * as styles from "./styles"; | ||
|
|
||
| interface Props { | ||
| provider?: providers.JsonRpcProvider; | ||
| address?: string; | ||
| isConnected: boolean; | ||
| } | ||
| export const Buy = () => ( | ||
| <> | ||
| <DisclaimerModal /> | ||
| <BalancesCard assets={["klima", "sklima"]} tooltip={undefined} /> | ||
| <ImageCard /> | ||
|
|
||
| export const Buy = (props: Props) => { | ||
| const { toggleModal } = useWeb3(); | ||
| return ( | ||
| <> | ||
| <DisclaimerModal /> | ||
| <div className={styles.ctaCard}> | ||
| <div className={styles.ctaCard_header}> | ||
| {props.isConnected && props.address ? ( | ||
| <div> | ||
| <Text t="h4" className={styles.ctaCard_header_title}> | ||
| <Payment /> | ||
| <Trans id="buy.buy_klima">Buy KLIMA</Trans> | ||
| </Text> | ||
| <Text t="caption" className={styles.ctaCard_header_subtitle}> | ||
| <Trans id="buy.cta_1"> | ||
| If you are a beginner, we recommend following our step-by-step | ||
| tutorial: <Anchor href={urls.buy}>How to Buy KLIMA</Anchor>. | ||
| </Trans> | ||
| </Text> | ||
| <Text t="caption" className={styles.ctaCard_header_subtitle}> | ||
| <Trans id="buy.cta_2"> | ||
| Otherwise, if you already have a wallet with MATIC on Polygon, | ||
| the best way to get KLIMA is to swap on{" "} | ||
| <Anchor href={urls.sushiSwap}>Sushi.com</Anchor>. If you | ||
| prefer to pay with a credit card instead, you can use{" "} | ||
| <Anchor href={urls.transakMatic}>Transak</Anchor> to buy KLIMA | ||
| directly. | ||
| </Trans> | ||
| </Text> | ||
| </div> | ||
| ) : ( | ||
| <> | ||
| <Text t="h4" className={styles.ctaCard_header_title}> | ||
| <LoginIcon /> | ||
| <Trans id="buy.please_log_in"> | ||
| Please Log In Or Connect A Wallet | ||
| </Trans> | ||
| </Text> | ||
| <Text t="body2"> | ||
| <Trans id="buy.connect_to_buy" comment="Long sentence"> | ||
| This feature is available only to users who are logged in. You | ||
| can log in or create an account via the button below. | ||
| </Trans> | ||
| </Text> | ||
| <ButtonPrimary | ||
| label={t({ | ||
| id: "shared.login_connect", | ||
| message: "Login / Connect", | ||
| })} | ||
| onClick={toggleModal} | ||
| /> | ||
| </> | ||
| )} | ||
| <div className={styles.card}> | ||
| <div className={styles.cardCol}> | ||
| <Text t="h5" className={styles.cardTitle}> | ||
| <Payment /> | ||
| <Trans>Buy KLIMA</Trans> | ||
| </Text> | ||
| <Text color="lightest" t="caption" className={styles.cardDescription}> | ||
| <Trans> | ||
| Easily buy or sell KLIMA with low slippage and deep liquidity on{" "} | ||
| <Anchor href={urls.aerodrome} target="_blank"> | ||
| Aerodrome | ||
| </Anchor> | ||
| . | ||
| </Trans> | ||
| </Text> | ||
| </div> | ||
| <div className={styles.cardRow}> | ||
| <div className={styles.buttons}> | ||
| <ButtonPrimary | ||
| target="_blank" | ||
| href={urls.buyOnAerodrome} | ||
| label={t`Buy Klima on Aerodrome`} | ||
| /> | ||
| <Anchor | ||
| target="_blank" | ||
| href={urls.learnMoreLPs} | ||
| className="learn-more" | ||
| > | ||
| <Trans>Learn more about liquidity pools</Trans> | ||
| </Anchor> | ||
| </div> | ||
| </div> | ||
| <BalancesCard | ||
| assets={["klima", "sklima"]} | ||
| tooltip={ | ||
| <Trans id="stake.balancescard.tooltip" comment="Long sentence"> | ||
| Stake your KLIMA tokens to receive sKLIMA. After every rebase, your | ||
| sKLIMA balance will increase by the given percentage. | ||
| </Trans> | ||
| } | ||
| /> | ||
| <ImageCard /> | ||
| </> | ||
| ); | ||
| }; | ||
| <div className={styles.divider} /> | ||
| <div className={styles.cardRow}> | ||
| <div className={styles.cardCol}> | ||
| <Text t="h5" className={styles.cardTitle}> | ||
| <TrendingUpOutlined /> | ||
| <Trans>Put your KLIMA to work</Trans> | ||
| </Text> | ||
| <Text color="lightest" t="caption" className={styles.cardDescription}> | ||
| <Trans> | ||
| Head to{" "} | ||
| <Anchor href={urls.klimaBase} target="_blank"> | ||
| base.klimadao.finance | ||
| </Anchor>{" "} | ||
| to programmatically grow your position. | ||
| </Trans> | ||
| </Text> | ||
| </div> | ||
| </div> | ||
| <div className={styles.cardRow}> | ||
| <div className={styles.buttons}> | ||
| <ButtonPrimary | ||
| target="_blank" | ||
| href={urls.klimaAutocompounder} | ||
| label={t`KlimaDAO Autocompounder`} | ||
| className="secondary-button" | ||
| /> | ||
| <Anchor | ||
| target="_blank" | ||
| href={urls.learnMoreKlimaAutocompounder} | ||
| className="learn-more" | ||
| > | ||
| <Trans>Learn more about Autocompounder</Trans> | ||
| </Anchor> | ||
| </div> | ||
| </div> | ||
| <div className={styles.cardRow}> | ||
| <div className={styles.cardMessage}> | ||
| <div className="title"> | ||
| <CelebrationOutlined | ||
| fontSize="large" | ||
| htmlColor="var(--klima-green)" | ||
| /> | ||
| <Text t="body3"> | ||
| <Trans> | ||
| Announcing KlimaDAO 2.0: A Decentralized Carbon Market! | ||
| </Trans> | ||
| </Text> | ||
| </div> | ||
| <Text t="caption" color="lightest" className="description"> | ||
| <Trans> | ||
| KlimaDAO 2.0 represents a fundamental redesign of decentralized | ||
| market infrastructure for carbon monetization, retirement, and | ||
| offsets. While KlimaDAO has established a brand presence and | ||
| accumulated substantial carbon assets, the 2.0 model introduces | ||
| sophisticated mechanisms to become the dominant liquidity venue | ||
| for carbon on-chain by releasing the Klima X Automated Market | ||
| Maker (AMM). | ||
| </Trans> | ||
| </Text> | ||
| <Anchor href={urls.learnMoreKlima2_0} target="_blank"> | ||
| <Trans>Read more about KlimaDAO 2.0</Trans> | ||
| </Anchor> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import { css } from "@emotion/css"; | ||
| import breakpoints from "@klimadao/lib/theme/breakpoints"; | ||
|
|
||
| export const card = css` | ||
| position: relative; | ||
| display: grid; | ||
| background-color: var(--surface-02); | ||
| border-radius: 1.2rem; | ||
| padding: 2.4rem; | ||
| gap: 2.4rem; | ||
| align-content: start; | ||
| grid-column: 1 / 3; | ||
| grid-template-rows: unset !important; | ||
| height: fit-content; | ||
| & a { | ||
| text-decoration: underline; | ||
| } | ||
| ${breakpoints.desktop} { | ||
| grid-column: cardsleft; | ||
| grid-row: 2 / span 2; | ||
| grid-template-rows: 1fr 1fr 1fr; | ||
| align-items: start; | ||
| } | ||
| ${breakpoints.desktopLarge} { | ||
| padding: 3.2rem; | ||
| } | ||
| `; | ||
|
|
||
| export const cardMessage = css` | ||
| gap: 1rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 2rem; | ||
| border-radius: 1.2rem; | ||
| border: 0.1rem solid var(--surface-03); | ||
| & .title { | ||
| gap: 1rem; | ||
| display: flex; | ||
| font-weight: 600; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| & svg { | ||
| width: 2.4rem; | ||
| height: 2.4rem; | ||
| } | ||
| } | ||
| & .description { | ||
| font-weight: 500; | ||
| font-size: 1.4rem; | ||
| line-height: 2rem; | ||
| } | ||
| a { | ||
| font-weight: 500; | ||
| font-size: 1.4rem; | ||
| line-height: 1.6rem; | ||
| text-decoration: underline; | ||
| } | ||
| ${breakpoints.desktopLarge} { | ||
| margin-top: 2.4rem; | ||
| } | ||
| `; | ||
|
|
||
| export const buttons = css` | ||
| gap: 1rem; | ||
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| .secondary-button { | ||
| background-color: var(--white); | ||
| } | ||
| a { | ||
| flex: 1; | ||
| width: 100%; | ||
| padding: 0; | ||
| font-size: 1.4rem; | ||
| text-decoration: none; | ||
| letter-spacing: unset; | ||
| &.learn-more { | ||
| letter-spacing: unset; | ||
| text-transform: none; | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
| ${breakpoints.desktopLarge} { | ||
| gap: 2rem; | ||
| flex-direction: row; | ||
| } | ||
| `; | ||
|
|
||
| export const cardCol = css` | ||
| gap: 0.8rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| `; | ||
|
|
||
| export const cardRow = css` | ||
| gap: 0.8rem; | ||
| display: flex; | ||
| flex-direction: row; | ||
| `; | ||
|
|
||
| export const divider = css` | ||
| width: 100%; | ||
| height: 0.1rem; | ||
| margin: 2.4rem 0 0.6rem; | ||
| background: #393939; | ||
| `; | ||
|
|
||
| export const cardTitle = css` | ||
| gap: 1.2rem; | ||
| display: flex; | ||
| font-weight: 600; | ||
| align-items: center; | ||
| font-weight: 500; | ||
| line-height: 2.8rem; | ||
| font-size: 2.4rem !important; | ||
| `; | ||
|
|
||
| export const cardDescription = css` | ||
| font-weight: 500; | ||
| font-size: 1.4rem !important; | ||
| line-height: 1.8rem !important; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.