From ba55ed4bbbe16037b4f13780e98848bbcf5445a3 Mon Sep 17 00:00:00 2001 From: deadit Date: Sat, 18 Mar 2023 17:45:27 +0300 Subject: [PATCH 1/3] init --- src/actions/oraclePoolStatev2.actions.ts | 28 ++ src/constants/struct.types.ts | 8 + .../oracle-pool-timeline/getTimelineConfig.ts | 82 ++++++ .../oracle-pool-timeline.component.tsx | 205 +++++++++++++ .../oracle-pool-timeline.scss | 252 ++++++++++++++++ .../oracle-table/oracle-table.component.tsx | 91 ++++++ .../components/oracle-table/oracle-table.scss | 103 +++++++ .../components/oracle-tiles/icons/icons.tsx | 35 +++ .../oracle-tiles/oracle-tiles.component.tsx | 47 +++ .../components/oracle-tiles/oracle-tiles.scss | 136 +++++++++ .../oracle-pool-state.component.tsx | 277 ++++++++++++++++++ .../oracle-pool-state.scss | 71 +++++ src/services/oraclePoolStateV2.service.ts | 69 +++++ 13 files changed, 1404 insertions(+) create mode 100644 src/actions/oraclePoolStatev2.actions.ts create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx create mode 100644 src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss create mode 100644 src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx create mode 100644 src/pages/oracle-pool-state-v2/oracle-pool-state.scss create mode 100644 src/services/oraclePoolStateV2.service.ts diff --git a/src/actions/oraclePoolStatev2.actions.ts b/src/actions/oraclePoolStatev2.actions.ts new file mode 100644 index 00000000..1157695b --- /dev/null +++ b/src/actions/oraclePoolStatev2.actions.ts @@ -0,0 +1,28 @@ +import { ActionCreatorsMapObject } from 'redux'; +import { OraclePoolStateV2Service } from 'src/services/oraclePoolStateV2.service'; + +interface OraclePoolStateV2Actions extends ActionCreatorsMapObject { + getPoolInfo: (key: string) => any; + getPoolStatus: (key: string) => any; + getOracleInfo: (key: string) => any; + getOracleStatus: (key: string) => any; +} + +export const OraclePoolStateV2Actions: OraclePoolStateV2Actions = { + getPoolInfo(key: string) { + return (dispatch: any) => + OraclePoolStateV2Service.getPoolInfo(dispatch, key); + }, + getPoolStatus(key: string) { + return (dispatch: any) => + OraclePoolStateV2Service.getPoolStatus(dispatch, key); + }, + getOracleInfo(key: string) { + return (dispatch: any) => + OraclePoolStateV2Service.getOracleInfo(dispatch, key); + }, + getOracleStatus(key: string) { + return (dispatch: any) => + OraclePoolStateV2Service.getOracleStatus(dispatch, key); + }, +}; diff --git a/src/constants/struct.types.ts b/src/constants/struct.types.ts index 1ae4ffb8..cbb5e58e 100644 --- a/src/constants/struct.types.ts +++ b/src/constants/struct.types.ts @@ -21,4 +21,12 @@ export const GET_TOKEN_STRUCT = '/tokens/:id'; export const GET_ORACLE_POOL_DATA_STRUCT = 'oracle/frontendData'; +export const GET_ORACLE_POOL_INFO_V2_STRUCT = 'oracle/v2/poolInfo'; + +export const GET_ORACLE_POOL_STATUS_V2_STRUCT = 'oracle/v2/poolStatus'; + +export const GET_ORACLE_INFO_V2_STRUCT = 'oracle/v2/oracleInfo'; + +export const GET_ORACLE_STATUS_V2_STRUCT = 'oracle/v2/oracleStatus'; + export const GET_ADDRESSES_BALANCES_STRUCT = 'addresses/balances'; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts new file mode 100644 index 00000000..930d1162 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts @@ -0,0 +1,82 @@ +export const dotStates = { + EPOCH_START: 'EPOCH_START', + EPOCH_END: 'EPOCH_END', + EPOCH_ENDING: 'EPOCH_ENDING', + NORMAL: 'NORMAL', +}; + +export const getTimelineConfig = (poolData: any) => { + if (!poolData) { + return []; + } + + const TIMELINE_DOTS_QUANTITY = 8; + const { + epoch_end_height: epochEndHeight, + current_block_height: currentBlockHeight, + } = poolData; + const epochSize = epochEndHeight - currentBlockHeight; + const isEpochLive = epochSize > 0; + + if (isEpochLive) { + const isEpochEndBig = epochSize >= TIMELINE_DOTS_QUANTITY; + + if (isEpochEndBig) { + return Array.from(Array(TIMELINE_DOTS_QUANTITY)).map((_, index) => { + if (index === 0) { + return { + type: dotStates.EPOCH_START, + value: currentBlockHeight, + }; + } + + if (index === TIMELINE_DOTS_QUANTITY - 1) { + return { + type: dotStates.EPOCH_END, + value: epochEndHeight, + }; + } + + return { + type: dotStates.NORMAL, + value: currentBlockHeight + index, + }; + }); + } + + return Array.from(Array(TIMELINE_DOTS_QUANTITY)).map((_, index) => { + if (index === 0) { + return { + type: dotStates.EPOCH_START, + value: currentBlockHeight, + }; + } + + if (index === epochSize) { + return { + type: dotStates.EPOCH_END, + value: epochEndHeight, + }; + } + + return { + type: dotStates.NORMAL, + value: currentBlockHeight + index, + }; + }); + } + + return Array.from(Array(TIMELINE_DOTS_QUANTITY)).map((_, index) => { + if (index === 0) { + return { + type: dotStates.EPOCH_ENDING, + value: epochEndHeight, + }; + } + + return { + type: dotStates.NORMAL, + value: epochEndHeight + index, + }; + }); +}; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx new file mode 100644 index 00000000..1b3b7ea3 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx @@ -0,0 +1,205 @@ +import React, { useMemo } from 'react'; +import './oracle-pool-timeline.scss'; +import cn from 'classnames'; +import { + ArrowLeftIcon, + GreenCircleIcon, + GreenLineGroupIcon, + BlackCircleSMIcon, + RedCircleIcon, + RedLineGroupIcon, + RedLineGroupIcon2, + OrangeLineGroupIcon, + OrangeCircleIcon, + GroupDotsIcon, +} from 'src/components/common/icons/common.icons'; +import { getTimelineConfig, dotStates } from './getTimelineConfig'; +import { GroupLineIcon } from '../oracle-tiles/icons/icons'; + +const renderMobileTimeline = ( + epochPreparation: any, + epochEnd: any, + epochStart: any +) => { + if (epochPreparation) { + return ( +
+
+ +
Currently Ending Epoch
+
+ {epochPreparation?.value || 'loading...'} +
+
+
+ ); + } + + return ( +
+
+ +
Current Block Height
+
+ {epochStart?.value || 'loading...'} +
+
+ +
+ +
Epoch end Height
+
+ {epochEnd?.value || 'loading...'} +
+
+
+ ); +}; + +const OraclePoolTimelineComponent = (props: any) => { + const { poolData } = props; + + const timeline = useMemo(() => getTimelineConfig(poolData), [poolData]); + + const epochStart = useMemo( + () => timeline.find((item) => item.type === dotStates.EPOCH_START), + [timeline] + ); + + const epochEnd = useMemo( + () => timeline.find((item) => item.type === dotStates.EPOCH_END), + [timeline] + ); + + const epochPreparation = useMemo( + () => timeline.find((item) => item.type === dotStates.EPOCH_ENDING), + [timeline] + ); + + return ( + <> + {renderMobileTimeline(epochPreparation, epochEnd, epochStart)} +
+
+
+ +
+
+ +
+ + {timeline[timeline.length - 1]?.type === dotStates.EPOCH_END && ( +
+ +
+ )} + +
+ {timeline.map((item, index) => { + if (item.type === dotStates.EPOCH_START) { + return ( +
+
+ Current Block Height +
+ +
+ + + {item.value} + +
+
+ ); + } + + if (item.type === dotStates.EPOCH_END) { + if (index === 1) { + return ( +
+
+ Epoch End Height +
+ +
+ + + {item.value} + +
+
+ ); + } + + return ( +
+
+ Epoch End Height +
+ +
+ + + {item.value} + +
+
+ ); + } + + if (item.type === dotStates.EPOCH_ENDING) { + return ( +
+
+ Currently Ending Epoch +
+ +
+ + + {item.value} + +
+
+ ); + } + + return ( +
+ +
+ + {item.value} + +
+
+ ); + })} +
+
+
+ + ); +}; + +export default OraclePoolTimelineComponent; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss new file mode 100644 index 00000000..e84d5998 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss @@ -0,0 +1,252 @@ +.or-timeline { + border: 1px solid #d9d9da; + box-sizing: border-box; + padding: 120px 32px; + background-color: #fff; + margin-top: 30px; + position: relative; + min-height: 256px; + display: flex; + align-items: flex-end; + + @media (max-width: 1399px) { + display: none; + } + + &__dots { + position: absolute; + right: 18px; + padding: 0 12px; + top: -12px; + background-color: white; + } + + &__line { + background: linear-gradient(90deg, #232526 0%, #797d80 100%); + height: 2px; + width: 100%; + position: relative; + } + + &__arrow { + position: absolute; + top: -11px; + left: 65px; + + &--right { + right: 70px; + left: initial; + } + } + + &__content { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + } +} + +.circle-group { + position: relative; + top: -10px; + left: 0; + + &--small { + top: -7px; + + .circle-group__line-text { + top: 4px; + left: -60px; + width: 120px; + text-align: center; + color: #797d80; + } + } + + &--end { + .path { + stroke-dashoffset: 10; + stroke-dasharray: 20; + animation: dash 25s linear infinite forwards reverse; + } + } + + &--left { + .path { + stroke-dashoffset: 10; + stroke-dasharray: 20; + animation: dash 25s linear infinite forwards reverse; + } + + @keyframes dash { + from { + stroke-dashoffset: 822; + } + to { + stroke-dashoffset: 0; + } + } + + .circle-group__line { + left: -60px; + } + + .circle-group__card { + right: 0 !important; + } + } + + &__card { + position: absolute; + width: 120px; + height: 70px; + top: -90px; + padding: 30px 18px 8px 8px; + font-size: 14px; + line-height: 16px; + background: #ffffff; + border: 0.5px solid #d9d9da; + box-sizing: border-box; + border-radius: 3px; + + &--green { + &::after { + content: ''; + position: absolute; + height: 4px; + width: 4px; + border-radius: 25px; + border: 1px solid tranparent; + top: 8px; + right: 8px; + background: linear-gradient(90deg, #02aab0 0%, #00cdac 100%); + } + } + + &--red { + &::after { + content: ''; + position: absolute; + height: 4px; + width: 4px; + border-radius: 25px; + border: 1px solid tranparent; + top: 8px; + right: 8px; + background: linear-gradient(90deg, #e52d27 0%, #b31217 100%); + } + } + + &--orange { + &::after { + content: ''; + position: absolute; + height: 4px; + width: 4px; + border-radius: 25px; + border: 1px solid tranparent; + top: 8px; + right: 8px; + background: linear-gradient(90deg, #ff512f 0%, #f09819 100%); + } + } + } + + &__line { + position: absolute; + top: 22px; + left: 10px; + + &-text { + position: absolute; + left: 12px; + top: 45px; + font-family: sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + color: #000000; + } + } +} + +.path { + stroke-dashoffset: 10; + stroke-dasharray: 20; + animation: dash 25s linear infinite forwards normal; +} + +@keyframes dash { + from { + stroke-dashoffset: 822; + } + to { + stroke-dashoffset: 0; + } +} + +.or-timeline-mobile { + margin-top: 32px; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 59px 1fr; + align-items: center; + + &--ending { + grid-template-rows: 1fr; + } + + @media (min-width: 1400px) { + display: none; + } + + .or-timeline-mobile-line { + width: 100%; + + path { + stroke-width: 3; + animation-direction: reverse; + } + } +} + +.or-timeline-card { + background-color: white; + border: 0.5px solid #d9d9da; + box-sizing: border-box; + border-radius: 3px; + width: 100%; + height: 100px; + padding: 32px 12px 12px 12px; + position: relative; + + &__icon { + position: absolute; + top: 10px; + right: 10px; + width: 14px; + height: 14px; + } + + &__title { + font-weight: 600; + font-size: 10px; + line-height: 12px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #5b5b5b; + margin-bottom: 6px; + } + + &__value { + font-style: normal; + font-weight: 600; + font-size: 28px; + line-height: 33px; + color: #131313; + } +} diff --git a/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx b/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx new file mode 100644 index 00000000..5dd6cd94 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; +import { + CopyIcon, + RemoveIcon, +} from '../../../../components/common/icons/common.icons'; +import cn from 'classnames'; +import './oracle-table.scss'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { useAlert } from 'react-alert'; + +// interface Props { +// name: string; +// data: [{ name: string; value: any }]; +// } + +const OracleTableItem = ({ name, value }: any) => { + const [isOpen, setIsOpen] = useState(false); + const alert = useAlert(); + + return ( +
+
+
{name}
+
+ + + + + {!isOpen && ( +
+ {value} +
+ )} + + setIsOpen((prev) => !prev)} + > + {!isOpen && 'More'} + {isOpen && } + +
+
+ {!isOpen && ( +
+ {value} +
+ )} + {isOpen &&
{value}
} +
+ ); +}; + +const OracleTable = (props: any) => { + const { + name, + data = [{ name: 'Latest data pool', value: '12312123312312132' }], + } = props; + + return ( +
+
+

{name}

+
+
+ {data.map((item: any) => ( + + ))} +
+
+ ); +}; + +export default OracleTable; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss b/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss new file mode 100644 index 00000000..5fc3dee8 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss @@ -0,0 +1,103 @@ +@import '../../../../assets/styles/base/variables'; + +.oracle-table { + border: 1px solid #d9d9da; + + &__header { + padding: 16px 20px; + background: #f8f8f8; + height: 60px; + border-bottom: 1px solid #d9d9da; + } + + &__title { + font-size: 22px; + line-height: 26px; + color: black; + } + + &__item { + padding: 20px; + background: white; + } + + &__body { + & > div { + & + div { + border-top: 1px solid #d9d9da; + } + } + } +} + +.oracle-table-item-body { + font-weight: 300; + font-size: 14px; + line-height: 16px; + color: black; + margin-top: 20px; + word-break: break-all; + + &--mobile { + display: none; + max-width: 255px; + overflow: hidden; + position: relative; + text-overflow: ellipsis; + word-break: normal; + + @media (max-width: $mobile-device-width) { + display: block; + } + } +} + +.oracle-table-item-header { + display: flex; + justify-content: space-between; + + &__right-side { + display: flex; + flex-wrap: nowrap; + align-items: center; + } + + &__title { + font-weight: 500; + font-size: 16px; + line-height: 19px; + } + + &__opacity-paragraph { + font-weight: 300; + font-size: 14px; + line-height: 16px; + margin-right: 24px; + position: relative; + width: 118px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + @media (max-width: $mobile-device-width) { + display: none; + } + } + + &__copy { + padding: 0; + margin: 0; + border: none; + background: none; + outline: none; + cursor: pointer; + margin-right: 12px; + } + + &__link { + font-size: 14px; + line-height: 14px; + color: #0078ff; + cursor: pointer; + } +} diff --git a/src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx b/src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx new file mode 100644 index 00000000..ffc74b83 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx @@ -0,0 +1,35 @@ +import { makeIcon } from 'src/components/common/icons/common.icons'; +import { ReactComponent as epochEndsIcon } from '../../../../../assets/images/icons/oraclePoolState/epochEndsIcon.svg'; +import { ReactComponent as latestPriceIcon } from '../../../../../assets/images/icons/oraclePoolState/latestPriceIcon.svg'; +import { ReactComponent as currentPoolStageIcon } from '../../../../../assets/images/icons/oraclePoolState/currentPoolStageIcon.svg'; +import { ReactComponent as poolFundedPercentageIcon } from '../../../../../assets/images/icons/oraclePoolState/poolFundedPercentageIcon.svg'; +import { ReactComponent as postingScheduleIcon } from '../../../../../assets/images/icons/oraclePoolState/postingScheduleIcon.svg'; +import { ReactComponent as groupLine } from '../../../../../assets/images/icons/oraclePoolState/groupLine.svg'; + +interface IconProps { + className?: string; +} + +export const CurrentPoolStageIcon = ({ className }: IconProps) => { + return makeIcon(currentPoolStageIcon, className); +}; + +export const LatestPriceIcon = ({ className }: IconProps) => { + return makeIcon(latestPriceIcon, className); +}; + +export const EpochEndsIcon = ({ className }: IconProps) => { + return makeIcon(epochEndsIcon, className); +}; + +export const PoolFundedPercentageIcon = ({ className }: IconProps) => { + return makeIcon(poolFundedPercentageIcon, className); +}; + +export const PostingScheduleIcon = ({ className }: IconProps) => { + return makeIcon(postingScheduleIcon, className); +}; + +export const GroupLineIcon = ({ className }: IconProps) => { + return makeIcon(groupLine, className); +}; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx b/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx new file mode 100644 index 00000000..d4e0229e --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import './oracle-tiles.scss'; +import { + LatestPriceIcon, + EpochEndsIcon, + PostingScheduleIcon, + CurrentPoolStageIcon, + PoolFundedPercentageIcon, +} from './icons/icons'; + +interface Props { + data?: any; +} + +const icons = [ + LatestPriceIcon, + PostingScheduleIcon, + EpochEndsIcon, + CurrentPoolStageIcon, + PoolFundedPercentageIcon, +]; + +const OracleTiles = (props: Props) => { + const { data } = props; + + return ( +
+ {data.map((tile: any, index: number) => { + const Icon = icons[index]; + const value = + index === 0 + ? `${tile.symbol || ''} ${tile.value}` + : `${tile.value} ${tile.symbol || ''}`; + + return ( +
+ +

{tile.name}

+

{value}

+
+ ); + })} +
+ ); +}; + +export default OracleTiles; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss b/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss new file mode 100644 index 00000000..35244b81 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss @@ -0,0 +1,136 @@ +@import '../../../../assets/styles/base/variables'; + +.oracle-tiles-list { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 10px; + margin-top: 40px; + justify-content: space-between; + + @media (max-width: 1399px) { + grid-template-columns: 1fr 1fr; + justify-content: space-between; + grid-gap: 32px; + } + + @media (max-width: $mobile-device-width) { + margin-top: 56px; + grid-template-columns: 1fr; + grid-gap: 8px; + } + + &__item { + padding: 40px 12px 24px 12px; + border: 0.5px solid #d9d9da; + box-sizing: border-box; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 12px; + left: 12px; + width: 6px; + height: 6px; + border-radius: 25px; + } + + &-icon { + position: absolute; + top: 12px; + right: 10px; + } + + &-title { + font-family: sans-serif; + font-style: normal; + font-weight: 900; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + color: #5b5b5b; + margin-bottom: 6px; + } + + &-paragraph { + font-family: sans-serif; + font-style: normal; + font-weight: 600; + font-size: 20px; + color: #131313; + + @media (max-width: $mobile-device-width) { + font-size: 28px; + } + + span { + font-weight: normal; + } + } + + &:nth-child(1) { + background: linear-gradient( + 304deg, + rgba(236, 102, 102, 0.4) 0%, + rgba(255, 255, 255, 0.103475) 80.84% + ), + white; + + &::before { + background: linear-gradient(90deg, #e52d27 0%, #b31217 100%); + } + } + + &:nth-child(2) { + background: linear-gradient( + 304deg, + rgba(236, 166, 102, 0.4) 16.62%, + rgba(255, 255, 255, 0.103475) 80% + ), + white; + + &::before { + background: linear-gradient(90deg, #ff512f 0%, #f09819 100%); + } + } + + &:nth-child(3) { + background: linear-gradient( + 330deg, + rgba(121, 210, 222, 0.4) 15.9%, + rgba(255, 255, 255, 0.2) 80% + ), + white; + + &::before { + background: linear-gradient(90deg, #02aab0 0%, #00cdac 100%); + } + } + + &:nth-child(4) { + background: linear-gradient( + 304deg, + rgba(20, 122, 214, 0.4) 10%, + rgba(255, 255, 255, 0.1) 80% + ), + white; + + &::before { + background: linear-gradient(90deg, #2f80ed 0%, #2d9ee0 100%); + } + } + + &:nth-child(5) { + background: linear-gradient( + 124deg, + rgba(255, 255, 255, 0.4) 25.96%, + rgba(41, 41, 49, 0.2) 80% + ), + white; + + &::before { + background: linear-gradient(90deg, #232526 0%, #797d80 100%); + } + } + } +} diff --git a/src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx b/src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx new file mode 100644 index 00000000..cde2ad37 --- /dev/null +++ b/src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx @@ -0,0 +1,277 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { connect } from 'react-redux'; +import './oracle-pool-state.scss'; +import OraclePoolTimelineComponent from './components/oracle-pool-timeline/oracle-pool-timeline.component'; +import OracleTiles from './components/oracle-tiles/oracle-tiles.component'; +import OracleTable from './components/oracle-table/oracle-table.component'; +import { bindActionCreators } from 'redux'; +import { getOraclePoolDataStructSelector } from 'src/selectors/oraclePoolState'; +import { withRouter, RouterProps } from 'react-router'; +import { pools } from 'src/services/oraclePoolState.service'; +import LoaderLogo from 'src/components/loader/loader'; +import { ErrorIcon, ArrowIcon } from 'src/components/common/icons/common.icons'; +import { resetStruct } from 'redux-struct'; +import { + GET_ORACLE_INFO_V2_STRUCT, + GET_ORACLE_POOL_INFO_V2_STRUCT, + GET_ORACLE_POOL_STATUS_V2_STRUCT, + GET_ORACLE_STATUS_V2_STRUCT, +} from 'src/constants/struct.types'; +import { Link } from 'react-router-dom'; +import { OraclePoolStateV2Actions } from 'src/actions/oraclePoolStatev2.actions'; + +const mapStateToProps = (state: any): any => ({ + poolData: getOraclePoolDataStructSelector(state), +}); + +const mapDispatchToProps = (dispatch: any): any => { + return bindActionCreators( + { + ...OraclePoolStateV2Actions, + resetPoolInfoStruct: () => + dispatch(resetStruct(GET_ORACLE_POOL_INFO_V2_STRUCT)), + resetPoolStatusStruct: () => + dispatch(resetStruct(GET_ORACLE_POOL_STATUS_V2_STRUCT)), + resetOracleInfoStruct: () => + dispatch(resetStruct(GET_ORACLE_INFO_V2_STRUCT)), + resetOracleStatusStruct: () => + dispatch(resetStruct(GET_ORACLE_STATUS_V2_STRUCT)), + }, + dispatch + ); +}; + +type Props = ReturnType & + ReturnType & + RouterProps; + +const OraclePoolState = (props: Props) => { + const { + getPoolData, + poolData, + match: { + params: { id }, + }, + history, + resetPoolInfoStruct, + resetPoolStatusStruct, + resetOracleInfoStruct, + resetOracleStatusStruct, + } = props; + + const [isDataLoaded, setIsDataLoaded] = useState(false); + + useEffect(() => { + if (!pools[id]) { + history.push(`/oracle-pool-state/${Object.keys(pools)[0]}`); + } + }, []); + + useEffect(() => { + if (pools[id]) { + getPoolData(id); + } + }, [id]); + + useEffect(() => { + if (poolData.data) { + setIsDataLoaded(true); + } + }, [poolData.data]); + + useEffect(() => { + let intervalId: any = null; + + if (pools[id]) { + intervalId = setInterval(() => getPoolData(id), 30000); + } + + return () => { + clearInterval(intervalId); + }; + }, [id]); + + useEffect( + () => () => { + resetPoolInfoStruct(); + resetOracleStatusStruct(); + resetPoolStatusStruct(); + resetOracleInfoStruct(); + }, + [] + ); + + const data = useMemo(() => poolData.data || null, [poolData.data]); + + const tiles = useMemo( + () => + data + ? [ + { + name: 'Latest Price', + value: Number(data.latest_price).toFixed(2), + symbol: '$', + }, + { + name: 'Posting Schedule', + value: data.posting_schedule_minutes, + symbol: 'min', + }, + { + name: 'Epoch Ends', + value: data.epoch_ends_in_minutes, + symbol: 'min', + }, + { name: 'Current Pool Stage', value: data.current_pool_stage }, + { + name: 'Pool Funded Percentage', + value: data.pool_funded_percentage, + }, + ] + : [], + [data] + ); + + const technicalData = useMemo( + () => + data + ? [ + { + name: 'Latest Pool Datapoint', + value: data.latest_datapoint, + }, + { + name: 'Datapoint Address', + value: data.datapoint_address, + }, + { + name: 'Epoch Prep Address', + value: data.epoch_prep_address, + }, + { + name: 'Live Epoch Address', + value: data.live_epoch_address, + }, + { + name: 'Pool Deposits Address', + value: data.pool_deposits_address, + }, + { + name: 'Oracle Payout Price (in nanoErg)', + value: data.oracle_payout_price, + }, + { + name: 'Epoch Prep Length', + value: data.epoch_prep_length, + }, + { + name: 'Oracle Pool NFT ID', + value: data.oracle_pool_nft_id, + }, + { + name: 'Oracle Pool Participant Token Id', + value: data.oracle_pool_participant_token_id, + }, + { + name: 'Deviation range', + value: data.deviation_range, + }, + { + name: 'Consensus number', + value: data.consensus_num, + }, + ] + : [], + [data] + ); + + const summaryData = useMemo( + () => + data + ? [ + { + name: `Latest Price: [${data.title}]`, + value: data.latest_price, + }, + { + name: `Number Of Oracles`, + value: data.number_of_oracles, + }, + { + name: 'Posting Schedule (In Blocks)', + value: data.posting_schedule_blocks, + }, + { + name: 'Posting Schedule (In Minutes)', + value: data.posting_schedule_minutes, + }, + { + name: 'Pool Funded Percentage', + value: data.pool_funded_percentage, + }, + { + name: 'Current Pool Stage', + value: data.current_pool_stage, + }, + ] + : [], + [data] + ); + + if (!isDataLoaded) { + return ; + } + + if (poolData.error) { + return ( +
+ +

+ Server Error. Unable to fetch oracle pool data. +

+

+ Dont worry, the oracle pool is still functioning properly on the + blockchain, but you have hit a server issue.{' '} +

+

+ If this problem persists, please contact us on{' '} + Discord or{' '} + Telegram +

+
+ ); + } + + return ( +
+ + + + + Back to Oracle Pool List + + +

{data?.title} Oracle Pool

+ + + + + +
+
+ +
+
+ +
+
+
+ ); +}; + +const OraclePoolStateComponent = connect( + mapStateToProps, + mapDispatchToProps +)(withRouter(OraclePoolState)); + +export default OraclePoolStateComponent; diff --git a/src/pages/oracle-pool-state-v2/oracle-pool-state.scss b/src/pages/oracle-pool-state-v2/oracle-pool-state.scss new file mode 100644 index 00000000..cbbd50cd --- /dev/null +++ b/src/pages/oracle-pool-state-v2/oracle-pool-state.scss @@ -0,0 +1,71 @@ +@import '../../assets/styles/base/variables'; + +.or-content { + z-index: 3; + position: relative; + padding: 50px 75px; + + &__title { + font-size: 26px; + font-weight: 700; + margin-top: 24px; + } + + &__btn-back-icon { + width: 10px; + height: 10px; + margin-right: 10px; + transform: rotate(180deg); + + fill: #0078ff; + } + + @media (max-width: $mobile-device-width) { + padding: 20px; + padding-bottom: 75px; + } + + &__table { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; + margin-top: 50px; + + @media (max-width: 1400px) { + grid-template-columns: 1fr; + } + } +} + +.or-pool-error { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; + + @media (max-width: $mobile-device-width) { + padding: 0 25px; + } + + svg { + width: 60px; + height: 60px; + margin-bottom: 24px; + } + + &__message { + font-size: 20px; + line-height: 26px; + text-align: center; + max-width: 600px; + margin-top: 12px; + margin-bottom: 0; + + @media (max-width: $mobile-device-width) { + font-size: 18px; + line-height: 24px; + } + } +} diff --git a/src/services/oraclePoolStateV2.service.ts b/src/services/oraclePoolStateV2.service.ts new file mode 100644 index 00000000..d3e059c8 --- /dev/null +++ b/src/services/oraclePoolStateV2.service.ts @@ -0,0 +1,69 @@ +import { fetchStruct } from '../utils/fetchStruct'; +import { + GET_ORACLE_ORACLE_INFO_V2_STRUCT, + GET_ORACLE_ORACLE_STATUS_V2_STRUCT, + GET_ORACLE_POOL_INFO_V2_STRUCT, + GET_ORACLE_POOL_STATUS_V2_STRUCT, +} from '../constants/struct.types'; + +export const pools = { + dexyerg: 'https://testnet-oracle-ergxau.sigmaspace.io/', +}; + +export class OraclePoolStateV2Service { + static getPoolInfo(dispatch: any, poolType: any): any { + return fetchStruct( + GET_ORACLE_POOL_INFO_V2_STRUCT, + { + method: 'get', + url: pools[poolType], + }, + { + dispatch, + transformResponse: JSON.parse, + } + ); + } + + static getPoolStatus(dispatch: any, poolType: any): any { + return fetchStruct( + GET_ORACLE_POOL_STATUS_V2_STRUCT, + { + method: 'get', + url: pools[poolType], + }, + { + dispatch, + transformResponse: JSON.parse, + } + ); + } + + static getOracleInfo(dispatch: any, poolType: any): any { + return fetchStruct( + GET_ORACLE_ORACLE_INFO_V2_STRUCT, + { + method: 'get', + url: pools[poolType], + }, + { + dispatch, + transformResponse: JSON.parse, + } + ); + } + + static getOracleStatus(dispatch: any, poolType: any): any { + return fetchStruct( + GET_ORACLE_ORACLE_STATUS_V2_STRUCT, + { + method: 'get', + url: pools[poolType], + }, + { + dispatch, + transformResponse: JSON.parse, + } + ); + } +} From ec0275e5507cdb94833c1e4e68f42ea9b602e01e Mon Sep 17 00:00:00 2001 From: deadit Date: Mon, 20 Mar 2023 20:02:39 +0300 Subject: [PATCH 2/3] update render --- src/config/pools.tsx | 254 ++++++++++++ src/containers/app/app.component.tsx | 6 +- .../oracle-pool-list/oracle-pool-list.tsx | 72 +--- .../oracle-pool-timeline/getTimelineConfig.ts | 82 ---- .../oracle-pool-timeline.component.tsx | 205 ---------- .../oracle-pool-timeline.scss | 252 ------------ .../oracle-table/oracle-table.component.tsx | 91 ----- .../components/oracle-table/oracle-table.scss | 103 ----- .../components/oracle-tiles/icons/icons.tsx | 35 -- .../oracle-tiles/oracle-tiles.component.tsx | 47 --- .../components/oracle-tiles/oracle-tiles.scss | 136 ------- .../oracle-pool-state.component.tsx | 277 -------------- .../oracle-pool-state.scss | 71 ---- .../oracle-tiles/oracle-tiles.component.tsx | 17 - .../oracle-pool-state-page.component.tsx | 19 + .../oracle-pool-state-v2.component.tsx | 360 ++++++++++++++++++ src/selectors/oraclePoolStateV2.ts | 19 + src/services/oraclePoolStateV2.service.ts | 22 +- 18 files changed, 665 insertions(+), 1403 deletions(-) create mode 100644 src/config/pools.tsx delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx delete mode 100644 src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss delete mode 100644 src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx delete mode 100644 src/pages/oracle-pool-state-v2/oracle-pool-state.scss create mode 100644 src/pages/oracle-pool-state/oracle-pool-state-page.component.tsx create mode 100644 src/pages/oracle-pool-state/oracle-pool-state-v2.component.tsx create mode 100644 src/selectors/oraclePoolStateV2.ts diff --git a/src/config/pools.tsx b/src/config/pools.tsx new file mode 100644 index 00000000..5ae97638 --- /dev/null +++ b/src/config/pools.tsx @@ -0,0 +1,254 @@ +import React from 'react'; + +export const pools = [ + { + key: 'ergusd', + name: 'Erg / USD', + icon: ( + + + + + ), + }, + { + key: 'ethusd', + name: 'Eth / USD', + icon: ( + + + + + + + + + ), + }, + { + key: 'dexyerg', + name: 'DexyGold / ERG', + icon: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, + // { + // key: 'adausd', + // name: 'ADA / USD', + // icon: ( + // + // + // + // + // + // ), + // }, +]; diff --git a/src/containers/app/app.component.tsx b/src/containers/app/app.component.tsx index ee595df2..bdf1b6c2 100644 --- a/src/containers/app/app.component.tsx +++ b/src/containers/app/app.component.tsx @@ -55,8 +55,8 @@ const UnconfirmedTransactionsComponent = lazy( '../../pages/unconfirmed-transactions/unconfirmed-transactions.component' ) ); -const OraclePoolStateComponent = lazy( - () => import('../../pages/oracle-pool-state/oracle-pool-state.component') +const OraclePoolStatePageComponent = lazy( + () => import('../../pages/oracle-pool-state/oracle-pool-state-page.component') ); const OraclePoolListComponent = lazy( () => import('src/pages/oracle-pool-list/oracle-pool-list') @@ -166,7 +166,7 @@ class App extends React.PureComponent> { diff --git a/src/pages/oracle-pool-list/oracle-pool-list.tsx b/src/pages/oracle-pool-list/oracle-pool-list.tsx index b5073782..5a3abe4e 100644 --- a/src/pages/oracle-pool-list/oracle-pool-list.tsx +++ b/src/pages/oracle-pool-list/oracle-pool-list.tsx @@ -1,78 +1,8 @@ import React from 'react'; import './oracle-pool-list.scss'; import OraclePoolCard from './components/oracle-pool-card/oracle-pool-card'; +import { pools } from 'src/config/pools'; -const pools = [ - { - key: 'ergusd', - name: 'Erg / USD', - icon: ( - - - - - ), - }, - { - key: 'ethusd', - name: 'Eth / USD', - icon: ( - - - - - - - - - ), - }, - // { - // key: 'adausd', - // name: 'ADA / USD', - // icon: ( - // - // - // - // - // - // ), - // }, -]; const OraclePoolList = () => { return (
diff --git a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts deleted file mode 100644 index 930d1162..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/getTimelineConfig.ts +++ /dev/null @@ -1,82 +0,0 @@ -export const dotStates = { - EPOCH_START: 'EPOCH_START', - EPOCH_END: 'EPOCH_END', - EPOCH_ENDING: 'EPOCH_ENDING', - NORMAL: 'NORMAL', -}; - -export const getTimelineConfig = (poolData: any) => { - if (!poolData) { - return []; - } - - const TIMELINE_DOTS_QUANTITY = 8; - const { - epoch_end_height: epochEndHeight, - current_block_height: currentBlockHeight, - } = poolData; - const epochSize = epochEndHeight - currentBlockHeight; - const isEpochLive = epochSize > 0; - - if (isEpochLive) { - const isEpochEndBig = epochSize >= TIMELINE_DOTS_QUANTITY; - - if (isEpochEndBig) { - return Array.from(Array(TIMELINE_DOTS_QUANTITY)).map((_, index) => { - if (index === 0) { - return { - type: dotStates.EPOCH_START, - value: currentBlockHeight, - }; - } - - if (index === TIMELINE_DOTS_QUANTITY - 1) { - return { - type: dotStates.EPOCH_END, - value: epochEndHeight, - }; - } - - return { - type: dotStates.NORMAL, - value: currentBlockHeight + index, - }; - }); - } - - return Array.from(Array(TIMELINE_DOTS_QUANTITY)).map((_, index) => { - if (index === 0) { - return { - type: dotStates.EPOCH_START, - value: currentBlockHeight, - }; - } - - if (index === epochSize) { - return { - type: dotStates.EPOCH_END, - value: epochEndHeight, - }; - } - - return { - type: dotStates.NORMAL, - value: currentBlockHeight + index, - }; - }); - } - - return Array.from(Array(TIMELINE_DOTS_QUANTITY)).map((_, index) => { - if (index === 0) { - return { - type: dotStates.EPOCH_ENDING, - value: epochEndHeight, - }; - } - - return { - type: dotStates.NORMAL, - value: epochEndHeight + index, - }; - }); -}; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx deleted file mode 100644 index 1b3b7ea3..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.component.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import React, { useMemo } from 'react'; -import './oracle-pool-timeline.scss'; -import cn from 'classnames'; -import { - ArrowLeftIcon, - GreenCircleIcon, - GreenLineGroupIcon, - BlackCircleSMIcon, - RedCircleIcon, - RedLineGroupIcon, - RedLineGroupIcon2, - OrangeLineGroupIcon, - OrangeCircleIcon, - GroupDotsIcon, -} from 'src/components/common/icons/common.icons'; -import { getTimelineConfig, dotStates } from './getTimelineConfig'; -import { GroupLineIcon } from '../oracle-tiles/icons/icons'; - -const renderMobileTimeline = ( - epochPreparation: any, - epochEnd: any, - epochStart: any -) => { - if (epochPreparation) { - return ( -
-
- -
Currently Ending Epoch
-
- {epochPreparation?.value || 'loading...'} -
-
-
- ); - } - - return ( -
-
- -
Current Block Height
-
- {epochStart?.value || 'loading...'} -
-
- -
- -
Epoch end Height
-
- {epochEnd?.value || 'loading...'} -
-
-
- ); -}; - -const OraclePoolTimelineComponent = (props: any) => { - const { poolData } = props; - - const timeline = useMemo(() => getTimelineConfig(poolData), [poolData]); - - const epochStart = useMemo( - () => timeline.find((item) => item.type === dotStates.EPOCH_START), - [timeline] - ); - - const epochEnd = useMemo( - () => timeline.find((item) => item.type === dotStates.EPOCH_END), - [timeline] - ); - - const epochPreparation = useMemo( - () => timeline.find((item) => item.type === dotStates.EPOCH_ENDING), - [timeline] - ); - - return ( - <> - {renderMobileTimeline(epochPreparation, epochEnd, epochStart)} -
-
-
- -
-
- -
- - {timeline[timeline.length - 1]?.type === dotStates.EPOCH_END && ( -
- -
- )} - -
- {timeline.map((item, index) => { - if (item.type === dotStates.EPOCH_START) { - return ( -
-
- Current Block Height -
- -
- - - {item.value} - -
-
- ); - } - - if (item.type === dotStates.EPOCH_END) { - if (index === 1) { - return ( -
-
- Epoch End Height -
- -
- - - {item.value} - -
-
- ); - } - - return ( -
-
- Epoch End Height -
- -
- - - {item.value} - -
-
- ); - } - - if (item.type === dotStates.EPOCH_ENDING) { - return ( -
-
- Currently Ending Epoch -
- -
- - - {item.value} - -
-
- ); - } - - return ( -
- -
- - {item.value} - -
-
- ); - })} -
-
-
- - ); -}; - -export default OraclePoolTimelineComponent; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss b/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss deleted file mode 100644 index e84d5998..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-pool-timeline/oracle-pool-timeline.scss +++ /dev/null @@ -1,252 +0,0 @@ -.or-timeline { - border: 1px solid #d9d9da; - box-sizing: border-box; - padding: 120px 32px; - background-color: #fff; - margin-top: 30px; - position: relative; - min-height: 256px; - display: flex; - align-items: flex-end; - - @media (max-width: 1399px) { - display: none; - } - - &__dots { - position: absolute; - right: 18px; - padding: 0 12px; - top: -12px; - background-color: white; - } - - &__line { - background: linear-gradient(90deg, #232526 0%, #797d80 100%); - height: 2px; - width: 100%; - position: relative; - } - - &__arrow { - position: absolute; - top: -11px; - left: 65px; - - &--right { - right: 70px; - left: initial; - } - } - - &__content { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - } -} - -.circle-group { - position: relative; - top: -10px; - left: 0; - - &--small { - top: -7px; - - .circle-group__line-text { - top: 4px; - left: -60px; - width: 120px; - text-align: center; - color: #797d80; - } - } - - &--end { - .path { - stroke-dashoffset: 10; - stroke-dasharray: 20; - animation: dash 25s linear infinite forwards reverse; - } - } - - &--left { - .path { - stroke-dashoffset: 10; - stroke-dasharray: 20; - animation: dash 25s linear infinite forwards reverse; - } - - @keyframes dash { - from { - stroke-dashoffset: 822; - } - to { - stroke-dashoffset: 0; - } - } - - .circle-group__line { - left: -60px; - } - - .circle-group__card { - right: 0 !important; - } - } - - &__card { - position: absolute; - width: 120px; - height: 70px; - top: -90px; - padding: 30px 18px 8px 8px; - font-size: 14px; - line-height: 16px; - background: #ffffff; - border: 0.5px solid #d9d9da; - box-sizing: border-box; - border-radius: 3px; - - &--green { - &::after { - content: ''; - position: absolute; - height: 4px; - width: 4px; - border-radius: 25px; - border: 1px solid tranparent; - top: 8px; - right: 8px; - background: linear-gradient(90deg, #02aab0 0%, #00cdac 100%); - } - } - - &--red { - &::after { - content: ''; - position: absolute; - height: 4px; - width: 4px; - border-radius: 25px; - border: 1px solid tranparent; - top: 8px; - right: 8px; - background: linear-gradient(90deg, #e52d27 0%, #b31217 100%); - } - } - - &--orange { - &::after { - content: ''; - position: absolute; - height: 4px; - width: 4px; - border-radius: 25px; - border: 1px solid tranparent; - top: 8px; - right: 8px; - background: linear-gradient(90deg, #ff512f 0%, #f09819 100%); - } - } - } - - &__line { - position: absolute; - top: 22px; - left: 10px; - - &-text { - position: absolute; - left: 12px; - top: 45px; - font-family: sans-serif; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 16px; - text-transform: uppercase; - - color: #000000; - } - } -} - -.path { - stroke-dashoffset: 10; - stroke-dasharray: 20; - animation: dash 25s linear infinite forwards normal; -} - -@keyframes dash { - from { - stroke-dashoffset: 822; - } - to { - stroke-dashoffset: 0; - } -} - -.or-timeline-mobile { - margin-top: 32px; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr 59px 1fr; - align-items: center; - - &--ending { - grid-template-rows: 1fr; - } - - @media (min-width: 1400px) { - display: none; - } - - .or-timeline-mobile-line { - width: 100%; - - path { - stroke-width: 3; - animation-direction: reverse; - } - } -} - -.or-timeline-card { - background-color: white; - border: 0.5px solid #d9d9da; - box-sizing: border-box; - border-radius: 3px; - width: 100%; - height: 100px; - padding: 32px 12px 12px 12px; - position: relative; - - &__icon { - position: absolute; - top: 10px; - right: 10px; - width: 14px; - height: 14px; - } - - &__title { - font-weight: 600; - font-size: 10px; - line-height: 12px; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #5b5b5b; - margin-bottom: 6px; - } - - &__value { - font-style: normal; - font-weight: 600; - font-size: 28px; - line-height: 33px; - color: #131313; - } -} diff --git a/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx b/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx deleted file mode 100644 index 5dd6cd94..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.component.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React, { useState } from 'react'; -import { - CopyIcon, - RemoveIcon, -} from '../../../../components/common/icons/common.icons'; -import cn from 'classnames'; -import './oracle-table.scss'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; -import { useAlert } from 'react-alert'; - -// interface Props { -// name: string; -// data: [{ name: string; value: any }]; -// } - -const OracleTableItem = ({ name, value }: any) => { - const [isOpen, setIsOpen] = useState(false); - const alert = useAlert(); - - return ( -
-
-
{name}
-
- - - - - {!isOpen && ( -
- {value} -
- )} - - setIsOpen((prev) => !prev)} - > - {!isOpen && 'More'} - {isOpen && } - -
-
- {!isOpen && ( -
- {value} -
- )} - {isOpen &&
{value}
} -
- ); -}; - -const OracleTable = (props: any) => { - const { - name, - data = [{ name: 'Latest data pool', value: '12312123312312132' }], - } = props; - - return ( -
-
-

{name}

-
-
- {data.map((item: any) => ( - - ))} -
-
- ); -}; - -export default OracleTable; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss b/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss deleted file mode 100644 index 5fc3dee8..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-table/oracle-table.scss +++ /dev/null @@ -1,103 +0,0 @@ -@import '../../../../assets/styles/base/variables'; - -.oracle-table { - border: 1px solid #d9d9da; - - &__header { - padding: 16px 20px; - background: #f8f8f8; - height: 60px; - border-bottom: 1px solid #d9d9da; - } - - &__title { - font-size: 22px; - line-height: 26px; - color: black; - } - - &__item { - padding: 20px; - background: white; - } - - &__body { - & > div { - & + div { - border-top: 1px solid #d9d9da; - } - } - } -} - -.oracle-table-item-body { - font-weight: 300; - font-size: 14px; - line-height: 16px; - color: black; - margin-top: 20px; - word-break: break-all; - - &--mobile { - display: none; - max-width: 255px; - overflow: hidden; - position: relative; - text-overflow: ellipsis; - word-break: normal; - - @media (max-width: $mobile-device-width) { - display: block; - } - } -} - -.oracle-table-item-header { - display: flex; - justify-content: space-between; - - &__right-side { - display: flex; - flex-wrap: nowrap; - align-items: center; - } - - &__title { - font-weight: 500; - font-size: 16px; - line-height: 19px; - } - - &__opacity-paragraph { - font-weight: 300; - font-size: 14px; - line-height: 16px; - margin-right: 24px; - position: relative; - width: 118px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - - @media (max-width: $mobile-device-width) { - display: none; - } - } - - &__copy { - padding: 0; - margin: 0; - border: none; - background: none; - outline: none; - cursor: pointer; - margin-right: 12px; - } - - &__link { - font-size: 14px; - line-height: 14px; - color: #0078ff; - cursor: pointer; - } -} diff --git a/src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx b/src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx deleted file mode 100644 index ffc74b83..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-tiles/icons/icons.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { makeIcon } from 'src/components/common/icons/common.icons'; -import { ReactComponent as epochEndsIcon } from '../../../../../assets/images/icons/oraclePoolState/epochEndsIcon.svg'; -import { ReactComponent as latestPriceIcon } from '../../../../../assets/images/icons/oraclePoolState/latestPriceIcon.svg'; -import { ReactComponent as currentPoolStageIcon } from '../../../../../assets/images/icons/oraclePoolState/currentPoolStageIcon.svg'; -import { ReactComponent as poolFundedPercentageIcon } from '../../../../../assets/images/icons/oraclePoolState/poolFundedPercentageIcon.svg'; -import { ReactComponent as postingScheduleIcon } from '../../../../../assets/images/icons/oraclePoolState/postingScheduleIcon.svg'; -import { ReactComponent as groupLine } from '../../../../../assets/images/icons/oraclePoolState/groupLine.svg'; - -interface IconProps { - className?: string; -} - -export const CurrentPoolStageIcon = ({ className }: IconProps) => { - return makeIcon(currentPoolStageIcon, className); -}; - -export const LatestPriceIcon = ({ className }: IconProps) => { - return makeIcon(latestPriceIcon, className); -}; - -export const EpochEndsIcon = ({ className }: IconProps) => { - return makeIcon(epochEndsIcon, className); -}; - -export const PoolFundedPercentageIcon = ({ className }: IconProps) => { - return makeIcon(poolFundedPercentageIcon, className); -}; - -export const PostingScheduleIcon = ({ className }: IconProps) => { - return makeIcon(postingScheduleIcon, className); -}; - -export const GroupLineIcon = ({ className }: IconProps) => { - return makeIcon(groupLine, className); -}; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx b/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx deleted file mode 100644 index d4e0229e..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.component.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import './oracle-tiles.scss'; -import { - LatestPriceIcon, - EpochEndsIcon, - PostingScheduleIcon, - CurrentPoolStageIcon, - PoolFundedPercentageIcon, -} from './icons/icons'; - -interface Props { - data?: any; -} - -const icons = [ - LatestPriceIcon, - PostingScheduleIcon, - EpochEndsIcon, - CurrentPoolStageIcon, - PoolFundedPercentageIcon, -]; - -const OracleTiles = (props: Props) => { - const { data } = props; - - return ( -
- {data.map((tile: any, index: number) => { - const Icon = icons[index]; - const value = - index === 0 - ? `${tile.symbol || ''} ${tile.value}` - : `${tile.value} ${tile.symbol || ''}`; - - return ( -
- -

{tile.name}

-

{value}

-
- ); - })} -
- ); -}; - -export default OracleTiles; diff --git a/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss b/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss deleted file mode 100644 index 35244b81..00000000 --- a/src/pages/oracle-pool-state-v2/components/oracle-tiles/oracle-tiles.scss +++ /dev/null @@ -1,136 +0,0 @@ -@import '../../../../assets/styles/base/variables'; - -.oracle-tiles-list { - display: grid; - grid-template-columns: repeat(5, 1fr); - grid-gap: 10px; - margin-top: 40px; - justify-content: space-between; - - @media (max-width: 1399px) { - grid-template-columns: 1fr 1fr; - justify-content: space-between; - grid-gap: 32px; - } - - @media (max-width: $mobile-device-width) { - margin-top: 56px; - grid-template-columns: 1fr; - grid-gap: 8px; - } - - &__item { - padding: 40px 12px 24px 12px; - border: 0.5px solid #d9d9da; - box-sizing: border-box; - position: relative; - - &::before { - content: ''; - position: absolute; - top: 12px; - left: 12px; - width: 6px; - height: 6px; - border-radius: 25px; - } - - &-icon { - position: absolute; - top: 12px; - right: 10px; - } - - &-title { - font-family: sans-serif; - font-style: normal; - font-weight: 900; - font-size: 10px; - line-height: 12px; - text-transform: uppercase; - color: #5b5b5b; - margin-bottom: 6px; - } - - &-paragraph { - font-family: sans-serif; - font-style: normal; - font-weight: 600; - font-size: 20px; - color: #131313; - - @media (max-width: $mobile-device-width) { - font-size: 28px; - } - - span { - font-weight: normal; - } - } - - &:nth-child(1) { - background: linear-gradient( - 304deg, - rgba(236, 102, 102, 0.4) 0%, - rgba(255, 255, 255, 0.103475) 80.84% - ), - white; - - &::before { - background: linear-gradient(90deg, #e52d27 0%, #b31217 100%); - } - } - - &:nth-child(2) { - background: linear-gradient( - 304deg, - rgba(236, 166, 102, 0.4) 16.62%, - rgba(255, 255, 255, 0.103475) 80% - ), - white; - - &::before { - background: linear-gradient(90deg, #ff512f 0%, #f09819 100%); - } - } - - &:nth-child(3) { - background: linear-gradient( - 330deg, - rgba(121, 210, 222, 0.4) 15.9%, - rgba(255, 255, 255, 0.2) 80% - ), - white; - - &::before { - background: linear-gradient(90deg, #02aab0 0%, #00cdac 100%); - } - } - - &:nth-child(4) { - background: linear-gradient( - 304deg, - rgba(20, 122, 214, 0.4) 10%, - rgba(255, 255, 255, 0.1) 80% - ), - white; - - &::before { - background: linear-gradient(90deg, #2f80ed 0%, #2d9ee0 100%); - } - } - - &:nth-child(5) { - background: linear-gradient( - 124deg, - rgba(255, 255, 255, 0.4) 25.96%, - rgba(41, 41, 49, 0.2) 80% - ), - white; - - &::before { - background: linear-gradient(90deg, #232526 0%, #797d80 100%); - } - } - } -} diff --git a/src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx b/src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx deleted file mode 100644 index cde2ad37..00000000 --- a/src/pages/oracle-pool-state-v2/oracle-pool-state.component.tsx +++ /dev/null @@ -1,277 +0,0 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { connect } from 'react-redux'; -import './oracle-pool-state.scss'; -import OraclePoolTimelineComponent from './components/oracle-pool-timeline/oracle-pool-timeline.component'; -import OracleTiles from './components/oracle-tiles/oracle-tiles.component'; -import OracleTable from './components/oracle-table/oracle-table.component'; -import { bindActionCreators } from 'redux'; -import { getOraclePoolDataStructSelector } from 'src/selectors/oraclePoolState'; -import { withRouter, RouterProps } from 'react-router'; -import { pools } from 'src/services/oraclePoolState.service'; -import LoaderLogo from 'src/components/loader/loader'; -import { ErrorIcon, ArrowIcon } from 'src/components/common/icons/common.icons'; -import { resetStruct } from 'redux-struct'; -import { - GET_ORACLE_INFO_V2_STRUCT, - GET_ORACLE_POOL_INFO_V2_STRUCT, - GET_ORACLE_POOL_STATUS_V2_STRUCT, - GET_ORACLE_STATUS_V2_STRUCT, -} from 'src/constants/struct.types'; -import { Link } from 'react-router-dom'; -import { OraclePoolStateV2Actions } from 'src/actions/oraclePoolStatev2.actions'; - -const mapStateToProps = (state: any): any => ({ - poolData: getOraclePoolDataStructSelector(state), -}); - -const mapDispatchToProps = (dispatch: any): any => { - return bindActionCreators( - { - ...OraclePoolStateV2Actions, - resetPoolInfoStruct: () => - dispatch(resetStruct(GET_ORACLE_POOL_INFO_V2_STRUCT)), - resetPoolStatusStruct: () => - dispatch(resetStruct(GET_ORACLE_POOL_STATUS_V2_STRUCT)), - resetOracleInfoStruct: () => - dispatch(resetStruct(GET_ORACLE_INFO_V2_STRUCT)), - resetOracleStatusStruct: () => - dispatch(resetStruct(GET_ORACLE_STATUS_V2_STRUCT)), - }, - dispatch - ); -}; - -type Props = ReturnType & - ReturnType & - RouterProps; - -const OraclePoolState = (props: Props) => { - const { - getPoolData, - poolData, - match: { - params: { id }, - }, - history, - resetPoolInfoStruct, - resetPoolStatusStruct, - resetOracleInfoStruct, - resetOracleStatusStruct, - } = props; - - const [isDataLoaded, setIsDataLoaded] = useState(false); - - useEffect(() => { - if (!pools[id]) { - history.push(`/oracle-pool-state/${Object.keys(pools)[0]}`); - } - }, []); - - useEffect(() => { - if (pools[id]) { - getPoolData(id); - } - }, [id]); - - useEffect(() => { - if (poolData.data) { - setIsDataLoaded(true); - } - }, [poolData.data]); - - useEffect(() => { - let intervalId: any = null; - - if (pools[id]) { - intervalId = setInterval(() => getPoolData(id), 30000); - } - - return () => { - clearInterval(intervalId); - }; - }, [id]); - - useEffect( - () => () => { - resetPoolInfoStruct(); - resetOracleStatusStruct(); - resetPoolStatusStruct(); - resetOracleInfoStruct(); - }, - [] - ); - - const data = useMemo(() => poolData.data || null, [poolData.data]); - - const tiles = useMemo( - () => - data - ? [ - { - name: 'Latest Price', - value: Number(data.latest_price).toFixed(2), - symbol: '$', - }, - { - name: 'Posting Schedule', - value: data.posting_schedule_minutes, - symbol: 'min', - }, - { - name: 'Epoch Ends', - value: data.epoch_ends_in_minutes, - symbol: 'min', - }, - { name: 'Current Pool Stage', value: data.current_pool_stage }, - { - name: 'Pool Funded Percentage', - value: data.pool_funded_percentage, - }, - ] - : [], - [data] - ); - - const technicalData = useMemo( - () => - data - ? [ - { - name: 'Latest Pool Datapoint', - value: data.latest_datapoint, - }, - { - name: 'Datapoint Address', - value: data.datapoint_address, - }, - { - name: 'Epoch Prep Address', - value: data.epoch_prep_address, - }, - { - name: 'Live Epoch Address', - value: data.live_epoch_address, - }, - { - name: 'Pool Deposits Address', - value: data.pool_deposits_address, - }, - { - name: 'Oracle Payout Price (in nanoErg)', - value: data.oracle_payout_price, - }, - { - name: 'Epoch Prep Length', - value: data.epoch_prep_length, - }, - { - name: 'Oracle Pool NFT ID', - value: data.oracle_pool_nft_id, - }, - { - name: 'Oracle Pool Participant Token Id', - value: data.oracle_pool_participant_token_id, - }, - { - name: 'Deviation range', - value: data.deviation_range, - }, - { - name: 'Consensus number', - value: data.consensus_num, - }, - ] - : [], - [data] - ); - - const summaryData = useMemo( - () => - data - ? [ - { - name: `Latest Price: [${data.title}]`, - value: data.latest_price, - }, - { - name: `Number Of Oracles`, - value: data.number_of_oracles, - }, - { - name: 'Posting Schedule (In Blocks)', - value: data.posting_schedule_blocks, - }, - { - name: 'Posting Schedule (In Minutes)', - value: data.posting_schedule_minutes, - }, - { - name: 'Pool Funded Percentage', - value: data.pool_funded_percentage, - }, - { - name: 'Current Pool Stage', - value: data.current_pool_stage, - }, - ] - : [], - [data] - ); - - if (!isDataLoaded) { - return ; - } - - if (poolData.error) { - return ( -
- -

- Server Error. Unable to fetch oracle pool data. -

-

- Dont worry, the oracle pool is still functioning properly on the - blockchain, but you have hit a server issue.{' '} -

-

- If this problem persists, please contact us on{' '} - Discord or{' '} - Telegram -

-
- ); - } - - return ( -
- - - - - Back to Oracle Pool List - - -

{data?.title} Oracle Pool

- - - - - -
-
- -
-
- -
-
-
- ); -}; - -const OraclePoolStateComponent = connect( - mapStateToProps, - mapDispatchToProps -)(withRouter(OraclePoolState)); - -export default OraclePoolStateComponent; diff --git a/src/pages/oracle-pool-state-v2/oracle-pool-state.scss b/src/pages/oracle-pool-state-v2/oracle-pool-state.scss deleted file mode 100644 index cbbd50cd..00000000 --- a/src/pages/oracle-pool-state-v2/oracle-pool-state.scss +++ /dev/null @@ -1,71 +0,0 @@ -@import '../../assets/styles/base/variables'; - -.or-content { - z-index: 3; - position: relative; - padding: 50px 75px; - - &__title { - font-size: 26px; - font-weight: 700; - margin-top: 24px; - } - - &__btn-back-icon { - width: 10px; - height: 10px; - margin-right: 10px; - transform: rotate(180deg); - - fill: #0078ff; - } - - @media (max-width: $mobile-device-width) { - padding: 20px; - padding-bottom: 75px; - } - - &__table { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 20px; - margin-top: 50px; - - @media (max-width: 1400px) { - grid-template-columns: 1fr; - } - } -} - -.or-pool-error { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - width: 100%; - height: 100%; - - @media (max-width: $mobile-device-width) { - padding: 0 25px; - } - - svg { - width: 60px; - height: 60px; - margin-bottom: 24px; - } - - &__message { - font-size: 20px; - line-height: 26px; - text-align: center; - max-width: 600px; - margin-top: 12px; - margin-bottom: 0; - - @media (max-width: $mobile-device-width) { - font-size: 18px; - line-height: 24px; - } - } -} diff --git a/src/pages/oracle-pool-state/components/oracle-tiles/oracle-tiles.component.tsx b/src/pages/oracle-pool-state/components/oracle-tiles/oracle-tiles.component.tsx index d4e0229e..06921894 100644 --- a/src/pages/oracle-pool-state/components/oracle-tiles/oracle-tiles.component.tsx +++ b/src/pages/oracle-pool-state/components/oracle-tiles/oracle-tiles.component.tsx @@ -1,32 +1,16 @@ import React from 'react'; import './oracle-tiles.scss'; -import { - LatestPriceIcon, - EpochEndsIcon, - PostingScheduleIcon, - CurrentPoolStageIcon, - PoolFundedPercentageIcon, -} from './icons/icons'; interface Props { data?: any; } -const icons = [ - LatestPriceIcon, - PostingScheduleIcon, - EpochEndsIcon, - CurrentPoolStageIcon, - PoolFundedPercentageIcon, -]; - const OracleTiles = (props: Props) => { const { data } = props; return (
{data.map((tile: any, index: number) => { - const Icon = icons[index]; const value = index === 0 ? `${tile.symbol || ''} ${tile.value}` @@ -34,7 +18,6 @@ const OracleTiles = (props: Props) => { return (
-

{tile.name}

{value}

diff --git a/src/pages/oracle-pool-state/oracle-pool-state-page.component.tsx b/src/pages/oracle-pool-state/oracle-pool-state-page.component.tsx new file mode 100644 index 00000000..ddec7df0 --- /dev/null +++ b/src/pages/oracle-pool-state/oracle-pool-state-page.component.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { withRouter } from 'react-router'; +import { OraclePoolStateComponentV2 } from './oracle-pool-state-v2.component'; +import OraclePoolStateComponent from './oracle-pool-state.component'; + +const OraclePoolStatePageComponent = withRouter((props: any) => { + const { + match: { + params: { id }, + }, + } = props; + + if (id === 'dexyerg') { + return ; + } + return ; +}); + +export default OraclePoolStatePageComponent; diff --git a/src/pages/oracle-pool-state/oracle-pool-state-v2.component.tsx b/src/pages/oracle-pool-state/oracle-pool-state-v2.component.tsx new file mode 100644 index 00000000..fc4b77e9 --- /dev/null +++ b/src/pages/oracle-pool-state/oracle-pool-state-v2.component.tsx @@ -0,0 +1,360 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { connect } from 'react-redux'; +import './oracle-pool-state.scss'; +import OraclePoolTimelineComponent from '../oracle-pool-state/components/oracle-pool-timeline/oracle-pool-timeline.component'; +import OracleTiles from '../oracle-pool-state/components/oracle-tiles/oracle-tiles.component'; +import OracleTable from '../oracle-pool-state/components/oracle-table/oracle-table.component'; +import { bindActionCreators } from 'redux'; +import { withRouter, RouterProps } from 'react-router'; +import LoaderLogo from 'src/components/loader/loader'; +import { ErrorIcon, ArrowIcon } from 'src/components/common/icons/common.icons'; +import { nanoErgsInErg } from 'src/constants/config'; +import { resetStruct } from 'redux-struct'; +import { + GET_ORACLE_INFO_V2_STRUCT, + GET_ORACLE_POOL_INFO_V2_STRUCT, + GET_ORACLE_POOL_STATUS_V2_STRUCT, + GET_ORACLE_STATUS_V2_STRUCT, +} from 'src/constants/struct.types'; +import { Link } from 'react-router-dom'; +import { OraclePoolStateV2Actions } from 'src/actions/oraclePoolStatev2.actions'; +import { pools } from 'src/services/oraclePoolStateV2.service'; +import { pools as configPools } from 'src/config/pools'; +import { + getOracleInfoStructSelector, + getOraclePoolInfoStructSelector, + getOraclePoolStatusStructSelector, + getOracleStatusStructSelector, +} from 'src/selectors/oraclePoolStateV2'; + +const mapStateToProps = (state: any): any => ({ + poolInfo: getOraclePoolInfoStructSelector(state), + poolStatus: getOraclePoolStatusStructSelector(state), + oracleInfo: getOracleInfoStructSelector(state), + oracleStatus: getOracleStatusStructSelector(state), +}); + +const mapDispatchToProps = (dispatch: any): any => { + return bindActionCreators( + { + ...OraclePoolStateV2Actions, + resetPoolInfoStruct: () => + dispatch(resetStruct(GET_ORACLE_POOL_INFO_V2_STRUCT)), + resetPoolStatusStruct: () => + dispatch(resetStruct(GET_ORACLE_POOL_STATUS_V2_STRUCT)), + resetOracleInfoStruct: () => + dispatch(resetStruct(GET_ORACLE_INFO_V2_STRUCT)), + resetOracleStatusStruct: () => + dispatch(resetStruct(GET_ORACLE_STATUS_V2_STRUCT)), + }, + dispatch + ); +}; + +type Props = ReturnType & + ReturnType & + RouterProps; + +const OraclePoolState = (props: Props) => { + const { + getPoolInfo, + getPoolStatus, + getOracleInfo, + getOracleStatus, + poolInfo, + poolStatus, + oracleInfo, + oracleStatus, + match: { + params: { id }, + }, + history, + resetPoolInfoStruct, + resetPoolStatusStruct, + resetOracleInfoStruct, + resetOracleStatusStruct, + } = props; + + const [isDataLoaded, setIsDataLoaded] = useState(false); + + useEffect(() => { + if (!pools[id]) { + history.push(`/oracle-pool-state/${Object.keys(pools)[0]}`); + } + }, []); + + useEffect(() => { + if (pools[id]) { + getPoolInfo(id); + getPoolStatus(id); + getOracleInfo(id); + getOracleStatus(id); + } + }, [id]); + + useEffect(() => { + if ( + poolInfo.data && + poolStatus.data && + oracleInfo.data && + oracleStatus.data + ) { + setIsDataLoaded(true); + } + }, [poolInfo.data, poolStatus.data, oracleInfo.data, oracleStatus.data]); + + useEffect(() => { + let intervalId: any = null; + + if (pools[id]) { + intervalId = setInterval(() => { + getPoolInfo(id); + getPoolStatus(id); + getOracleInfo(id); + getOracleStatus(id); + }, 30000); + } + + return () => { + clearInterval(intervalId); + }; + }, [id]); + + useEffect( + () => () => { + resetPoolInfoStruct(); + resetOracleStatusStruct(); + resetPoolStatusStruct(); + resetOracleInfoStruct(); + }, + [] + ); + + const poolInfoData = useMemo(() => poolInfo.data || null, [poolInfo.data]); + const poolStatusData = useMemo( + () => poolStatus.data || null, + [poolStatus.data] + ); + const oracleInfoData = useMemo( + () => oracleInfo.data || null, + [oracleInfo.data] + ); + const oracleStatusData = useMemo( + () => oracleStatus.data || null, + [oracleStatus.data] + ); + const tiles = useMemo( + () => + poolStatusData && poolInfoData + ? [ + { + name: 'Latest Price', + value: poolStatusData.latest_pool_datapoint / nanoErgsInErg, + symbol: 'ERG', + }, + { + name: 'Posting Schedule', + value: poolInfoData.epoch_length * 2, + symbol: 'min', + }, + { + name: 'Epoch Ends', + value: + (poolStatusData.epoch_end_height - + poolStatusData.current_block_height) * + 2, + symbol: 'min', + }, + { + name: 'Number Of Oracles', + value: poolStatusData.number_of_oracles, + }, + { + name: 'Latest Pool Box Height', + value: poolStatusData.latest_pool_box_height, + }, + ] + : [], + [poolStatusData] + ); + + const poolInfoSummary = useMemo( + () => + poolInfoData + ? [ + { + name: 'Ballot Token ID', + value: poolInfoData.ballot_token_id, + }, + { + name: 'Epoch Length', + value: poolInfoData.epoch_length, + }, + { + name: 'Max Deviation Percent', + value: poolInfoData.max_deviation_percent, + }, + { + name: 'Min Data Points', + value: poolInfoData.min_data_points, + }, + { + name: 'Min Votes', + value: poolInfoData.min_votes, + }, + { + name: 'Oracle Token ID', + value: poolInfoData.oracle_token_id, + }, + { + name: 'Pool Box Address', + value: poolInfoData.pool_box_address, + }, + { + name: 'Pool Nft ID', + value: poolInfoData.pool_nft_id, + }, + { + name: 'Refresh Box Address', + value: poolInfoData.refresh_box_address, + }, + { + name: 'Refresh Token ID', + value: poolInfoData.refresh_token_id, + }, + { + name: 'Reward Token ID', + value: poolInfoData.reward_token_id, + }, + { + name: 'Update Box Address', + value: poolInfoData.update_box_address, + }, + { + name: 'Update Token ID', + value: poolInfoData.update_token_id, + }, + ] + : [], + [poolInfoData] + ); + + const oracleInfoSummary = useMemo( + () => + oracleInfoData + ? [ + { + name: `Base fee (in ERG)`, + value: oracleInfoData.base_fee / nanoErgsInErg, + }, + { + name: `Oracle Address`, + value: oracleInfoData.oracle_address, + }, + ] + : [], + [oracleInfoData] + ); + + const poolStatusSummary = useMemo( + () => + poolStatusData + ? [ + { + name: `Pool Box Epoch ID`, + value: poolStatusData.pool_box_epoch_id, + }, + { + name: `Reward Tokens In Pool Box`, + value: poolStatusData.reward_tokens_in_pool_box, + }, + ] + : [], + [poolStatusData] + ); + + const oracleStatusSummary = useMemo( + () => + oracleStatusData + ? [ + { + name: 'Local Datapoint Box State Height', + value: oracleStatusData.local_datapoint_box_state.height, + }, + { + name: 'Local Datapoint Box State Status', + value: oracleStatusData.local_datapoint_box_state.status, + }, + ] + : [], + [oracleStatusData] + ); + + if (!isDataLoaded) { + return ; + } + + if ( + poolInfo.error || + poolStatus.error || + oracleInfo.error || + oracleStatus.error + ) { + return ( +
+ +

+ Server Error. Unable to fetch oracle pool data. +

+

+ Dont worry, the oracle pool is still functioning properly on the + blockchain, but you have hit a server issue.{' '} +

+

+ If this problem persists, please contact us on{' '} + Discord or{' '} + Telegram +

+
+ ); + } + + return ( +
+ + + + + Back to Oracle Pool List + + +

+ {configPools.find((data) => data.key === id)?.name} Oracle Pool +

+ + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); +}; + +export const OraclePoolStateComponentV2 = connect( + mapStateToProps, + mapDispatchToProps +)(withRouter(OraclePoolState)); diff --git a/src/selectors/oraclePoolStateV2.ts b/src/selectors/oraclePoolStateV2.ts new file mode 100644 index 00000000..0101656a --- /dev/null +++ b/src/selectors/oraclePoolStateV2.ts @@ -0,0 +1,19 @@ +import { getStruct } from 'redux-struct'; +import { + GET_ORACLE_INFO_V2_STRUCT, + GET_ORACLE_POOL_INFO_V2_STRUCT, + GET_ORACLE_POOL_STATUS_V2_STRUCT, + GET_ORACLE_STATUS_V2_STRUCT, +} from '../constants/struct.types'; + +export const getOraclePoolInfoStructSelector = (state: any) => + getStruct(GET_ORACLE_POOL_INFO_V2_STRUCT)(state); + +export const getOraclePoolStatusStructSelector = (state: any) => + getStruct(GET_ORACLE_POOL_STATUS_V2_STRUCT)(state); + +export const getOracleInfoStructSelector = (state: any) => + getStruct(GET_ORACLE_INFO_V2_STRUCT)(state); + +export const getOracleStatusStructSelector = (state: any) => + getStruct(GET_ORACLE_STATUS_V2_STRUCT)(state); diff --git a/src/services/oraclePoolStateV2.service.ts b/src/services/oraclePoolStateV2.service.ts index d3e059c8..b88b65a1 100644 --- a/src/services/oraclePoolStateV2.service.ts +++ b/src/services/oraclePoolStateV2.service.ts @@ -1,13 +1,13 @@ import { fetchStruct } from '../utils/fetchStruct'; import { - GET_ORACLE_ORACLE_INFO_V2_STRUCT, - GET_ORACLE_ORACLE_STATUS_V2_STRUCT, + GET_ORACLE_INFO_V2_STRUCT, + GET_ORACLE_STATUS_V2_STRUCT, GET_ORACLE_POOL_INFO_V2_STRUCT, GET_ORACLE_POOL_STATUS_V2_STRUCT, } from '../constants/struct.types'; export const pools = { - dexyerg: 'https://testnet-oracle-ergxau.sigmaspace.io/', + dexyerg: 'https://testnet-oracle-ergxau.sigmaspace.io', }; export class OraclePoolStateV2Service { @@ -16,11 +16,10 @@ export class OraclePoolStateV2Service { GET_ORACLE_POOL_INFO_V2_STRUCT, { method: 'get', - url: pools[poolType], + url: `${pools[poolType]}/poolInfo`, }, { dispatch, - transformResponse: JSON.parse, } ); } @@ -30,39 +29,36 @@ export class OraclePoolStateV2Service { GET_ORACLE_POOL_STATUS_V2_STRUCT, { method: 'get', - url: pools[poolType], + url: `${pools[poolType]}/poolStatus`, }, { dispatch, - transformResponse: JSON.parse, } ); } static getOracleInfo(dispatch: any, poolType: any): any { return fetchStruct( - GET_ORACLE_ORACLE_INFO_V2_STRUCT, + GET_ORACLE_INFO_V2_STRUCT, { method: 'get', - url: pools[poolType], + url: `${pools[poolType]}/oracleInfo`, }, { dispatch, - transformResponse: JSON.parse, } ); } static getOracleStatus(dispatch: any, poolType: any): any { return fetchStruct( - GET_ORACLE_ORACLE_STATUS_V2_STRUCT, + GET_ORACLE_STATUS_V2_STRUCT, { method: 'get', - url: pools[poolType], + url: `${pools[poolType]}/oracleStatus`, }, { dispatch, - transformResponse: JSON.parse, } ); } From c52fb8395025493989b5675a190d49fd562bbfae Mon Sep 17 00:00:00 2001 From: Dmitry Usov Date: Tue, 26 Sep 2023 20:00:01 +0300 Subject: [PATCH 3/3] Update oraclePoolStateV2.service.ts --- src/services/oraclePoolStateV2.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/oraclePoolStateV2.service.ts b/src/services/oraclePoolStateV2.service.ts index b88b65a1..31af965c 100644 --- a/src/services/oraclePoolStateV2.service.ts +++ b/src/services/oraclePoolStateV2.service.ts @@ -7,7 +7,7 @@ import { } from '../constants/struct.types'; export const pools = { - dexyerg: 'https://testnet-oracle-ergxau.sigmaspace.io', + dexyerg: 'https://erg-xau-oracle-api.ergohost.io/', }; export class OraclePoolStateV2Service {