From caf72af76a41c1200782f1343fa737de27a02f62 Mon Sep 17 00:00:00 2001 From: mariaY Date: Tue, 13 Jul 2021 15:22:09 +0300 Subject: [PATCH 1/7] warn popup updated --- src/components/auction/OrdersTable/index.tsx | 22 ++- .../modals/common/CancelModalFooter/index.tsx | 126 ++++++++++++++++-- 2 files changed, 137 insertions(+), 11 deletions(-) diff --git a/src/components/auction/OrdersTable/index.tsx b/src/components/auction/OrdersTable/index.tsx index f7608fb71..c584e55c2 100644 --- a/src/components/auction/OrdersTable/index.tsx +++ b/src/components/auction/OrdersTable/index.tsx @@ -102,6 +102,7 @@ const OrdersTable: React.FC = (props) => { const [orderError, setOrderError] = useState() const [txHash, setTxHash] = useState('') const [orderId, setOrderId] = useState('') + const [canceledOrder, setCanceledOrder] = useState(null) const { showPriceInverted } = useOrderPlacementState() const resetModal = useCallback(() => { @@ -160,6 +161,14 @@ const OrdersTable: React.FC = (props) => { [showPriceInverted], ) + const auctioningToken = React.useMemo(() => derivedAuctionInfo.auctioningToken, [ + derivedAuctionInfo.auctioningToken, + ]) + + const biddingToken = React.useMemo(() => derivedAuctionInfo.biddingToken, [ + derivedAuctionInfo.biddingToken, + ]) + return ( Your Orders @@ -235,6 +244,7 @@ const OrdersTable: React.FC = (props) => { onClick={() => { setOrderId(order.id) setShowConfirm(true) + setCanceledOrder(order) }} > Cancel @@ -247,7 +257,13 @@ const OrdersTable: React.FC = (props) => { + } hash={txHash} isOpen={showConfirm} @@ -257,8 +273,8 @@ const OrdersTable: React.FC = (props) => { }} pendingConfirmation={pendingConfirmation} pendingText={pendingText} - title="Warning!" - width={394} + title="Confirm order Cancelation" + width={450} /> >` + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: ${(props) => (props.margin ? props.margin : '0')}; +` + +const IconWrap = styled.div` + margin-right: 15px; + width: 20px; + height: 20px; + svg { + width: 20px; + height: auto; + .fill { + fill: ${({ theme }) => theme.error}; + } + } + + p { + max-width: calc(100% - 35px); + margin-bottom: 0; + } +` + +const FieldRowTokenStyled = styled.div` + align-items: center; + display: flex; + margin-left: 12px; + + .tokenLogo { + border-width: 1px; + margin-left: 6px; + } +` interface Props { confirmText: string + invertPrices: boolean onCancelOrder: () => any + orderData?: any + tokens?: { auctioningToken: Maybe; biddingToken: Maybe } | null } const CancelModalFooter: React.FC = (props) => { - const { confirmText, onCancelOrder } = props + const { confirmText, invertPrices, onCancelOrder, orderData, tokens } = props return ( <> - - - - - You will need to place a new order if you still want to participate in this auction. - + + + Min (max) DAI per GNO + + + + {orderData.price} + + + {tokens.biddingToken.address && ( + + )} + + + + + + DAI tokens sold + + + + {orderData.sellAmount} + + + {invertPrices ? ( + + ) : ( + + )} + + + + + + + + + If you Cancel an order in xDAI, you will receive back WXDAI tokens in xDAI. + + + + + + + + You will need to place a new order if you still want to participate in this auction. + + {confirmText} ) From b9bd34bf96c22ece5aed2efc831117bcb83da060 Mon Sep 17 00:00:00 2001 From: Maria Yablonskaya Date: Tue, 20 Jul 2021 15:21:33 +0300 Subject: [PATCH 2/7] rm mockdata from cancel order popup --- .../modals/common/CancelModalFooter/index.tsx | 50 ++++++++++++------- 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/src/components/modals/common/CancelModalFooter/index.tsx b/src/components/modals/common/CancelModalFooter/index.tsx index 838c3af40..83bda2f0e 100644 --- a/src/components/modals/common/CancelModalFooter/index.tsx +++ b/src/components/modals/common/CancelModalFooter/index.tsx @@ -4,6 +4,8 @@ import { Token } from 'uniswap-xdai-sdk' import * as CSS from 'csstype' +import { useActiveWeb3React } from '../../../../hooks' +import { getChainName } from '../../../../utils/tools' import { Button } from '../../../buttons/Button' import { AlertIcon } from '../../../icons/AlertIcon' import { ErrorLock } from '../../../icons/ErrorLock' @@ -63,11 +65,14 @@ interface Props { const CancelModalFooter: React.FC = (props) => { const { confirmText, invertPrices, onCancelOrder, orderData, tokens } = props + const { chainId } = useActiveWeb3React() + return ( <> - Min (max) DAI per GNO + {invertPrices ? 'Min ' : 'Max '} + {tokens.biddingToken.symbol} per {tokens.auctioningToken.symbol} @@ -85,7 +90,7 @@ const CancelModalFooter: React.FC = (props) => { - DAI tokens sold + {tokens.biddingToken.symbol} tokens sold @@ -120,22 +125,31 @@ const CancelModalFooter: React.FC = (props) => { - - - - - - If you Cancel an order in xDAI, you will receive back WXDAI tokens in xDAI. - - - - - - - - You will need to place a new order if you still want to participate in this auction. - - + {(tokens.biddingToken.symbol === 'ETH' && (chainId === 4 || chainId === 1)) || + (chainId === 100 && tokens.biddingToken.symbol === 'DAI') ? ( + <> + + + + + + If you Cancel an order in {chainId === 1 || chainId === 4 ? 'xDAI' : 'ETH'}, you will + receive back {chainId === 1 || chainId === 4 ? 'WXDAI' : 'WETH'} tokens in + {getChainName(chainId)}. + + + + + + + + You will need to place a new order if you still want to participate in this auction. + + + + ) : ( + '' + )} {confirmText} ) From d934345ea5f7ec6870f0ae1afcc8256ae3c6eb17 Mon Sep 17 00:00:00 2001 From: Maria Yablonskaya Date: Fri, 23 Jul 2021 06:00:21 +0300 Subject: [PATCH 3/7] popup upds --- .../modals/common/CancelModalFooter/index.tsx | 43 +++++++++---------- 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/src/components/modals/common/CancelModalFooter/index.tsx b/src/components/modals/common/CancelModalFooter/index.tsx index 83bda2f0e..f5d2e2a1e 100644 --- a/src/components/modals/common/CancelModalFooter/index.tsx +++ b/src/components/modals/common/CancelModalFooter/index.tsx @@ -66,7 +66,7 @@ interface Props { const CancelModalFooter: React.FC = (props) => { const { confirmText, invertPrices, onCancelOrder, orderData, tokens } = props const { chainId } = useActiveWeb3React() - + console.log(tokens.biddingToken) return ( <> @@ -125,31 +125,28 @@ const CancelModalFooter: React.FC = (props) => { - {(tokens.biddingToken.symbol === 'ETH' && (chainId === 4 || chainId === 1)) || - (chainId === 100 && tokens.biddingToken.symbol === 'DAI') ? ( - <> - - - - - - If you Cancel an order in {chainId === 1 || chainId === 4 ? 'xDAI' : 'ETH'}, you will - receive back {chainId === 1 || chainId === 4 ? 'WXDAI' : 'WETH'} tokens in - {getChainName(chainId)}. - - - - - - - - You will need to place a new order if you still want to participate in this auction. - - - + {chainId === 4 || chainId === 1 || chainId === 100 ? ( + + + + + + If you Cancel an order in {tokens.biddingToken.symbol}, you will receive back + {chainId === 1 || chainId === 4 ? 'WXDAI' : 'WETH'} tokens in + {getChainName(chainId)}. + + ) : ( '' )} + + + + + + You will need to place a new order if you still want to participate in this auction. + + {confirmText} ) From f7d9787d89fc218913fefee18440d19d6932e2fc Mon Sep 17 00:00:00 2001 From: Maria Yablonskaya Date: Sat, 24 Jul 2021 15:03:46 +0300 Subject: [PATCH 4/7] warn cancel popup upds --- src/components/auction/OrdersTable/index.tsx | 1 + .../modals/common/CancelModalFooter/index.tsx | 63 ++++++++++--------- 2 files changed, 36 insertions(+), 28 deletions(-) diff --git a/src/components/auction/OrdersTable/index.tsx b/src/components/auction/OrdersTable/index.tsx index 5b8de22fb..853124c1d 100644 --- a/src/components/auction/OrdersTable/index.tsx +++ b/src/components/auction/OrdersTable/index.tsx @@ -294,6 +294,7 @@ const OrdersTable: React.FC = (props) => { content={ >` - display: flex; - align-items: flex-start; - justify-content: space-between; + display: grid; + grid-template-columns: ${(props) => (props.columns ? props.columns : '1fr 1fr')}; margin: ${(props) => (props.margin ? props.margin : '0')}; ` @@ -55,8 +56,17 @@ const FieldRowTokenStyled = styled.div` } ` +const Text = styled.div>` + color: ${({ theme }) => theme.text1}; + font-size: ${(props) => props.fs || '18px'}; + font-weight: normal; + line-height: 1.4; + text-align: ${(props) => props.txtAlign || 'left'}; +` + interface Props { confirmText: string + derivedAuctionInfo?: DerivedAuctionInfo invertPrices: boolean onCancelOrder: () => any orderData?: any @@ -64,24 +74,23 @@ interface Props { } const CancelModalFooter: React.FC = (props) => { - const { confirmText, invertPrices, onCancelOrder, orderData, tokens } = props + const { confirmText, derivedAuctionInfo, invertPrices, onCancelOrder, orderData, tokens } = props const { chainId } = useActiveWeb3React() - console.log(tokens.biddingToken) + return ( <> - + {invertPrices ? 'Min ' : 'Max '} - {tokens.biddingToken.symbol} per {tokens.auctioningToken.symbol} + {invertPrices ? tokens.auctioningToken.symbol : tokens.biddingToken.symbol} per  + {invertPrices ? tokens.biddingToken.symbol : tokens.auctioningToken.symbol} - - - {orderData.price} - + + {orderData.price} {tokens.biddingToken.address && ( )} @@ -89,13 +98,9 @@ const CancelModalFooter: React.FC = (props) => { - - {tokens.biddingToken.symbol} tokens sold - - - - {orderData.sellAmount} - + {tokens.biddingToken.symbol} tokens sold + + {orderData.sellAmount} {invertPrices ? ( = (props) => { address: tokens.auctioningToken.address, symbol: tokens.auctioningToken.symbol, }} - size="16px" + size="24px" /> ) : ( = (props) => { - {chainId === 4 || chainId === 1 || chainId === 100 ? ( - + {(derivedAuctionInfo.biddingToken.symbol === 'ETH' && chainId === 4) || + (derivedAuctionInfo.biddingToken.symbol === 'ETH' && chainId === 1) || + (derivedAuctionInfo.biddingToken.symbol === 'XDAI' && chainId === 100) ? ( + - - If you Cancel an order in {tokens.biddingToken.symbol}, you will receive back - {chainId === 1 || chainId === 4 ? 'WXDAI' : 'WETH'} tokens in + + If you Cancel an order in {tokens.biddingToken.symbol}, you will receive back  + {chainId === 1 || chainId === 4 ? 'WXDAI' : 'WETH'} tokens in  {getChainName(chainId)}. ) : ( '' )} - + - + You will need to place a new order if you still want to participate in this auction. From 814b6e36b9e0bd2737c0ea9058c2477f872f2307 Mon Sep 17 00:00:00 2001 From: Maria Yablonskaya Date: Thu, 29 Jul 2021 08:13:15 +0300 Subject: [PATCH 5/7] warn popup upds --- .../modals/common/CancelModalFooter/index.tsx | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/components/modals/common/CancelModalFooter/index.tsx b/src/components/modals/common/CancelModalFooter/index.tsx index edd3bf9df..0008db76c 100644 --- a/src/components/modals/common/CancelModalFooter/index.tsx +++ b/src/components/modals/common/CancelModalFooter/index.tsx @@ -4,8 +4,12 @@ import { Token } from 'uniswap-xdai-sdk' import * as CSS from 'csstype' +import { NUMBER_OF_DIGITS_FOR_INVERSION } from '../../../../constants/config' import { useActiveWeb3React } from '../../../../hooks' import { DerivedAuctionInfo } from '../../../../state/orderPlacement/hooks' +import { getTokenDisplay } from '../../../../utils' +import { abbreviation } from '../../../../utils/numeral' +import { getInverse } from '../../../../utils/prices' import { getChainName } from '../../../../utils/tools' import { Button } from '../../../buttons/Button' import { AlertIcon } from '../../../icons/AlertIcon' @@ -77,6 +81,10 @@ const CancelModalFooter: React.FC = (props) => { const { confirmText, derivedAuctionInfo, invertPrices, onCancelOrder, orderData, tokens } = props const { chainId } = useActiveWeb3React() + const biddingToken = React.useMemo(() => derivedAuctionInfo.biddingToken, [ + derivedAuctionInfo.biddingToken, + ]) + return ( <> @@ -86,7 +94,13 @@ const CancelModalFooter: React.FC = (props) => { {invertPrices ? tokens.biddingToken.symbol : tokens.auctioningToken.symbol} - {orderData.price} + + {abbreviation( + invertPrices + ? getInverse(orderData.price, NUMBER_OF_DIGITS_FOR_INVERSION) + : orderData.price, + )} + {tokens.biddingToken.address && ( = (props) => { - {(derivedAuctionInfo.biddingToken.symbol === 'ETH' && chainId === 4) || - (derivedAuctionInfo.biddingToken.symbol === 'ETH' && chainId === 1) || - (derivedAuctionInfo.biddingToken.symbol === 'XDAI' && chainId === 100) ? ( + {(derivedAuctionInfo.biddingToken.symbol.includes('ETH') && chainId === 4) || + (derivedAuctionInfo.biddingToken.symbol.includes('ETH') && chainId === 1) || + (derivedAuctionInfo.biddingToken.symbol.includes('XDAI') && chainId === 100) ? ( - If you Cancel an order in {tokens.biddingToken.symbol}, you will receive back  - {chainId === 1 || chainId === 4 ? 'WXDAI' : 'WETH'} tokens in  + If you Cancel an order in  + {biddingToken && biddingToken.symbol && getTokenDisplay(biddingToken, chainId)}, you + will receive back  + {tokens.biddingToken.symbol} tokens in  {getChainName(chainId)}. From d0610e665440c2367337b7733fb38734ed0d8f5e Mon Sep 17 00:00:00 2001 From: Maria Yablonskaya Date: Fri, 30 Jul 2021 03:41:50 +0300 Subject: [PATCH 6/7] gettokendisplay for correct tokens display --- .../modals/common/CancelModalFooter/index.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/modals/common/CancelModalFooter/index.tsx b/src/components/modals/common/CancelModalFooter/index.tsx index 0008db76c..4e024e32d 100644 --- a/src/components/modals/common/CancelModalFooter/index.tsx +++ b/src/components/modals/common/CancelModalFooter/index.tsx @@ -85,13 +85,22 @@ const CancelModalFooter: React.FC = (props) => { derivedAuctionInfo.biddingToken, ]) + const auctioningToken = React.useMemo(() => derivedAuctionInfo.auctioningToken, [ + derivedAuctionInfo.auctioningToken, + ]) + return ( <> {invertPrices ? 'Min ' : 'Max '} - {invertPrices ? tokens.auctioningToken.symbol : tokens.biddingToken.symbol} per  - {invertPrices ? tokens.biddingToken.symbol : tokens.auctioningToken.symbol} + {invertPrices + ? getTokenDisplay(auctioningToken, chainId) + : getTokenDisplay(biddingToken, chainId)} +  per  + {invertPrices + ? getTokenDisplay(biddingToken, chainId) + : getTokenDisplay(auctioningToken, chainId)} @@ -112,7 +121,7 @@ const CancelModalFooter: React.FC = (props) => { - {tokens.biddingToken.symbol} tokens sold + {getTokenDisplay(biddingToken, chainId)} tokens sold {orderData.sellAmount} From a42ee23256a83cfb46817bb8421d40f52941ce6d Mon Sep 17 00:00:00 2001 From: Maria Yablonskaya Date: Tue, 10 Aug 2021 15:21:22 +0300 Subject: [PATCH 7/7] addittional msg upd --- src/components/modals/common/CancelModalFooter/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/modals/common/CancelModalFooter/index.tsx b/src/components/modals/common/CancelModalFooter/index.tsx index 4e024e32d..bb4168ddd 100644 --- a/src/components/modals/common/CancelModalFooter/index.tsx +++ b/src/components/modals/common/CancelModalFooter/index.tsx @@ -153,9 +153,9 @@ const CancelModalFooter: React.FC = (props) => { - {(derivedAuctionInfo.biddingToken.symbol.includes('ETH') && chainId === 4) || - (derivedAuctionInfo.biddingToken.symbol.includes('ETH') && chainId === 1) || - (derivedAuctionInfo.biddingToken.symbol.includes('XDAI') && chainId === 100) ? ( + {(derivedAuctionInfo.biddingToken.symbol.toLowerCase().includes('eth') && chainId === 4) || + (derivedAuctionInfo.biddingToken.symbol.toLowerCase().includes('eth') && chainId === 1) || + (derivedAuctionInfo.biddingToken.symbol.toLowerCase().includes('dai') && chainId === 100) ? (