Support LocalTerra

- Include LocalTerra in the chain list
- Preconfigured accounts for added network with checked option
- Display error message if the connection is disconnected
- Show the networks menu on the sandbox mode

src/app/App.tsx

@@ -16,7 +16,6 @@ import Aside from "./sections/Aside"
 /* header */
 import Refresh from "./sections/Refresh"
 import Preferences from "./sections/Preferences"
-import SelectNetwork from "./sections/SelectNetwork"
 import SelectTheme from "./sections/SelectTheme"
 import ConnectWallet from "./sections/ConnectWallet"
 
@@ -47,7 +46,6 @@ const App = () => {
         <section>
           <Refresh />
           <Preferences />
-          <SelectNetwork />
           <SelectTheme />
         </section>
         <ValidatorButton />

src/app/InitNetworks.tsx

@@ -0,0 +1,39 @@
+import { FC, useEffect, useState } from "react"
+import { fromPairs } from "ramda"
+import axios from "axios"
+import { ASSETS } from "config/constants"
+import createContext from "utils/createContext"
+import { useCustomNetworks } from "data/settings/CustomNetworks"
+
+export const [useNetworks, NetworksProvider] =
+  createContext<CustomNetworks>("useNetworks")
+
+const InitNetworks: FC = ({ children }) => {
+  const [networks, setNetworks] = useState<CustomNetworks>()
+  const { list } = useCustomNetworks()
+
+  useEffect(() => {
+    const fetchChains = async () => {
+      const { data: chains } = await axios.get<TerraNetworks>("/chains.json", {
+        baseURL: ASSETS,
+      })
+
+      const networks = {
+        ...chains,
+        localterra: { ...chains.localterra, preconfigure: true },
+      }
+
+      setNetworks({
+        ...networks,
+        ...fromPairs(list.map((item) => [item.name, item])),
+      })
+    }
+
+    fetchChains()
+  }, [list])
+
+  if (!networks) return null
+  return <NetworksProvider value={networks}>{children}</NetworksProvider>
+}
+
+export default InitNetworks

src/app/InitWallet.tsx

@@ -4,6 +4,7 @@ import { useWallet, WalletStatus } from "@terra-money/wallet-provider"
 import { useNetworkName } from "data/wallet"
 import Splash from "auth/modules/Splash"
 import Online from "./containers/Online"
+import WithNodeInfo from "./WithNodeInfo"
 
 const InitWallet: FC = ({ children }) => {
   const { status } = useWallet()
@@ -14,7 +15,7 @@ const InitWallet: FC = ({ children }) => {
     <Splash />
   ) : (
     <QueryClientProvider client={queryClient} key={networkName}>
-      {children}
+      <WithNodeInfo>{children}</WithNodeInfo>
       <Online />
     </QueryClientProvider>
   )

src/app/NetworkError.module.scss

@@ -0,0 +1,3 @@
+.title {
+  font-size: 24px;
+}

src/app/NetworkError.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next"
+import Logo from "styles/images/LocalTerra.png"
+import { useNetworkState } from "data/wallet"
+import { Button, ExternalLink } from "components/general"
+import { FlexColumn } from "components/layout"
+import styles from "./NetworkError.module.scss"
+
+const NetworkError = () => {
+  const { t } = useTranslation()
+  const [network, setNetwork] = useNetworkState()
+
+  const isLocalTerra = network === "localterra"
+
+  return (
+    <FlexColumn gap={20}>
+      <img src={Logo} alt={t("Logo")} width={60} height={60} />
+
+      <article>
+        <h1 className={styles.title}>
+          {isLocalTerra
+            ? t("LocalTerra is not running")
+            : t(`${network} is not running`)}
+        </h1>
+
+        {isLocalTerra && (
+          <ExternalLink href="https://github.com/terra-money/localterra">
+            {t("Learn more")}
+          </ExternalLink>
+        )}
+      </article>
+
+      <Button onClick={() => setNetwork("mainnet")} size="small" outline>
+        {t("Back to mainnet")}
+      </Button>
+    </FlexColumn>
+  )
+}
+
+export default NetworkError

src/app/WithNodeInfo.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react"
+import { useNodeInfo } from "data/queries/tendermint"
+import Overlay from "./components/Overlay"
+import NetworkError from "./NetworkError"
+
+const WithNodeInfo: FC = ({ children }) => {
+  const { isLoading, isError } = useNodeInfo()
+
+  if (isError) {
+    return (
+      <Overlay>
+        <NetworkError />
+      </Overlay>
+    )
+  }
+
+  if (isLoading) return null
+  return <>{children}</>
+}
+
+export default WithNodeInfo

src/app/components/Overlay.module.scss

@@ -3,8 +3,8 @@
 .overlay {
   @include flex;
 
-  background: hsl(0 0% 0% / 0.85);
-  color: white;
+  background: var(--bg);
+  color: var(--text);
   text-align: center;
 
   position: fixed;

src/app/routes.tsx

@@ -43,6 +43,8 @@ import PostMultisigTxPage from "pages/multisig/PostMultisigTxPage"
 
 /* auth */
 import Auth from "auth/modules/Auth"
+import ManageNetworksPage from "auth/networks/ManageNetworksPage"
+import AddNetworkPage from "auth/networks/AddNetworkPage"
 
 /* labs */
 import Labs from "pages/labs/Labs"
@@ -129,6 +131,8 @@ export const useNav = () => {
 
     /* auth */
     { path: "/auth/*", element: <Auth /> },
+    { path: "/networks", element: <ManageNetworksPage /> },
+    { path: "/network/new", element: <AddNetworkPage /> },
 
     /* dev */
     { path: "/labs", element: <Labs /> },

src/app/sections/CurrencySetting.tsx

@@ -0,0 +1,21 @@
+import { readDenom } from "@terra.kitchen/utils"
+import { useActiveDenoms } from "data/queries/oracle"
+import { useCurrencyState } from "data/settings/Currency"
+import { RadioGroup } from "components/form"
+
+const CurrencySetting = () => {
+  const { data: activeDenoms = [] } = useActiveDenoms()
+  const [currency, setCurrency] = useCurrencyState()
+
+  return (
+    <RadioGroup
+      options={activeDenoms.map((denom) => {
+        return { value: denom, label: readDenom(denom) }
+      })}
+      value={currency}
+      onChange={setCurrency}
+    />
+  )
+}
+
+export default CurrencySetting

src/app/sections/LanguageSetting.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next"
+import { Languages } from "config/lang"
+import { RadioGroup } from "components/form"
+
+const LanguageSetting = () => {
+  const { i18n } = useTranslation()
+
+  return (
+    <RadioGroup
+      options={Object.values(Languages)}
+      value={i18n.language}
+      onChange={(language) => i18n.changeLanguage(language)}
+    />
+  )
+}
+
+export default LanguageSetting

src/app/sections/NetworkSetting.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next"
+import { useNetworkOptions, useNetworkState } from "data/wallet"
+import { useCustomNetworks } from "data/settings/CustomNetworks"
+import { InternalLink } from "components/general"
+import { RadioGroup } from "components/form"
+
+const NetworkSetting = () => {
+  const { t } = useTranslation()
+  const [network, setNetwork] = useNetworkState()
+  const networkOptions = useNetworkOptions()
+  const { list } = useCustomNetworks()
+
+  if (!networkOptions) return null
+
+  return (
+    <>
+      <RadioGroup
+        options={networkOptions}
+        value={network}
+        onChange={setNetwork}
+      />
+
+      {list.length ? (
+        <InternalLink to="/networks" chevron>
+          {t("Manage networks")}
+        </InternalLink>
+      ) : (
+        <InternalLink to="/network/new" chevron>
+          {t("Add a network")}
+        </InternalLink>
+      )}
+    </>
+  )
+}
+
+export default NetworkSetting

src/app/sections/Preferences.tsx

@@ -1,60 +1,32 @@
 import { useTranslation } from "react-i18next"
-import { readDenom } from "@terra.kitchen/utils"
 import LanguageIcon from "@mui/icons-material/Language"
-import { Languages } from "config/lang"
-import { useActiveDenoms } from "data/queries/oracle"
-import { useCurrencyState } from "data/settings/Currency"
 import { Tabs } from "components/layout"
-import { RadioGroup } from "components/form"
 import { Popover } from "components/display"
+import PopoverNone from "../components/PopoverNone"
 import HeaderIconButton from "../components/HeaderIconButton"
+import NetworkSetting from "./NetworkSetting"
+import LanguageSetting from "./LanguageSetting"
+import CurrencySetting from "./CurrencySetting"
 
-const PreferencesInner = () => {
-  const { t, i18n } = useTranslation()
-
-  const { data: activeDenoms = [] } = useActiveDenoms()
-  const [currency, setCurrency] = useCurrencyState()
+const Preferences = () => {
+  const { t } = useTranslation()
 
-  return (
-    <Tabs
-      tabs={[
-        {
-          key: "lang",
-          tab: t("Language"),
-          children: (
-            <RadioGroup
-              options={Object.values(Languages)}
-              value={i18n.language}
-              onChange={(language) => i18n.changeLanguage(language)}
-              reversed
-            />
-          ),
-        },
-        {
-          key: "currency",
-          tab: t("Currency"),
-          children: (
-            <RadioGroup
-              options={activeDenoms.map((denom) => {
-                return { value: denom, label: readDenom(denom) }
-              })}
-              value={currency}
-              onChange={setCurrency}
-              reversed
-            />
-          ),
-        },
-      ]}
-      type="line"
-      reversed
-      state
-    />
-  )
-}
+  const tabs = [
+    { key: "network", tab: t("Network"), children: <NetworkSetting /> },
+    { key: "lang", tab: t("Language"), children: <LanguageSetting /> },
+    { key: "currency", tab: t("Currency"), children: <CurrencySetting /> },
+  ].filter(({ children }) => children)
 
-const Preferences = () => {
   return (
-    <Popover content={<PreferencesInner />} placement="bottom">
+    <Popover
+      content={
+        <PopoverNone>
+          <Tabs tabs={tabs} type="line" state />
+        </PopoverNone>
+      }
+      placement="bottom"
+      theme="none"
+    >
       <HeaderIconButton>
         <LanguageIcon style={{ fontSize: 18 }} />
       </HeaderIconButton>

src/auth/auth.d.ts

@@ -1,6 +1,6 @@
 type Bip = 118 | 330
 
-type Wallet = SingleWallet | MultisigWallet | LedgerWallet
+type Wallet = SingleWallet | PreconfiguredWallet | MultisigWallet | LedgerWallet
 type LocalWallet = SingleWallet | MultisigWallet // wallet with name
 
 interface SingleWallet {
@@ -9,6 +9,10 @@ interface SingleWallet {
   lock?: boolean
 }
 
+interface PreconfiguredWallet extends SingleWallet {
+  mnemonic: string
+}
+
 interface MultisigWallet extends SingleWallet {
   multisig: true
 }