Merge master into migrate-validator-registry

Dockerfile

@@ -9,6 +9,8 @@ RUN npm install
 COPY . ./
 
 ENV NODE_ENV=development
+ENV DIRECTORY_PROTOCOL=https
+ENV DIRECTORY_DOMAIN=cosmos.directory
 
 EXPOSE 3000
 CMD npm run start

Dockerfile.production

@@ -5,6 +5,8 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm ci
 COPY . ./
+ENV DIRECTORY_PROTOCOL=https
+ENV DIRECTORY_DOMAIN=cosmos.directory
 RUN npm run build
 
 # production env

src/components/NetworkFinder.js

@@ -1,10 +1,10 @@
 import _ from 'lodash'
-import axios from 'axios'
 import React, { useEffect, useReducer } from 'react';
 import { useParams, useNavigate } from "react-router-dom";
 import Network from '../utils/Network.mjs'
-import { overrideNetworks } from '../utils/Helpers.mjs'
+import CosmosDirectory from '../utils/CosmosDirectory.mjs'
 import App from './App';
+import AlertMessage from './AlertMessage'
 
 import {
   Spinner
@@ -16,15 +16,21 @@ function NetworkFinder() {
   const params = useParams();
   const navigate = useNavigate()
 
+  const directory = CosmosDirectory()
+
   const [state, setState] = useReducer(
     (state, newState) => ({...state, ...newState}),
-    {loading: true, networks: [], operators: [], validators: {}}
+    {loading: true, networks: {}, operators: [], validators: {}}
   )
 
   const getNetworks = async () => {
-    const registryNetworks = await axios.get('https://registry.cosmos.directory')
-      .then(res => res.data)
-      .then(data => data.reduce((a, v) => ({ ...a, [v.directory]: v}), {}))
+    let registryNetworks
+    try {
+      registryNetworks = await directory.getChains()
+    } catch (error) {
+      setState({error: error.message, loading: false})
+      return {}
+    }
 
     const networks = networksData.filter(el => el.enabled !== false).map(data => {
       const registryData = registryNetworks[data.name] || {}
@@ -45,6 +51,7 @@ function NetworkFinder() {
   }
 
   useEffect(() => {
+    if(state.error) return
     if(!Object.keys(state.networks).length){
       setState({loading: true})
       getNetworks().then(networks => {
@@ -94,6 +101,10 @@ function NetworkFinder() {
     }
   }, [state.network])
 
+  if (state.error) {
+    return <AlertMessage message={state.error} variant="danger" dismissible={false} />
+  }
+
   if (state.loading) {
     return (
       <div className="pt-5 text-center">