diff --git a/package.json b/package.json index 3479a5cbf..d231055d9 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@across-protocol/across-token": "^0.0.1", "@across-protocol/contracts-v2": "^0.0.34", "@across-protocol/sdk-v2": "^0.1.24", "@datapunt/matomo-tracker-js": "^0.5.1", diff --git a/src/Routes.tsx b/src/Routes.tsx index d4a53ee83..30e92c061 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import { Switch, Route, useLocation, useHistory } from "react-router-dom"; + import { Send, Pool, @@ -7,6 +8,7 @@ import { MyTransactions, AllTransactions, Rewards, + Staking, Claim, NotFound, } from "views"; @@ -20,6 +22,8 @@ import { WrongNetworkError, rewardsBannerWarning, generalMaintenanceMessage, + stringValueInArray, + getConfig, } from "utils"; import { ReactComponent as InfoLogo } from "assets/icons/info-24.svg"; import Toast from "components/Toast"; @@ -36,6 +40,7 @@ function useRoutes() { const location = useLocation(); const history = useHistory(); const { error, removeError } = useError(); + const config = getConfig(); // force the user on /pool page if showMigrationPage is active. useEffect(() => { if (enableMigration && location.pathname !== "/pool") { @@ -51,6 +56,7 @@ function useRoutes() { removeError, location, isContractAddress, + config, }; } // Need this component for useLocation hook @@ -61,6 +67,7 @@ const Routes: React.FC = () => { error, removeError, location, + config, isContractAddress, } = useRoutes(); @@ -105,7 +112,23 @@ const Routes: React.FC = () => { - + + { + const poolIdFound = stringValueInArray( + match.params.poolId.toLowerCase(), + config.getPoolSymbols() + ); + + if (poolIdFound) { + return ; + } else { + return ; + } + }} + /> diff --git a/src/assets/acx.svg b/src/assets/acx.svg new file mode 100644 index 000000000..e4e19df02 --- /dev/null +++ b/src/assets/acx.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/airdrop-gift-bg.svg b/src/assets/airdrop-gift-bg.svg new file mode 100644 index 000000000..2f8a224f1 --- /dev/null +++ b/src/assets/airdrop-gift-bg.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/airdrop-waves-bg.svg b/src/assets/airdrop-waves-bg.svg new file mode 100644 index 000000000..20d4913d7 --- /dev/null +++ b/src/assets/airdrop-waves-bg.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/airdrop-x.svg b/src/assets/airdrop-x.svg new file mode 100644 index 000000000..c893ec600 --- /dev/null +++ b/src/assets/airdrop-x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/check-star-ring-filled.svg b/src/assets/check-star-ring-filled.svg new file mode 100644 index 000000000..c1acce71c --- /dev/null +++ b/src/assets/check-star-ring-filled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/check-star-ring.svg b/src/assets/check-star-ring.svg new file mode 100644 index 000000000..50291292f --- /dev/null +++ b/src/assets/check-star-ring.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/claim-heart-wave.svg b/src/assets/claim-heart-wave.svg new file mode 100644 index 000000000..a59f15815 --- /dev/null +++ b/src/assets/claim-heart-wave.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/claim-pie-chart-wave.svg b/src/assets/claim-pie-chart-wave.svg new file mode 100644 index 000000000..7171ac583 --- /dev/null +++ b/src/assets/claim-pie-chart-wave.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/eth-white.svg b/src/assets/eth-white.svg new file mode 100644 index 000000000..56879e1f6 --- /dev/null +++ b/src/assets/eth-white.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/chevron-left-vector.svg b/src/assets/icons/chevron-left-vector.svg new file mode 100644 index 000000000..0b485ef7c --- /dev/null +++ b/src/assets/icons/chevron-left-vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/heart-crack.svg b/src/assets/icons/heart-crack.svg new file mode 100644 index 000000000..ff49e69a5 --- /dev/null +++ b/src/assets/icons/heart-crack.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/usdc-24.svg b/src/assets/icons/usdc-24.svg new file mode 100644 index 000000000..bac4cac14 --- /dev/null +++ b/src/assets/icons/usdc-24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/usdc-green-16.svg b/src/assets/icons/usdc-green-16.svg new file mode 100644 index 000000000..4011ca82f --- /dev/null +++ b/src/assets/icons/usdc-green-16.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx new file mode 100644 index 000000000..5d8eb1cfc --- /dev/null +++ b/src/components/ExternalLink/ExternalLink.tsx @@ -0,0 +1,47 @@ +import styled from "@emotion/styled"; + +import { ReactComponent as ExternalLink12Icon } from "assets/icons/external-link-12.svg"; + +type Props = { + text: string; + href: string; +}; + +export function ExternalLink(props: Props) { + return ( + + {props.text} + + ); +} + +const Link = styled.a` + display: flex; + align-items: center; + font-size: ${16 / 16}rem; + line-height: ${20 / 16}rem; + font-weight: 500; + text-decoration: none; + color: #e0f3ff; + transition: opacity 0.1s; + cursor: pointer; + + svg { + path { + fill: #e0f3ff; + } + } + + &:hover { + opacity: 0.8; + } + + @media (max-width: 428px) { + font-size: ${14 / 16}rem; + line-height: ${18 / 16}rem; + } +`; + +export const ExternalLinkIcon = styled(ExternalLink12Icon)` + margin: 2px 0 0 4px; +`; diff --git a/src/components/ExternalLink/index.ts b/src/components/ExternalLink/index.ts new file mode 100644 index 000000000..094bf8d13 --- /dev/null +++ b/src/components/ExternalLink/index.ts @@ -0,0 +1 @@ +export { ExternalLink } from "./ExternalLink"; diff --git a/src/components/GlobalStyles/GlobalStyles.tsx b/src/components/GlobalStyles/GlobalStyles.tsx index 1e1dd86ca..4019530f7 100644 --- a/src/components/GlobalStyles/GlobalStyles.tsx +++ b/src/components/GlobalStyles/GlobalStyles.tsx @@ -91,14 +91,14 @@ const globalStyles = css` } html, body { - height: 100%; + min-height: 100vh; } body { background-color: var(--color-gray); color: var(--color-white); } #root { - height: 100%; + min-height: 100vh; isolation: isolate; } // iphone query diff --git a/src/components/Header/Header.styles.tsx b/src/components/Header/Header.styles.tsx index 126f67162..bd4deee6d 100644 --- a/src/components/Header/Header.styles.tsx +++ b/src/components/Header/Header.styles.tsx @@ -71,6 +71,10 @@ export const Item = styled.li` background-color: #e0f3ff; transform: translateX(-50%); } + + svg { + stroke-width: 2px; + } } :hover { @@ -103,3 +107,11 @@ export const MobileNavigation = styled(motion.nav)` margin-left: 8px; } `; + +export const TextWithIcon = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 8px; +`; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 97fe727a7..a28c58b6d 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,5 +1,6 @@ import { useLocation } from "react-router"; import { Link as UnstyledLink } from "react-router-dom"; +import { Gift } from "react-feather"; import Wallet from "../Wallet"; import { Wrapper, @@ -10,6 +11,7 @@ import { Item, WalletWrapper, Spacing, + TextWithIcon, } from "./Header.styles"; import MenuToggle from "./MenuToggle"; import { enableMigration } from "utils"; @@ -23,6 +25,14 @@ const LINKS = !enableMigration { href: "/pool", name: "Pool" }, { href: "/rewards", name: "Rewards" }, { href: "/transactions", name: "Transactions" }, + { + href: "/airdrop", + name: ( + + Airdrop + + ), + }, ] : []; diff --git a/src/components/IconPair/IconPair.tsx b/src/components/IconPair/IconPair.tsx new file mode 100644 index 000000000..959ba217f --- /dev/null +++ b/src/components/IconPair/IconPair.tsx @@ -0,0 +1,40 @@ +import styled from "@emotion/styled"; +import React from "react"; + +type Props = { + MainIcon: React.ReactElement; + SmallIcon?: React.ReactElement; +}; + +export function IconPair(props: Props) { + return ( + + {props.MainIcon} + {props.SmallIcon && ( + {props.SmallIcon} + )} + + ); +} + +const Container = styled.div` + position: relative; +`; + +const MainIconContainer = styled.div` + height: 32px; + width: 32px; +`; + +const SmallIconContainer = styled.div` + position: absolute; + right: -8px; + bottom: -1px; + height: 18px; + width: 18px; + + svg { + border: 2px solid #3e4047; + border-radius: 50%; + } +`; diff --git a/src/components/IconPair/index.ts b/src/components/IconPair/index.ts new file mode 100644 index 000000000..8b5596d24 --- /dev/null +++ b/src/components/IconPair/index.ts @@ -0,0 +1 @@ +export { IconPair } from "./IconPair"; diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 4812a41b1..7715f9058 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -127,8 +127,7 @@ const Wrapper = styled.div` display: grid; padding: 0 10px; grid-template-columns: 1fr min(var(--central-content), 100%) 1fr; - min-height: 100%; - height: fit-content; + min-height: 100vh; @media ${QUERIES.tabletAndUp} { padding: 0 30px; } diff --git a/src/components/LayoutV2/LayoutV2.tsx b/src/components/LayoutV2/LayoutV2.tsx new file mode 100644 index 000000000..ae5fa48a6 --- /dev/null +++ b/src/components/LayoutV2/LayoutV2.tsx @@ -0,0 +1,45 @@ +import styled from "@emotion/styled"; +import Footer from "components/Footer"; +import { QUERIESV2 } from "utils"; + +const LayoutV2: React.FC = ({ children }) => { + return ( + + {children} +