diff --git a/package.json b/package.json index 52b18d518..d2b227cbb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "prediction-market-ui", - "version": "0.7.1", + "version": "0.7.2", "private": false, "license": "MIT", "dependencies": { diff --git a/src/api/graphql.ts b/src/api/graphql.ts index 45208bcbc..cfd7969d7 100644 --- a/src/api/graphql.ts +++ b/src/api/graphql.ts @@ -76,6 +76,15 @@ export const getAllTokenSupply = async (): Promise => { totalSupply: tokensTotalSupply tokenReserve: tokensInReserve deleted + txContext { + blockInfo: levelByLevel { + block: _level + bakedAt + } + operationGroupNumber + operationNumber + contentNumber + } } } } diff --git a/src/api/utils.ts b/src/api/utils.ts index 7f16fed9e..0e086dbd8 100644 --- a/src/api/utils.ts +++ b/src/api/utils.ts @@ -1,6 +1,5 @@ import { differenceInDays } from 'date-fns/esm'; import * as R from 'ramda'; -import { string } from 'yup/lib/locale'; import { GraphMarket, Market, @@ -33,12 +32,6 @@ const includesInsensitive = (child: string) => (parent: string) => export const searchMarket = (markets: Market[], search: string): Market[] => R.filter(R.propSatisfies(includesInsensitive(search), 'question'), markets); -export const sortById = R.sortBy(R.prop('id')); - -export const sortByBlock = (data: any): any => - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - R.sortWith([R.path(['txContext', 'blockInfo', 'block'])])(data); export const findBetByOriginator = (bets: Bet[], originator: string): Bet | undefined => R.find(R.propEq('originator', originator))(bets) as Bet | undefined; export const findBetByMarketId = (bets: Bet[], marketId: string): Bet | undefined => @@ -62,6 +55,8 @@ export const getOpenMarkets = (markets: Market[]): Market[] => export const getClosedMarkets = (markets: Market[]): Market[] => R.filter(filterMarketClosed, markets); +const byLevel = R.descend(R.path(['txContext', 'blockInfo', 'block'])); +const byOperationNumber = R.descend(R.path(['txContext', 'operationNumber'])); const byOperationGroupNumber = R.descend(R.path(['txContext', 'operationGroupNumber'])); const byContentNumber = R.descend(R.path(['txContext', 'contentNumber'])); // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -69,7 +64,7 @@ const byContentNumber = R.descend(R.path(['txContext', 'contentNumber'])); export const orderByTxContext = (data: T): T => // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - R.sortWith([byOperationGroupNumber, byContentNumber])(data); + R.sortWith([byLevel, byOperationGroupNumber, byOperationNumber, byContentNumber])(data); export const toMarket = async ( graphMarket: GraphMarket, @@ -196,12 +191,7 @@ export const normalizeGraphBets = ({ const betNodes: LqtProviderNode[] = R.pluck('lqtProviderNode', lqtProviderEdge); const groupedBets = R.groupBy(R.prop('originator'), betNodes); return Object.keys(groupedBets).reduce((prev, originator) => { - const lqtNode = R.reduce( - (acc, cur: LqtProviderNode) => - cur.bets.betEdges[0]?.bet?.quantity > acc?.bets?.betEdges?.[0]?.bet?.quantity ? cur : acc, - sortByBlock(groupedBets[originator])[0], - sortByBlock(groupedBets[originator]), - ); + const lqtNode = orderByTxContext(groupedBets[originator]); const edges: BetEdge[] = R.pathOr([], ['bets', 'betEdges'], lqtNode); if (lqtNode && edges.length > 0) { prev.push({ @@ -223,12 +213,7 @@ 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 = R.reduce( - (acc, cur: LqtProviderNode) => - cur.bets.betEdges[0]?.bet?.quantity > acc?.bets?.betEdges?.[0]?.bet?.quantity ? cur : acc, - sortByBlock(groupedBets[marketId])[0], - sortByBlock(groupedBets[marketId]), - ); + const lqtNode = orderByTxContext(groupedBets[marketId]); const edges: BetEdge[] = R.pathOr([], ['bets', 'betEdges'], lqtNode); if (lqtNode && edges.length > 0) { prev.push({ @@ -248,9 +233,11 @@ export const normalizeSupplyMaps = ({ }: AllTokens): TokenSupplyMap[] => { const groupedSupplyMaps = R.groupBy(R.prop('tokenId'), supplyMaps); return Object.keys(groupedSupplyMaps).reduce((prev, tokenId) => { - const tokenMap = R.last(sortByBlock(groupedSupplyMaps[tokenId])) as unknown as - | TokenSupplyMap - | undefined; + const tokenMap = R.pathOr( + null, + [0], + orderByTxContext(groupedSupplyMaps[tokenId]), + ) as unknown as TokenSupplyMap | undefined; if (tokenMap) { prev.push(tokenMap); } @@ -337,9 +324,17 @@ export const toMarketPriceData = (marketId: string, tokens: Token[]): MarketPric }, noTokens); return Object.keys(groupedYesTokens).reduce((acc, block) => { - const lastYesValue = R.last(sortById(groupedYesTokens[block])); - const lastNoValue = R.last(sortById(groupedNoTokens[block])); - if (lastYesValue && lastNoValue) { + const lastYesValue: Token | null = R.pathOr( + null, + [0], + orderByTxContext(groupedYesTokens[block]), + ) as unknown as Token | null; + const lastNoValue: Token | null = R.pathOr( + null, + [0], + orderByTxContext(groupedNoTokens[block]), + ) as unknown as Token | null; + if (lastYesValue !== null && lastNoValue !== null) { acc.push({ bakedAt: lastYesValue.txContext.blockInfo.bakedAt, block: lastYesValue.txContext.blockInfo.block, diff --git a/src/design-system/atoms/TezosPMIcon/TezosPMBeta.tsx b/src/design-system/atoms/TezosPMIcon/TezosPMBeta.tsx new file mode 100644 index 000000000..0cedbdba2 --- /dev/null +++ b/src/design-system/atoms/TezosPMIcon/TezosPMBeta.tsx @@ -0,0 +1,32 @@ +import { SVGProps } from 'react'; + +export interface TezosPMProps extends SVGProps { + width?: number; + height?: number; + color?: string; +} + +export const TezosPM: React.FC = ({ + fill = '#0166ff', + color = '#1d2227', + ...rest +}) => { + return ( + + + + + ); +}; diff --git a/src/design-system/atoms/TezosPMIcon/index.ts b/src/design-system/atoms/TezosPMIcon/index.ts new file mode 100644 index 000000000..aa7a79dc4 --- /dev/null +++ b/src/design-system/atoms/TezosPMIcon/index.ts @@ -0,0 +1,2 @@ +export { TezosPM, TezosPM as default } from './TezosPMBeta'; +export type { TezosPMProps } from './TezosPMBeta'; diff --git a/src/design-system/molecules/Header/Header.test.tsx b/src/design-system/molecules/Header/Header.test.tsx index 02262fc0b..de891a460 100644 --- a/src/design-system/molecules/Header/Header.test.tsx +++ b/src/design-system/molecules/Header/Header.test.tsx @@ -62,8 +62,6 @@ describe('Element testing Header Component', () => { handleDisconnect={() => {}} />, ); - - expect(getByText(/Prediction Market/i)).toBeInTheDocument(); expect(getByText(/Sign in/i)).toBeInTheDocument(); expect(queryAllByText(/Disconnect Wallet/i).length).toEqual(0); }); @@ -86,7 +84,6 @@ describe('Element testing Header Component', () => { if (img) { fireEvent.click(img); } - expect(getByText(/Prediction Market/i)).toBeInTheDocument(); expect(getByText(/Disconnect Wallet/i)).toBeInTheDocument(); expect(queryAllByText(/Sign in/i).length).toEqual(0); }); diff --git a/src/design-system/molecules/Header/Header.tsx b/src/design-system/molecules/Header/Header.tsx index 5c905424c..7ddfffa90 100644 --- a/src/design-system/molecules/Header/Header.tsx +++ b/src/design-system/molecules/Header/Header.tsx @@ -6,6 +6,7 @@ import { ProfilePopover } from '../ProfilePopover'; import { Links } from '../../../interfaces'; import { Identicon } from '../../atoms/Identicon'; import { CustomButton } from '../../atoms/Button'; +import { TezosPM } from '../../atoms/TezosPMIcon'; export interface HeaderProps { title: string; @@ -78,15 +79,7 @@ export const Header: React.FC = ({ cursor: 'pointer', }} > - - - {title} - + {/* TODO: Move Wallet connection box to a separate component */} .MuiGrid-item { +.emotion-4>.MuiGrid-item { padding-top: 16px; } -.emotion-5>.MuiGrid-item { +.emotion-4>.MuiGrid-item { padding-left: 16px; } @media (min-width:600px) { - .emotion-5 { + .emotion-4 { -webkit-flex-basis: calc(50% + 16px); -ms-flex-preferred-size: calc(50% + 16px); flex-basis: calc(50% + 16px); @@ -220,7 +201,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` } @media (min-width:0px) { - .emotion-5 { + .emotion-4 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -229,7 +210,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` } @media (min-width:600px) { - .emotion-5 { + .emotion-4 { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; @@ -237,7 +218,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` } } -.emotion-6 { +.emotion-5 { box-sizing: border-box; margin: 0; -webkit-flex-direction: row; @@ -246,7 +227,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` cursor: pointer; } -.emotion-7 { +.emotion-6 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -276,46 +257,46 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` user-select: none; } -.emotion-7.hasBackground { +.emotion-6.hasBackground { background-color: rgba(29, 34, 39, 0.04); } -.emotion-7.xs { +.emotion-6.xs { width: 24px; height: 24px; } -.emotion-7.sm { +.emotion-6.sm { width: 32px; height: 32px; } -.emotion-7.md { +.emotion-6.md { width: 40px; height: 40px; } -.emotion-7.lg { +.emotion-6.lg { width: 48px; height: 48px; } -.emotion-7.xl { +.emotion-6.xl { width: 64px; height: 64px; } -.emotion-7.xxl { +.emotion-6.xxl { width: 77px; height: 77px; } -.emotion-7.max { +.emotion-6.max { width: 144px; height: 144px; } -.emotion-8 { +.emotion-7 { width: 100%; height: 100%; text-align: center; @@ -338,57 +319,34 @@ exports[`Snapshot testing Header Component renders correctly LoggedIn 1`] = ` className="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-undefined MuiGrid-grid-xs-8 MuiGrid-grid-sm-6 emotion-3" > - - - - - - - - - - + + -

- Prediction Market -

@@ -547,25 +505,6 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` } .emotion-4 { - margin: 0; - font-family: "Roboto","Helvetica","Arial",sans-serif; - font-weight: 300; - font-size: 6rem; - line-height: 1.167; - letter-spacing: -0.01562em; - margin-left: 8px; - margin-right: 8px; - white-space: nowrap; -} - -.emotion-4.truncate { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - -.emotion-5 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -597,16 +536,16 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` align-items: center; } -.emotion-5>.MuiGrid-item { +.emotion-4>.MuiGrid-item { padding-top: 16px; } -.emotion-5>.MuiGrid-item { +.emotion-4>.MuiGrid-item { padding-left: 16px; } @media (min-width:600px) { - .emotion-5 { + .emotion-4 { -webkit-flex-basis: calc(50% + 16px); -ms-flex-preferred-size: calc(50% + 16px); flex-basis: calc(50% + 16px); @@ -619,7 +558,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` } @media (min-width:0px) { - .emotion-5 { + .emotion-4 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -628,7 +567,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` } @media (min-width:600px) { - .emotion-5 { + .emotion-4 { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; @@ -636,7 +575,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` } } -.emotion-6 { +.emotion-5 { box-sizing: border-box; margin: 0; -webkit-flex-direction: row; @@ -644,7 +583,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` flex-direction: row; } -.emotion-7 { +.emotion-6 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -700,23 +639,23 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` box-shadow: none; } -.emotion-7::-moz-focus-inner { +.emotion-6::-moz-focus-inner { border-style: none; } -.emotion-7.Mui-disabled { +.emotion-6.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-7 { + .emotion-6 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-7:hover { +.emotion-6:hover { -webkit-text-decoration: none; text-decoration: none; background-color: #1565c0; @@ -724,35 +663,35 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` } @media (hover: none) { - .emotion-7:hover { + .emotion-6:hover { background-color: #1976d2; } } -.emotion-7:active { +.emotion-6:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } -.emotion-7.Mui-focusVisible { +.emotion-6.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } -.emotion-7.Mui-disabled { +.emotion-6.Mui-disabled { color: rgba(0, 0, 0, 0.26); box-shadow: none; background-color: rgba(0, 0, 0, 0.12); } -.emotion-7:hover { +.emotion-6:hover { border-width: 2px!important; box-shadow: none; } -.emotion-7:disabled { +.emotion-6:disabled { border-color: transparent; } -.emotion-8 { +.emotion-7 { margin: 0; font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 400; @@ -761,7 +700,7 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` letter-spacing: 0em; } -.emotion-8.truncate { +.emotion-7.truncate { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; @@ -782,54 +721,31 @@ exports[`Snapshot testing Header Component renders correctly LoggedOut 1`] = ` className="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-undefined MuiGrid-grid-xs-8 MuiGrid-grid-sm-6 emotion-3" > - - - - - - - - - - + + -

- Prediction Market -