diff --git a/README.md b/README.md index e4cba095f..7fde59c29 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,14 @@ UI interface for the prediction market contract +## Pre-requisite + +This project depends on following projects: + +- [Prediction market contracts](https://github.com/tzConnectBerlin/prediction-market-contracts) +- [que-pasa](https://github.com/tzConnectBerlin/que-pasa) +- [IPFS Pinning Service](https://github.com/tzConnectBerlin/ipfs-pinning-service) + ## Available Scripts In the project directory, you can run: @@ -31,9 +39,33 @@ The app uses below environment variables: - REACT_APP_NETWORK_TYPE: Tezos network to use. (default: GRANADANET) - REACT_APP_RPC_URL: Tezos node rpc url (default: https://granadanet.smartpy.io) - REACT_APP_RPC_PORT: Tezos node rpc port (default: 443) -- REACT_APP_GRAPHQL_API: [Indexer](https://github.com/tzConnectBerlin/storage-sql) service Postgraphile URL. +- REACT_APP_GRAPHQL_API: [Indexer](https://github.com/tzConnectBerlin/que-pasa) service Postgraphile URL. - REACT_APP_SENTRY_DSN: Sentry DSN if you want to enable logging via sentry ## Assumptions - Currently, we are not fetching contract metadata for FA1.2 contract and the project assumes that the decimals used by the FA1.2 contract is **6** + +## License + +MIT License + +Copyright (c) 2020 TZ Connect GmbH + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/package.json b/package.json index d2b227cbb..4c91b4abf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "prediction-market-ui", - "version": "0.7.2", + "version": "0.7.3", "private": false, "license": "MIT", "dependencies": { diff --git a/src/api/graphql.ts b/src/api/graphql.ts index cfd7969d7..67cc676d7 100644 --- a/src/api/graphql.ts +++ b/src/api/graphql.ts @@ -126,6 +126,40 @@ export const getTotalSupplyByMarket = async (LQTTokenId?: number): Promise => { + return request( + GRAPHQL_API, + gql` + query MarketLiquidity($tokenIds: [BigFloat!]) { + storageSupplyMaps( + condition: { deleted: false } + filter: { idxTokensNat3: { in: $tokenIds } } + orderBy: TX_CONTEXT_BY_TX_CONTEXT_ID__LEVEL_DESC + ) { + supplyMaps: nodes { + id + tokenId: idxTokensNat3 + totalSupply: tokensTotalSupply + txContext { + blockInfo: levelByLevel { + block: _level + bakedAt + } + operationGroupNumber + operationNumber + contentNumber + } + deleted + } + } + } + `, + { + tokenIds, + }, + ); +}; + export const getAllMarkets = async (): Promise => { return request( GRAPHQL_API, diff --git a/src/api/queries.ts b/src/api/queries.ts index 38628ffd6..dcabc4bc3 100644 --- a/src/api/queries.ts +++ b/src/api/queries.ts @@ -4,10 +4,12 @@ import { useQuery, UseQueryResult } from 'react-query'; import { getUserBalance } from '../contracts/Market'; import { AllMarketsLedgers, + AllTokens, AuctionMarkets, Bet, Market, MarketPricePoint, + StorageSupplyMaps, Token, TokenSupplyMap, } from '../interfaces'; @@ -22,6 +24,7 @@ import { getBidsByMarket, getTokenLedger, getTotalSupplyByMarket, + getTotalSupplyForMarkets, } from './graphql'; import { normalizeAuctionData, @@ -63,6 +66,21 @@ export const useTotalSupplyByMarket = (marketId: string): UseQueryResult => { + const LQTTokenIds = markets?.map((item) => getLQTTokenId(item.marketId)); + return useQuery( + ['marketTotalSupplyData', LQTTokenIds], + async () => { + if (LQTTokenIds) { + const liquidityTotalSupply = await getTotalSupplyForMarkets(LQTTokenIds); + return liquidityTotalSupply.storageSupplyMaps.supplyMaps; + } + return undefined; + }, + { enabled: !!(markets?.length ?? 0 > 0), refetchInterval: 1000 * 100 }, + ); +}; + export const useTokenByAddress = ( tokenList: number[], address?: string, diff --git a/src/api/utils.ts b/src/api/utils.ts index 43eadfb80..1f68f7762 100644 --- a/src/api/utils.ts +++ b/src/api/utils.ts @@ -213,11 +213,11 @@ export const normalizeGraphBetSingleOriginator = ({ const groupedBets = R.groupBy(R.prop('marketId'), betNodes); const address = betNodes[0].originator; return Object.keys(groupedBets).reduce((prev, marketId) => { - const lqtNode = orderByTxContext(groupedBets[marketId])[0]; - const edges: BetEdge[] = R.pathOr([], ['bets', 'betEdges'], lqtNode); - if (lqtNode && edges.length > 0) { + const lqtNode = orderByTxContext(groupedBets[marketId]); + const edges: BetEdge[] = R.pathOr([], [0, 'bets', 'betEdges'], lqtNode); + if (lqtNode.length > 0 && edges.length > 0) { prev.push({ - block: lqtNode.txContext.blockInfo.block, + block: lqtNode[0].txContext.blockInfo.block, quantity: Number(edges[0].bet.quantity), marketId, originator: address, diff --git a/src/design-system/atoms/Address/Address.tsx b/src/design-system/atoms/Address/Address.tsx index 5b207e2e2..cf456e970 100644 --- a/src/design-system/atoms/Address/Address.tsx +++ b/src/design-system/atoms/Address/Address.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { Grid } from '@material-ui/core'; +import { Grid, Theme } from '@material-ui/core'; +import { SxProps } from '@material-ui/system'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import DoneRoundedIcon from '@material-ui/icons/DoneRounded'; @@ -31,7 +32,7 @@ export interface AddressProps extends CopyClipBoardStyledProps { size?: TypographyProps['size']; component?: TypographyProps['component']; trimSize?: TrimSizeType; - customStyle?: CSSObject; + customStyle?: SxProps; } const CopyClipBoardStyled = styled(CopyToClipboard)` @@ -55,7 +56,7 @@ export const Address: React.FC = ({ const str = trim ? trimAddress(address, trimSize) : address; const [checked, setChecked] = useState(false); return ( - + {str} diff --git a/src/design-system/atoms/Button/Button.tsx b/src/design-system/atoms/Button/Button.tsx index f374695f8..dd3897cd8 100644 --- a/src/design-system/atoms/Button/Button.tsx +++ b/src/design-system/atoms/Button/Button.tsx @@ -1,19 +1,20 @@ import * as React from 'react'; -import { Button, ButtonProps as MaterialButtonProps } from '@material-ui/core'; +import { Button, ButtonProps as MaterialButtonProps, Theme } from '@material-ui/core'; +import { SxProps } from '@material-ui/system'; import styled, { CSSObject } from '@emotion/styled'; import { lightTheme as theme } from '../../../styles/theme'; import { Typography } from '../Typography'; interface StyledButtonProps { bordercolor: string; - lowercase: boolean; + texttype: string; } const StyledButton = styled(Button)` border-radius: 0.2em; padding: 0.2em 1.2em; border: solid 2px ${({ bordercolor }) => bordercolor}; - text-transform: ${({ lowercase }) => (lowercase ? 'none' : 'uppercase')}; + text-transform: ${({ texttype }) => texttype}; box-shadow: none; &:hover { border-width: 2px !important; @@ -54,7 +55,7 @@ export interface ButtonProps extends MaterialButtonProps { * without uppercase text */ lowercase?: boolean; - customStyle?: CSSObject; + customStyle?: SxProps; /** * Optional click handler */ @@ -65,7 +66,7 @@ export const CustomButton: React.FC = ({ backgroundVariant = 'primary', size = 'small', variant = 'contained', - lowercase = true, + lowercase, label, icon, iconPosition = 'right', @@ -82,7 +83,7 @@ export const CustomButton: React.FC = ({ startIcon={iconPosition === 'left' ? icon : null} endIcon={iconPosition === 'right' ? icon : null} bordercolor={internalBorderColor} - lowercase={lowercase} + texttype={lowercase ? 'none' : 'uppercase'} sx={{ ...customStyle }} {...props} > diff --git a/src/design-system/atoms/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/atoms/Button/__snapshots__/Button.test.tsx.snap index bd82583a6..3fbd0268a 100644 --- a/src/design-system/atoms/Button/__snapshots__/Button.test.tsx.snap +++ b/src/design-system/atoms/Button/__snapshots__/Button.test.tsx.snap @@ -51,7 +51,7 @@ exports[`Snapshot testing Button Component renders correctly with icon in the le border-radius: 0.2em; padding: 0.2em 1.2em; border: solid 2px transparent; - text-transform: none; + text-transform: uppercase; box-shadow: none; } @@ -137,7 +137,6 @@ exports[`Snapshot testing Button Component renders correctly with icon in the le bordercolor="transparent" className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonBase-root emotion-0" disabled={false} - lowercase={true} onBlur={[Function]} onContextMenu={[Function]} onDragLeave={[Function]} @@ -151,6 +150,7 @@ exports[`Snapshot testing Button Component renders correctly with icon in the le onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} + texttype="uppercase" type="button" >

