oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

wip replace apollo with urql

Browse Source
This commit is contained in:
Bogdan Fazakas 2021-06-22 08:52:49 +03:00
parent a017ad219d
commit 5e45fff361
14 changed files with 183 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
package-lock.json generated
View File

@ -68,6 +68,7 @@
"shortid": "^2.2.16",
"slugify": "^1.5.3",
"swr": "^0.5.6",
"urql": "^2.0.3",
"use-dark-mode": "^2.3.1",
"web3": "^1.3.6",
"web3modal": "^1.9.3",
@ -6154,6 +6155,18 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@urql/core": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@urql/core/-/core-2.1.3.tgz",
"integrity": "sha512-CzrTMhO5SG7qdAaS3B5/g1TPH5k7326GHIyta1owT2vzxX9ev8YytxOE5m73EuacxIfF7qVZFhCzY+rubOlI0w==",
"dependencies": {
"@graphql-typed-document-node/core": "^3.1.0",
"wonka": "^4.0.14"
},
"peerDependencies": {
"graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
}
},
"node_modules/@use-it/event-listener": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.6.tgz",
@ -37261,6 +37274,19 @@
"node": ">=0.4.x"
}
},
"node_modules/urql": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/urql/-/urql-2.0.3.tgz",
"integrity": "sha512-CEfCsODKbAloDuAaT3NeMvibKpWxfS86DucI/HGam9uuqiZLpunuKb4p9+SWwoWLRf6Q1kUeQKGZoI5GqudOCg==",
"dependencies": {
"@urql/core": "^2.1.0",
"wonka": "^4.0.14"
},
"peerDependencies": {
"graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0",
"react": ">= 16.8.0"
}
},
"node_modules/use": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@ -39980,6 +40006,11 @@
"window-getters": "^1.0.0"
}
},
"node_modules/wonka": {
"version": "4.0.15",
"resolved": "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz",
"integrity": "sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg=="
},
"node_modules/word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@ -45410,6 +45441,15 @@
"eslint-visitor-keys": "^2.0.0"
}
},
"@urql/core": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@urql/core/-/core-2.1.3.tgz",
"integrity": "sha512-CzrTMhO5SG7qdAaS3B5/g1TPH5k7326GHIyta1owT2vzxX9ev8YytxOE5m73EuacxIfF7qVZFhCzY+rubOlI0w==",
"requires": {
"@graphql-typed-document-node/core": "^3.1.0",
"wonka": "^4.0.14"
}
},
"@use-it/event-listener": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.6.tgz",
@ -70039,6 +70079,15 @@
"resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
"integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
},
"urql": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/urql/-/urql-2.0.3.tgz",
"integrity": "sha512-CEfCsODKbAloDuAaT3NeMvibKpWxfS86DucI/HGam9uuqiZLpunuKb4p9+SWwoWLRf6Q1kUeQKGZoI5GqudOCg==",
"requires": {
"@urql/core": "^2.1.0",
"wonka": "^4.0.14"
}
},
"use": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@ -72270,6 +72319,11 @@
"window-getters": "^1.0.0"
}
},
"wonka": {
"version": "4.0.15",
"resolved": "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz",
"integrity": "sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg=="
},
"word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

1
package.json
View File

@ -81,6 +81,7 @@
"shortid": "^2.2.16",
"slugify": "^1.5.3",
"swr": "^0.5.6",
"urql": "^2.0.3",
"use-dark-mode": "^2.3.1",
"web3": "^1.3.6",
"web3modal": "^1.9.3",

