diff --git a/.vitepress/config.ts b/.vitepress/config.ts index b36bc564c..58dca8ee5 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -652,11 +652,6 @@ export default { text: '🔹 Query and Mutation details', link: '/routing/query-mutation-details', }, - { text: '🔹 Swap example', link: '/routing/swap-example' }, - { - text: '🔹 Swap Widget', - link: '/swap-widget/widget-integration', - }, ], }, { diff --git a/about/xdefi-token/buy-xdefi.md b/about/xdefi-token/buy-xdefi.md index eb4923826..2570f6f0a 100644 --- a/about/xdefi-token/buy-xdefi.md +++ b/about/xdefi-token/buy-xdefi.md @@ -6,9 +6,6 @@ - [Ctrl Wallet](https://chrome.google.com/webstore/detail/xdefi-wallet/hmeobnfnfcmdkdcmlblgagmfpfboieaf) - [Ctrl Web App](https://ctrl.xyz/) - ::: info - You can implement our Routing API to easy swap any asset into **$XDEFI**. Follow [our documentation](/swap-widget/widget-integration) to implement it on any platform in few lines of code. - ::: ## DEX diff --git a/routing/introduction.md b/routing/introduction.md index be4671c96..5b18fd751 100644 --- a/routing/introduction.md +++ b/routing/introduction.md @@ -17,7 +17,6 @@ _Comprehensive description of the routing service and its endpoints_ - [Endpoints](./endpoints) - [Routing Graph QL API](./routing-graph-ql-api) - [Query and Mutation details](./query-mutation-details) -- [Step by step Swap example](./swap-example) ## Introduction diff --git a/routing/query-mutation-details.md b/routing/query-mutation-details.md index edfb1a39e..60157f036 100644 --- a/routing/query-mutation-details.md +++ b/routing/query-mutation-details.md @@ -7,7 +7,6 @@ _Deep-dive into our Graph QL schema_ In the [previous section](./routing-graph-ql-api), we saw an overview of queries and mutations publicly available. Here we'll zoom into each one of them and present their inputs and outputs and also show some usage examples. -A step-by-step full example of how routing works is available in the [next section](./swap-example). ### chainsV2 & chainV2 @@ -20,8 +19,8 @@ const ENDPOINT = "https://routingapi.xdefiservices.com/"; const fetchChainsV2 = async () => { fetch(ENDPOINT + "chains") - .then((response) => response.json()) - .then((result) => { + .then(response => response.json()) + .then(result => { console.log(result); }); }; @@ -101,8 +100,8 @@ const fetchTokenV2 = async () => { variables: vars, }), }) - .then((response) => response.json()) - .then((result) => { + .then(response => response.json()) + .then(result => { console.log(result); }); }; @@ -153,8 +152,8 @@ const fetchTokensV2 = async () => { variables: vars, }), }) - .then((response) => response.json()) - .then((result) => { + .then(response => response.json()) + .then(result => { console.log(result); }); }; @@ -360,8 +359,8 @@ const fetchAddressCheckV2 = async () => { variables: vars, }), }) - .then((response) => response.json()) - .then((result) => { + .then(response => response.json()) + .then(result => { console.log(result); }); }; @@ -425,8 +424,8 @@ const fetchReferrerSummary = async () => { query: query, }), }) - .then((response) => response.json()) - .then((result) => { + .then(response => response.json()) + .then(result => { console.log(result); }); }; @@ -483,8 +482,8 @@ const fetchDailyVolume = async () => { variables: vars, }), }) - .then((response) => response.json()) - .then((result) => { + .then(response => response.json()) + .then(result => { console.log(result); }); }; @@ -616,8 +615,8 @@ const fetchClaimFees = async () => { query: query, }), }) - .then((response) => response.json()) - .then((result) => { + .then(response => response.json()) + .then(result => { console.log(result); }); }; diff --git a/routing/swap-example.md b/routing/swap-example.md deleted file mode 100644 index 362a42832..000000000 --- a/routing/swap-example.md +++ /dev/null @@ -1,266 +0,0 @@ -# Step-by-step Swap example - -[[toc]] - -## Swap Avalanche (AAVE) for Avalanche (USDT) - -This particular route (swap) consists of two transactions. However, the number of transactions required for swapping different coins and across different chains may vary and depend on several factors such as the source coin, the destination coin, and the number of available addresses for signing transactions. - -### Step 1 - -In this step, we prepare the data for the chains and assets that our routing system supports. This data enables us to display the source and destination tokens to users and query and display swap route in the next step. - -#### 1.1 Get list of supported chains - -[Explorer query ChainsV2](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABAMIAWAhgJZIDOAagExHAA6SRReEMKNA5kxbtOnKJRoNmbDqM5IKiEaIC%2BytUhUgVQA) - -```js -const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; -const query = ` -query ChainsV2 { - routingV2 { - chainsV2 { - name, - } - } -}`; -const fetchChainsV2 = 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) => { - console.log(result); - }); -}; - -fetchChainsV2(); -``` - -
- -#### 1.2 Get list of assets for supported chain - -[Explorer query ChainV2](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABAMIAWAhgJZIBqATABQAkSFi6RAyinjQOYBCAJRFgAHSREieCDBQCGYydOlRKNBozYcirdglESpq6ToQrTRFBADWyAM7KTVohQcOEKZ69NQIqHgUUCiWvkQOBHAARhAANmFWAL6J0ikuROlpkkkgADQgAG4UfBTRcQgOGCDG0uIg5vWc9QCCtC0AGvU5IElAA) - -```js -const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; -const query = ` -query ChainV2($name: String!) { - routingV2 { - chainV2(name: $name) { - name - tokens { - asset { - contract - symbol - } - } - } - } -}`; -const vars = { - name: "ETH", -}; -const fetchChainV2 = 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); - }); -}; - -fetchChainV2(); -``` - -In demo we use `ETH` as a chain name. - -
- -### Step 2 - -Query swap route. This query returns a `tradesRoute` collection, along with other properties. Based on this data, we can show the user which providers we will use, the amount of fees in dollars and assets for each transaction, and thus calculate the total fees and approximate transaction time in seconds. - -[Explorer query RouteV2](https://gql-router.xdefi.services/graphql?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABAEoQwoIBqATABQAkAznlACoQDWy6RAyijwBLJAHMAhABoiDMAiYoO3JLwHCxUmUwA2QgA56AhqISrBIidIaGwYPPKbzeAbQCCt%2B0yZkKCAJJIehRsBHrUNOIAupqy8ijudg5m6pYyhnDkqHzkrKb85mJWIgBmIkKUrgZ4EABuhtq8AEIQENoIhkgAlETAADpIRETVFBa0Pf2Dg8OUtHQs7Fw8WqxKyNJyCqsqMhuKi0jSOvpGJrzMugbGCNI2iV5OaR4O8utxCZ5MZ7vvDjcZMFkclA8tZ-oCYLlpCUyhUqrV6mdoUhyghKnpqnVtN0%2BgNJoNbh95ONcXjBlAABaGEQTUn4p5eGl4gC%2BjMm33pTFZg3RQmBJEMlC5RB5fIFCDYCAAHighUdLiYhSL-HAjFAZSTJulMigAkLBDZ5D5KMTadyMUI5HgTabBhahYMWRq8VqATqkPaiC7UAB5CgeuAiVxglAkBDAoQ1BBgD2Ge5u602u1OyaOm2xxwoX0oBOmpM21Om4oIBA52lIBAoADuEDwnAAYsWACKtbSGPAewblqs1%2BvF1xxjtEEQAI0yYAbCGb2lb7eTeJHY4n-Yzg6YlcMegng6LCH5lDYeA6TEMaqEEHdc8mkrkpT4683xcH14Qt-vE6nM49BdpSr3CAAqkwYDLhWWYer%2BYqAcBca6pe%2BpyCEYRCt%2BkyiLGAAKwjApyyYbui8LaAEpTIpQdatqIQr4NUeCNDAQjaGAFhGggrIFo6TIgJIIB1MIhjDm0TAYCAOKDL0IDzFsYm8GJrhUK4AAaAB0AAMkoAGwAMyGAA7DQAAcylqcpACcenDmAGlgMZACsNDKVAUAACwaRp1lqbY2l6YYRbWRZenucZYmSDSYm7JJGBEDJclKapUDaQAjKZznaaZ9nKY58VQAZ1mGPFUZQMOhjWfZmUIL5w42fF8V6UFIXiRcJwsRFYnxbVuJiQSzychFzgiaaYkUlS7rNSAskKW1NodRyUmRSAqnWRpNDGQgw4AMLWcZykacOACi8WrUVjmOdpak0Il8Uac5dZGTtjbDtZq3GQdGliaxkTBe14BvNNI3zYty1rRtW27fth3Had52XRp13Kbd92Pc9E2zV6KDZBCwIzWJymKTQL2cXVSIomiGL1DNSAwNO-QcUyQA) - -::: code-group - -```ts [JavaScript] -const GRAPHQL_ENDPOINT = "https://gql-router.xdefi.services/graphql"; -const query = ` -query RouteV2($srcToken: String!, $destToken: String!, $slippage: String!, $addresses: [AddressRouteInputTypeV2!]!, $destAddress: String!, $amountSource: String, $infiniteApproval: Boolean) { - routingV2 { - routeV2(srcToken: $srcToken, destToken: $destToken, slippage: $slippage, addresses: $addresses, destAddress: $destAddress, amountSource: $amountSource, infiniteApproval: $infiniteApproval) { - addresses { - chain - address - } - destAddress - priceRate - priceRateText - slippage - priceImpact - amountIn - tradesRoute { - provider { - id - } - amountIn - amountOut - minAmountReceived - assetIn { - id - } - assetOut { - id - } - fee { - networkFeeDollar - networkFeeAsset - inboundFeeDollar - inboundFeeAsset - swapFee - feeRateTransaction - xdefiSwapFee - xdefiSwapFeeDollar - } - priceRateUsdAssetOut - priceRateUsdAssetIn - tradeType - } - gasPrices - approvalInfiniteFlag - errorBuildingRoute - } - } -}`; -const vars = { - srcToken: "AVAX.0x63a72806098bd3d9520cc43356dd78afe5d386d9", - destToken: "AVAX.0xc7198437980c041c805a1edcba50c1ce5db95118", - slippage: "1", - addresses: [ - { - chain: "AVAX", - address: "0x5329ebC5903bE1Ca544762191343F60EDb5C9Ca3", - }, - ], - destAddress: "0x5329ebC5903bE1Ca544762191343F60EDb5C9Ca3", - amountSource: "0.23", - infiniteApproval: null, -}; - -const fetchRouteV2 = 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); - }); -}; - -fetchRouteV2(); -``` - -```js [Variables] -{ - "srcToken": "AVAX.0x63a72806098bd3d9520cc43356dd78afe5d386d9", - "destToken": "AVAX.0xc7198437980c041c805a1edcba50c1ce5db95118", - "slippage": "1", - "addresses": [ - { - "chain": "AVAX", - "address": "0x5329ebC5903bE1Ca544762191343F60EDb5C9Ca3" - }, - ], - "destAddress": "0x5329ebC5903bE1Ca544762191343F60EDb5C9Ca3", - "amountSource": "0.23", - "infiniteApproval": null -} -``` - -```ts [Snippets] -enum TradeType { - APPROVAL = "APPROVAL", - BRIDGE = "BRIDGE", - REDEEM = "REDEEM", - SWAP = "SWAP", -} -``` - -::: - -
- -**Variables:** - -- `chainName`: This variable is obtained from step [1.1](#1.1-get-list-of-supported-chains). -- `contract`: This variable is obtained from step [1.2](#1.2-get-list-of-assets-for-supported-chain. -- `srcToken`: This variable has the format `${chainName}.${contract} and represents the token to be swapped. -- `destToken`: This variable also has the format `${chainName}.${contract}` and represents the token to receive in exchange. -- For native tokens, the format is `${chainName}.${nativeTokenName}`. For example, Ethereum's native token is "ETH", so the format would be "ETH.ETH". For Polygon, it's "POLYGON.MATIC", and for Binance Smart Chain, it's "BSC.BNB". -- `slippage`: This variable represents the percentage of slippage tolerance for the trade. -- `addresses`: This variable is a collection of addresses available to sign transactions. For this swap, we only need one, as the trade takes place within the Avalanche chain. -- `destAddress`: This variable represents the address that will receive the swapped Avalanche (USDT) upon completion of the trade. -- `amountSource`: This variable represents the amount of Avalanche (AAVE) to be swapped. -- `infiniteApproval`: Using this prop is not mandatory, but it allows users to avoid approving trades when swapping ERC20 tokens. However, it's important to note that the first approval still needs to be granted. - -**Response:** - -- `networkFeeDollar`: Provider fee. 1Inch in example. -- `networkFeeAsset`: Provider fee in asset value. -- `inboundFeeDollar`: Network fee for transaction. Cost of Avalanche transaction. -- `inboundFeeAsset`: Network fee for transaction in native token. AVAX in example. - -**Snippets:** - -- Enum describes all possible values for `tradeType` property from the response. - - diff --git a/swap-widget/widget-integration.md b/swap-widget/widget-integration.md deleted file mode 100644 index 620fff312..000000000 --- a/swap-widget/widget-integration.md +++ /dev/null @@ -1,32 +0,0 @@ -# Swap Widget - -## Overview - -This documentation provides instructions for web developers to seamlessly integrate our swap widget into their webpages using an iframe. - -## Prerequisites - -Before integrating the widget, ensure that you have the following: - -- Access to the HTML of the page you will be adding the widget to -- Your referral codes generated and accessible. - -## Instructions - -Adding the swap widget is really simple. Just add the following iframe code to the HTML of your webpage where you want the widget to appear. - -Remember to replace the placeholder with your referral code. - -```html - -``` - -## Configuration - -You can configure the width and height of the widget to fit your page content by adjusting the width and height parameters in the iframe tag.