Merge branch 'release/0.7.3'

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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prediction-market-ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "license": "MIT",
   "dependencies": {

src/api/graphql.ts

@@ -126,6 +126,40 @@ export const getTotalSupplyByMarket = async (LQTTokenId?: number): Promise<AllTo
   );
 };
 
+export const getTotalSupplyForMarkets = async (tokenIds: number[]): Promise<AllTokens> => {
+  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<AllMarketsLedgers> => {
   return request<AllMarketsLedgers>(
     GRAPHQL_API,

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<TokenSu
   );
 };
 
+export const useTotalSupplyForMarkets = (markets?: Market[]): UseQueryResult<TokenSupplyMap[]> => {
+  const LQTTokenIds = markets?.map((item) => getLQTTokenId(item.marketId));
+  return useQuery<TokenSupplyMap[] | undefined, AxiosError, TokenSupplyMap[]>(
+    ['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,

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,

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<Theme>;
 }
 
 const CopyClipBoardStyled = styled(CopyToClipboard)<CopyClipBoardStyledProps>`
@@ -55,7 +56,7 @@ export const Address: React.FC<AddressProps> = ({
   const str = trim ? trimAddress(address, trimSize) : address;
   const [checked, setChecked] = useState(false);
   return (
-    <Grid container sx={{ ...customStyle }}>
+    <Grid container sx={customStyle}>
       <Grid item>
         <Typography size={size} component={component}>
           {str}

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)<StyledButtonProps>`
   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<Theme>;
   /**
    * Optional click handler
    */
@@ -65,7 +66,7 @@ export const CustomButton: React.FC<ButtonProps> = ({
   backgroundVariant = 'primary',
   size = 'small',
   variant = 'contained',
-  lowercase = true,
+  lowercase,
   label,
   icon,
   iconPosition = 'right',
@@ -82,7 +83,7 @@ export const CustomButton: React.FC<ButtonProps> = ({
       startIcon={iconPosition === 'left' ? icon : null}
       endIcon={iconPosition === 'right' ? icon : null}
       bordercolor={internalBorderColor}
-      lowercase={lowercase}
+      texttype={lowercase ? 'none' : 'uppercase'}
       sx={{ ...customStyle }}
       {...props}
     >

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"
 >
   <span
@@ -241,7 +241,7 @@ exports[`Snapshot testing Button Component renders correctly with icon in the ri
   border-radius: 0.2em;
   padding: 0.2em 1.2em;
   border: solid 2px transparent;
-  text-transform: none;
+  text-transform: uppercase;
   box-shadow: none;
 }
 
@@ -339,7 +339,6 @@ exports[`Snapshot testing Button Component renders correctly with icon in the ri
   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]}
@@ -353,6 +352,7 @@ exports[`Snapshot testing Button Component renders correctly with icon in the ri
   onTouchMove={[Function]}
   onTouchStart={[Function]}
   tabIndex={0}
+  texttype="uppercase"
   type="button"
 >
   <h3
@@ -445,7 +445,7 @@ exports[`Snapshot testing Button Component renders correctly with large size and
   border-radius: 0.2em;
   padding: 0.2em 1.2em;
   border: solid 2px rgba(1, 102, 255, 1);
-  text-transform: none;
+  text-transform: uppercase;
   box-shadow: none;
 }
 
@@ -512,7 +512,6 @@ exports[`Snapshot testing Button Component renders correctly with large size and
   bordercolor="rgba(1, 102, 255, 1)"
   className="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButtonBase-root emotion-0"
   disabled={false}
-  lowercase={true}
   onBlur={[Function]}
   onContextMenu={[Function]}
   onDragLeave={[Function]}
@@ -526,6 +525,7 @@ exports[`Snapshot testing Button Component renders correctly with large size and
   onTouchMove={[Function]}
   onTouchStart={[Function]}
   tabIndex={0}
+  texttype="uppercase"
   type="button"
 >
   <h3
@@ -588,7 +588,7 @@ exports[`Snapshot testing Button Component renders correctly with medium size an
   border-radius: 0.2em;
   padding: 0.2em 1.2em;
   border: solid 2px transparent;
-  text-transform: none;
+  text-transform: uppercase;
   box-shadow: none;
 }
 
@@ -676,7 +676,6 @@ exports[`Snapshot testing Button Component renders correctly with medium size an
   bordercolor="transparent"
   className="MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root emotion-0"
   disabled={false}
-  lowercase={true}
   onBlur={[Function]}
   onContextMenu={[Function]}
   onDragLeave={[Function]}
@@ -690,6 +689,7 @@ exports[`Snapshot testing Button Component renders correctly with medium size an
   onTouchMove={[Function]}
   onTouchStart={[Function]}
   tabIndex={0}
+  texttype="uppercase"
   type="button"
 >
   <h3
@@ -755,7 +755,7 @@ exports[`Snapshot testing Button Component renders correctly with small size and
   border-radius: 0.2em;
   padding: 0.2em 1.2em;
   border: solid 2px transparent;
-  text-transform: none;
+  text-transform: uppercase;
   box-shadow: none;
 }
 
@@ -831,7 +831,6 @@ exports[`Snapshot testing Button Component renders correctly with small size and
   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]}
@@ -845,6 +844,7 @@ exports[`Snapshot testing Button Component renders correctly with small size and
   onTouchMove={[Function]}
   onTouchStart={[Function]}
   tabIndex={0}
+  texttype="uppercase"
   type="button"
 >
   <h3

src/design-system/atoms/DropDown/DropDown.stories.tsx

@@ -43,7 +43,7 @@ export const CustomeBackgroundColor = Template.bind({});
 CustomeBackgroundColor.args = {
   items: dropdownitems,
   bgColor: theme.palette.secondary.main,
-  hoverBgColor: theme.palette.secondary.dark,
+  hoverbgcolor: theme.palette.secondary.dark,
   onSelect: () => {},
 };