dgf-prototype/client/src/App.jsx

import { useState } from 'react';
import Connect from './Connect';
import UpdateMessage from './UpdateMessage';
import QueryMessage from './QueryMessage';
import QueryRepBalance from './QueryRepBalance';
import './App.css';

function App() {
  const [publicKey, setPublicKey] = useState(null);
  return (
    <>
      <Connect setPublicKey={setPublicKey} />
      <div>
        {publicKey !== null && (
        <>
          Wallet connected:
          {' '}
          {publicKey}
          <br />
          <UpdateMessage publicKey={publicKey} />
          <QueryMessage />
          <br />
          <QueryRepBalance publicKey={publicKey} />
        </>
        )}
      </div>
    </>
  );
}

export default App;