From 777ee202f6181d8843a8375af14680d73616f207 Mon Sep 17 00:00:00 2001 From: HoangVD2 <102846781+HoangVD2@users.noreply.github.com> Date: Fri, 26 Apr 2024 15:41:02 +0700 Subject: [PATCH] merge: release 26/04 (#42) * feat: add Chatbase.co (#35) * feat: add Chatbase.co * chore: update Chatbot ID * chore: remove get Transactions indexers API * docs: add content for Chains Lib Documentation * chore * Update chains-lib.md * chore: edit page Extension Wallet Terra Integration (#40) * docs: add documentation for new assets query (#41) --------- Co-authored-by: dp <25910069+davidp94@users.noreply.github.com> --- assets-services/assets-and-prices-api.md | 312 ++++++++++++++++++++++- components/AssetsCrypto.jsx | 100 ++++++++ components/AssetsSupportedChains.jsx | 75 ++++++ components/AssetsTokens.jsx | 2 +- components/AssetsTrendingTokens.jsx | 146 +++++++++++ developers/extension-terra.md | 6 +- 6 files changed, 630 insertions(+), 11 deletions(-) create mode 100644 components/AssetsCrypto.jsx create mode 100644 components/AssetsSupportedChains.jsx create mode 100644 components/AssetsTrendingTokens.jsx diff --git a/assets-services/assets-and-prices-api.md b/assets-services/assets-and-prices-api.md index 75397185b..cefef09a0 100644 --- a/assets-services/assets-and-prices-api.md +++ b/assets-services/assets-and-prices-api.md @@ -125,6 +125,47 @@ getAssetsTokens();
+## Get Assets Supported Chains + +Get Assets Supported Chains provides information about the supported chains for assets on the platform. The API return a list of supported chains, including Ethereum, Binance Smart Chain, Solana, and others. + +[Query GraphQL directly here](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABAMowAO5EeKCYAwgBYCGAlkgM5HAA6SRRZhw4IUXXvwFEOFKjTpM2nPgIC%2BfVSAA0IAG7M8rZgCMANgg4YQ2kIwTMw%2BS5htUOKAGanWAc0YoAeXJ8ZhRWCCQSKENyNBdVIA) + +::: code-group + +```javascript [Example] +const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; +const query = ` + query SupportedChains { + assets { + supportedChains + } + }`; + +const getSupportedChains = async () => { + await fetch(GRAPHQL_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query, + }), + }) + .then((response) => response.json()) + .then((result) => { + console.log(result); + // Handle the result + }); +}; + +getSupportedChains(); +``` + +::: + +
+ ## Get Assets Crypto Currencies Get Assets Crypto Currencies provides information about cryptocurrencies on various blockchains, including Ethereum, Binance Smart Chain, and Solana. The API returns data such as the cryptocurrency's name, symbol, icon, type, external data, scaling factor, chain, market cap, and price. @@ -225,6 +266,85 @@ getCryptoCurrencies();
+## Get Crypto Assets + +Get Crypto Assets provides information about crypto assets on various blockchains, including Ethereum, Binance Smart Chain, and Solana. The API returns data such as the crypto asset's name, symbol, icon, type, external data, scaling factor, chain, market cap, and price. + +[Query GraphQL directly here](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABAMKEAOKEAggM60Iq0AUAJAJZLkwrpEDaZApRr1G1PAHNaAQgC6MgJRFgAHSREiAQzFMV6zZqgUqdBk2aduvIhy49lajYaMALLZwMuiUCKjxaUCheLmAIUOxwWgA2tCGG7GDxmpFakgjJREhaiJnkeOxQCPrO3kS0UDGckgBigVR4mZq05Fp4ANbRnBml3jkQMKiZAL6ZtARwAEYQ0Zkowj0uo87LwyAANCAAbm3sWpPRCLQYIE6aqiBWPBd8-PFn3hdQ7p4YRBcAoiiu%2BAjwF-Flpo5Oo1psflownhjpgNiByBBaCgAGZdSSuFAAeXI%2BC0KHYfgAysZ2JQTiBhkA) + +Chains supported in [Get Assets Supported Chains](#get-assets-supported-chains) + +::: code-group + +```javascript [Example] +const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; +const query = ` + query CryptoAssets($input: [CryptoAssetArgs!]!) { + assets { + cryptoAssets(input: $input) { + chain + contract + decimals + id + image + name + price { + scalingFactor + amount + } + symbol + type + } + } +}`; + +const vars = { + input: [ + { + chain: "Bitcoin", // [!code highlight] + }, + { + chain: "Ethereum", // [!code highlight] + }, + ], +}; + +const getCryptoAssets = async () => { + await fetch(GRAPHQL_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query, + variables: vars, + }), + }) + .then((response) => response.json()) + .then((result) => { + console.log(result); + // Handle the result + }); +}; + +getCryptoAssets(); +``` + +```js [Variables] +{ + input: [ + { + chain: String, + }, + ... + ] +} +``` + +::: + +
+ ## Get Assets Fiat Currencies Get Assets Fiat Currencies provides information about fiat currencies on various blockchains, including Ethereum, Binance Smart Chain, and Solana. The API returns data such as the fiat currency's name, symbol, scaling factor, character, and price. @@ -268,14 +388,14 @@ const query = ` const vars = { page: { - first: 5, - after: null, + first: 5, // [!code highlight] + after: null, // [!code highlight] }, filter: { - ids: null, + ids: null, // [!code highlight] }, - after: null, - afterPrice: null, + after: null, // [!code highlight] + afterPrice: null, // [!code highlight] }; const getFiatCurrencies = async () => { @@ -317,6 +437,170 @@ getFiatCurrencies();
+## Get Trending Tokens + +Get Trending Tokens provides information about trending tokens Top Market Cap/Gainers/Losers. The API returns data such as the token's symbol, scaling factor, address, chain, fees, defi protocols, and external data. + +### Get Top Market Cap Tokens + +[Query GraphQL directly here](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABACoQAOAsgIZ4DWCKAwteUcADpJFHUDOfRn3ZcePFBRr1GLNp25ie-QSgCSYUYqJQAFtQCWSPpsVJqiE2PJ59UBCIVbecCDFSXFfKNQA2hgOYAYtRQEngeYnC0DMysAErUSHQRPGAGPgQAEvr%2BOilEafoZADIQAO75vj4k%2BoilFY5aVTWI2bkRAL4RfARwAEYQPhEoBOQIll0Kkx0gADQgAG60%2BtR9Pgh8GCBzIDoI1GD4m5g75BB8KABmfrkoAPJjeNQo%2BhBIAMpQNuRoJx1AA) + +::: code-group + +```javascript [Example] +const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; + +const query = `query TopMarketCap { + assets { + topMarketCap { + assetId + chains + name + price { + amount + scalingFactor + marketCapRank + dailyHigh + dailyLow + allTimeLow + allTimeHigh + } + symbol + type + } + } +}`; + +const getTopMarketCapTokens = async () => { + await fetch(GRAPHQL_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query, + }), + }) + .then((response) => response.json()) + .then((result) => { + console.log(result); + // Handle the result + }); +}; + +getTopMarketCapTokens(); +``` + +::: + +
+ +### Get Gainers Tokens + +[Query GraphQL directly here](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABADIQDO%2B5RwAOkkUQIbmUrV0ONEA2FVNet24s2ASTBDhRKAAsmASyTkpwpE0SruABzwKoCQV2nM4EGKi3DyUJjyUBzAGJMoKCHitEAvl-IE4ACMIHi8UAm0ELV8uGO8QABoQADcmPSZAngRyDBBEkFkEJjAqXPztChQAM3sHWRQAeUi8JhQFCCQAZSg9bTRMEG8gA) + +::: code-group + +```javascript [Example] +const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; + +const query = `query Gainers { + assets { + gainers { + assetId + chains + name + price { + amount + scalingFactor + dailyHigh + dailyLow + allTimeLow + allTimeHigh + } + symbol + type + } + } +}`; + +const getGainersTokens = async () => { + await fetch(GRAPHQL_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query, + }), + }) + .then((response) => response.json()) + .then((result) => { + console.log(result); + // Handle the result + }); +}; + +getGainersTokens(); +``` + +::: + +
+ +### Get Losers Tokens + +[Query GraphQL directly here](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABAOICGAlkvgM5HAA6SRRZNNCKdjzLRA5pWp5uTPnzYcUASTBjxRKAAshNeeKRlE6vgAc8FKAno7xWiDFSm%2BNKGQA2VfgDEyUFBDzWAvtZoE4ACMIe2sUAl0EHV9eGO8QABoQADcyAzJA%2BwQaDBBEkCUEMjBaXPzdCBoUADNHfiUUAHlIvDIUCggkAGUoA100TBBvIA) + +::: code-group + +```javascript [Example] +const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; + +const query = `query Losers { + assets { + losers { + assetId + chains + name + price { + amount + scalingFactor + dailyHigh + dailyLow + allTimeLow + allTimeHigh + } + symbol + type + } + } +}`; + +const getLosersTokens = async () => { + await fetch(GRAPHQL_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query, + }), + }) + .then((response) => response.json()) + .then((result) => { + console.log(result); + // Handle the result + }); +}; + +getLosersTokens(); +``` + +::: + +
+ ## Get LP Tokens Get LP Tokens is fully the same structure as Get Assets Tokens but it’s like "Low Priority" tokens. The API returns data such as the LP token's symbol, scaling factor, address, chain, fees, defi protocols and external data. @@ -548,23 +832,41 @@ import { createRoot } from 'react-dom/client' import { ref, onMounted } from 'vue' import AssetsTokens from '../components/AssetsTokens.jsx' +import AssetsSupportedChains from '../components/AssetsSupportedChains.jsx' import AssetsCryptoCurrencies from '../components/AssetsCryptoCurrencies.jsx' +import AssetsCrypto from '../components/AssetsCrypto.jsx' import AssetsFiatCurrencies from '../components/AssetsFiatCurrencies.jsx' +import AssetsTrendingTokens from '../components/AssetsTrendingTokens.jsx' import AssetsLPTokens from '../components/AssetsLPTokens.jsx' import SubscriptionService from '../components/SubscriptionService.jsx' const refAssetsTokens = ref() +const refAssetsSupportedChains = ref() const refAssetsCryptoCurrencies = ref() const refAssetsFiatCurrencies = ref() +const refAssetsCrypto = ref() +const refAssetsTrendingTopMarket = ref() +const refAssetsTrendingGainers = ref() +const refAssetsTrendingLosers = ref() const refAssetsLPTokens = ref() const refSubscriptionService = ref() onMounted(() => { const rootAssetsTokens = createRoot(refAssetsTokens.value) rootAssetsTokens.render(createElement(AssetsTokens, {}, null)) + const rootAssetsSupportedChains = createRoot(refAssetsSupportedChains.value) + rootAssetsSupportedChains.render(createElement(AssetsSupportedChains, {}, null)) const rootAssetsCryptoCurrencies = createRoot(refAssetsCryptoCurrencies.value) rootAssetsCryptoCurrencies.render(createElement(AssetsCryptoCurrencies, {}, null)) const rootAssetsFiatCurrencies = createRoot(refAssetsFiatCurrencies.value) rootAssetsFiatCurrencies.render(createElement(AssetsFiatCurrencies, {}, null)) + const rootAssetsCrypto = createRoot(refAssetsCrypto.value) + rootAssetsCrypto.render(createElement(AssetsCrypto, {}, null)) + const rootAssetsTrendingTopMarket = createRoot(refAssetsTrendingTopMarket.value) + rootAssetsTrendingTopMarket.render(createElement(AssetsTrendingTokens, { type: 'top' }, null)) + const rootAssetsTrendingGainers = createRoot(refAssetsTrendingGainers.value) + rootAssetsTrendingGainers.render(createElement(AssetsTrendingTokens, { type: 'gainers' }, null)) + const rootAssetsTrendingLosers = createRoot(refAssetsTrendingLosers.value) + rootAssetsTrendingLosers.render(createElement(AssetsTrendingTokens, { type: 'losers' }, null)) const rootAssetsLPTokens = createRoot(refAssetsLPTokens.value) rootAssetsLPTokens.render(createElement(AssetsLPTokens, {}, null)) const rootSubscriptionService = createRoot(refSubscriptionService.value) diff --git a/components/AssetsCrypto.jsx b/components/AssetsCrypto.jsx new file mode 100644 index 000000000..85687a063 --- /dev/null +++ b/components/AssetsCrypto.jsx @@ -0,0 +1,100 @@ +import React, { useState } from 'react'; +import LoadingIcon from './LoadingIcon'; +import PlayIcon from './PlayIcon'; + +const AssetsCrypto = () => { + const GRAPHQL_ENDPOINT = 'https://gql-router.xdefi.services/graphql'; + const [response, setResponse] = useState({}); + const [loading, setLoading] = useState(false); + + const query = ` + query CryptoAssets($input: [CryptoAssetArgs!]!) { + assets { + cryptoAssets(input: $input) { + chain + contract + decimals + id + image + name + price { + scalingFactor + amount + } + symbol + type + } + } + }`; + + const vars = { + input: [ + { + chain: "Bitcoin", + }, + { + chain: "Ethereum", + }, + ], + }; + + const getAssetsCrypto = async () => { + setLoading(true); + setResponse({}); + + await fetch(GRAPHQL_ENDPOINT, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query, + variables: vars, + }), + }) + .then((response) => response.json()) + .then((result) => { + setResponse(result); + }) + .catch((error) => { + setResponse(error); + }) + .finally(() => { + setLoading(false); + }); + }; + + return ( + <> +
+ +
+
+
+ + Response + +
+ 
{JSON.stringify(response, null, 2)}
+
+ + ); +}; + +export default AssetsCrypto; diff --git a/components/AssetsSupportedChains.jsx b/components/AssetsSupportedChains.jsx new file mode 100644 index 000000000..b7ca4ff86 --- /dev/null +++ b/components/AssetsSupportedChains.jsx @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; +import LoadingIcon from './LoadingIcon'; +import PlayIcon from './PlayIcon'; + +const AssetsSupportedChains = () => { + const GRAPHQL_ENDPOINT = 'https://gql-router.xdefi.services/graphql'; + const [response, setResponse] = useState({}); + const [loading, setLoading] = useState(false); + + const query = ` + query SupportedChains { + assets { + supportedChains + } + }`; + + const getAssetsSupportedChains = async () => { + setLoading(true); + setResponse({}); + + await fetch(GRAPHQL_ENDPOINT, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query, + }), + }) + .then((response) => response.json()) + .then((result) => { + setResponse(result); + }) + .catch((error) => { + setResponse(error); + }) + .finally(() => { + setLoading(false); + }); + }; + + return ( + <> +
+ +
+
+
+ + Response + +
+ 
{JSON.stringify(response, null, 2)}
+
+ + ); +}; + +export default AssetsSupportedChains; diff --git a/components/AssetsTokens.jsx b/components/AssetsTokens.jsx index dff41d1fa..328a7475e 100644 --- a/components/AssetsTokens.jsx +++ b/components/AssetsTokens.jsx @@ -116,7 +116,7 @@ const AssetsTokens = () => { Response
- 
{JSON.stringify(response, null, 2)}
+ 
{JSON.stringify(response, null, 2)}
); diff --git a/components/AssetsTrendingTokens.jsx b/components/AssetsTrendingTokens.jsx new file mode 100644 index 000000000..975d2b647 --- /dev/null +++ b/components/AssetsTrendingTokens.jsx @@ -0,0 +1,146 @@ +import React, { useState } from 'react'; +import LoadingIcon from './LoadingIcon'; +import PlayIcon from './PlayIcon'; + +const AssetsTrendingTokens = ( + { type } +) => { + const GRAPHQL_ENDPOINT = 'https://gql-router.xdefi.services/graphql'; + const [response, setResponse] = useState({}); + const [loading, setLoading] = useState(false); + + const topMarketCapQuery = `query TopMarketCap { + assets { + topMarketCap { + assetId + chains + name + price { + amount + scalingFactor + marketCapRank + dailyHigh + dailyLow + allTimeLow + allTimeHigh + } + symbol + type + } + } + }`; + + const gainerQuery = `query Gainers { + assets { + gainers { + assetId + chains + name + price { + amount + scalingFactor + dailyHigh + dailyLow + allTimeLow + allTimeHigh + } + symbol + type + } + } + }`; + + const loserQuery = `query Losers { + assets { + losers { + assetId + chains + name + price { + amount + scalingFactor + dailyHigh + dailyLow + allTimeLow + allTimeHigh + } + symbol + type + } + } + }`; + + const getAssetsTrendingTokens = async () => { + let query = `` + + switch (type) { + case 'gainers': + query = gainerQuery; + break; + case 'losers': + query = loserQuery; + break; + default: + query = topMarketCapQuery; + break; + + } + + setLoading(true); + setResponse({}); + + await fetch(GRAPHQL_ENDPOINT, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query: query, + }), + }) + .then((response) => response.json()) + .then((result) => { + setResponse(result); + }) + .catch((error) => { + setResponse(error); + }) + .finally(() => { + setLoading(false); + }); + }; + + return ( + <> +
+ +
+
+
+ + Response + +
+ 
{JSON.stringify(response, null, 2)}
+
+ + ); +}; + +export default AssetsTrendingTokens; diff --git a/developers/extension-terra.md b/developers/extension-terra.md index cfb00e71e..7f0ca54e6 100644 --- a/developers/extension-terra.md +++ b/developers/extension-terra.md @@ -1,7 +1,3 @@ # Extension Wallet Terra Integration -Develop Terra dApps - -_In progress_ - -_Should we keep it ?_ +Unmaintained and deprecated for Terra. Please consider using alternative solutions.