8
src/components/molecules/MarketStats.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactElement, useEffect, useState } from 'react'
import styles from './MarketStats.module.css'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import Conversion from '../atoms/Price/Conversion'
import PriceUnit from '../atoms/Price/PriceUnit'
import Tooltip from '../atoms/Tooltip'
@ -19,7 +19,11 @@ export default function MarketStats(): ReactElement {
const [totalValueLocked, setTotalValueLocked] = useState<string>()
const [totalOceanLiquidity, setTotalOceanLiquidity] = useState<string>()
const [poolCount, setPoolCount] = useState<number>()
const { data } = useQuery(getTotalPoolsValues, { pollInterval: 20000 })
const [result] = useQuery({
query: getTotalPoolsValues
// pollInterval: 20000
})
const { data } = result
useEffect(() => {
if (!data || !data.poolFactories || data.poolFactories.length === 0) return

23
src/components/molecules/PoolTransactions.tsx
View File

@ -8,7 +8,7 @@ import styles from './PoolTransactions.module.css'
import { useUserPreferences } from '../../providers/UserPreferences'
import { Ocean } from '@oceanprotocol/lib'
import { formatPrice } from '../atoms/Price/PriceUnit'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import {
TransactionHistory,
TransactionHistory_poolTransactions as TransactionHistoryPoolTransactions
@ -198,27 +198,26 @@ export default function PoolTransactions({
const { accountId } = useWeb3()
const [logs, setLogs] = useState<TransactionHistoryPoolTransactions[]>()
const { data, loading } = useQuery<TransactionHistory>(
poolAddress ? txHistoryQueryByPool : txHistoryQuery,
{
variables: {
user: accountId?.toLowerCase(),
pool: poolAddress?.toLowerCase()
},
pollInterval: 20000
const [result] = useQuery<TransactionHistory>({
query: poolAddress ? txHistoryQueryByPool : txHistoryQuery,
variables: {
user: accountId?.toLowerCase(),
pool: poolAddress?.toLowerCase()
}
)
// pollInterval: 20000
})
const { data, fetching } = result
useEffect(() => {
if (!data) return
setLogs(data.poolTransactions)
}, [data, loading])
}, [data, fetching])
return (
<Table
columns={minimal ? columnsMinimal : columns}
data={logs}
isLoading={loading}
isLoading={fetching}
noTableHead={minimal}
dense={minimal}
pagination={minimal ? logs?.length >= 4 : logs?.length >= 9}

10
src/components/organisms/AssetActions/Consume.tsx
View File

@ -5,7 +5,7 @@ import File from '../../atoms/File'
import Price from '../../atoms/Price'
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
import { useAsset } from '../../../providers/Asset'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import { OrdersData } from '../../../@types/apollo/OrdersData'
import BigNumber from 'bignumber.js'
import { useOcean } from '../../../providers/Ocean'
@ -56,13 +56,15 @@ export default function Consume({
const [hasDatatoken, setHasDatatoken] = useState(false)
const [isConsumable, setIsConsumable] = useState(true)
const [assetTimeout, setAssetTimeout] = useState('')
const { data } = useQuery<OrdersData>(previousOrderQuery, {
const [result] = useQuery<OrdersData>({
query: previousOrderQuery,
variables: {
id: ddo.dataToken?.toLowerCase(),
account: accountId?.toLowerCase()
},
pollInterval: 5000
}
// pollInterval: 5000
})
const { data } = result
useEffect(() => {
if (!data || !assetTimeout || data.tokenOrders.length === 0) return

10
src/components/organisms/AssetActions/Pool/Graph.tsx
View File

@ -17,7 +17,7 @@ import { darkModeConfig } from '../../../../../app.config'
import Button from '../../../atoms/Button'
import { Logger } from '@oceanprotocol/lib'
import { useAsset } from '../../../../providers/Asset'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import { PoolHistory } from '../../../../@types/apollo/PoolHistory'
declare type GraphType = 'liquidity' | 'price'
@ -131,13 +131,15 @@ export default function Graph(): ReactElement {
const [isLoading, setIsLoading] = useState(true)
const [graphData, setGraphData] = useState<ChartData>()
const { data, refetch, error } = useQuery<PoolHistory>(poolHistory, {
const [result, refetch] = useQuery<PoolHistory>({
query: poolHistory,
variables: {
id: price.address.toLowerCase(),
block: lastBlock
},
pollInterval: 20000
}
// pollInterval: 20000
})
const { data, error } = result
useEffect(() => {
Logger.log('Fired GraphOptions!')

11
src/components/organisms/AssetActions/Pool/index.tsx
View File

@ -15,7 +15,7 @@ import { PoolBalance } from '../../../../@types/TokenBalance'
import Transactions from './Transactions'
import Graph from './Graph'
import { useAsset } from '../../../../providers/Asset'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import { PoolLiquidity } from '../../../../@types/apollo/PoolLiquidity'
import { useOcean } from '../../../../providers/Ocean'
import { useWeb3 } from '../../../../providers/Web3'
@ -91,14 +91,17 @@ export default function Pool(): ReactElement {
// the purpose of the value is just to trigger the effect
const [refreshPool, setRefreshPool] = useState(false)
const { data: dataLiquidity } = useQuery<PoolLiquidity>(poolLiquidityQuery, {
const [result] = useQuery<PoolLiquidity>({
query: poolLiquidityQuery,
variables: {
id: price.address.toLowerCase(),
shareId: `${price.address.toLowerCase()}-${ddo.publicKey[0].owner.toLowerCase()}`
},
pollInterval: 5000
}
// pollInterval: 5000
})
const { data: dataLiquidity } = result
useEffect(() => {
async function init() {
if (!dataLiquidity || !dataLiquidity.pool) return

6
src/components/organisms/AssetContent/EditHistory.tsx
View File

@ -3,7 +3,7 @@ import { useAsset } from '../../../providers/Asset'
import ExplorerLink from '../../atoms/ExplorerLink'
import Time from '../../atoms/Time'
import styles from './EditHistory.module.css'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import { ReceiptData_datatokens_updates as ReceiptData } from '../../../@types/apollo/ReceiptData'
import { useWeb3 } from '../../../providers/Web3'
@ -22,9 +22,11 @@ const getReceipts = gql`
export default function EditHistory(): ReactElement {
const { networkId } = useWeb3()
const { ddo } = useAsset()
const { data } = useQuery(getReceipts, {
const [result] = useQuery({
query: getReceipts,
variables: { address: ddo?.dataToken.toLowerCase() }
})
const { data } = result
const [receipts, setReceipts] = useState<ReceiptData[]>()
const [creationTx, setCreationTx] = useState<string>()

6
src/components/pages/History/ComputeJobs/index.tsx
View File

@ -8,7 +8,7 @@ import Dotdotdot from 'react-dotdotdot'
import Table from '../../../atoms/Table'
import Button from '../../../atoms/Button'
import { useOcean } from '../../../../providers/Ocean'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import { useWeb3 } from '../../../../providers/Web3'
import { queryMetadata } from '../../../../utils/aquarius'
import axios, { CancelToken } from 'axios'
@ -105,11 +105,13 @@ export default function ComputeJobs(): ReactElement {
const { accountId } = useWeb3()
const [isLoading, setIsLoading] = useState(true)
const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
const { data } = useQuery<ComputeOrders>(getComputeOrders, {
const [result] = useQuery<ComputeOrders>({
query: getComputeOrders,
variables: {
user: accountId?.toLowerCase()
}
})
const { data } = result
async function getJobs() {
if (!ocean || !account) return

6
src/components/pages/History/Downloads.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactElement, useEffect, useState } from 'react'
import Table from '../../atoms/Table'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import Time from '../../atoms/Time'
import web3 from 'web3'
import AssetTitle from '../../molecules/AssetListTitle'
@ -58,9 +58,11 @@ export default function ComputeDownloads(): ReactElement {
const { accountId } = useWeb3()
const [isLoading, setIsLoading] = useState(false)
const [orders, setOrders] = useState<DownloadedAssets[]>()
const { data } = useQuery(getTokenOrders, {
const [result] = useQuery({
query: getTokenOrders,
variables: { user: accountId?.toLowerCase() }
})
const { data } = result
const { appConfig } = useSiteMetadata()
useEffect(() => {

16
src/components/pages/History/PoolShares.tsx
View File

@ -3,7 +3,7 @@ import Table from '../../atoms/Table'
import Conversion from '../../atoms/Price/Conversion'
import styles from './PoolShares.module.css'
import AssetTitle from '../../molecules/AssetListTitle'
import { gql, useQuery } from '@apollo/client'
import { gql, useQuery } from 'urql'
import {
PoolShares as PoolSharesList,
PoolShares_poolShares as PoolShare,
@ -141,13 +141,15 @@ const columns = [
export default function PoolShares(): ReactElement {
const { accountId } = useWeb3()
const [assets, setAssets] = useState<Asset[]>()
const { data, loading } = useQuery<PoolSharesList>(poolSharesQuery, {
const [result] = useQuery<PoolSharesList>({
query: poolSharesQuery,
variables: {
user: accountId?.toLowerCase()
},
pollInterval: 20000
}
// pollInterval: 20000
})
const { data, fetching } = result
useEffect(() => {
if (!data) return
const assetList: Asset[] = []
@ -159,7 +161,7 @@ export default function PoolShares(): ReactElement {
})
})
setAssets(assetList)
}, [data, loading])
}, [data, fetching])
return (
<Table
@ -168,7 +170,7 @@ export default function PoolShares(): ReactElement {
data={assets}
pagination
paginationPerPage={5}
isLoading={loading}
isLoading={fetching}
sortField="userLiquidity"
sortAsc={false}
/>

6
src/helpers/wrapRootElement.tsx
View File

@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
import Web3Provider from '../providers/Web3'
import { UserPreferencesProvider } from '../providers/UserPreferences'
import PricesProvider from '../providers/Prices'
import ApolloClientProvider from '../providers/ApolloClientProvider'
import UrqlProvider from '../providers/UrqlProvider'
export default function wrapRootElement({
element
@ -11,11 +11,11 @@ export default function wrapRootElement({
}): ReactElement {
return (
<Web3Provider>
<ApolloClientProvider>
<UrqlProvider>
<UserPreferencesProvider>
<PricesProvider>{element}</PricesProvider>
</UserPreferencesProvider>
</ApolloClientProvider>
</UrqlProvider>
</Web3Provider>
)
}

46
src/providers/UrqlProvider.tsx Normal file
View File

@ -0,0 +1,46 @@
import { createClient, Provider, Client } from 'urql'
import { Logger } from '@oceanprotocol/lib'
import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
import { useWeb3 } from './Web3'
import { getOceanConfig } from '../utils/ocean'
let urqlClient: Client
function createUrqlClient(subgraphUri: string) {
const client = createClient({
url: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`
})
return client
}
export function getUrqlClientInstance(): Client {
return urqlClient
}
export default function UrqlClientProvider({
children
}: {
children: ReactNode
}): ReactElement {
const { networkId } = useWeb3()
const [client, setClient] = useState<Client>()
useEffect(() => {
const oceanConfig = getOceanConfig(networkId || 1)
if (!oceanConfig?.subgraphUri) {
Logger.error(
'No subgraphUri defined, preventing UrqlProvider from initialization.'
)
return
}
const newClient = createUrqlClient(oceanConfig.subgraphUri)
urqlClient = newClient
setClient(newClient)
Logger.log(`[apollo] Client connected to ${oceanConfig.subgraphUri}`)
}, [networkId])
return client ? <Provider value={client}>{children}</Provider> : <></>
}
export { UrqlClientProvider }

43
src/utils/subgraph.ts
View File

@ -1,6 +1,6 @@
import { gql, DocumentNode, ApolloQueryResult } from '@apollo/client'
import { gql, OperationResult, TypedDocumentNode } from 'urql'
import { DDO, BestPrice } from '@oceanprotocol/lib'
import { getApolloClientInstance } from '../providers/ApolloClientProvider'
import { getUrqlClientInstance } from '../providers/UrqlProvider'
import {
AssetsPoolPrice,
AssetsPoolPrice_pools as AssetsPoolPricePools
@ -102,16 +102,13 @@ const HighestLiquidityAssets = gql`
`
async function fetchData(
query: DocumentNode,
query: TypedDocumentNode,
variables: any
): Promise<ApolloQueryResult<any>> {
): Promise<OperationResult> {
try {
const client = getApolloClientInstance()
const response = await client.query({
query: query,
variables: variables,
fetchPolicy: 'no-cache'
})
const client = getUrqlClientInstance()
const response = await client.query(query, variables).toPromise()
console.log('resp == ', response)
return response
} catch (error) {
console.error('Error fetchData: ', error.message)
@ -127,7 +124,7 @@ export async function getPreviousOrders(
id: id,
account: account
}
const fetchedPreviousOrders: ApolloQueryResult<AssetPreviousOrder> =
const fetchedPreviousOrders: OperationResult<AssetPreviousOrder> =
await fetchData(PreviousOrderQuery, variables)
if (fetchedPreviousOrders.data?.tokenOrders?.length === 0) return null
if (assetTimeout === '0') {
@ -195,8 +192,8 @@ async function getAssetsPoolsExchangesAndDatatokenMap(
assets: DDO[]
): Promise<
[
ApolloQueryResult<AssetsPoolPrice>,
ApolloQueryResult<AssetsFrePrice>,
OperationResult<AssetsPoolPrice>,
OperationResult<AssetsFrePrice>,
DidAndDatatokenMap
]
> {
@ -214,11 +211,11 @@ async function getAssetsPoolsExchangesAndDatatokenMap(
datatokenAddress_in: dataTokenList
}
const poolPriceResponse: ApolloQueryResult<AssetsPoolPrice> = await fetchData(
const poolPriceResponse: OperationResult<AssetsPoolPrice> = await fetchData(
PoolQuery,
poolVariables
)
const frePriceResponse: ApolloQueryResult<AssetsFrePrice> = await fetchData(
const frePriceResponse: OperationResult<AssetsFrePrice> = await fetchData(
FreQuery,
freVariables
)
@ -230,14 +227,15 @@ export async function getAssetsPriceList(assets: DDO[]): Promise<PriceList> {
const priceList: PriceList = {}
const values: [
ApolloQueryResult<AssetsPoolPrice>,
ApolloQueryResult<AssetsFrePrice>,
OperationResult<AssetsPoolPrice>,
OperationResult<AssetsFrePrice>,
DidAndDatatokenMap
] = await getAssetsPoolsExchangesAndDatatokenMap(assets)
const poolPriceResponse = values[0]
const frePriceResponse = values[1]
const didDTMap: DidAndDatatokenMap = values[2]
console.log('poolPriceResponse ++ ', poolPriceResponse)
for (const poolPrice of poolPriceResponse.data?.pools) {
priceList[didDTMap[poolPrice.datatokenAddress]] =
poolPrice.consumePrice === '-1'
@ -259,15 +257,16 @@ export async function getPrice(asset: DDO): Promise<BestPrice> {
datatokenAddress: asset?.dataToken.toLowerCase()
}
const poolPriceResponse: ApolloQueryResult<AssetsPoolPrice> = await fetchData(
const poolPriceResponse: OperationResult<AssetsPoolPrice> = await fetchData(
AssetPoolPriceQuerry,
poolVariables
)
const frePriceResponse: ApolloQueryResult<AssetsFrePrice> = await fetchData(
const frePriceResponse: OperationResult<AssetsFrePrice> = await fetchData(
AssetFreQuery,
freVariables
)
console.log('poolPriceResponse 2 -- ', poolPriceResponse)
const bestPrice: BestPrice = transformPriceToBestPrice(
frePriceResponse.data.fixedRateExchanges,
poolPriceResponse.data.pools
@ -282,13 +281,15 @@ export async function getAssetsBestPrices(
const assetsWithPrice: AssetListPrices[] = []
const values: [
ApolloQueryResult<AssetsPoolPrice>,
ApolloQueryResult<AssetsFrePrice>,
OperationResult<AssetsPoolPrice>,
OperationResult<AssetsFrePrice>,
DidAndDatatokenMap
] = await getAssetsPoolsExchangesAndDatatokenMap(assets)
const poolPriceResponse = values[0]
const frePriceResponse = values[1]
console.log('poolPriceResponse 3 || ', poolPriceResponse)
for (const ddo of assets) {
const dataToken = ddo.dataToken.toLowerCase()
const poolPrice: AssetsPoolPricePools[] = []