Merge pull request #22 from CosmWasm/upgrade-cosmjs

Upgrade to CosmJS v0.25

package.json

@@ -3,29 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "license": "Apache-2.0",
-  "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/stargate": "^0.24.0-alpha.22",
-    "@cosmjs/tendermint-rpc": "^0.24.0-alpha.22",
-    "@cosmjs/utils": "^0.24.0-alpha.22",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.0",
-    "tailwindcss": "^1.9.6",
-    "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
-  },
   "scripts": {
     "build:tailwind": "tailwindcss build src/index.css -o src/tailwind.output.css",
     "prebuild": "NODE_ENV=production yarn build:tailwind",
@@ -36,6 +13,7 @@
     "start:base": "react-scripts start",
     "start": "yarn start:musselnet",
     "start:musselnet": "REACT_APP_NETWORK=musselnet yarn start:base",
+    "start:oysternet": "REACT_APP_NETWORK=oysternet yarn start:base",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -54,6 +32,30 @@
       "last 1 safari version"
     ]
   },
+  "dependencies": {
+    "@cosmjs/cosmwasm": "^0.25.4",
+    "@cosmjs/encoding": "^0.25.4",
+    "@cosmjs/launchpad": "^0.25.4",
+    "@cosmjs/math": "^0.25.4",
+    "@cosmjs/stargate": "^0.25.4",
+    "@cosmjs/tendermint-rpc": "^0.25.4",
+    "@cosmjs/utils": "^0.25.4",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "long": "^4.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.0",
+    "tailwindcss": "^1.9.6",
+    "typescript": "^4.0.3",
+    "web-vitals": "^0.2.4"
+  },
   "devDependencies": {
     "@types/react-router-dom": "^5.1.6",
     "@typescript-eslint/eslint-plugin": "^4.7.0",

src/App/components/ChannelCounterpartyData.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { IbcChannelCounterparty } from "../../types/ibc";
+import { style } from "../style";
+
+interface CounterpartyDataProps {
+  readonly counterparty?: IbcChannelCounterparty | null;
+}
+
+export function CounterpartyData({ counterparty }: CounterpartyDataProps): JSX.Element {
+  return (
+    <div className="flex flex-col m-2 ml-0">
+      <span className={style.subtitle}>Counterparty</span>
+      {counterparty?.portId && <span>Port ID: {counterparty.portId}</span>}
+      {counterparty?.channelId && <span>Channel ID: {counterparty.channelId}</span>}
+    </div>
+  );
+}

src/App/components/ConnectionCounterpartyData.tsx

@@ -0,0 +1,22 @@
+import { toHex } from "@cosmjs/encoding";
+import React from "react";
+
+import { IbcConnectionCounterparty } from "../../types/ibc";
+import { style } from "../style";
+
+interface CounterpartyDataProps {
+  readonly counterparty?: IbcConnectionCounterparty | null;
+}
+
+export function CounterpartyData({ counterparty }: CounterpartyDataProps): JSX.Element {
+  return (
+    <div className="flex flex-col m-2 ml-0">
+      <span className={style.subtitle}>Counterparty</span>
+      {counterparty?.clientId && <span>Client ID: {counterparty.clientId}</span>}
+      {counterparty?.connectionId && <span>Connection ID: {counterparty.connectionId}</span>}
+      {counterparty?.prefix?.keyPrefix?.length ? (
+        <span>Prefix: {toHex(counterparty?.prefix?.keyPrefix)}</span>
+      ) : null}
+    </div>
+  );
+}

src/App/routes/Acknowledgement/index.tsx

@@ -25,7 +25,7 @@ export function Acknowledgement(): JSX.Element {
     const sequenceNumber = Number.parseInt(sequence, 10);
 
     (async function updateAckResponse() {
-      const ackResponse = await getClient().ibc.unverified.packetAcknowledgement(
+      const ackResponse = await getClient().ibc.channel.packetAcknowledgement(
         portId,
         channelId,
         sequenceNumber,
@@ -38,9 +38,9 @@ export function Acknowledgement(): JSX.Element {
     <div className="container mx-auto flex flex-col">
       <Navigation />
       <span className={style.title}>Data</span>
-      {portId ? <span>Port ID: {portId}</span> : null}
-      {channelId ? <span>Channel ID: {channelId}</span> : null}
-      {sequence ? <span>Sequence: {sequence}</span> : null}
+      {portId && <span>Port ID: {portId}</span>}
+      {channelId && <span>Channel ID: {channelId}</span>}
+      {sequence && <span>Sequence: {sequence}</span>}
       {ackResponse?.acknowledgement ? (
         <div className="flex flex-col">
           <span>Proof: {ackResponse.proof?.length ? toHex(ackResponse.proof) : "–"}</span>

src/App/routes/Channel/AcknowledgementsList.tsx

@@ -27,11 +27,11 @@ export function AcknowledgementsList({
 
   useEffect(() => {
     (async function updatePacketAcknowledgementsResponse() {
-      const acketAcknowledgementsResponse = await getClient().ibc.unverified.packetAcknowledgements(
+      const packetAcknowledgementsResponse = await getClient().ibc.channel.packetAcknowledgements(
         portId,
         channelId,
       );
-      setPacketAcknowledgementsResponse(acketAcknowledgementsResponse);
+      setPacketAcknowledgementsResponse(packetAcknowledgementsResponse);
     })();
   }, [getClient, portId, channelId]);
 

src/App/routes/Channel/ChannelData.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useClient } from "../../../contexts/ClientContext";
 import { IbcChannelResponse } from "../../../types/ibc";
 import { printIbcChannelState, printIbcOrder } from "../../../utils/ibc";
-import { CounterpartyData } from "../../components/CounterpartyData";
+import { CounterpartyData } from "../../components/ChannelCounterpartyData";
 import { HeightData } from "../../components/HeightData";
 import { style } from "../../style";
 
@@ -19,16 +19,16 @@ export function ChannelData({ portId, channelId }: ChannelDataProps): JSX.Elemen
 
   useEffect(() => {
     (async function updateChannelResponse() {
-      const channelResponse = await getClient().ibc.unverified.channel(portId, channelId);
+      const channelResponse = await getClient().ibc.channel.channel(portId, channelId);
       setChannelResponse(channelResponse);
     })();
   }, [getClient, portId, channelId]);
 
   return channelResponse?.channel ? (
     <div>
       <div className={style.title}>Data</div>
-      {portId ? <div>Port ID: {portId}</div> : null}
-      {channelId ? <div>Channel ID: {channelId}</div> : null}
+      {portId && <div>Port ID: {portId}</div>}
+      {channelId && <div>Channel ID: {channelId}</div>}
       <div>Proof: {channelResponse.proof?.length ? toHex(channelResponse.proof) : "–"}</div>
       <HeightData height={channelResponse.proofHeight} />
       <div className="flex flex-col">
@@ -39,7 +39,7 @@ export function ChannelData({ portId, channelId }: ChannelDataProps): JSX.Elemen
         <span>
           Ordering: {channelResponse.channel.ordering ? printIbcOrder(channelResponse.channel.ordering) : "–"}
         </span>
-        <CounterpartyData counterparty={channelResponse.channel.counterparty} />
+        <CounterpartyData counterparty={channelResponse.channel.counterparty ?? null} />
         <span>
           Connection hops:{" "}
           {channelResponse.channel.connectionHops ? channelResponse.channel.connectionHops.join(", ") : "–"}

src/App/routes/Channel/CommitmentsList.tsx

@@ -21,7 +21,7 @@ export function CommitmentsList({ connectionId, portId, channelId }: Commitments
 
   useEffect(() => {
     (async function updatePacketCommitmentsResponse() {
-      const packetCommitmentsResponse = await getClient().ibc.unverified.packetCommitments(portId, channelId);
+      const packetCommitmentsResponse = await getClient().ibc.channel.packetCommitments(portId, channelId);
       setPacketCommitmentsResponse(packetCommitmentsResponse);
     })();
   }, [getClient, portId, channelId]);

src/App/routes/Channel/NextSequenceReceiveData.tsx

@@ -17,7 +17,7 @@ export function NextSequenceReceiveData({ portId, channelId }: NextSequenceRecei
 
   useEffect(() => {
     (async function updateNextSequenceReceiveResponse() {
-      const nextSequenceReceiveResponse = await getClient().ibc.unverified.nextSequenceReceive(
+      const nextSequenceReceiveResponse = await getClient().ibc.channel.nextSequenceReceive(
         portId,
         channelId,
       );

src/App/routes/Channel/UnreceivedAcksList.tsx

@@ -16,7 +16,7 @@ export function UnreceivedAcksList({ portId, channelId, sequence }: UnreceivedAc
 
   useEffect(() => {
     (async function updateUnreceivedAcksResponse() {
-      const unreceivedAcksResponse = await getClient().ibc.unverified.unreceivedAcks(portId, channelId, [
+      const unreceivedAcksResponse = await getClient().ibc.channel.unreceivedAcks(portId, channelId, [
         sequence,
       ]);
       setUnreceivedAcksResponse(unreceivedAcksResponse);

src/App/routes/Channel/UnreceivedPacketsList.tsx

@@ -20,11 +20,9 @@ export function UnreceivedPacketsList({
 
   useEffect(() => {
     (async function updateUnreceivedPacketsResponse() {
-      const unreceivedPacketsResponse = await getClient().ibc.unverified.unreceivedPackets(
-        portId,
-        channelId,
-        [sequence],
-      );
+      const unreceivedPacketsResponse = await getClient().ibc.channel.unreceivedPackets(portId, channelId, [
+        sequence,
+      ]);
       setUnreceivedPacketsResponse(unreceivedPacketsResponse);
     })();
   }, [getClient, portId, channelId, sequence]);

src/App/routes/Commitment/index.tsx

@@ -1,4 +1,5 @@
 import { toHex } from "@cosmjs/encoding";
+import Long from "long";
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
@@ -25,10 +26,10 @@ export function Commitment(): JSX.Element {
     const sequenceNumber = Number.parseInt(sequence, 10);
 
     (async function updateCommitmentResponse() {
-      const commitmentResponse = await getClient().ibc.unverified.packetCommitment(
+      const commitmentResponse = await getClient().ibc.channel.packetCommitment(
         portId,
         channelId,
-        sequenceNumber,
+        Long.fromNumber(sequenceNumber),
       );
       setCommitmentResponse(commitmentResponse);
     })();
@@ -38,9 +39,9 @@ export function Commitment(): JSX.Element {
     <div className="container mx-auto flex flex-col">
       <Navigation />
       <span className={style.title}>Data</span>
-      {portId ? <span>Port ID: {portId}</span> : null}
-      {channelId ? <span>Channel ID: {channelId}</span> : null}
-      {sequence ? <span>Sequence: {sequence}</span> : null}
+      {portId && <span>Port ID: {portId}</span>}
+      {channelId && <span>Channel ID: {channelId}</span>}
+      {sequence && <span>Sequence: {sequence}</span>}
       {commitmentResponse?.commitment ? (
         <div className="flex flex-col">
           <span>Proof: {commitmentResponse.proof?.length ? toHex(commitmentResponse.proof) : "–"}</span>

src/App/routes/Connection/ChannelsList.tsx

@@ -22,15 +22,15 @@ export function ChannelsList({ connectionId }: ChannelsListProps): JSX.Element {
 
   useEffect(() => {
     (async function updateChannelsResponse() {
-      const channelsResponse = await getClient().ibc.unverified.connectionChannels(connectionId);
+      const channelsResponse = await getClient().ibc.channel.connectionChannels(connectionId);
       setChannelsResponse(channelsResponse);
     })();
   }, [connectionId, getClient]);
 
   async function loadMoreChannels(): Promise<void> {
     if (!channelsResponse?.pagination?.nextKey?.length) return;
 
-    const newChannelsResponse = await getClient().ibc.unverified.connectionChannels(
+    const newChannelsResponse = await getClient().ibc.channel.connectionChannels(
       connectionId,
       channelsResponse.pagination.nextKey,
     );

src/App/routes/Connection/ConnectionData.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useClient } from "../../../contexts/ClientContext";
 import { IbcConnectionResponse } from "../../../types/ibc";
 import { printIbcConnectionState } from "../../../utils/ibc";
-import { CounterpartyData } from "../../components/CounterpartyData";
+import { CounterpartyData } from "../../components/ConnectionCounterpartyData";
 import { HeightData } from "../../components/HeightData";
 import { style } from "../../style";
 
@@ -18,15 +18,15 @@ export function ConnectionData({ connectionId }: ConnectionDataProps): JSX.Eleme
 
   useEffect(() => {
     (async function updateConnectionResponse() {
-      const connectionResponse = await getClient().ibc.unverified.connection(connectionId);
+      const connectionResponse = await getClient().ibc.connection.connection(connectionId);
       setConnectionResponse(connectionResponse);
     })();
   }, [getClient, connectionId]);
 
   return connectionResponse?.connection ? (
     <div>
       <div className={style.title}>Data</div>
-      {connectionId ? <div>Connection ID: {connectionId}</div> : null}
+      {connectionId && <div>Connection ID: {connectionId}</div>}
       <div>Proof: {connectionResponse.proof?.length ? toHex(connectionResponse.proof) : "–"}</div>
       <HeightData height={connectionResponse.proofHeight} />
       <div className="flex flex-col">
@@ -50,7 +50,7 @@ export function ConnectionData({ connectionId }: ConnectionDataProps): JSX.Eleme
         ) : (
           <span className={style.subtitle}>No versions found</span>
         )}
-        <CounterpartyData counterparty={connectionResponse.connection.counterparty} />
+        <CounterpartyData counterparty={connectionResponse.connection.counterparty ?? null} />
       </div>
     </div>
   ) : (

src/App/routes/Connections/index.tsx

@@ -30,7 +30,7 @@ export function Connections(): JSX.Element {
 
   useEffect(() => {
     (async function updateConnectionsResponse() {
-      const connectionsResponse = await getClient().ibc.unverified.connections();
+      const connectionsResponse = await getClient().ibc.connection.connections();
       setConnectionsResponse(connectionsResponse);
 
       const nonEmptyClientIds =
@@ -48,7 +48,7 @@ export function Connections(): JSX.Element {
   async function loadMoreConnections(): Promise<void> {
     if (!connectionsResponse?.pagination?.nextKey?.length) return;
 
-    const newConnectionsResponse = await getClient().ibc.unverified.connections(
+    const newConnectionsResponse = await getClient().ibc.connection.connections(
       connectionsResponse.pagination.nextKey,
     );
 

src/config.ts

@@ -15,7 +15,11 @@ const musselnet: AppConfig = {
   rpcUrl: "https://rpc.musselnet.cosmwasm.com",
 };
 
-const configs: NetworkConfigs = { local, musselnet };
+const oysternet: AppConfig = {
+  rpcUrl: "rpc.oysternet.cosmwasm.com",
+};
+
+const configs: NetworkConfigs = { local, musselnet, oysternet };
 
 function getAppConfig(): AppConfig {
   const network = process.env.REACT_APP_NETWORK;

src/contexts/ClientContext.tsx

@@ -1,5 +1,5 @@
 import { IbcExtension, QueryClient, setupIbcExtension } from "@cosmjs/stargate";
-import { adaptor34, Client as TendermintClient } from "@cosmjs/tendermint-rpc";
+import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
 import React, { useEffect } from "react";
 
 import { config } from "../config";
@@ -21,14 +21,14 @@ const ClientContext = React.createContext<ClientContextType>(defaultClientContex
 export const useClient = (): ClientContextType => React.useContext(ClientContext);
 
 export function ClientProvider({ children }: React.HTMLAttributes<HTMLOrSVGElement>): JSX.Element {
-  const [tmClient, setTmClient] = React.useState<TendermintClient>();
+  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 TendermintClient.connect(config.rpcUrl, adaptor34);
+      const tmClient = await Tendermint34Client.connect(config.rpcUrl);
       setTmClient(tmClient);
     })();
   }, []);