[Intern] Range api 트랜잭션 반환 데이터 확인 / 해시값 조회시 출발 및 도착 체인 정보 반환하도록 구현

✏ 근무 내용

• range api 사용해 프론트 연동 개발

 

 

⭐근무 결과

[range api 활용해 개발]

파라미터로 해시값만 넣었을 때 원하는 데이터가 모두 조회된다!

https://usdc.range.org/usdc/api/transfers?txHash=&txnType=MAINNET&limit=5&txHash=0x33a6efd2d5dc0b012dce53d8fc6a4fcf608cb20bd2bc087b1fe733c2e129faaa&direction=first&source=&destination=&status=&min_usd=&max_usd=

{
  "resources": [
    {
      "sorting_key": "2024-11-20 01:41:23+00ethereum/0x33a6efd2d5dc0b012dce53d8fc6a4fcf608cb20bd2bc087b1fe733c2e129faaa/139318",
      "id": "ethereum/0x33a6efd2d5dc0b012dce53d8fc6a4fcf608cb20bd2bc087b1fe733c2e129faaa/139318",
      "burn_hash": "0x33a6efd2d5dc0b012dce53d8fc6a4fcf608cb20bd2bc087b1fe733c2e129faaa",
      "mint_hash": null,
      "transfer_hash": "0xaee2ca3e0e7ad134f0ba21d32974d06100f0f0b52b8214e1bae813434fed0634",
      "from": "0xf18f923480dc144326e6c65d4f3d47aa459bb41c",
      "destination": "0xf18f923480dc144326e6c65d4f3d47aa459bb41c",
      "minter": null,
      "from_network": "ethereum",
      "destination_network": "arbitrum",
      "amount": "12106555272",
      "denom": "uusdc",
      "status": "SUCCEEDED",
      "from_timestamp": "2024-11-20T01:41:23.000Z",
      "destination_timestamp": "2024-11-20T01:58:52.000Z",
      "from_block": "21225730",
      "destination_block": "276291452",
      "nonce": "139318",
      "is_forwarding": null,
      "forwarding_channel": null,
      "forwarding_target": null,
      "forwarding_address": null,
      "created_at": "2024-11-20T03:41:09.598Z",
      "txn_type": "MAINNET",
      "details": null,
      "is_synced_to_payments": true
    }
  ],
  "metadata": {
    "count": 1,
    "txnType": "MAINNET",
    "direction": "first",
    "limit": "5",
    "txHash": "0x33a6efd2d5dc0b012dce53d8fc6a4fcf608cb20bd2bc087b1fe733c2e129faaa",
    "source": "",
    "destination": "",
    "status": "",
    "min_usd": "",
    "max_usd": ""
  }
}

위 api를 사용해 해시값 넣으면 출발 및 도착 체인 정보 반환하도록 아래 코드 구현했다

• api.service.ts 주요 코드

async getTransactionDetails(txHash: string) {
    try {
      const apiUrl = `https://usdc.range.org/usdc/api/transfers?txHash=${txHash}&txnType=MAINNET&limit=5&direction=first&source=&destination=&status=&min_usd=&max_usd=`;
  
      const response = await axios.get(apiUrl);
      const data = response.data.resources;
  
      if (data && data.length > 0) {
        return {
          enteredTx: txHash, // 입력한 해시값
          bridge: `${data[0].from_network} -> ${data[0].destination_network}`,
          sourceTx: {
            chain: data[0].from_network,
            timestamp: data[0].from_timestamp,
            address: data[0].from,
            hash: data[0].burn_hash,
            value: data[0].amount,
          },
          destinationTx: {
            chain: data[0].destination_network,
            timestamp: data[0].destination_timestamp,
            address: data[0].destination,
            hash: data[0].transfer_hash,
            value: data[0].amount,
          },
          status: data[0].status,
        };
      }
  
      return null;
    } catch (error) {
      console.error(error.message);
      throw new Error('Failed to fetch transaction details');
    }
  }

• index.html 주요 코드

 function displayBridge(txHash, bridge, sourceTx, destinationTx) {
    const container = document.getElementById('bridgeInfo');
    const explorers = {
      'bsc': 'https://bscscan.com',
      'arbitrum': 'https://arbiscan.io',
      'Arbitrum': 'https://arbiscan.io',
      'ethereum': 'https://etherscan.io',
      'Mainnet': 'https://etherscan.io',
      'base': 'https://basescan.org'
      // 필요한 다른 체인과 익스플로러 링크를 여기 추가
    };
    container.innerHTML = `
      <div class="bridge-info-card">
        <h3>Entered Tx:</h3> ${txHash}
        <p><strong>Bridge:</strong> ${sourceTx.chain} -> ${destinationTx.chain}</p>
      </div>
      <div class="bridge-info-card">
        <h3>Source Tx (${sourceTx.chain})</h3>
        <p><strong>Date:</strong> ${new Date(sourceTx.timestamp).toLocaleString()} UTC</p>
         <p><strong>Sender:</strong> <a href="${explorers[sourceTx.chain]}/address/${sourceTx.address}" target="_blank">${sourceTx.address}</a></p>
        <p><strong>Tx Hash:</strong> <a href="${explorers[sourceTx.chain]}/tx/${sourceTx.hash}" target="_blank">${sourceTx.hash}</a></p>
        <p><strong>Value:</strong> ${sourceTx.value}</p>
      </div>
      <div class="bridge-info-card">
        <h3>Destination Tx (${destinationTx.chain})</h3>
        <p><strong>Date:</strong> ${new Date(destinationTx.timestamp).toLocaleString()} UTC</p>
        <p><strong>Receiver:</strong> <a href="${explorers[destinationTx.chain]}/address/${destinationTx.address}" target="_blank">${destinationTx.address}</a></p>
        <p><strong>Tx Hash:</strong> <a href="${explorers[destinationTx.chain]}/tx/${destinationTx.hash}" target="_blank">${destinationTx.hash}</a></p>
        <p><strong>Value:</strong> ${(destinationTx.value / 10**18).toFixed(4)}</p>
      </div>
    `;
  }