> ## Documentation Index
> Fetch the complete documentation index at: https://docs.near.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Decentralized Exchanges (DEX)

> Learn how to interact with decentralized exchanges on NEAR Protocol, including token swapping, liquidity pools, and integration with Ref Finance DEX.

export const TryOutOnLantstool = ({path, user = 'lantstool', repo = 'examples.near-protocol', branch = 'main'}) => {
  const lantstoolUrl = `https://app.lantstool.dev/import/gh/${user}/${repo}/${branch}/${path}`;
  const githubUrl = `https://github.com/${user}/${repo}/blob/${branch}/${path}`;
  const [code, setCode] = useState(null);
  function toRaw(ref) {
    const [org, repoName, , branchName, ...pathSeg] = new URL(ref).pathname.split('/').slice(1);
    return `https://raw.githubusercontent.com/${org}/${repoName}/${branchName}/${pathSeg.join('/')}`;
  }
  useEffect(() => {
    const rawUrl = toRaw(githubUrl);
    (async () => {
      try {
        let res;
        const validUntil = typeof window !== 'undefined' && localStorage.getItem(`${rawUrl}-until`);
        if (validUntil && Number(validUntil) > Date.now()) {
          res = localStorage.getItem(rawUrl);
        }
        if (!res) {
          res = await (await fetch(rawUrl)).text();
          if (typeof window !== 'undefined') {
            localStorage.setItem(rawUrl, res);
            localStorage.setItem(`${rawUrl}-until`, String(Date.now() + 60000));
          }
        }
        setCode(res);
      } catch {
        setCode('Error fetching code, please try reloading');
      }
    })();
  }, [githubUrl]);
  return <div>
      <p>
        Try it out on{' '}
        <a href={lantstoolUrl} target="_blank" rel="noopener noreferrer">
          Lantstool
        </a>
      </p>
      <div className="rounded-[0.625rem] border border-[#d0d7de] dark:border-[#30363d] overflow-hidden my-3 text-[0.8125rem] font-mono shadow-sm dark:shadow-[0_4px_24px_rgba(0,0,0,0.18)]">
        <div className="flex items-center gap-2 py-2 px-[0.875rem] bg-[#f6f8fa] dark:bg-[#161b22] border-b border-[#d0d7de] dark:border-[#30363d]">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" className="text-[#656d76] dark:text-[#8b949e]">
            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
          </svg>
          <span className="text-xs font-medium text-[#1f2328] dark:text-[#e6edf3]">
            {githubUrl.split('/').pop()}
          </span>
        </div>
        <div className="overflow-auto max-h-[480px] bg-white dark:bg-[#0d1117] [&_tr]:border-b-0 [&_td]:border-b-0">
          {code === null ? <div className="py-5 px-4 text-xs text-[#656d76] dark:text-[#6e7681]">Loading...</div> : <table className="w-full border-collapse leading-[1.6]">
              <tbody>
                {code.split('\n').map((line, i) => <tr key={i} className="align-top border-0">
                    <td style={{
    minWidth: '60px'
  }} className="select-none pl-2 pr-3 text-right text-[0.7rem] text-[#8c959f] dark:text-[#3d444d] w-[1%] whitespace-nowrap border-r border-0 border-r-[#d0d7de] dark:border-r-[#21262d]">
                      {i + 1}
                    </td>
                    <td className="pl-4 pr-6 text-[0.8125rem] text-[#1f2328] dark:text-[#e6edf3] whitespace-pre">
                      {line || ' '}
                    </td>
                  </tr>)}
              </tbody>
            </table>}
        </div>
      </div>
    </div>;
};

A Decentralized Exchange (DEX) is an application that allows users to trade tokens (native & fungible tokens) through smart contracts.

<img src="https://mintcdn.com/neardocs/qO2GD-gji1aakHqN/assets/docs/primitives/dex.png?fit=max&auto=format&n=qO2GD-gji1aakHqN&q=85&s=eb7bfa850973c81d81190d0d5948fcf0" alt="dex" width="2036" height="435" data-path="assets/docs/primitives/dex.png" />

In brief, DEXs work by having [pools of token pairs](https://guide.rhea.finance/products/overview/pooling) (e.g. NEAR-USDC) that users can deposit tokens into.

The ratio of the tokens in the pool determines the exchange rate for a swap. Indeed, swapping is adding tokens to one side of the pool while removing tokens from the other side of the pool.

<Info>
  This docs refer to [Ref Finance](https://www.ref.finance/), a community built DEX in NEAR.

  Please check their [docs](https://guide.rhea.finance/) for more information.
</Info>

***

## Query Token Exchange Rate

One can query the exchange rate of a token pair by calling the `get-token-price` method on the DEX contract.

<Tabs>
  <Tab title="🌐 WebApp">
    ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
    const tokenContract = 'token.v2.ref-finance.near';
    const tokenPriceResult = await fetch(
      `https://indexer.ref.finance/get-token-price?token_id=${tokenContract}`,
    );
    const tokenPriceValue = await tokenPriceResult.json();
    ```

    <Accordion title="Example response">
      <p>
        ```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
        {
          "token_contract_id": "token.v2.ref-finance.near",
          "price": "0.08153090"
        }
        ```
      </p>
    </Accordion>

    <Tip>
      Ref Finance has a method to [get all token prices at once](https://indexer.ref.finance/list-token-price).
    </Tip>
  </Tab>
</Tabs>

***

## Query Whitelisted Tokens

Anyone list tokens for sale in the DEX. This is why, in order to protect users, the DEX contract has a list of whitelisted tokens that can be traded.

<Tabs>
  <Tab title="🖥️ CLI">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
    near view v2.ref-finance.near get_whitelisted_tokens
    ```

    <Accordion title="Examples Response">
      ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        'wrap.near',
        'usdt.tether-token.near',
        'berryclub.ek.near',
        'farm.berryclub.ek.near',
        'token.v2.ref-finance.near',
        'token.paras.near',
        'marmaj.tkn.near',
        'meta-pool.near',
        ...
      ```
    </Accordion>
  </Tab>

  <Tab title="Lantstool" icon="https://mintcdn.com/neardocs/qO2GD-gji1aakHqN/assets/docs/tools/lantstool-logo-circle.svg?fit=max&auto=format&n=qO2GD-gji1aakHqN&q=85&s=e40405f8a9eda7a97dd89b9cc07a9ca9" width="100" height="100" data-path="assets/docs/tools/lantstool-logo-circle.svg">
    <TryOutOnLantstool path="docs/2.build/5.primitives/dex/whitelist-tokens.json" />

    <Accordion title="Examples Response">
      ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        'wrap.near',
        'usdt.tether-token.near',
        'berryclub.ek.near',
        'farm.berryclub.ek.near',
        'token.v2.ref-finance.near',
        'token.paras.near',
        'marmaj.tkn.near',
        'meta-pool.near',
        ...
      ```
    </Accordion>
  </Tab>
</Tabs>

***

## Register in the DEX

In order to use the contract, make sure to register your account in the DEX by paying for the storage you will use in order to keep track of your balances.

<Tabs>
  <Tab title="🖥️ CLI">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
    near call v2.ref-finance.near storage_deposit '' --useAccount <account> --amount 0.1
    ```
  </Tab>

  <Tab title="Lantstool" icon="https://mintcdn.com/neardocs/qO2GD-gji1aakHqN/assets/docs/tools/lantstool-logo-circle.svg?fit=max&auto=format&n=qO2GD-gji1aakHqN&q=85&s=e40405f8a9eda7a97dd89b9cc07a9ca9" width="100" height="100" data-path="assets/docs/tools/lantstool-logo-circle.svg">
    <TryOutOnLantstool path="docs/2.build/5.primitives/dex/register-dex.json" />
  </Tab>
</Tabs>

***

## Deposit funds

In order to swap tokens, one must first deposit tokens into the DEX. For this, you will need to transfer the FT you want to swap to the DEX contract.

<Tabs>
  <Tab title="🖥️ CLI">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
    near call token.v2.ref-finance.near ft_transfer_call {"receiver_id": "v2.ref-finance.near", "amount": "1000000000000", "msg": ""} --gas 300000000000000 --depositYocto 1 --useAccount <account>
    ```
  </Tab>

  <Tab title="Lantstool" icon="https://mintcdn.com/neardocs/qO2GD-gji1aakHqN/assets/docs/tools/lantstool-logo-circle.svg?fit=max&auto=format&n=qO2GD-gji1aakHqN&q=85&s=e40405f8a9eda7a97dd89b9cc07a9ca9" width="100" height="100" data-path="assets/docs/tools/lantstool-logo-circle.svg">
    <TryOutOnLantstool path="docs/2.build/5.primitives/dex/deposit-funds.json" />
  </Tab>
</Tabs>

<Warning>
  Do **NOT** transfer **NEAR** tokens to Ref Finance. Instead, call `near_deposit` in the [`wrap.near`](https://nearblocks.io/address/wrap.near) contract, attaching the amount of NEAR you want to swap.

  This will mint `wrap.near` for you, which you can then transfer to Ref Finance.
</Warning>

***

## Get Deposit Balances

Query your deposit balances by calling the `get_deposits` method:

<Tabs>
  <Tab title="🌐 WebApp">
    ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
    import { useNearWallet } from "near-connect-hooks";

    const AMM_CONTRACT_ADDRESS = 'v2.ref-finance.near';

    const { viewFunction } = useNearWallet();

    await viewFunction({
      method: 'get_deposits',
      args: {
        account_id: 'bob.near',
      },
      contractId: AMM_CONTRACT_ADDRESS,
    });
    ```

    Learn more about adding [Near Connect](../web3-apps/tutorials/wallet-login) to your application

    <Accordion title="Example response">
      <p>
        ```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
        {
          "token.v2.ref-finance.near": "0",
          "wrap.near": "0"
        }
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="🖥️ CLI">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
    near view v2.ref-finance.near get_deposits '{"account_id": "bob.near"}'
    ```

    <Accordion title="Example response">
      <p>
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        {
          'token.v2.ref-finance.near': '0',
          'wrap.near': "0"
        }
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="Lantstool" icon="https://mintcdn.com/neardocs/qO2GD-gji1aakHqN/assets/docs/tools/lantstool-logo-circle.svg?fit=max&auto=format&n=qO2GD-gji1aakHqN&q=85&s=e40405f8a9eda7a97dd89b9cc07a9ca9" width="100" height="100" data-path="assets/docs/tools/lantstool-logo-circle.svg">
    <TryOutOnLantstool path="docs/2.build/5.primitives/dex/deposit-balance.json" />

    <Accordion title="Example response">
      <p>
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        {
          'token.v2.ref-finance.near': '0',
          'wrap.near': "0"
        }
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="📄 Contract">
    ```rust theme={"theme":{"light":"github-light","dark":"github-dark"}}
    // Validator interface, for cross-contract calls
    #[ext_contract(ext_amm_contract)]
    trait ExternalAmmContract {
    fn get_deposits(&self, account_id: AccountId) -> Promise;
    }

    // Implement the contract structure
    #[near]
    impl Contract {
    #[private] // Public - but only callable by env::current_account_id()
    pub fn external_get_deposits_callback(&self, #[callback_result] call_result: Result<HashMap<AccountId, U128>, PromiseError>) -> Option<HashMap<AccountId, U128>> {
    // Check if the promise succeeded
    if call_result.is_err() {
      log!("There was an error contacting external contract");
      return None;
    }

    // Return the pools data
    let deposits_data = call_result.unwrap();
    return Some(deposits_data);
    }

    pub fn get_contract_deposits(&self) -> Promise {
    let promise = ext_amm_contract::ext(self.amm_contract.clone())
      .get_deposits(env::current_account_id());

    return promise.then( // Create a promise to callback query_greeting_callback
      Self::ext(env::current_account_id())
      .external_get_deposits_callback()
    )
    }
    }
    ```
  </Tab>
</Tabs>

***

### Query Pools

DEXs work by having multiple pools of token pairs (e.g. NEAR-USDC) that users can deposit tokens into.

<Tabs>
  <Tab title="🌐 WebApp">
    ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
    import { useNearWallet } from "near-connect-hooks";

    const AMM_CONTRACT_ADDRESS = 'v2.ref-finance.near';

    const { viewFunction } = useNearWallet();

    await viewFunction({
      method: 'get_pools',
      args: {
        from_index: 0,
        limit: 1000,
      },
      contractId: AMM_CONTRACT_ADDRESS,
    });
    ```

    Learn more about adding [Near Connect](../web3-apps/tutorials/wallet-login) to your application

    <Accordion title="Example response">
      <p>
        ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
        [
          {
            pool_kind: 'SIMPLE_POOL',
            token_account_ids: ['token.skyward.near', 'wrap.near'],
            amounts: ['51865812079751349630100', '6254162663147994789053210138'],
            total_fee: 30,
            shares_total_supply: '1305338644973934698612124055',
            amp: 0,
          },
          {
            pool_kind: 'SIMPLE_POOL',
            token_account_ids: [
              'c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2.factory.bridge.near',
              'wrap.near',
            ],
            amounts: ['783621938569399817', '1100232280852443291118200599'],
            total_fee: 30,
            shares_total_supply: '33923015415693335344747628',
            amp: 0,
          },
        ];
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="🖥️ CLI">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
    near view v2.ref-finance.near get_pools '{"from_index": 0, "limit": 1000}'
    ```

    <Accordion title="Example response">
      <p>
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        [
          {
            pool_kind: 'SIMPLE_POOL',
            token_account_ids: [ 'token.skyward.near', 'wrap.near' ],
            amounts: [ '51865812079751349630100', '6254162663147994789053210138' ],
            total_fee: 30,
            shares_total_supply: '1305338644973934698612124055',
            amp: 0
          },
          {
            pool_kind: 'SIMPLE_POOL',
            token_account_ids: [
              'c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2.factory.bridge.near',
              'wrap.near'
            ],
            amounts: [ '783621938569399817', '1100232280852443291118200599' ],
            total_fee: 30,
            shares_total_supply: '33923015415693335344747628',
            amp: 0
          }
        ]
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="Lantstool" icon="https://mintcdn.com/neardocs/qO2GD-gji1aakHqN/assets/docs/tools/lantstool-logo-circle.svg?fit=max&auto=format&n=qO2GD-gji1aakHqN&q=85&s=e40405f8a9eda7a97dd89b9cc07a9ca9" width="100" height="100" data-path="assets/docs/tools/lantstool-logo-circle.svg">
    <TryOutOnLantstool path="docs/2.build/5.primitives/dex/query-pools.json" />

    <Accordion title="Example response">
      <p>
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        [
          {
            pool_kind: 'SIMPLE_POOL',
            token_account_ids: [ 'token.skyward.near', 'wrap.near' ],
            amounts: [ '51865812079751349630100', '6254162663147994789053210138' ],
            total_fee: 30,
            shares_total_supply: '1305338644973934698612124055',
            amp: 0
          },
          {
            pool_kind: 'SIMPLE_POOL',
            token_account_ids: [
              'c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2.factory.bridge.near',
              'wrap.near'
            ],
            amounts: [ '783621938569399817', '1100232280852443291118200599' ],
            total_fee: 30,
            shares_total_supply: '33923015415693335344747628',
            amp: 0
          }
        ]
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="📄 Contract">
    ```rust theme={"theme":{"light":"github-light","dark":"github-dark"}}
    #[near(serializers = [json])]
    pub struct PoolInfo {
      /// Pool kind.
      pub pool_kind: String,
      /// List of tokens in the pool.
      pub token_account_ids: Vec<AccountId>,
      /// How much NEAR this contract has.
      pub amounts: Vec<U128>,
      /// Fee charged for swap.
      pub total_fee: u32,
      /// Total number of shares.
      pub shares_total_supply: U128,
      pub amp: u64,
    }

    // Validator interface, for cross-contract calls
    #[ext_contract(ext_amm_contract)]
    trait ExternalAmmContract {
      fn get_pools(&self, from_index: u64, limit: u64) -> Promise;
    }

    // Implement the contract structure
    #[near]
    impl Contract {
      #[private] // Public - but only callable by env::current_account_id()
      pub fn external_get_pools_callback(&self, #[callback_result] call_result: Result<Vec<PoolInfo>, PromiseError>) -> Option<Vec<PoolInfo>> {
        // Check if the promise succeeded
        if call_result.is_err() {
          log!("There was an error contacting external contract");
          return None;
        }

        // Return the pools data
        let pools_data = call_result.unwrap();
        return Some(pools_data);
      }

      pub fn get_amm_pools(&self, from_index: u64, limit: u64) -> Promise {
        let promise = ext_amm_contract::ext(self.amm_contract.clone())
          .get_pools(from_index, limit);

        return promise.then( // Create a promise to callback query_greeting_callback
          Self::ext(env::current_account_id())
          .external_get_pools_callback()
        )
      }
    }
    ```
  </Tab>
</Tabs>

***

## Swap tokens

In order to swap a token for another, you need to [have funds](#deposit-funds), and there needs to [**exist a pool**](#query-pools) that has **both tokens** on it.

<Tabs>
  <Tab title="🌐 WebApp">
    ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
    import { useNearWallet } from "near-connect-hooks";

    const AMM_CONTRACT_ADDRESS = 'v2.ref-finance.near';

    const { callFunction } = useNearWallet();

    await callFunction({
      contractId: AMM_CONTRACT_ADDRESS,
      method: 'swap',
      args: {
        actions: [
          {
            pool_id: 79,
            token_in: 'token.v2.ref-finance.near',
            token_out: 'wrap.near',
            amount_in: '100000000000000000',
            min_amount_out: '1',
          },
        ],
      },
      gas: 300000000000000,
      deposit: 1,
    });
    ```

    Learn more about adding [Near Connect](../web3-apps/tutorials/wallet-login) to your application

    <Accordion title="Example response">
      ```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
      "5019606679394603179450"
      ```
    </Accordion>
  </Tab>

  <Tab title="🖥️ CLI">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
    near call v2.ref-finance.near swap "{\"actions\": [{\"pool_id\": 79, \"token_in\": \"token.v2.ref-finance.near\", \"amount_in\": \"100000000000000000\", \"token_out\": \"wrap.near\", \"min_amount_out\": \"1\"}]}" --gas 300000000000000 --depositYocto 1
    --useAccount bob.near
    ```

    <Accordion title="Example response">
      <p>
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        '5019606679394603179450'
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="Lantstool" icon="https://mintcdn.com/neardocs/qO2GD-gji1aakHqN/assets/docs/tools/lantstool-logo-circle.svg?fit=max&auto=format&n=qO2GD-gji1aakHqN&q=85&s=e40405f8a9eda7a97dd89b9cc07a9ca9" width="100" height="100" data-path="assets/docs/tools/lantstool-logo-circle.svg">
    <TryOutOnLantstool path="docs/2.build/5.primitives/dex/swap-tokens.json" />

    <Accordion title="Example response">
      <p>
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
        '5019606679394603179450'
        ```
      </p>
    </Accordion>
  </Tab>

  <Tab title="📄 Contract">
    ```rust theme={"theme":{"light":"github-light","dark":"github-dark"}}
    #[near(serializers = [json])]
    pub struct SwapAction {
        /// Pool which should be used for swapping.
        pub pool_id: u64,
        /// Token to swap from.
        pub token_in: AccountId,
        /// Amount to exchange.
        /// If amount_in is None, it will take amount_out from previous step.
        /// Will fail if amount_in is None on the first step.
        pub amount_in: Option<U128>,
        /// Token to swap into.
        pub token_out: AccountId,
        /// Required minimum amount of token_out.
        pub min_amount_out: U128,
    }

    // Validator interface, for cross-contract calls
    #[ext_contract(ext_amm_contract)]
    trait ExternalAmmContract {
      fn swap(&self, actions: Vec<SwapAction>) -> Promise;
    }

    // Implement the contract structure
    #[near]
    impl Contract {
      #[private] // Public - but only callable by env::current_account_id()
      pub fn external_call_callback(&self, #[callback_result] call_result: Result<String, PromiseError>) {
        // Check if the promise succeeded
        if call_result.is_err() {
          log!("There was an error contacting external contract");
        }
      }

      #[payable]
      pub fn swap_tokens(&mut self, pool_id: u64, token_in: AccountId, token_out: AccountId, amount_in: U128, min_amount_out: U128) -> Promise {
        assert_eq!(env::attached_deposit(), 1, "Requires attached deposit of exactly 1 yoctoNEAR");

        let swap_action = SwapAction {
          pool_id,
          token_in,
          token_out,
          amount_in: Some(amount_in),
          min_amount_out
        };

        let mut actions = Vec::new();
        actions.push(swap_action);

        let promise = ext_amm_contract::ext(self.amm_contract.clone())
          .with_static_gas(Gas(150*TGAS))
          .with_attached_deposit(YOCTO_NEAR)
          .swap(actions);

        return promise.then( // Create a promise to callback query_greeting_callback
          Self::ext(env::current_account_id())
          .with_static_gas(Gas(100*TGAS))
          .external_call_callback()
        )
      }
    }
    ```
  </Tab>
</Tabs>

***

## Additional Resources

1. [Claim Fungible Tokens from Lockup](https://near.org/near/widget/ComponentDetailsPage?src=whtt.near/widget/Draft-0) - the example how to claim locked tokens from the `lockup.burrow.near` contract.
2. [BSC Dex Collection](https://near.org/near/widget/ComponentDetailsPage?src=bluebiu.near/widget/Bsc.Swap.Dex) - the example of how to build simple swap page for a DEX.
