App.tsx

import React from 'react'
import './App.css'
import { Contract, JsonRpcProvider, keccak256, toUtf8Bytes } from 'ethers'

export type Note = [number, number, string]

function App() {
  const [notes, setNotes] = React.useState([])
  const notesAbi = [
    {
      'inputs': [
        {
          'internalType': 'bytes32',
          'name': 'usernameHash',
          'type': 'bytes32'
        }
      ],
      'name': 'getNotes',
      'outputs': [
        {
          'components': [
            {
              'internalType': 'uint256',
              'name': 'id',
              'type': 'uint256'
            },
            {
              'internalType': 'bytes32',
              'name': 'usernameHash',
              'type': 'bytes32'
            },
            {
              'internalType': 'string',
              'name': 'text',
              'type': 'string'
            },
            {
              'internalType': 'bool',
              'name': 'isActive',
              'type': 'bool'
            }
          ],
          'internalType': 'struct Notes.Note[]',
          'name': '',
          'type': 'tuple[]'
        }
      ],
      'stateMutability': 'view',
      'type': 'function'
    },
  ]
  const provider = new JsonRpcProvider('https://rpc.gnosischain.com/')
  const contract = new Contract('0xf6b270136Da7F8a2113B93a3b9Eeaf5160C45bA0', notesAbi, provider)
  const usernameHash = keccak256(toUtf8Bytes('igor'))
  return (
      <div className="App">
        <header className="App-header">
          <p>
            Test smart contract interaction.
          </p>
          <button onClick={async () => {
            const items = await contract.getNotes(usernameHash)
            setNotes(items.map((note: Note) => note[2]).reverse())
          }}>Test
          </button>

          {notes.length > 0 && notes.map((note: string) => <p key={note}>{note}</p>)}
        </header>
      </div>
  )
}

export default App