{t("pools.title")}
@@ -224,7 +213,7 @@ class PoolsCard extends Component {
{/*end::body*/}
-
+
);
}
}
diff --git a/src/pages/Pools/PoolsTab.js b/src/pages/Pools/PoolsTab.js
index 41bf3313..7698ac4d 100644
--- a/src/pages/Pools/PoolsTab.js
+++ b/src/pages/Pools/PoolsTab.js
@@ -42,7 +42,7 @@ const PlatformName = styled.span`
const PoolsButton = styled.button`
border-radius: 12px;
- background-color: ${({ theme }) => theme.bg2};
+ background-color: ${({ theme }) => theme.bg1};
padding: 6px 18px;
max-height: 40px;
min-height: 40px;
@@ -69,7 +69,7 @@ const AddLiquidityButton = styled(PoolsButton)`
transition: 0.4s ease all;
&:hover {
- color: ${({ theme }) => theme.bg2};
+ color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.primary};
}
`;
@@ -79,7 +79,7 @@ const WithdrawButton = styled(PoolsButton)`
transition: 0.4s ease all;
&:hover {
- color: ${({ theme }) => theme.bg2};
+ color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.secondary};
}
`;
diff --git a/src/pages/Pools/index.js b/src/pages/Pools/index.js
index c822e278..12a781fe 100644
--- a/src/pages/Pools/index.js
+++ b/src/pages/Pools/index.js
@@ -1,6 +1,5 @@
import React, { Component } from "react";
import { connect } from "react-redux";
-import { Row, Col } from "react-bootstrap";
import { Route, Switch } from "react-router-dom";
import PoolsCard from "./PoolsCard";
@@ -10,21 +9,12 @@ import UniswapLiquidityModal from "../../components/AddLiquidityModal/uniswap";
import * as actions from "../../state/pools/actions";
import Page from "../../components/Page";
import { emitter } from "../../lib/helper";
-import styled from "styled-components";
-
-const StyledRow = styled(Row)`
- margin-top: 40px;
-
- @media (max-width: 767px) {
- margin-top: 20px;
- }
-`;
class Pools extends Component {
investButtonClick = () => {
emitter.emit("open-modal", {
action: () => {
- this.props.history.push(`/invest/pools`);
+ this.props.history.push("/invest/pools");
emitter.emit("close-modal");
},
});
@@ -58,16 +48,12 @@ class Pools extends Component {
};
render() {
return (
-
-
-
-
-
-
+
+
diff --git a/src/pages/Proposals/index.js b/src/pages/Proposals/index.js
index 6a36c4b3..63c2bbb8 100644
--- a/src/pages/Proposals/index.js
+++ b/src/pages/Proposals/index.js
@@ -2,160 +2,19 @@ import React, { useEffect, useState } from "react";
import { Row, Col } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import BootstrapTable from "react-bootstrap-table-next";
+import { useTranslation } from "react-i18next";
import moment from "moment";
-import styled from "styled-components";
-import { ResponsiveCard } from "../../components/Card";
import { fetchProposals, fetchSpaces } from "../../state/governance/actions";
import { shorten } from "../../state/governance/hooks";
-import { Link } from "react-router-dom";
import { formatProposals, getScores } from "../../lib/utils";
import { useActiveWeb3React } from "../../hooks";
+import { ResponsiveCard } from "../../components/Card";
import Loading from "../../components/Loading";
import Page from "../../components/Page";
-import "./style.scss";
-import "../../components/UI/Button/style.scss";
import ResponsiveTable from "../../components/ResponsiveTable";
-import { useTranslation } from "react-i18next";
-
-const Header = styled.div`
- padding: 0;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20px;
- border: none;
- background-color: transparent;
-
- @media (max-width: 767px) {
- flex-direction: column;
- align-items: stretch;
- }
-`;
-
-const Title = styled.h2`
- font-size: 1.25rem;
- font-weight: 700;
- color: ${({ theme }) => theme.text1};
- margin: 0;
-
- @media (max-width: 767px) {
- margin-bottom: 30px;
- }
-`;
-
-const PoolsButton = styled.button`
- border-radius: 12px;
- background-color: ${({ theme }) => theme.bg2};
- padding: 6px 20px;
- max-height: 40px;
- min-height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- white-space: nowrap;
- font-size: 1rem;
- font-family: inherit;
- font-weight: 500;
- border: none;
- outline: none;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- outline: none;
- box-shadow: none;
- }
-`;
-
-const TradeButton = styled(PoolsButton)`
- color: ${({ theme }) => theme.primary};
- width: 100%;
-
- &:hover {
- color: ${({ theme }) => theme.bg2};
- background-color: ${({ theme }) => theme.primary};
- }
-`;
-
-const StyledLink = styled(Link)`
- text-decoration: none;
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- outline: none;
- box-shadow: none;
- }
-`;
-
-const RowTitle = styled.span`
- font-size: 1rem;
- font-weight: 400;
- line-height: 19px;
- color: ${({ theme }) => theme.text1};
-
- @media (max-width: 991px) {
- font-size: 0.875rem;
- }
-`;
-
-const CellText = styled.span`
- font-weight: 700;
- font-size: 0.875rem;
- color: ${({ theme }) => theme.text1};
- white-space: nowrap;
-
- @media (max-width: 991px) {
- font-weight: 400;
- }
-`;
-
-const NewButton = styled(Link)`
- background-color: ${({ theme }) => theme.primaryLight};
- height: 56px;
- padding: 6px 20px;
- border-radius: 18px;
- color: ${({ theme }) => theme.primary};
- display: flex;
- align-items: center;
- transition: 0.3s ease all;
- justify-content: center;
-
- :hover,
- :focus,
- :active {
- background-color: ${({ theme }) => theme.primary};
- color: ${({ theme }) => theme.text1};
- text-decoration: none;
- outline: none;
- }
-`;
-
-const GradientButton = styled(Link)`
- height: 56px;
- padding: 6px 20px;
- border-radius: 18px;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 20px;
-
- :hover,
- :focus,
- :active {
- text-decoration: none;
- outline: none;
- }
-`;
-
-const StatusText = styled.span`
- @media (max-width: 991px) {
- font-size: 0.875rem;
- }
-`;
+import "../../components/UI/Button/style.scss";
+import * as Styled from "./styleds";
const Proposals = (props) => {
const { library } = useActiveWeb3React();
@@ -174,7 +33,7 @@ const Proposals = (props) => {
if (spaces.hasOwnProperty(id)) {
dispatch(fetchProposals(id));
} else {
- props.history.push("/tools/governance");
+ props.history.push("/governance");
}
}
}, [spaces, id, props.history, dispatch]);
@@ -214,7 +73,7 @@ const Proposals = (props) => {
const rowEvents = {
onClick: (e, row) => {
- props.history.push(`/tools/governance/${id}/proposal/${row[0]}`);
+ props.history.push(`/governance/${id}/proposal/${row[0]}`);
},
};
@@ -222,7 +81,9 @@ const Proposals = (props) => {
{
dataField: "asset",
text: t("description"),
- formatter: (cellContent, row, rowIndex) => {shorten(row[1].msg.payload.name, "name")},
+ formatter: (cellContent, row, rowIndex) => (
+ {shorten(row[1].msg.payload.name, "name")}
+ ),
},
{
dataField: "status",
@@ -241,9 +102,9 @@ const Proposals = (props) => {
{state.title}
-
+
{state.title}
-
+
);
},
@@ -252,14 +113,20 @@ const Proposals = (props) => {
dataField: "start",
text: t("startDate"),
formatter(cellContent, row) {
- return {moment(row[1].msg.payload.start * 1e3).format("YYYY/MM/DD HH:mm")};
+ return (
+
+ {moment(row[1].msg.payload.start * 1e3).format("YYYY/MM/DD HH:mm")}
+
+ );
},
},
{
dataField: "end",
text: t("endDate"),
formatter(cellContent, row) {
- return {moment(row[1].msg.payload.end * 1e3).format("YYYY/MM/DD HH:mm")};
+ return (
+ {moment(row[1].msg.payload.end * 1e3).format("YYYY/MM/DD HH:mm")}
+ );
},
},
{
@@ -267,9 +134,9 @@ const Proposals = (props) => {
text: t("author"),
formatter(cellContent, row) {
return (
-
+
{row[1].address.slice(0, 6)}...{row[1].address.slice(-4)}
-
+
);
},
},
@@ -281,9 +148,9 @@ const Proposals = (props) => {
formatter(cellContent, row) {
return (
-
- {t("viewMore")}
-
+
+ {t("viewMore")}
+
);
},
@@ -291,22 +158,25 @@ const Proposals = (props) => {
};
return (
-
+
-
-
- {t("governance.proposals")}
-
+
+
+ {t("governance.proposals")}
+
{t("createNew")}
-
-
+
{t("createNew")}
-
-
+
+
{governanceLoading ? (
@@ -314,17 +184,19 @@ const Proposals = (props) => {
) : (
<>
-
+
+
+
theme.text1};
+ margin: 0;
+
+ @media (max-width: 767px) {
+ margin-bottom: 30px;
+ }
+`;
+
+export const PoolsButton = styled.button`
+ border-radius: 12px;
+ background-color: ${({ theme }) => theme.bg1};
+ padding: 6px 20px;
+ max-height: 40px;
+ min-height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ white-space: nowrap;
+ font-size: 1rem;
+ font-family: inherit;
+ font-weight: 500;
+ border: none;
+ outline: none;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ outline: none;
+ box-shadow: none;
+ }
+`;
+
+export const TradeButton = styled(PoolsButton)`
+ color: ${({ theme }) => theme.primary};
+ width: 100%;
+
+ &:hover {
+ color: ${({ theme }) => theme.bg1};
+ background-color: ${({ theme }) => theme.primary};
+ }
+`;
+
+export const StyledLink = styled(Link)`
+ text-decoration: none;
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ outline: none;
+ box-shadow: none;
+ }
+`;
+
+export const RowTitle = styled.span`
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 19px;
+ color: ${({ theme }) => theme.text1};
+
+ @media (max-width: 991px) {
+ font-size: 0.875rem;
+ }
+`;
+
+export const CellText = styled.span`
+ font-weight: 700;
+ font-size: 0.875rem;
+ color: ${({ theme }) => theme.text1};
+ white-space: nowrap;
+
+ @media (max-width: 991px) {
+ font-weight: 400;
+ }
+`;
+
+export const NewButton = styled(Link)`
+ background-color: ${({ theme }) => theme.primaryLight};
+ height: 56px;
+ padding: 6px 20px;
+ border-radius: 18px;
+ color: ${({ theme }) => theme.primary};
+ display: flex;
+ align-items: center;
+ transition: 0.3s ease all;
+ justify-content: center;
+
+ :hover,
+ :focus,
+ :active {
+ background-color: ${({ theme }) => theme.primary};
+ color: ${({ theme }) => theme.text1};
+ text-decoration: none;
+ outline: none;
+ }
+`;
+
+export const GradientButton = styled(Link)`
+ height: 56px;
+ padding: 6px 20px;
+ border-radius: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 20px;
+
+ :hover,
+ :focus,
+ :active {
+ text-decoration: none;
+ outline: none;
+ }
+`;
+
+export const StatusText = styled.span`
+ @media (max-width: 991px) {
+ font-size: 0.875rem;
+ }
+`;
+
+export const ProposalsTableWrap = styled.div`
+ table {
+
+ th {
+ background-color: ${({ theme }) => theme.bg5};
+ color: ${({ theme }) => theme.text1};
+ font-size: 0.875rem;
+ font-weight: 500;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding: 1.25rem 0.75rem;
+ min-height: 56px;
+ border: 0;
+
+ &:focus {
+ outline: none;
+ }
+
+ &:first-child {
+ border-top-left-radius: 18px;
+ border-bottom-left-radius: 18px;
+ padding: 1.25rem 1.375rem;
+ }
+
+ &:last-child {
+ border-top-right-radius: 18px;
+ border-bottom-right-radius: 18px;
+ padding: 1.25rem 1.375rem 1.25rem 1.25rem;
+ }
+ }
+
+ th,
+ td {
+ border-top: 0;
+ vertical-align: middle !important;
+
+ &:first-child {
+ padding: 1.25rem 1.375rem;
+ }
+
+ &:last-child {
+ padding: 1.25rem 1.375rem 1.25rem 1.25rem;
+ }
+ }
+
+ td {
+ border-bottom: 1px solid ${({ theme }) => theme.borderColor};
+ cursor: pointer;
+ }
+
+ tr:last-child td {
+ border-bottom: 0;
+ }
+ }
+`;
diff --git a/src/pages/Spot/components/OrderHistory/index.js b/src/pages/Spot/components/OrderHistory/index.js
index 4333c4af..0274cae3 100644
--- a/src/pages/Spot/components/OrderHistory/index.js
+++ b/src/pages/Spot/components/OrderHistory/index.js
@@ -51,7 +51,7 @@ const CardTitle = styled.h4`
`;
const Content = styled.div`
- background-color: ${({ theme }) => theme.bg3};
+ background-color: ${({ theme }) => theme.bg1};
border-radius: 18px;
display: flex;
flex-direction: column;
diff --git a/src/pages/Spot/index.js b/src/pages/Spot/index.js
index 3a2b8ee4..8f185e55 100644
--- a/src/pages/Spot/index.js
+++ b/src/pages/Spot/index.js
@@ -3,9 +3,7 @@ import { useEffect, useState } from "react";
import styled from "styled-components";
import Page from "../../components/Page";
-import CheckBalance from "../../components/CheckBalance";
import StyledCard, { ResponsiveCard } from "../../components/Card";
-import marketTokens from "../../constants/marketTokens.json";
import MarketStats from "./components/MarketStats";
import MarketDetails from "./components/MarketDetails";
import Orderbook from "./components/Orderbook";
@@ -92,7 +90,7 @@ const Spot = (props) => {
}, [dispatch]);
return (
-
+
diff --git a/src/pages/Swap/components/SwapHeader/index.js b/src/pages/Swap/components/SwapHeader/index.js
deleted file mode 100644
index cca7e525..00000000
--- a/src/pages/Swap/components/SwapHeader/index.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useContext, useRef } from "react";
-import styled, { ThemeContext } from "styled-components";
-import { Settings } from "react-feather";
-
-import { useModalOpen, useToggleUniswapSettingsMenu } from "../../../../state/application/hooks";
-import { ApplicationModal } from "../../../../state/application/actions";
-import { useUserSlippageTolerance, useUserTransactionTTL } from "../../../../state/user/hooks";
-import { useOnClickOutside } from "../../../../hooks/useOnClickOutside";
-import { AutoColumn } from "../../../../components/Column";
-import { Text } from "rebass";
-import TransactionSettings from "../../../../components/TransactionSettings";
-
-const StyledMenuIcon = styled(Settings)`
- height: 20px;
- width: 20px;
-
- > * {
- stroke: ${({ theme }) => theme.text2};
- }
-
- :hover {
- opacity: 0.7;
- }
-`;
-
-const StyledMenu = styled.div`
- margin-left: 0.5rem;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- border: none;
- text-align: left;
-`;
-
-const MenuFlyout = styled.span`
- min-width: 20.125rem;
- background-color: ${({ theme }) => theme.bg2};
- box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
- 0px 24px 32px rgba(0, 0, 0, 0.01);
- border: 1px solid ${({ theme }) => theme.text4};
- border-radius: 12px;
- display: flex;
- flex-direction: column;
- font-size: 1rem;
- position: absolute;
- top: 3rem;
- right: 0rem;
- z-index: 100;
-
- ${({ theme }) => theme.mediaWidth.upToMedium`
- min-width: 18.125rem;
- `};
-`;
-
-const StyledMenuButton = styled.button`
- position: relative;
- width: 100%;
- height: 100%;
- border: none;
- background-color: transparent;
- margin: 0;
- padding: 0;
- height: 35px;
-
- padding: 0.15rem 0.5rem;
- border-radius: 0.5rem;
-
- :hover,
- :focus {
- cursor: pointer;
- outline: none;
- }
-
- svg {
- margin-top: 2px;
- }
-`;
-
-const SwapHeader = (props) => {
- const node = useRef();
- const open = useModalOpen(ApplicationModal.UNISWAPSETTINGS);
- const toggle = useToggleUniswapSettingsMenu();
-
- const theme = useContext(ThemeContext);
- const [userSlippageTolerance, setUserslippageTolerance] = useUserSlippageTolerance();
-
- const [ttl, setTtl] = useUserTransactionTTL();
-
- useOnClickOutside(node, open ? toggle : undefined);
-
- return (
-
-
-
-
- {open && (
-
-
-
- Transaction Settings
-
-
-
-
- )}
-
- );
-};
-
-export default SwapHeader;
diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx
index 6293080b..2c8da0e9 100644
--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@@ -1,626 +1,15 @@
-import { CurrencyAmount, JSBI, Token, Trade } from "@uniswap/sdk";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Row, Col, Button } from "react-bootstrap";
-import styled from "styled-components";
-import SVG from "react-inlinesvg";
-import { ArrowDown } from "react-feather";
-
+import { Row, Col } from "react-bootstrap";
import Page from "../../components/Page";
-import ConfirmSwapModal from "../../components/swap/ConfirmSwapModal";
-import CurrencyInputPanel from "../../components/CurrencyInputPanel";
-import AdvancedSwapDetailsDropdown from "../../components/swap/AdvancedSwapDetailsDropdown";
-import confirmPriceImpactWithoutFee from "../../components/swap/confirmPriceImpactWithoutFee";
-import { Wrapper, ArrowWrapper } from "../../components/swap/styleds";
-import Loader from "../../components/Loader";
-import TokenWarningModal from "../../components/TokenWarningModal";
-import { ResponsiveCard } from "../../components/Card";
-
-import { useActiveWeb3React } from "../../hooks";
-import { useCurrency } from "../../hooks/Tokens";
-import { ApprovalState, useApproveCallbackFromTrade } from "../../hooks/useApproveCallback";
-import useENSAddress from "../../hooks/useENSAddress";
-import { useSwapCallback } from "../../hooks/useSwapCallback";
-import useToggledVersion, { Version } from "../../hooks/useToggledVersion";
-import useWrapCallback, { WrapType } from "../../hooks/useWrapCallback";
-import { useWalletModalToggle } from "../../state/application/hooks";
-import { Field } from "../../state/swap/actions";
-import {
- useDefaultsFromURLSearch,
- useDerivedSwapInfo,
- useSwapActionHandlers,
- useSwapState,
-} from "../../state/swap/hooks";
-import { useExpertModeManager, useUserSlippageTolerance } from "../../state/user/hooks";
-import { maxAmountSpend } from "../../utils/maxAmountSpend";
-import { computeTradePriceBreakdown, warningSeverity } from "../../utils/prices";
-import { ClickableText } from "../../components/ExternalLink";
-import TradePrice from "../../components/swap/TradePrice";
-import { LinkStyledButton } from "../../theme";
-import AddressInputPanel from "../../components/AddressInputPanel";
-import SwapHeader from "./components/SwapHeader";
-import { useTranslation } from "react-i18next";
-import useTheme from "../../hooks/useTheme";
-
-const StyledRow = styled(Row)`
- margin-top: 20px;
-`;
-
-const CustomCard = styled(ResponsiveCard)``;
-
-const CardTitle = styled.h3`
- font-weight: 700;
- font-size: 1.25rem;
-`;
-
-const HeadCol = styled(Col)`
- margin-bottom: 33px;
-`;
-
-const ApproveArrow = styled.div`
- align-self: center;
- margin: 24px 0 20px;
-
- @media (min-width: 991px) {
- margin: 0 43px;
- }
-`;
-
-const StyledClickableText = styled(ClickableText)`
- color: ${({ theme }) => theme.text1};
-`;
-
-const PriceCol = styled(Col)`
- margin-top: ${({ noMargin }) => noMargin ? '0' : '-1rem'};
- margin-bottom: 1rem;
-
- @media (min-width: 768px) {
- margin-top: ${({ noMargin }) => noMargin ? '0' : '-1.75rem'};
- margin-bottom: 1.75rem;
- }
-`;
-
-const SwitchCol = styled(Col)`
- margin-bottom: 1.25rem;
-`;
-
-const Swap = (props: any) => {
- const loadedUrlParams = useDefaultsFromURLSearch();
- const { t } = useTranslation();
- const theme = useTheme();
-
- // token warning stuff
- const [loadedInputCurrency, loadedOutputCurrency] = [
- useCurrency(loadedUrlParams?.inputCurrencyId),
- useCurrency(loadedUrlParams?.outputCurrencyId),
- ];
- const [dismissTokenWarning, setDismissTokenWarning] = useState(false);
- const urlLoadedTokens: Token[] = useMemo(
- () => [loadedInputCurrency, loadedOutputCurrency]?.filter((c): c is Token => c instanceof Token) ?? [],
- [loadedInputCurrency, loadedOutputCurrency]
- );
- const handleConfirmTokenWarning = useCallback(() => {
- setDismissTokenWarning(true);
- }, []);
-
- const { account } = useActiveWeb3React();
-
- const [showInverted, setShowInverted] = useState(false);
-
- // toggle wallet when disconnected
- const toggleWalletModal = useWalletModalToggle();
-
- // for expert mode
- const [isExpertMode] = useExpertModeManager();
-
- // get custom setting values for user
- const [allowedSlippage] = useUserSlippageTolerance();
-
- // swap state
- const { independentField, typedValue, recipient } = useSwapState();
- const {
- v1Trade,
- v2Trade,
- currencyBalances,
- parsedAmount,
- currencies,
- inputError: swapInputError,
- } = useDerivedSwapInfo();
- const { wrapType, execute: onWrap, inputError: wrapInputError } = useWrapCallback(
- currencies[Field.INPUT],
- currencies[Field.OUTPUT],
- typedValue
- );
- const showWrap: boolean = wrapType !== WrapType.NOT_APPLICABLE;
- const { address: recipientAddress } = useENSAddress(recipient);
- const toggledVersion = useToggledVersion();
- const tradesByVersion = {
- [Version.v1]: v1Trade,
- [Version.v2]: v2Trade,
- };
- const trade = showWrap ? undefined : tradesByVersion[toggledVersion];
-
- const parsedAmounts = showWrap
- ? {
- [Field.INPUT]: parsedAmount,
- [Field.OUTPUT]: parsedAmount,
- }
- : {
- [Field.INPUT]: independentField === Field.INPUT ? parsedAmount : trade?.inputAmount,
- [Field.OUTPUT]: independentField === Field.OUTPUT ? parsedAmount : trade?.outputAmount,
- };
-
- const { onCurrencySelection, onUserInput, onSwitchTokens, onChangeRecipient } = useSwapActionHandlers();
- const isValid = !swapInputError;
- const dependentField: Field = independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT;
-
- const handleTypeInput = useCallback(
- (value: string) => {
- onUserInput(Field.INPUT, value);
- },
- [onUserInput]
- );
- const handleTypeOutput = useCallback(
- (value: string) => {
- onUserInput(Field.OUTPUT, value);
- },
- [onUserInput]
- );
-
- // modal and loading
- const [{ showConfirm, tradeToConfirm, swapErrorMessage, attemptingTxn, txHash }, setSwapState] = useState<{
- showConfirm: boolean;
- tradeToConfirm: Trade | undefined;
- attemptingTxn: boolean;
- swapErrorMessage: string | undefined;
- txHash: string | undefined;
- }>({
- showConfirm: false,
- tradeToConfirm: undefined,
- attemptingTxn: false,
- swapErrorMessage: undefined,
- txHash: undefined,
- });
-
- const formattedAmounts = {
- [independentField]: typedValue,
- [dependentField]: showWrap
- ? parsedAmounts[independentField]?.toExact() ?? ""
- : parsedAmounts[dependentField]?.toSignificant(6) ?? "",
- };
-
- const route = trade?.route;
- const userHasSpecifiedInputOutput = Boolean(
- currencies[Field.INPUT] &&
- currencies[Field.OUTPUT] &&
- parsedAmounts[independentField]?.greaterThan(JSBI.BigInt(0))
- );
- const noRoute = !route;
-
- // check whether the user has approved the router on the input token
- const [approval, approveCallback] = useApproveCallbackFromTrade(trade, allowedSlippage);
-
- // check if user has gone through approval process, used to show two step buttons, reset on token change
- const [approvalSubmitted, setApprovalSubmitted] = useState(false);
-
- // mark when a user has submitted an approval, reset onTokenSelection for input field
- useEffect(() => {
- if (approval === ApprovalState.PENDING) {
- setApprovalSubmitted(true);
- }
- }, [approval, approvalSubmitted]);
-
- const maxAmountInput: CurrencyAmount | undefined = maxAmountSpend(currencyBalances[Field.INPUT]);
- const atMaxAmountInput = Boolean(maxAmountInput && parsedAmounts[Field.INPUT]?.equalTo(maxAmountInput));
-
- // the callback to execute the swap
- const { callback: swapCallback, error: swapCallbackError } = useSwapCallback(trade, allowedSlippage, recipient);
-
- const { priceImpactWithoutFee } = computeTradePriceBreakdown(trade);
-
- const handleSwap = useCallback(() => {
- if (priceImpactWithoutFee && !confirmPriceImpactWithoutFee(priceImpactWithoutFee)) {
- return;
- }
- if (!swapCallback) {
- return;
- }
- setSwapState({
- attemptingTxn: true,
- tradeToConfirm,
- showConfirm,
- swapErrorMessage: undefined,
- txHash: undefined,
- });
- swapCallback()
- .then((hash) => {
- setSwapState({
- attemptingTxn: false,
- tradeToConfirm,
- showConfirm,
- swapErrorMessage: undefined,
- txHash: hash,
- });
- })
- .catch((error) => {
- setSwapState({
- attemptingTxn: false,
- tradeToConfirm,
- showConfirm,
- swapErrorMessage: error.message,
- txHash: undefined,
- });
- });
- }, [tradeToConfirm, account, priceImpactWithoutFee, recipient, recipientAddress, showConfirm, swapCallback, trade]);
-
- // warnings on slippage
- const priceImpactSeverity = warningSeverity(priceImpactWithoutFee);
-
- // show approve flow when: no error on inputs, not approved or pending, or approved in current session
- // never show if price impact is above threshold in non expert mode
- const showApproveFlow =
- !swapInputError &&
- (approval === ApprovalState.NOT_APPROVED ||
- approval === ApprovalState.PENDING ||
- (approvalSubmitted && approval === ApprovalState.APPROVED)) &&
- !(priceImpactSeverity > 3 && !isExpertMode);
-
- const handleConfirmDismiss = useCallback(() => {
- setSwapState({ showConfirm: false, tradeToConfirm, attemptingTxn, swapErrorMessage, txHash });
- // if there was a tx hash, we want to clear the input
- if (txHash) {
- onUserInput(Field.INPUT, "");
- }
- }, [attemptingTxn, onUserInput, swapErrorMessage, tradeToConfirm, txHash]);
-
- const handleAcceptChanges = useCallback(() => {
- setSwapState({ tradeToConfirm: trade, swapErrorMessage, txHash, attemptingTxn, showConfirm });
- }, [attemptingTxn, showConfirm, swapErrorMessage, trade, txHash]);
-
- const handleInputSelect = useCallback(
- (inputCurrency) => {
- setApprovalSubmitted(false); // reset 2 step UI for approvals
- onCurrencySelection(Field.INPUT, inputCurrency);
- },
- [onCurrencySelection]
- );
-
- const handleMaxInput = useCallback(() => {
- maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact());
- }, [maxAmountInput, onUserInput]);
-
- const handleOutputSelect = useCallback((outputCurrency) => onCurrencySelection(Field.OUTPUT, outputCurrency), [
- onCurrencySelection,
- ]);
+import Uniswap from "../../components/Uniswap";
+const Swap = () => {
return (
-
-
-
- 0 && !dismissTokenWarning}
- tokens={urlLoadedTokens}
- onConfirm={handleConfirmTokenWarning}
- />
-
-
-
-
-
- {t("convert")}
-
-
-
-
-
-
-
-
- {
- setApprovalSubmitted(false); // reset 2 step UI for approvals
- onSwitchTokens();
- }}
- color={theme.text2}
- />
-
- {recipient === null && (
- onChangeRecipient("")}
- >
- + {t("addSend")} ({t("optional")})
-
- )}
-
-
-
-
- {recipient !== null && (
- <>
-
-
- {
- setApprovalSubmitted(false); // reset 2 step UI for approvals
- onSwitchTokens();
- }}
- color={theme.text2}
- />
-
- onChangeRecipient(null)}
- >
- - {t("removeSend")}
-
-
-
-
-
-
- )}
- {showWrap ? null : (
- <>
- {Boolean(trade) && (
-
-
- {t("price")}
-
-
-
- )}
-
- )}
- {trade && }
-
- {!account ? (
-
- ) : showWrap ? (
-
- ) : noRoute && userHasSpecifiedInputOutput ? (
-
- ) : showApproveFlow ? (
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
- )}
-
-
-
- {trade && (
-
-
- {t("viewPairAnalytics")} ↗
-
-
- )}
-
-
-
+
+
+
+
-
+
);
};
diff --git a/src/pages/TokenSets/index.js b/src/pages/TokenSets/index.js
deleted file mode 100644
index 323ef217..00000000
--- a/src/pages/TokenSets/index.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import styled from "styled-components";
-import { Row, Col, Tab, Nav } from "react-bootstrap";
-
-import Page from "../../components/Page";
-import { ResponsiveCard } from "../../components/Card";
-import { useState } from "react";
-import TokenSetTab from "./TokenSetTab";
-import { useTranslation } from "react-i18next";
-
-const Card = styled(ResponsiveCard)`
- & > .card-body {
- padding: 40px 30px 34px;
- }
-`;
-
-const HeaderCol = styled(Col)`
- margin: -10px 0 0;
-`;
-
-const CustomNavLink = styled(Nav.Link)`
- border-radius: 18px !important;
- color: ${({ theme }) => theme.primary};
- background-color: ${({ theme }) => theme.primaryLight};
- white-space: nowrap;
- padding: 14px 24px;
- min-height: 56px;
- font-weight: 500;
- display: flex;
- align-items: center;
- justify-content: center;
-
- @media (max-width: 767px) {
- padding: 6px 15px;
- font-size: 1rem;
- min-height: 32px;
- border-radius: 12px !important;
- }
-
- &:hover {
- color: ${({ theme }) => theme.primary};
- }
-
- &.active {
- color: ${({ theme }) => theme.text1};
- background-color: ${({ theme }) => theme.primary};
- }
-`;
-
-const CustomNav = styled(Nav)`
- margin-left: -30px !important;
- margin-right: -30px !important;
- overflow: auto;
-
- @media (min-width: 768px) {
- margin-left: -10px !important;
- margin-right: -10px !important;
- }
-`;
-
-const CustomNavItem = styled(Nav.Item)`
- flex-grow: initial !important;
-
- padding: 0 10px 10px;
-
- @media (max-width: 767px) {
- padding: 0 5px 10px;
- }
-
- &:first-child {
- @media (max-width: 767px) {
- padding-left: 30px;
- }
- }
- &:last-child {
- @media (max-width: 767px) {
- padding-right: 30px;
- }
- }
-`;
-
-const StyledCard = styled(Card)`
- margin-top: 40px;
-
- @media (max-width: 767px) {
- margin-top: 20px;
- }
-`;
-
-const TokenSets = (props) => {
- const [activeKey, setActiveKey] = useState("portfolios");
- const { t } = useTranslation();
-
- return (
-
-
- setActiveKey(k)}>
-
-
-
-
- {t("tokensets.portfolios")}
-
-
-
- {t("tokensets.rebalancingSets")}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default TokenSets;
diff --git a/src/pages/TokenSets/index.tsx b/src/pages/TokenSets/index.tsx
new file mode 100644
index 00000000..0d848b4e
--- /dev/null
+++ b/src/pages/TokenSets/index.tsx
@@ -0,0 +1,15 @@
+import Page from "../../components/Page";
+import { ResponsiveCard } from "../../components/Card";
+import TokenSetsTabs from "../../components/TokenSetsTabs";
+
+const TokenSets = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default TokenSets;
diff --git a/src/pages/TokenSets/styles.scss b/src/pages/TokenSets/styles.scss
deleted file mode 100644
index a40c3830..00000000
--- a/src/pages/TokenSets/styles.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.tokensets__table {
- position: relative;
- width: 100%;
- border-collapse: collapse;
- color: white;
-}
-
-.table.tokensets__table thead th {
- border-bottom: 0;
- border-top: 0;
- color: #202020;
- font-weight: 400;
- padding-bottom: 1.5rem;
- padding-top: 1.5rem;
- font-size: 0.875rem;
-
- .dark-mode & {
- color: white;
- }
-
- &:focus {
- outline: none;
- }
-}
-
-.table.tokensets__table tbody td {
- vertical-align: middle;
- border: 1px solid #caccd2;
- border-left-width: 0;
- border-right-width: 0;
- color: #202020;
- cursor: pointer;
- padding: 1rem 0.75rem;
-
- .dark-mode & {
- color: white;
- border-color: rgba(255, 255, 255, 0.2);
- }
-}
diff --git a/src/pages/Vote/ProposalContent.tsx b/src/pages/Vote/ProposalContent.tsx
new file mode 100644
index 00000000..ae394f19
--- /dev/null
+++ b/src/pages/Vote/ProposalContent.tsx
@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import { Remarkable } from "remarkable";
+import dompurify from "dompurify";
+import Card from "../../components/Card";
+import * as Styled from "./styleds";
+
+const md = new Remarkable();
+
+export type ProposalContentProps = {
+ proposal: any;
+ status: any;
+};
+
+export default function ProposalContent({ proposal, status }: ProposalContentProps) {
+ const voteBody = useMemo(() => {
+ return dompurify.sanitize(proposal?.msg?.payload?.body);
+ }, [proposal?.msg?.payload?.body]);
+
+ return (
+
+
+ {proposal.msg.payload.name}
+ {status && (
+
+ {status.title}
+
+ )}
+
+
+ }
+ >
+
+
+
+ | User |
+ Vote |
+ Power |
+
+
+
+ {result
+ ? showMore || (result.hasOwnProperty("votes") && Object.keys(result.votes || {}).length < 10)
+ ? Object.values(result.votes).map((vote: any, index: number) => {
+ return (
+
+ );
+ })
+ : result.hasOwnProperty("votes") &&
+ Object.values(result.votes)
+ .slice(0, 10)
+ .map((vote: any, index: number) => {
+ return (
+
+ );
+ })
+ : null}
+
+
+ {votes ? (
+ <>
+ {!showMore && Object.keys(votes || {}).length > 10 ? (
+
+
+
+ ) : null}
+
+ ) : (
+
+
+
+ )}
+
+ );
+}
diff --git a/src/pages/Vote/VoteCast.tsx b/src/pages/Vote/VoteCast.tsx
new file mode 100644
index 00000000..0b6c02b9
--- /dev/null
+++ b/src/pages/Vote/VoteCast.tsx
@@ -0,0 +1,53 @@
+import { useTranslation } from "react-i18next";
+import { Button } from 'react-bootstrap';
+import { useWeb3React } from "@web3-react/core";
+import Card from "../../components/Card";
+import * as Styled from "./styleds";
+
+export type VoteCastProps = {
+ proposal: any;
+ selected: any;
+ onSelectOption: (T: number) => void;
+ onVote: () => void;
+};
+
+export default function VoteCast({ proposal, selected, onSelectOption, onVote }: VoteCastProps) {
+ const { t } = useTranslation();
+ const { account } = useWeb3React();
+
+ return (
+
+
+ {t("governance.castVote")}
+
+
+ }
+ >
+
+ {proposal.msg?.payload?.choices?.map((option: any, index: number) => {
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/pages/Vote/VoteInformation.tsx b/src/pages/Vote/VoteInformation.tsx
new file mode 100644
index 00000000..a042fbea
--- /dev/null
+++ b/src/pages/Vote/VoteInformation.tsx
@@ -0,0 +1,94 @@
+import { useTranslation } from "react-i18next";
+import moment from "moment";
+import Card from "../../components/Card";
+import ListItem from "../../components/ListItem";
+import { ModifiedJazzicon } from "../../components/VoteItem";
+import VoteLogo from "../../components/VoteLogo";
+import * as Styled from "./styleds";
+
+export type VoteInformationProps = {
+ proposal: any;
+ space: any;
+ id: any;
+};
+
+export default function VoteInformation({ proposal, space, id }: VoteInformationProps) {
+ const { t } = useTranslation();
+
+ return (
+