{}, }; diff --git a/src/design-system/atoms/DropDown/DropDown.tsx b/src/design-system/atoms/DropDown/DropDown.tsx index a75f3a62e..493cbcba9 100644 --- a/src/design-system/atoms/DropDown/DropDown.tsx +++ b/src/design-system/atoms/DropDown/DropDown.tsx @@ -6,7 +6,7 @@ import { CustomInputLabel } from '../../molecules/CustomInputLabel'; interface StyledSelectProps { backgroundcolor?: string; - hoverBgColor?: string; + hoverbgcolor?: string; } const StyledSelect = styled(Select)` @@ -15,7 +15,7 @@ const StyledSelect = styled(Select)` box-shadow: 0 0 0.4375rem 0 rgba(209, 209, 209, 0.5); background-color: ${({ backgroundcolor }) => backgroundcolor} !important; &:hover { - background-color: ${({ hoverBgColor }) => hoverBgColor} !important; + background-color: ${({ hoverbgcolor }) => hoverbgcolor} !important; } &:not(.Mui-focused) { & svg { @@ -38,7 +38,7 @@ export interface DropDownProps { anchorOriginY?: PopoverOrigin['vertical']; divider?: boolean; bgColor?: string; - hoverBgColor?: string; + hoverbgcolor?: string; onSelect: (item: number) => void | Promise; defaultValue?: string | number; } @@ -51,7 +51,7 @@ export const DropDown: React.FC = ({ anchorOriginX = 'center', anchorOriginY = 'bottom', bgColor, - hoverBgColor, + hoverbgcolor, divider = true, onSelect, defaultValue = '', @@ -75,7 +75,7 @@ export const DropDown: React.FC = ({ { onSelect(e.target.value); setValue(e.target.value); diff --git a/src/design-system/atoms/Label/Label.tsx b/src/design-system/atoms/Label/Label.tsx index ad1649737..1dfd637ff 100644 --- a/src/design-system/atoms/Label/Label.tsx +++ b/src/design-system/atoms/Label/Label.tsx @@ -72,7 +72,9 @@ export const Label: React.FC = ({ text, size = 'small', icon, ...pro {...props} > {icon} - {text} + + {text} + ); }; diff --git a/src/design-system/atoms/Label/__snapshots__/Label.test.tsx.snap b/src/design-system/atoms/Label/__snapshots__/Label.test.tsx.snap index d2f4e53ed..a0398bfd7 100644 --- a/src/design-system/atoms/Label/__snapshots__/Label.test.tsx.snap +++ b/src/design-system/atoms/Label/__snapshots__/Label.test.tsx.snap @@ -69,12 +69,12 @@ exports[`Snapshot testing Label Component renders correctly with icon 1`] = ` d="M247 62.107v9.94h-28.88v18H247v39.074c-84.367 4.682-151.514 74.737-151.514 160.26 0 41.037 15.468 78.508 40.873 106.91l-36.237 36.237 12.727 12.73 36.238-36.24C177.49 434.425 214.96 449.894 256 449.894c41.04 0 78.51-15.47 106.912-40.875l36.238 36.238 12.727-12.73-36.236-36.235c25.406-28.402 40.874-65.873 40.874-106.91 0-85.523-67.147-155.578-151.514-160.26V90.048h28.88v-18H265v-9.94h-18zm-104.906 26.58c-3.583-.03-7.267.125-11.014.465C111.1 90.97 89.15 98 73.637 113.514c-15.514 15.513-22.545 37.462-24.362 57.443-.908 9.99-.488 19.54 1.184 27.898 1.67 8.36 4.315 15.662 9.784 21.13l6.363 6.365 6.366-6.364 113.5-113.502-6.366-6.363c-5.47-5.468-12.77-8.112-21.128-9.784-4.18-.836-8.658-1.358-13.34-1.56-1.17-.05-2.352-.08-3.546-.088zm227.812 0c-1.194.01-2.376.04-3.547.09-4.682.2-9.16.723-13.34 1.56-8.357 1.67-15.658 4.315-21.127 9.784l-6.366 6.364 6.366 6.366 113.5 113.5 6.363-6.364c5.47-5.47 8.113-12.772 9.785-21.13 1.673-8.36 2.093-17.908 1.185-27.9-1.817-19.98-8.848-41.93-24.362-57.442C422.85 98 400.9 90.97 380.92 89.152c-3.747-.34-7.43-.494-11.014-.465zM256 146.865c78.815 0 142.514 63.7 142.514 142.514 0 78.814-63.7 142.513-142.514 142.513-78.815 0-142.514-63.7-142.514-142.514 0-78.816 63.7-142.515 142.514-142.515zm-88.332 41.453l-12.73 12.73 82.92 82.917a18.94 18.94 0 0 0-.797 5.414A18.94 18.94 0 0 0 256 308.317a18.94 18.94 0 0 0 16.66-9.94h59.096v-18h-59.11A18.94 18.94 0 0 0 256 270.44a18.94 18.94 0 0 0-5.408.804l-82.924-82.924z" /> -
Label Text -
+ `; @@ -129,12 +129,12 @@ exports[`Snapshot testing Label Component renders correctly with large size 1`] -
Label Text -
+ `; @@ -189,12 +189,12 @@ exports[`Snapshot testing Label Component renders correctly with medium size and -
Label Text -
+ `; @@ -249,11 +249,11 @@ exports[`Snapshot testing Label Component renders correctly with small size and -
Label Text -
+ `; diff --git a/src/design-system/atoms/Loading/Loading.tsx b/src/design-system/atoms/Loading/Loading.tsx index 1ec4b4e65..a1902672c 100644 --- a/src/design-system/atoms/Loading/Loading.tsx +++ b/src/design-system/atoms/Loading/Loading.tsx @@ -61,7 +61,7 @@ export const Loading: React.FC = ({ size = 'lg', hasContainer = tr <> {!hasContainer && } {hasContainer && ( - + )} diff --git a/src/design-system/molecules/Footer/Footer.tsx b/src/design-system/molecules/Footer/Footer.tsx index c9cfdfbc7..f39be9d95 100644 --- a/src/design-system/molecules/Footer/Footer.tsx +++ b/src/design-system/molecules/Footer/Footer.tsx @@ -1,21 +1,18 @@ import * as React from 'react'; import styled from '@emotion/styled'; -import { Grid, Box, Container } from '@material-ui/core'; +import { Grid, Box, Theme, useTheme } from '@material-ui/core'; import { Typography } from '../../atoms/Typography'; import { VectorLinkIcon } from './VectorLinkIcon'; -const FooterStyled = styled.footer` +const FooterStyled = styled.footer<{ theme: Theme }>` margin-top: auto; -`; - -const FooterContainer = styled(Container)` width: 100%; display: flex; - margin-top: 2rem; + margin-top: auto; position: relative; - top: auto; - bottom: 0; padding: 2.5rem; + box-sizing: border-box; + background-color: ${({ theme }) => theme.palette.background.default}; `; const LinkTypographyStyled = styled(Typography)` @@ -50,63 +47,58 @@ export const Footer: React.FC = ({ */ links = [], }) => { + const theme = useTheme(); return ( - - - - {title && ( - - - {title} - - - )} - - {links.map(({ label, isExternal, handleLinkClick }, index) => { - return ( - - - {label} - {isExternal && ( - - - - )} - - - ); - })} + + + {title && ( + + + {title} + - - - {description.map((content, index) => ( - - - {content} - - - ))} - + )} + + {links.map(({ label, isExternal, handleLinkClick }, index) => { + return ( + + + {label} + {isExternal && ( + + + + )} + + + ); + })} + + + + {description.map((content, index) => ( + + + {content} + + + ))} - + ); }; diff --git a/src/design-system/molecules/Footer/__snapshots__/Footer.test.tsx.snap b/src/design-system/molecules/Footer/__snapshots__/Footer.test.tsx.snap index a0c9d6ecf..a0854f815 100644 --- a/src/design-system/molecules/Footer/__snapshots__/Footer.test.tsx.snap +++ b/src/design-system/molecules/Footer/__snapshots__/Footer.test.tsx.snap @@ -3,28 +3,19 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` .emotion-0 { margin-top: auto; -} - -.emotion-1 { - width: 100%; - margin-left: auto; - box-sizing: border-box; - margin-right: auto; - display: block; - background-color: #fff; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - margin-top: 2rem; + margin-top: auto; position: relative; - top: auto; - bottom: 0; padding: 2.5rem; + box-sizing: border-box; + background-color: #fff; } -.emotion-2 { +.emotion-1 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -44,11 +35,11 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` flex-wrap: nowrap; } -.emotion-2>.MuiGrid-item { +.emotion-1>.MuiGrid-item { max-width: none; } -.emotion-3 { +.emotion-2 { box-sizing: border-box; margin: 0; -webkit-flex-direction: row; @@ -64,7 +55,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` max-width: 100%; } -.emotion-4 { +.emotion-3 { margin: 0; font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; @@ -74,14 +65,14 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` color: rgba(0, 0, 0, 0.87); } -.emotion-4.truncate { +.emotion-3.truncate { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } -.emotion-5 { +.emotion-4 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -107,7 +98,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } @media (min-width:900px) { - .emotion-5 { + .emotion-4 { -webkit-flex-basis: 33.333333%; -ms-flex-preferred-size: 33.333333%; flex-basis: 33.333333%; @@ -119,7 +110,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } } -.emotion-6 { +.emotion-5 { box-sizing: border-box; margin: 0; -webkit-flex-direction: row; @@ -140,7 +131,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } @media (min-width:600px) { - .emotion-6 { + .emotion-5 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; @@ -153,7 +144,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } @media (min-width:900px) { - .emotion-6 { + .emotion-5 { -webkit-flex-basis: 33.333333%; -ms-flex-preferred-size: 33.333333%; flex-basis: 33.333333%; @@ -166,7 +157,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } @media (min-width:1200px) { - .emotion-6 { + .emotion-5 { -webkit-flex-basis: 16.666667%; -ms-flex-preferred-size: 16.666667%; flex-basis: 16.666667%; @@ -178,7 +169,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } } -.emotion-7 { +.emotion-6 { margin: 0; font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 400; @@ -193,28 +184,19 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` font-weight: normal!important; } -.emotion-7.truncate { +.emotion-6.truncate { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } -.emotion-10 { +.emotion-9 { margin-left: 0.3rem; } -.emotion-11 { +.emotion-10 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - width: 100%; margin: 0; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -230,7 +212,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } @media (min-width:900px) { - .emotion-11 { + .emotion-10 { -webkit-flex-basis: 66.666667%; -ms-flex-preferred-size: 66.666667%; flex-basis: 66.666667%; @@ -243,7 +225,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } @media (min-width:1200px) { - .emotion-11 { + .emotion-10 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; @@ -255,7 +237,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` } } -.emotion-12 { +.emotion-11 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -272,11 +254,11 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` flex-direction: column; } -.emotion-12>.MuiGrid-item { +.emotion-11>.MuiGrid-item { max-width: none; } -.emotion-13 { +.emotion-12 { box-sizing: border-box; margin: 0; -webkit-flex-direction: row; @@ -284,7 +266,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` flex-direction: row; } -.emotion-14 { +.emotion-13 { margin: 0; font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 400; @@ -296,7 +278,7 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` margin-bottom: 4px; } -.emotion-14.truncate { +.emotion-13.truncate { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; @@ -307,86 +289,82 @@ exports[`Snapshot testing Footer Component renders correctly with Props 1`] = ` className="emotion-0" >
+
+ About Tezos Prediction Markets +
+
+
-
- About Tezos Prediction Markets -
+ HOW IT WORKS +

-
-

- HOW IT WORKS -

-
-
-

- ABOUT TEZOS - - - - - -

-
+ + + +
+ +
-
-

- This software implements a crowd-funded prediction market. Once the market has been initiated by setting the question and other details, other participants can give their own assessments of the likelihood of the question coming true, and investing in the market. Not only will these initial participants have a stake in the market, they will also profit from its operation, taking a share of the market’s fees. -

-
-
+
+
+

-

- From then on the market operates in a standard way–each token will pay out to one or zero coins,depending upon which way events transpire. A 5% fee on winnings rewards participants in the investment phase, and those who have contributed liquidity to the market during its operation. -

-
+ From then on the market operates in a standard way–each token will pay out to one or zero coins,depending upon which way events transpire. A 5% fee on winnings rewards participants in the investment phase, and those who have contributed liquidity to the market during its operation. +

diff --git a/src/design-system/molecules/Header/Header.tsx b/src/design-system/molecules/Header/Header.tsx index 7ddfffa90..83362a660 100644 --- a/src/design-system/molecules/Header/Header.tsx +++ b/src/design-system/molecules/Header/Header.tsx @@ -1,13 +1,53 @@ import React, { useState } from 'react'; -import { AppBar, Grid, Toolbar, useMediaQuery, useTheme } from '@material-ui/core'; -import { TezosIcon } from '../../atoms/TezosIcon'; -import { Typography } from '../../atoms/Typography'; +import { useTranslation } from 'react-i18next'; +import { AppBar, Grid, Toolbar, useMediaQuery, Theme, useTheme } from '@material-ui/core'; +import { SxProps } from '@material-ui/system'; +import styled from '@emotion/styled'; import { ProfilePopover } from '../ProfilePopover'; import { Links } from '../../../interfaces'; import { Identicon } from '../../atoms/Identicon'; import { CustomButton } from '../../atoms/Button'; import { TezosPM } from '../../atoms/TezosPMIcon'; +const StyledAppBar = styled(AppBar)<{ theme: Theme; component: string }>` + background-color: ${({ theme }) => theme.palette.background.default}; +`; + +const StyledToolbar = styled(Toolbar)` + padding-bottom: 0.5rem; + padding-top: 0.5rem; +`; + +const StyledGridAvatar = styled(Grid)` + cursor: pointer; +`; + +const StyledGridLeftSide = styled(Grid)<{ theme: Theme }>` + align-items: center; + justify-content: center; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + cursor: pointer; + ${({ theme }) => `${theme.breakpoints.up('sm')} { + justify-content: flex-start; + margin-top: 0; + margin-bottom: 0; + }`} +`; + +const StyledGridRightSide = styled(Grid)<{ theme: Theme }>` + align-items: center; + justify-content: center; + ${({ theme }) => `${theme.breakpoints.up('sm')} { + justify-content: flex-end; + }`} +`; + +const getButtonStyles = (isMobile: boolean): SxProps => + isMobile + ? { marginLeft: 'inherit', width: 'max-content' } + : { marginLeft: '1em', width: 'inherit' }; + export interface HeaderProps { title: string; walletAvailable: boolean; @@ -42,6 +82,7 @@ export const Header: React.FC = ({ profileLinks, }) => { const theme = useTheme(); + const { t } = useTranslation(['common']); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const [anchorEl, setAnchorEl] = useState(null); const [isOpen, setOpen] = useState(false); @@ -59,41 +100,19 @@ export const Header: React.FC = ({ }, []); return ( - - + + - + {/* TODO: Move Wallet connection box to a separate component */} - + {secondaryActionText && !isMobile && ( = ({ handleConnect(); }} label={primaryActionText} - customStyle={{ - marginLeft: isMobile ? 'inherit' : '1em', - width: isMobile ? 'max-content' : 'inherit', - }} + customStyle={getButtonStyles(isMobile)} /> )} {walletAvailable && ( - - + + setOpen(false)} @@ -133,11 +154,11 @@ export const Header: React.FC = ({ userBalance={userBalance} links={profileLinks} /> - + )} - + - - + + ); }; diff --git a/src/design-system/molecules/Header/__snapshots__/Header.test.tsx.snap b/src/design-system/molecules/Header/__snapshots__/Header.test.tsx.snap index 3f8f00396..4b7b64022 100644 --- a/src/design-system/molecules/Header/__snapshots__/Header.test.tsx.snap +++ b/src/design-system/molecules/Header/__snapshots__/Header.test.tsx.snap @@ -43,8 +43,8 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` padding-left: 16px; padding-right: 16px; min-height: 56px; - padding-top: 8px; - padding-bottom: 8px; + padding-bottom: 0.5rem; + padding-top: 0.5rem; } @media (min-width:600px) { @@ -109,6 +109,12 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-top: 0.5rem; + margin-bottom: 0.5rem; cursor: pointer; } @@ -125,25 +131,14 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` } } -@media (min-width:0px) { - .emotion-3 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - } -} - @media (min-width:600px) { .emotion-3 { - margin-top: 0rem; - margin-bottom: 0rem; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; + margin-top: 0; + margin-bottom: 0; } } @@ -177,6 +172,10 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-4>.MuiGrid-item { @@ -200,15 +199,6 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` } } -@media (min-width:0px) { - .emotion-4 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - } -} - @media (min-width:600px) { .emotion-4 { -webkit-box-pack: end; @@ -305,7 +295,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` text-indent: 10000px; } -
@@ -346,6 +338,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` onClick={[Function]} > My Profile @@ -354,7 +347,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = `
-
+ `; exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` @@ -400,8 +393,8 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` padding-left: 16px; padding-right: 16px; min-height: 56px; - padding-top: 8px; - padding-bottom: 8px; + padding-bottom: 0.5rem; + padding-top: 0.5rem; } @media (min-width:600px) { @@ -466,6 +459,12 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-top: 0.5rem; + margin-bottom: 0.5rem; cursor: pointer; } @@ -482,25 +481,14 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` } } -@media (min-width:0px) { - .emotion-3 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - } -} - @media (min-width:600px) { .emotion-3 { - margin-top: 0rem; - margin-bottom: 0rem; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; + margin-top: 0; + margin-bottom: 0; } } @@ -534,6 +522,10 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-4>.MuiGrid-item { @@ -557,15 +549,6 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` } } -@media (min-width:0px) { - .emotion-4 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - } -} - @media (min-width:600px) { .emotion-4 { -webkit-box-pack: end; @@ -635,7 +618,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` border-radius: 0.2em; padding: 0.2em 1.2em; border: solid 2px transparent; - text-transform: none; + text-transform: uppercase; box-shadow: none; } @@ -707,7 +690,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` -webkit-line-clamp: 3; } -
@@ -747,7 +732,6 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` bordercolor="transparent" className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonBase-root emotion-6" disabled={false} - lowercase={true} onBlur={[Function]} onClick={[Function]} onContextMenu={[Function]} @@ -762,6 +746,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} + texttype="uppercase" type="button" >

-
+ `; diff --git a/src/design-system/molecules/MarketCardContent/MarketCardContent.tsx b/src/design-system/molecules/MarketCardContent/MarketCardContent.tsx index 2fa7cc906..51b6a0518 100644 --- a/src/design-system/molecules/MarketCardContent/MarketCardContent.tsx +++ b/src/design-system/molecules/MarketCardContent/MarketCardContent.tsx @@ -50,7 +50,9 @@ export const MarketCardContent: React.FC = ({ return ( - {token.type} + + {token.type} + {token.value}% @@ -75,7 +77,9 @@ export const MarketCardContent: React.FC = ({ fontColor={theme.palette.text.secondary} className={item.changes ? 'hasIcon' : ''} > - {item.type} + + {item.type} + diff --git a/src/design-system/molecules/MarketCardContent/__snapshots__/MarketCardContent.test.tsx.snap b/src/design-system/molecules/MarketCardContent/__snapshots__/MarketCardContent.test.tsx.snap index 84a06c161..de9162f02 100644 --- a/src/design-system/molecules/MarketCardContent/__snapshots__/MarketCardContent.test.tsx.snap +++ b/src/design-system/molecules/MarketCardContent/__snapshots__/MarketCardContent.test.tsx.snap @@ -198,12 +198,12 @@ exports[`Snapshot testing MarketCardContent Component renders correctly only sta
-

WEEKLY -

+
-

VOLUME -

+
-

Yes -

+
-

No -

+
-

Yes -

+
-

No -

+
-

WEEKLY -

+
-

VOLUME -

+
= ({ iconSize = 'xl', iconType = 'blockies', }) => { - return ; + return ( + + ); }; diff --git a/src/design-system/molecules/MarketCardHeader/__snapshots__/MarketCardHeader.test.tsx.snap b/src/design-system/molecules/MarketCardHeader/__snapshots__/MarketCardHeader.test.tsx.snap index ec6617d0b..14aec63cb 100644 --- a/src/design-system/molecules/MarketCardHeader/__snapshots__/MarketCardHeader.test.tsx.snap +++ b/src/design-system/molecules/MarketCardHeader/__snapshots__/MarketCardHeader.test.tsx.snap @@ -239,6 +239,7 @@ exports[`Snapshot testing MarketCardHeader Component renders correctly with diff className="MuiAvatar-root MuiAvatar-circular xl hasBackground emotion-2" > Auction step @@ -259,12 +260,12 @@ exports[`Snapshot testing MarketCardHeader Component renders correctly with diff -
Auction -
+
@@ -522,6 +523,7 @@ exports[`Snapshot testing MarketCardHeader Component renders correctly with hash className="MuiAvatar-root MuiAvatar-circular xl hasBackground emotion-2" > QmYgtfMBZo3ajW5rmUesVfHSJu5nT6fT3cRcvr2fpfbzo3 @@ -542,12 +544,12 @@ exports[`Snapshot testing MarketCardHeader Component renders correctly with hash -
Auction -
+ @@ -805,6 +807,7 @@ exports[`Snapshot testing MarketCardHeader Component renders correctly with imag className="MuiAvatar-root MuiAvatar-circular xl hasBackground emotion-2" > Market card with image icon @@ -825,12 +828,12 @@ exports[`Snapshot testing MarketCardHeader Component renders correctly with imag -
Auction -
+ diff --git a/src/design-system/molecules/MarketHeader/__snapshots__/MarketHeader.test.tsx.snap b/src/design-system/molecules/MarketHeader/__snapshots__/MarketHeader.test.tsx.snap index 466e9fda7..345b8ac42 100644 --- a/src/design-system/molecules/MarketHeader/__snapshots__/MarketHeader.test.tsx.snap +++ b/src/design-system/molecules/MarketHeader/__snapshots__/MarketHeader.test.tsx.snap @@ -358,6 +358,7 @@ exports[`Snapshot testing MarketHeader Component renders correctly 1`] = ` className="MuiAvatar-root MuiAvatar-circular max hasBackground emotion-2" > Will Biden be the President of the United States on May 1, 2021? @@ -378,12 +379,12 @@ exports[`Snapshot testing MarketHeader Component renders correctly 1`] = ` -
Auction -
+ diff --git a/src/design-system/molecules/MyAccountCard/MyAccountCard.tsx b/src/design-system/molecules/MyAccountCard/MyAccountCard.tsx index 06aadcfa9..ece8835c2 100644 --- a/src/design-system/molecules/MyAccountCard/MyAccountCard.tsx +++ b/src/design-system/molecules/MyAccountCard/MyAccountCard.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled from '@emotion/styled'; -import { Card, Grid, useTheme } from '@material-ui/core'; +import { Card, Grid, Theme, useTheme } from '@material-ui/core'; +import { SxProps } from '@material-ui/system'; import { useTranslation } from 'react-i18next'; import { Typography } from '../../atoms/Typography'; import { Address } from '../../atoms/Address/Address'; @@ -20,6 +21,12 @@ const StyledCard = styled(Card)` } `; +const CustomStylesAddress: SxProps = { + width: 'auto', + marginBottom: '1rem', + color: (theme) => theme.palette.text.secondary, +}; + export interface MyAccountCardProps { /** * title of card @@ -78,16 +85,7 @@ export const MyAccountCard: React.FC = ({ {walletName} {keyLabel} -
+
{balanceLabel} {balance} diff --git a/src/design-system/molecules/NotificationBanner/NotificationBanner.tsx b/src/design-system/molecules/NotificationBanner/NotificationBanner.tsx index 36ecdb88a..d4ccd84a5 100644 --- a/src/design-system/molecules/NotificationBanner/NotificationBanner.tsx +++ b/src/design-system/molecules/NotificationBanner/NotificationBanner.tsx @@ -4,18 +4,27 @@ import Alert from '@material-ui/core/Alert'; import IconButton from '@material-ui/core/IconButton'; import Collapse from '@material-ui/core/Collapse'; import CloseIcon from '@material-ui/icons/Close'; +import styled from '@emotion/styled'; export interface NotificationBannerProps { open: boolean; } +const StyledBox = styled(Box)` + width: 100%; +`; + +const StyledAlert = styled(Alert)` + margin-bottom: 1rem; +`; + export const NotificationBanner: React.FC = ({ open, children }) => { const [isOpen, setOpen] = React.useState(open); return ( - + - = ({ open, ch } - sx={{ mb: 2 }} > {children} - + - + ); }; diff --git a/src/design-system/molecules/ProfilePopover/ProfilePopover.tsx b/src/design-system/molecules/ProfilePopover/ProfilePopover.tsx index 044c1389b..b3ceb9996 100644 --- a/src/design-system/molecules/ProfilePopover/ProfilePopover.tsx +++ b/src/design-system/molecules/ProfilePopover/ProfilePopover.tsx @@ -13,6 +13,7 @@ import { useTheme, Link, } from '@material-ui/core'; +import { SxProps } from '@material-ui/system'; import styled from '@emotion/styled'; import { Link as RouterLink } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; @@ -25,13 +26,11 @@ import { roundToTwo } from '../../../utils/math'; import { Loading } from '../../atoms/Loading'; import { SettingDialog } from '../SettingDialog'; -const StyledGrid = styled(Grid)<{ theme: Theme }>` - padding: ${({ theme }) => theme.spacing(2)}; - +const StyledGrid = styled(Grid)` + padding: 1rem; .settings { padding-top: 0; } - .header-container { display: flex; align-items: center; @@ -39,13 +38,25 @@ const StyledGrid = styled(Grid)<{ theme: Theme }>` } `; +const StyledDivider = styled(Divider)` + margin-left: 1rem; +`; + +const StyledListItemText = styled(ListItemText)<{ theme: Theme }>` + color: ${({ theme }) => theme.palette.primary.main}; + padding-left: 0.5rem; + padding-right: 0.5rem; +`; + +const ListItemLinkStyles: SxProps = { textDecoration: 'none' }; + interface ListItemLinkProps extends ListItemProps { href: string; } const ListItemLink = ({ href, children, ...rest }: ListItemLinkProps) => { return ( - + {children} ); @@ -107,15 +118,10 @@ export const ProfilePopoverComponent: React.FC = ({
- + {t('balance')} - + {balance} @@ -124,18 +130,18 @@ export const ProfilePopoverComponent: React.FC = ({ {links.map((link, index) => ( - - + + ))} )} - + - + {t('slippageSettings')} @@ -144,7 +150,7 @@ export const ProfilePopoverComponent: React.FC = ({ - + = ({ return ( {filterItems && filterItems.length > 0 && ( - + )} - + {searchFieldLabel && }
= ({ )} {!winningPrediction && adjudicator === activeAccount?.address && (
@@ -569,6 +570,7 @@ exports[`Snapshot testing MarketCard Component renders correctly with closed tim className="MuiAvatar-root MuiAvatar-circular xl hasBackground emotion-3" > Closed Market @@ -589,12 +591,12 @@ exports[`Snapshot testing MarketCard Component renders correctly with closed tim -
Market -
+
@@ -876,6 +878,7 @@ exports[`Snapshot testing MarketCard Component renders correctly with hash gener className="MuiAvatar-root MuiAvatar-circular xl hasBackground emotion-3" > QmYgtfMBZo3ajW5rmUesVfHSJu5nT6fT3cRcvr2fpfbzo3 @@ -896,12 +899,12 @@ exports[`Snapshot testing MarketCard Component renders correctly with hash gener -
Auction -
+
@@ -1388,6 +1391,7 @@ exports[`Snapshot testing MarketCard Component renders correctly with image icon className="MuiAvatar-root MuiAvatar-circular xl hasBackground emotion-3" > Market card with image icon @@ -1408,12 +1412,12 @@ exports[`Snapshot testing MarketCard Component renders correctly with image icon -
Auction -
+ @@ -1442,12 +1446,12 @@ exports[`Snapshot testing MarketCard Component renders correctly with image icon
-

Yes -

+
-

No -

+
-

WEEKLY -

+
-

VOLUME -

+
= ({ cardList, pendin return ( - + {pending > 0 && new Array(pending).fill('').map((_, index) => )} {getMarketList()} diff --git a/src/design-system/organisms/MarketCardList/__snapshots__/MarketCardList.test.tsx.snap b/src/design-system/organisms/MarketCardList/__snapshots__/MarketCardList.test.tsx.snap index b1a19478d..52cb863fe 100644 --- a/src/design-system/organisms/MarketCardList/__snapshots__/MarketCardList.test.tsx.snap +++ b/src/design-system/organisms/MarketCardList/__snapshots__/MarketCardList.test.tsx.snap @@ -502,6 +502,7 @@ exports[`Snapshot testing MarketCardList Component renders correctly 1`] = ` >
@@ -548,12 +550,12 @@ exports[`Snapshot testing MarketCardList Component renders correctly 1`] = ` -
auctionPhase -
+
@@ -582,12 +584,12 @@ exports[`Snapshot testing MarketCardList Component renders correctly 1`] = `
-

Yes -

+
-

No -

+
-

weekly -

+
-

liquidity -

+
= ({ title, heading, const theme = useTheme(); return ( - + {title} diff --git a/src/design-system/organisms/ResolveMarketModal/ResolveMarketModal.tsx b/src/design-system/organisms/ResolveMarketModal/ResolveMarketModal.tsx index 2ab32018a..e52afdb29 100644 --- a/src/design-system/organisms/ResolveMarketModal/ResolveMarketModal.tsx +++ b/src/design-system/organisms/ResolveMarketModal/ResolveMarketModal.tsx @@ -35,6 +35,7 @@ const StyledFormWrapper = styled(Box)` transform: translate(-50%, -50%); width: 65%; padding: 2rem; + box-shadow: 24; background-color: ${(props) => props.backgroundColor}; `; @@ -80,7 +81,7 @@ export const ResolveMarketModal: React.FC = ({ }} > - + {({ isValid }) => (
diff --git a/src/design-system/organisms/SubmitBidCard/PositionSummary.tsx b/src/design-system/organisms/SubmitBidCard/PositionSummary.tsx index 95f4bbabd..fa36fb941 100644 --- a/src/design-system/organisms/SubmitBidCard/PositionSummary.tsx +++ b/src/design-system/organisms/SubmitBidCard/PositionSummary.tsx @@ -1,7 +1,14 @@ import * as React from 'react'; import { Grid, useTheme } from '@material-ui/core'; +import styled from '@emotion/styled'; import { Typography } from '../../atoms/Typography'; +const StyledTypography = styled(Typography)` + word-wrap: break-word; + text-align: end; + font-weight: 700; +`; + export type PositionItem = { label: string; value: string | number; @@ -28,14 +35,7 @@ export const PositionSummary: React.FC = ({ title, items } - - {value} - + {value} ))} diff --git a/src/design-system/organisms/SubmitBidCard/__snapshots__/SubmitBidCard.test.tsx.snap b/src/design-system/organisms/SubmitBidCard/__snapshots__/SubmitBidCard.test.tsx.snap index 8eb1909f3..8e2cf6263 100644 --- a/src/design-system/organisms/SubmitBidCard/__snapshots__/SubmitBidCard.test.tsx.snap +++ b/src/design-system/organisms/SubmitBidCard/__snapshots__/SubmitBidCard.test.tsx.snap @@ -1036,9 +1036,9 @@ label+.emotion-30 { font-size: 1rem; line-height: 1.5; letter-spacing: 0.00938em; + word-wrap: break-word; text-align: end; font-weight: 700; - word-wrap: break-word; } .emotion-40.truncate { @@ -1099,7 +1099,7 @@ label+.emotion-30 { border-radius: 0.2em; padding: 0.2em 1.2em; border: solid 2px transparent; - text-transform: none; + text-transform: uppercase; box-shadow: none; } @@ -1464,7 +1464,7 @@ label+.emotion-30 { className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-5 emotion-39" >
50% @@ -1484,7 +1484,7 @@ label+.emotion-30 { className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-5 emotion-39" >
50 PMM @@ -1499,7 +1499,6 @@ label+.emotion-30 { bordercolor="transparent" className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButtonBase-root emotion-46" disabled={false} - lowercase={true} onBlur={[Function]} onContextMenu={[Function]} onDragLeave={[Function]} @@ -1513,6 +1512,7 @@ label+.emotion-30 { onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} + texttype="uppercase" type="submit" >

= ({ /> {sortItems && onSortSelect && ( - + )} diff --git a/src/design-system/organisms/Toolbar/__snapshots__/Toolbar.test.tsx.snap b/src/design-system/organisms/Toolbar/__snapshots__/Toolbar.test.tsx.snap index 07f2ef7e2..62463b3fb 100644 --- a/src/design-system/organisms/Toolbar/__snapshots__/Toolbar.test.tsx.snap +++ b/src/design-system/organisms/Toolbar/__snapshots__/Toolbar.test.tsx.snap @@ -795,6 +795,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- >
= ({ return ( {outcomeItems.length > 0 && ( - + diff --git a/src/design-system/organisms/TradeForm/__snapshots__/TradeForm.test.tsx.snap b/src/design-system/organisms/TradeForm/__snapshots__/TradeForm.test.tsx.snap index c119be6f3..ff44dc9cd 100644 --- a/src/design-system/organisms/TradeForm/__snapshots__/TradeForm.test.tsx.snap +++ b/src/design-system/organisms/TradeForm/__snapshots__/TradeForm.test.tsx.snap @@ -824,7 +824,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input- border-radius: 0.2em; padding: 0.2em 1.2em; border: solid 2px transparent; - text-transform: none; + text-transform: uppercase; box-shadow: none; } @@ -1146,7 +1146,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input- bordercolor="transparent" className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButtonBase-root emotion-27" disabled={false} - lowercase={true} onBlur={[Function]} onContextMenu={[Function]} onDragLeave={[Function]} @@ -1160,6 +1159,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input- onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} + texttype="uppercase" type="submit" >

` - display: flex; - flex-direction: column; - min-height: 100vh; - background-color: ${({ theme }) => theme.palette.background.default}; +const MainContainer = styled.main` + margin-bottom: 2.5rem; `; const ContentContainerStyled = styled(Container)` @@ -92,7 +89,7 @@ export const MainPage: React.FC = ({ title, children, description }, [beaconWallet]); return ( - + <> {pageTitle} @@ -105,29 +102,31 @@ export const MainPage: React.FC = ({ title, children, description - -
history.push('/')} - stablecoinSymbol={CURRENCY_SYMBOL} - actionText={t('disconnectWallet')} - userBalance={balance} - primaryActionText={t('signIn')} - secondaryActionText={t('createQuestionPage')} - handleSecondaryAction={() => history.push('/create-market')} - walletAvailable={connected ?? false} - address={activeAccount?.address ?? ''} - handleConnect={connect} - handleDisconnect={disconnect} - network={activeAccount?.network.name ?? ''} - profileLinks={profileLinks} - /> - -
+
+ +
history.push('/')} + stablecoinSymbol={CURRENCY_SYMBOL} + actionText={t('disconnectWallet')} + userBalance={balance} + primaryActionText={t('signIn')} + secondaryActionText={t('createQuestionPage')} + handleSecondaryAction={() => history.push('/create-market')} + walletAvailable={connected ?? false} + address={activeAccount?.address ?? ''} + handleConnect={connect} + handleDisconnect={disconnect} + network={activeAccount?.network.name ?? ''} + profileLinks={profileLinks} + /> + +
+ {children} -
+