Feet/data

package.json

@@ -3,6 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@cosmjs/cosmwasm": "^0.24.0-alpha.22",
+    "@cosmjs/encoding": "^0.24.0-alpha.22",
+    "@cosmjs/launchpad": "^0.24.0-alpha.22",
+    "@cosmjs/math": "^0.24.0-alpha.22",
+    "@cosmjs/proto-signing": "^0.24.0-alpha.22",
+    "@cosmjs/stargate": "^0.24.0-alpha.22",
+    "@cosmjs/tendermint-rpc": "^0.24.0-alpha.22",
+    "@cosmjs/utils": "^0.24.0-alpha.22",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
@@ -47,5 +55,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "ts-proto": "^1.81.1"
   }
 }

src/App/App.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import { ClientProvider } from '../contexts/ClientContext'; 
+
+
+// Components 
+import Dashboard from './components/Dashboard/Dashboard';
+
+const App = () => {
+
+  // const orgName = 'ibc'
+  // const chainName = 'gaia'
+
+  return (
+    <ClientProvider>
+      <Router>
+        <div className='App'>
+          <Switch>
+            {/* <Route exact path='/' component={() => <WelcomeToIBCViz/>}/> */}
+            {/* switch path to: path={`/${orgName}/${chainName}`} */}
+            <Route exact path='/' component={() => <Dashboard/>}/>
+          </Switch>
+        </div>
+      </Router>
+    </ClientProvider>
+  );
+}
+
+export default App;

src/components/Table/GaiaChainTable.tsx → src/App/components/Table/GaiaChainTable.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
 // Data...
-import { VirtualizedTable, rows } from '../../utils/dummyData';
+import { VirtualizedTable, rows } from '../../../utils/dummyData';
 
 
 const useStyles = makeStyles((theme) => ({

src/config.ts

@@ -0,0 +1,32 @@
+interface AppConfig {
+    readonly rpcUrl: string;
+}
+
+interface NetworkConfigs {
+    readonly [key: string]: AppConfig;
+}
+
+const local: AppConfig = {
+    rpcUrl: "http://localhost:26658",
+};
+
+const musselnet: AppConfig = {
+    rpcUrl: "https://rpc.cosmos.network/", 
+}; 
+
+const configs: NetworkConfigs = { local, musselnet }; 
+
+function getAppConfig(): AppConfig {
+    const network = process.env.REACT_APP_NETWORK;
+
+    if (!network) return local;
+
+    const config = configs[network];
+
+    if (!config) {
+        throw new Error(`No configuration found for network ${network}`);
+    }
+    return config; 
+}
+
+export const config = getAppConfig(); 

src/contexts/ClientContext.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import { IbcExtension, QueryClient, setupIbcExtension } from "@cosmjs/stargate";
+import { adaptor34, Client as Tendermint34Client } from "@cosmjs/tendermint-rpc";
+
+
+import { config } from "../config";
+
+export type IbcClient = QueryClient & IbcExtension;
+
+export interface ClientContextType {
+  readonly getClient: () => IbcClient;
+}
+
+const defaultClientContext: ClientContextType = {
+  getClient: (): IbcClient => {
+    throw new Error("not yet initialized");
+  },
+};
+
+const ClientContext = React.createContext<ClientContextType>(defaultClientContext);
+
+export const useClient = (): ClientContextType => React.useContext(ClientContext);
+
+export function ClientProvider({ children }: React.HTMLAttributes<HTMLOrSVGElement>): JSX.Element {
+  const [tmClient, setTmClient] = React.useState<Tendermint34Client>();
+  const [ibcClient, setIbcClient] = React.useState<IbcClient>();
+  const [value, setValue] = React.useState<ClientContextType>(defaultClientContext);
+  const [clientsAvailable, setClientsAvailable] = React.useState(false);
+
+  useEffect(() => {
+    (async function updateTmClient() {
+      const tmClient = await Tendermint34Client.connect(config.rpcUrl, adaptor34);
+      setTmClient(tmClient);
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (!tmClient) return;
+
+    (async function updateIbcClient() {
+      const ibcClient = QueryClient.withExtensions(tmClient, setupIbcExtension);
+      setIbcClient(ibcClient);
+    })();
+  }, [tmClient]);
+
+  useEffect(() => {
+    if (!tmClient || !ibcClient) return;
+
+    setValue({ getClient: () => ibcClient });
+    setClientsAvailable(true);
+  }, [ibcClient, tmClient]);
+
+  return clientsAvailable ? (
+    <ClientContext.Provider value={value}>{children}</ClientContext.Provider>
+  ) : (
+    <div className="container mx-auto">Setting up client …</div>
+  );
+}

src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
-import App from './App';
+import App from './App/App';
 import reportWebVitals from './reportWebVitals';
 import './index.css';
 

src/types/ibc.ts

@@ -0,0 +1,32 @@
+// import { codec } from "@cosmjs/stargate";
+import * as codec from "@cosmjs/stargate"; 
+
+// IBC common types
+export type IbcConnectionState = codec.ibc.core.connection.v1.State;
+export const IbcConnectionState = codec.ibc.core.connection.v1.State;
+export type IbcConnectionCounterparty = codec.ibc.core.connection.v1.ICounterparty;
+export type IbcChannelState = codec.ibc.core.channel.v1.State;
+export const IbcChannelState = codec.ibc.core.channel.v1.State;
+export type IbcChannelCounterparty = codec.ibc.core.channel.v1.ICounterparty;
+export type IbcOrder = codec.ibc.core.channel.v1.Order;
+export const IbcOrder = codec.ibc.core.channel.v1.Order;
+export type IbcHeight = codec.ibc.core.client.v1.IHeight;
+
+// IBC connection responses
+export type IbcConnectionsResponse = codec.ibc.core.connection.v1.IQueryConnectionsResponse;
+export type IbcClientConnectionsResponse = codec.ibc.core.connection.v1.IQueryClientConnectionsResponse;
+export type IbcConnectionResponse = codec.ibc.core.connection.v1.IQueryConnectionResponse;
+
+// IBC channel responses
+export type IbcChannelsResponse = codec.ibc.core.channel.v1.IQueryChannelsResponse;
+export type IbcConnectionChannelsResponse = codec.ibc.core.channel.v1.IQueryConnectionChannelsResponse;
+export type IbcChannelResponse = codec.ibc.core.channel.v1.IQueryChannelResponse;
+
+// IBC packet responses
+export type IbcNextSequenceReceiveResponse = codec.ibc.core.channel.v1.IQueryNextSequenceReceiveResponse;
+export type IbcPacketCommitmentsResponse = codec.ibc.core.channel.v1.IQueryPacketCommitmentsResponse;
+export type IbcPacketCommitmentResponse = codec.ibc.core.channel.v1.IQueryPacketCommitmentResponse;
+export type IbcPacketAcknowledgementsResponse = codec.ibc.core.channel.v1.IQueryPacketAcknowledgementsResponse;
+export type IbcPacketAcknowledgementResponse = codec.ibc.core.channel.v1.IQueryPacketAcknowledgementResponse;
+export type IbcUnreceivedPacketsResponse = codec.ibc.core.channel.v1.IQueryUnreceivedPacketsResponse;
+export type IbcUnreceivedAcksResponse = codec.ibc.core.channel.v1.IQueryUnreceivedAcksResponse;