History API › Quickstart guide

This guide will walk you through on how you can seamlessly retrieve and display wallet transactions by using the wallet history API.

Prerequisites

Node.js and npm installed
Basic knowledge of JavaScript, React, and Express.js

Step-by-step guide

Step 1: Initialization

Create a new directory for the project:

Bash
1
mkdir wallet-history && cd wallet-history

Initialize a new Node.js project:
Bash
1
```
npm init -y
```
Install Express, CORS, and Axios:
Bash
1
```
npm install express cors axios
```
Install dotenv:
Bash
1
```
npm install dotenv
```
Then create a new file called .env and add your api key:
Bash
1
```
API_KEY=YOUR_1INCH_API_KEY
```
Create a new file api.js and set up a basic Express server by pasting into it the following:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Import required packages
const express = require('express');
const axios = require('axios');
const dotenv = require('dotenv');
const cors = require('cors');
const path = require('path');

// Initialize the app and load environment variables from .env
dotenv.config({ path: path.resolve(__dirname, '.env') });
const app = express();

// Enable CORS for all routes
app.use(cors());

const BASE_URL = 'https://api.1inch.com/history/v2.0/history';

// Endpoint to fetch wallet transaction history
app.get('/api/:address/history', async (req, res) => {
  const address = req.params.address;
  const limit = req.query.limit || 10;

  try {
    const constructedUrl = `${BASE_URL}/${address}/events?chainId=${1}&limit=${limit}`;

    const response = await axios.get(constructedUrl, {
      headers: {
        Authorization: `Bearer ${process.env.API_KEY}`, // Use API key from .env
      },
    });

    // Send the response data back to the client
    res.json(response.data);
  } catch (error) {
    console.error('Error fetching wallet transactions:', error);
    res.status(500).json({ error: 'An error occurred while fetching data' });
  }
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Add an endpoint to fetch wallet transactions and don't forget to replace API_KEY with your 1inch Business API key:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const BASE_URL = 'https://api.1inch.com/history/v2.0/history';

app.get('/api/:address/history', async (req, res) => {
  const address = req.params.address;
  const limit = req.query.limit || 10;

  try {
    const constructedUrl = `${BASE_URL}/${address}/events?chainId=${1}&limit=${limit}`;

    const response = await axios.get(constructedUrl, {
      headers: {
        Authorization: `Bearer ${process.env.API_KEY}`,
      },
    });

    // Send the data from the API back to the client
    res.json(response.data.items);
  } catch (error) {
    console.error('Axios Error: ', error.response);
    res.status(500).json({ error: 'Failed to fetch wallet transactions' });
  }
});

Step 2: Setting up React frontend

Create a new React application:
Bash
1
```
npx create-react-app client
```
Navigate to the React application directory:
Bash
1
```
cd client
```

Create a History.js component inside the src directory with the following content:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { useState, useEffect } from 'react';

const History = ({ address }) => {
  const [transactions, setTransactions] = useState([]);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const response = await fetch(
        `http://localhost:5001/api/${address}/history`,
      );

      if (!response.ok) {
        console.log('Fetch history error', response);
        return;
      }

      const transactions = await response.json();

      setTransactions(transactions);
      setLoading(false);
    };

    if (isLoading) {
      return;
    }

    fetchData();
  }, [address]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {transactions.map((tx) => (
        <li key={tx.id}>
          <a href={`https://etherscan.io/tx/${tx.details.txHash}`}>
            {tx.details.type}
          </a>
        </li>
      ))}
    </ul>
  );
};

export default History;

Import and use History in src/App.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, { useState } from 'react';
import './App.css';
import History from './History';

function App() {
  const [inputValue, setSearchTerm] = useState('');
  const [address, setAddress] = useState();

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    setAddress(inputValue);
  };

  return (
    <div className="App">
      <header>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={inputValue}
            placeholder="search by address"
            onChange={handleChange}
          />
          <button type="submit">Search</button>
        </form>
      </header>

      {address && <h1>Ethereum history of {address}</h1>}
      {address && <History address={address} />}
    </div>
  );
}

export default App;

Step 3: Running the project

Start the Express server:
Bash
1
```
node api.js
```
In a new terminal, navigate to the client directory and start the React app:
Bash
1
```
cd client
```
Now, you can view your wallet transaction history at http://localhost:3000.

Described above is a basic setup and you can expand upon this by adding more features, error handling, and styling to get to production.

Prerequisites

Step-by-step guide

Step 1: Initialization

Step 2: Setting up React frontend

Step 3: Running the project

Did you find what you need?