Fix: lcd-cosmos.cosmosstation.io api is down (#2375)

- [x] Since `https://lcd-cosmos.cosmostation.io` is not accessible for last few days (see cosmostation/web-wallet-ts-react#37), switch to
`https://lcd-cosmoshub.keplr.app` . Note: `keplr.app` api does not support all endpoints.
- [x] Quick fix: catchError in service/thorchain
- [x] Quick fix: <button> cannot appear as a descendant of <button>
- [x] Quick fix: Styles of TableHeadline in `AssetDetails`

.env.sample

@@ -47,3 +47,6 @@ REACT_APP_LTC_NODE_TESTNET_URL=https://testnet.ltc.thorchain.info
 REACT_APP_LTC_NODE_MAINNET_URL=https://ltc.thorchain.info
 REACT_APP_LTC_NODE_USERNAME=XXX
 REACT_APP_LTC_NODE_PASSWORD=XXX
+
+# COSMOS
+REACT_APP_COSMOS_MAINNET_LCD = https://lcd-cosmoshub.keplr.app

CHANGELOG.md

@@ -21,6 +21,7 @@
 - Use 9R Midgard by default [#2363](https://github.com/thorchain/asgardex-electron/pull/2363)
 - Fix deprecated usage of Antd.Menu children [#2372](https://github.com/thorchain/asgardex-electron/pull/2372)
 - [Ledger] Fix/extend HD pathes for ETH [#2344](https://github.com/thorchain/asgardex-electron/issues/2344)
+- Fix: lcd-cosmos.cosmosstation.io api is down [#2375](https://github.com/thorchain/asgardex-electron/pull/2375)
 
 ## Remove
 

src/main/api/ledger/cosmos/transaction.ts

@@ -11,7 +11,8 @@ import {
   protoFee,
   protoAuthInfo,
   protoMsgSend,
-  protoTxBody
+  protoTxBody,
+  getDefaultChainIds
 } from '@xchainjs/xchain-cosmos'
 import { Asset, assetToString, BaseAmount } from '@xchainjs/xchain-util'
 import BigNumber from 'bignumber.js'
@@ -76,7 +77,9 @@ export const send = async ({
     const fee = protoFee({ denom, amount: feeAmount, gasLimit })
 
     const clientUrls = getClientUrls()
-    const chainId = await getChainId(clientUrls[clientNetwork])
+    const chainId =
+      // request chain id (for testnet only, cosmoshub.keplr.app does not an endpoint for it)
+      network === 'testnet' ? await getChainId(clientUrls[clientNetwork]) : getDefaultChainIds()[network]
 
     const app = new CosmosApp(transport)
     const path = getDerivationPath(walletIndex)

src/renderer/components/settings/AppSettings.tsx

@@ -274,14 +274,16 @@ export const AppSettings: React.FC<Props> = (props): JSX.Element => {
             </Section>
           </div>
           <div className="card mb-20px w-full p-40px">
-            <TextButton
-              className={`mb-0 !p-0 font-main !text-18 uppercase text-text0 dark:text-text0d ${
-                advancedActive ? 'opacity-100' : 'opacity-60'
-              } mr-10px`}
-              onClick={() => setAdvancedActive((v) => !v)}>
-              {intl.formatMessage({ id: 'common.advanced' })}
-              <SwitchButton className="ml-10px" active={advancedActive}></SwitchButton>
-            </TextButton>
+            <div className="flex items-center">
+              <TextButton
+                className={`mb-0 !py-0 !pr-10px !pl-0  font-main !text-18 uppercase text-text0 dark:text-text0d ${
+                  advancedActive ? 'opacity-100' : 'opacity-60'
+                }`}
+                onClick={() => setAdvancedActive((v) => !v)}>
+                {intl.formatMessage({ id: 'common.advanced' })}
+              </TextButton>
+              <SwitchButton active={advancedActive} onChange={(active) => setAdvancedActive(active)}></SwitchButton>
+            </div>
             {advancedActive && (
               <>
                 <Section className="mt-20px" title="Midgard">

src/renderer/components/wallet/assets/AssetDetails.styles.ts

@@ -51,6 +51,8 @@ type TableHeadlineProps = {
 }
 
 export const TableHeadline = styled(Headline)`
+  display: flex;
+  align-items: center;
   padding: 40px 0 20px 0;
   width: 100%;
   text-align: ${({ isDesktop }: TableHeadlineProps) => (isDesktop ? 'left' : 'center')};

src/renderer/services/cosmos/common.ts

@@ -1,5 +1,5 @@
 import * as RD from '@devexperts/remote-data-ts'
-import { Client, getChainId } from '@xchainjs/xchain-cosmos'
+import { Client, getChainId, getDefaultChainIds } from '@xchainjs/xchain-cosmos'
 import { CosmosChain } from '@xchainjs/xchain-util'
 import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/lib/Option'
@@ -23,40 +23,42 @@ import type { Client$, ClientState, ClientState$ } from './types'
  */
 const clientState$: ClientState$ = FP.pipe(
   Rx.combineLatest([keystoreService.keystoreState$, clientNetwork$, Rx.of(getClientUrls())]),
-  RxOp.switchMap(
-    ([keystore, network, clientUrls]): ClientState$ =>
-      FP.pipe(
-        // request chain id whenever network or keystore are changed
-        Rx.from(getChainId(clientUrls[network])),
-        RxOp.catchError((error) =>
-          Rx.of(RD.failure<Error>(new Error(`Failed to get Cosmos' chain id (${error?.msg ?? error.toString()})`)))
-        ),
-        RxOp.switchMap((chainId) =>
-          Rx.of(
-            FP.pipe(
-              getPhrase(keystore),
-              O.map<string, ClientState>((phrase) => {
-                try {
-                  const client = new Client({
-                    network,
-                    phrase,
-                    clientUrls: getClientUrls(),
-                    chainIds: { ...INITIAL_CHAIN_IDS, [network]: chainId }
-                  })
-                  return RD.success(client)
-                } catch (error) {
-                  return RD.failure<Error>(isError(error) ? error : new Error('Failed to create Cosmos client'))
-                }
-              }),
-              // Set back to `initial` if no phrase is available (locked wallet)
-              O.getOrElse<ClientState>(() => RD.initial)
-            )
+  RxOp.switchMap(([keystore, network, clientUrls]): ClientState$ => {
+    console.log('network:', network)
+    return FP.pipe(
+      // request chain id (for testnet only, cosmoshub.keplr.app does not an endpoint for it)
+      Rx.of(network === 'testnet' ? getChainId(clientUrls[network]) : getDefaultChainIds()[network]),
+      RxOp.switchMap((chainId) => {
+        console.log('chainId:', chainId)
+        console.log('clientUrls:', clientUrls[network])
+        return Rx.of(
+          FP.pipe(
+            getPhrase(keystore),
+            O.map<string, ClientState>((phrase) => {
+              try {
+                const client = new Client({
+                  network,
+                  phrase,
+                  clientUrls: getClientUrls(),
+                  chainIds: { ...INITIAL_CHAIN_IDS, [network]: chainId }
+                })
+                return RD.success(client)
+              } catch (error) {
+                return RD.failure<Error>(isError(error) ? error : new Error('Failed to create Cosmos client'))
+              }
+            }),
+            // Set back to `initial` if no phrase is available (locked wallet)
+            O.getOrElse<ClientState>(() => RD.initial)
           )
-        ),
-        RxOp.startWith(RD.pending)
-      )
-  ),
-  RxOp.startWith<ClientState>(RD.initial),
+        )
+      }),
+      RxOp.catchError((error) =>
+        Rx.of(RD.failure<Error>(new Error(`Failed to get Cosmos' chain id (${error?.msg ?? error.toString()})`)))
+      ),
+      RxOp.startWith(RD.pending)
+    )
+  }),
+  RxOp.startWith(RD.initial),
   RxOp.shareReplay(1)
 )
 

src/renderer/services/thorchain/common.ts

@@ -40,9 +40,6 @@ const clientState$: ClientState$ = FP.pipe(
       FP.pipe(
         // request chain id from node whenever network or keystore state have been changed
         Rx.from(getChainId(clientUrl[network].node)),
-        RxOp.catchError((error) =>
-          Rx.of(RD.failure<Error>(new Error(`Failed to get THORChain's chain id (${error?.msg ?? error.toString()})`)))
-        ),
         RxOp.switchMap((chainId) =>
           Rx.of(
             FP.pipe(
@@ -65,10 +62,13 @@ const clientState$: ClientState$ = FP.pipe(
             )
           )
         ),
+        RxOp.catchError((error) =>
+          Rx.of(RD.failure<Error>(new Error(`Failed to get THORChain's chain id (${error?.msg ?? error.toString()})`)))
+        ),
         RxOp.startWith(RD.pending)
       )
   ),
-  RxOp.startWith<ClientState>(RD.initial),
+  RxOp.startWith(RD.initial),
   RxOp.shareReplay(1)
 )
 

src/shared/cosmos/client.ts

@@ -1,23 +1,28 @@
 import { Network } from '@xchainjs/xchain-client'
 import { ChainIds, ClientUrls } from '@xchainjs/xchain-cosmos'
 
-const clientUrl = 'https://lcd-cosmos.cosmostation.io'
+import { envOrDefault } from '../utils/env'
+
+// expose env (needed to access ENVs by `envOrDefault`) in `main` thread)
+require('dotenv').config()
+
+const MAINNET_LCD = envOrDefault(process.env.REACT_APP_COSMOS_MAINNET_LCD, 'https://lcd-cosmoshub.keplr.app')
 
 export const getClientUrls = (): ClientUrls => ({
-  [Network.Stagenet]: clientUrl,
-  [Network.Mainnet]: clientUrl,
+  [Network.Stagenet]: MAINNET_LCD,
+  [Network.Mainnet]: MAINNET_LCD,
   [Network.Testnet]: 'https://rest.sentry-01.theta-testnet.polypore.xyz'
 })
 
+const mainChainId = 'cosmoshub-4'
 /**
  * Default Cosmos' chain ids
  *
- * Note: All are 'unknown' by default
- * They need to be requested from Cosmos API
+ * Note: All 'unknown' will be fetched from Cosmos `node_info`` endpoint
  * just before initializing a `xchain-cosmos` client
  */
 export const INITIAL_CHAIN_IDS: ChainIds = {
-  [Network.Mainnet]: 'unkown-mainnet-chain-id',
-  [Network.Stagenet]: 'unkown-stagenet-chain-id',
-  [Network.Testnet]: 'unkown-testnet-chain-id'
+  [Network.Mainnet]: mainChainId, // can't be fetched for `lcd-cosmoshub.keplr.app`
+  [Network.Stagenet]: mainChainId, // can't be fetched for `lcd-cosmoshub.keplr.app`
+  [Network.Testnet]: 'unkown-testnet-chain-id' // will be fetched
 }