Feature/gelato integration

app/package.json

@@ -10,6 +10,7 @@
     "3box-comments-react": "0.0.8",
     "@apollo/react-hooks": "^3.1.3",
     "@fvictorio/newton-raphson-method": "^1.0.5",
+    "@gelatonetwork/core": "^1.6.0",
     "@gnosis.pm/safe-apps-sdk": "1.0.1",
     "@kleros/erc-792": "^7.0.0",
     "@kleros/gtcr-encoder": "^1.1.3",

app/src/common/constants.ts

@@ -72,6 +72,11 @@ export const Logo = OmenLogo
 
 export const DEFAULT_ARBITRATOR: KnownArbitrator = 'kleros'
 
+export const DEFAULT_GELATO_CONDITION: KnownGelatoCondition = 'time'
+
+export const GELATO_MIN_USD_THRESH = 250
+export const GELATO_ACTIVATED = true
+
 export const DEFAULT_TOKEN = 'dai'
 
 export const DOCUMENT_TITLE = 'Omen'

app/src/components/common/form/date_field/index.tsx

@@ -9,6 +9,7 @@ import { CommonDisabledCSS } from '../common_styled'
 interface Props {
   disabled?: boolean
   minDate?: any
+  maxDate?: any
   name: string
   onChange: any
   placeholder?: string
@@ -106,7 +107,7 @@ const CalendarPortal = (props: CalendarPortalProps) => {
 }
 
 export const DateField = (props: Props) => {
-  const { disabled, minDate, name, onChange, placeholder, selected, ...restProps } = props
+  const { disabled, maxDate, minDate, name, onChange, placeholder, selected, ...restProps } = props
 
   const handleChange = (date: Maybe<Date>) => {
     onChange(date ? convertLocalToUTC(date) : date)
@@ -123,6 +124,7 @@ export const DateField = (props: Props) => {
         calendarClassName="customCalendar"
         dateFormat="MMMM d, yyyy h:mm aa"
         disabled={disabled}
+        maxDate={maxDate}
         minDate={minDate}
         name={name}
         onChange={handleChange}

app/src/components/common/icons/IconAlert.tsx

@@ -1,16 +1,19 @@
 import React from 'react'
 
 interface Props {
+  fill?: string
   size?: string
+  bg?: string
 }
 
 export const IconAlert = (props: Props) => {
-  const { size = '20' } = props
+  const { bg, fill = '#E57373', size = '20' } = props
   return (
     <svg fill="none" height={size} viewBox="0 0 20 20" width={size} xmlns="http://www.w3.org/2000/svg">
+      <circle cx="10" cy="10" fill={bg} r={bg ? '10' : '0'} />
       <path
         d="M10.0001 1.66663C5.40008 1.66663 1.66675 5.39996 1.66675 9.99996C1.66675 14.6 5.40008 18.3333 10.0001 18.3333C14.6001 18.3333 18.3334 14.6 18.3334 9.99996C18.3334 5.39996 14.6001 1.66663 10.0001 1.66663ZM10.8334 14.1666H9.16675V12.5H10.8334V14.1666ZM10.8334 10.8333H9.16675V5.83329H10.8334V10.8333Z"
-        fill="#E57373"
+        fill={fill}
       />
     </svg>
   )

app/src/components/common/icons/IconClock.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const IconClock = () => (
+  <svg
+    enableBackground="new 0 0 443.294 443.294"
+    fill="green"
+    id="Capa_1"
+    viewBox="0 0 443.294 443.294"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z" />
+    <path d="m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z" />
+  </svg>
+)

app/src/components/common/icons/IconCustomize.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface Props {
+  fill?: string
+}
+
+export const IconCustomize = (props: Props) => {
+  const { fill = '#37474F' } = props
+  return (
+    <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0 10.8889V12.4444H4.66667V10.8889H0ZM0 1.55556V3.11111H7.77778V1.55556H0ZM7.77778 
+          14V12.4444H14V10.8889H7.77778V9.33333H6.22222V14H7.77778ZM3.11111 
+          4.66667V6.22222H0V7.77778H3.11111V9.33333H4.66667V4.66667H3.11111ZM14 
+          7.77778V6.22222H6.22222V7.77778H14ZM9.33333 
+          4.66667H10.8889V3.11111H14V1.55556H10.8889V0H9.33333V4.66667Z"
+        fill={fill}
+      />
+    </svg>
+  )
+}

app/src/components/common/icons/IconGelato.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const IconGelato = () => (
+  <svg aria-hidden="true" fill="#37474F" height="18px" viewBox="0 0 24 24" width="18px">
+    <path d="M4.80772 7.66299C0.914727 9.76657 4.52134 11.7005 4.52134 11.7005L12.1369 16.1247L19.691 11.7379C19.691 11.7379 23.3924 9.78917 19.4639 7.66336C19.4639 7.66336 19.4831 0 12.1343 0C4.78549 0 4.80772 7.66299 4.80772 7.66299Z"></path>
+    <path d="M12.1373 17.3077L3.96378 12.424L12.1373 24L20.3101 12.4273L12.1373 17.3077Z"></path>
+  </svg>
+)

app/src/components/common/icons/IconTick.tsx

@@ -3,14 +3,16 @@ import styled from 'styled-components'
 interface Props {
   disabled?: boolean
   selected?: boolean
+  fill?: string
+  stroke?: string
 }
 const StyledSvg = styled.svg<{ disabled?: boolean; selected?: boolean }>`
   filter: ${props => (props.selected ? 'saturate(0) brightness(2)' : props.disabled ? 'saturate(0)' : '')};
   cursor: ${props => (props.disabled ? 'initial' : 'pointer')};
 `
 
 export const IconTick = (props: Props) => {
-  const { disabled = false, selected = false } = props
+  const { disabled = false, fill = '#7986CB', selected = false, stroke = '#7986CB' } = props
   return (
     <StyledSvg
       disabled={disabled}
@@ -23,8 +25,8 @@ export const IconTick = (props: Props) => {
     >
       <path
         d="M6.82644 10.8688L2.66115 6.70355L1.27272 8.09198L6.82644 13.6457L18.7273 1.74488L17.3388 0.356445L6.82644 10.8688Z"
-        fill="#7986CB"
-        stroke="#7986CB"
+        fill={fill}
+        stroke={stroke}
         strokeWidth="0.5"
       />
     </StyledSvg>

app/src/components/common/icons/index.ts

@@ -3,6 +3,7 @@ export { IconArrowBack } from './IconArrowBack'
 export { IconChevronLeft } from './IconChevronLeft'
 export { IconChevronRight } from './IconChevronRight'
 export { IconClose } from './IconClose'
+export { IconCustomize } from './IconCustomize'
 export { IconDragonBall } from './IconDragonBall'
 export { IconDxDao } from './IconDxDao'
 export { IconTick } from './IconTick'

app/src/components/market/common/gelato_conditions/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { useConnectedWeb3Context } from '../../../../hooks'
+import { getGelatoConditionByNetwork } from '../../../../util/networks'
+import { GelatoData } from '../../../../util/types'
+import { Dropdown, DropdownDirection, DropdownItemProps, DropdownPosition } from '../../../common/form/dropdown'
+
+interface Props {
+  disabled?: boolean
+  onChangeGelatoCondition: (gelatoData: GelatoData) => any
+  value: GelatoData
+}
+
+export const GelatoConditions = (props: Props) => {
+  const { disabled, onChangeGelatoCondition, value } = props
+  const context = useConnectedWeb3Context()
+  const networkId = context.networkId
+  const gelatoConditions = getGelatoConditionByNetwork(networkId)
+
+  const onChange = (id: KnownGelatoCondition) => {
+    for (const condition of gelatoConditions) {
+      if (condition.id === id) {
+        onChangeGelatoCondition(condition)
+      }
+    }
+  }
+
+  const conditionOptions: Array<DropdownItemProps> = gelatoConditions.map((condition: GelatoData) => {
+    return {
+      content: condition.id + ' . .',
+      onClick: () => {
+        onChange(condition.id)
+        console.warn(`ID: ${condition.id}`)
+      },
+    }
+  })
+
+  const currentItem = gelatoConditions.findIndex(condition => condition.id === value.id) - 1
+
+  return (
+    <Dropdown
+      currentItem={currentItem}
+      disabled={disabled}
+      dropdownDirection={DropdownDirection.upwards}
+      dropdownPosition={DropdownPosition.right}
+      items={conditionOptions}
+    />
+  )
+}