Release/7.3.0 rc 1 (#457)

* fixed wallet popover overlapping on top of Send and Recieve title ST-475 (#436)
* fix: add scroll to chainlist container (#437)
* feat: filter out non-whitelisted tokens (#439)
* feat: disable send if wallet is empty (#438)
* feat: introduce amplitude (#440)
* feat: fix denom ibc in staking assets dropdown (#448)
* St 565 val page staking rewards (#447)
* Show disabled network name and icon (#454)
* ST-492: wallet-kit integration (#418)
* Use new IBC channels (#453)
* Improve LUNC/LUNA IBC detection (#456)
* feat: chain dependent staking functionality (#450)
* feat: St 543 implement amplitude (#455)
* fix ibc token denoms (#460)
* FIX: swap Read component (#461)
* fix kujira factory IBC tokens (#466)

---------

Co-authored-by: Manuel Alessandro Collazo <[email protected]>
Co-authored-by: Joshua Brigati <[email protected]>
Co-authored-by: plubber <[email protected]>
Co-authored-by: Terence Lim <[email protected]>
Co-authored-by: Alessandro Candeago <[email protected]>

package.json

@@ -4,6 +4,7 @@
   "hompage": "https://station.terra.money",
   "author": "Terra <[email protected]> (https://terra.money)",
   "repository": "github:terra-money/station",
+  "version": "7.3.0",
   "license": "MIT",
   "scripts": {
     "start": "react-scripts start",
@@ -14,20 +15,19 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.0.0",
     "@anchor-protocol/anchor.js": "^5.1.1",
     "@ledgerhq/hw-transport-web-ble": "^6.27.1",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.9.1",
     "@sentry/react": "^7.53.1",
-    "@terra-money/feather.js": "^1.0.6",
-    "@terra-money/ledger-station-js": "^1.3.7",
+    "@terra-money/feather.js": "^1.0.8",
+    "@terra-money/ledger-station-js": "^1.3.8",
     "@terra-money/log-finder-ruleset": "^3.0.0",
     "@terra-money/terra-utils": "^1.0.9",
     "@terra-money/terra.js": "^3.1.9",
     "@terra-money/terra.proto": "^2.0.0",
-    "@terra-money/use-wallet": "4.0.0-beta.3",
-    "@terra-money/wallet-controller": "4.0.0-beta.3",
-    "@terra-money/wallet-provider": "4.0.0-beta.3",
+    "@terra-money/wallet-kit": "^1.0.4",
     "@tippyjs/react": "^4.2.6",
     "axios": "^0.27.2",
     "bech32": "^2.0.0",

src/app/InitChains.tsx

@@ -14,7 +14,7 @@ const InitChains = ({ children }: PropsWithChildren<{}>) => {
       .get("/denoms.json", { baseURL: STATION_ASSETS })
       .then(({ data }) => setWhitelist(data))
     axios
-      .get("/ibc.json", { baseURL: STATION_ASSETS })
+      .get("/ibc_tokens.json", { baseURL: STATION_ASSETS })
       .then(({ data }) => setIbcDenoms(data))
     axios
       .get("/station/coins.json", { baseURL: ASSETS })

src/app/InitNetworks.tsx

@@ -6,6 +6,7 @@ import { useCustomLCDs } from "utils/localStorage"
 import { useValidNetworks } from "data/queries/tendermint"
 import { WithFetching } from "components/feedback"
 import { combineState } from "data/query"
+import { InterchainNetworks } from "types/network"
 
 type TokenFilter = <T>(network: Record<string, T>) => Record<string, T>
 
@@ -35,12 +36,14 @@ const InitNetworks = ({ children }: PropsWithChildren<{}>) => {
   }, [])
 
   const testBase = networks
-    ? Object.values({
-        ...networks.mainnet,
-        ...networks.testnet,
-        ...networks.classic,
-      }).map((chain) => {
-        const lcd = customLCDs[chain.chainID] ?? chain.lcd
+    ? Object.values(
+        {
+          ...networks.mainnet,
+          ...networks.testnet,
+          ...networks.classic,
+        } ?? {}
+      ).map((chain) => {
+        const lcd = customLCDs[chain?.chainID] ?? chain.lcd
         return { ...chain, lcd }
       })
     : []
@@ -65,16 +68,16 @@ const InitNetworks = ({ children }: PropsWithChildren<{}>) => {
             networksLoading: validationState.isLoading,
             filterEnabledNetworks: (networks) =>
               Object.fromEntries(
-                Object.entries(networks).filter(
+                Object.entries(networks ?? {}).filter(
                   ([chainID]) =>
                     chainID === "localterra" || validNetworks.includes(chainID)
-                )
+                ) ?? {}
               ),
             filterDisabledNetworks: (networks) =>
               Object.fromEntries(
-                Object.entries(networks).filter(
+                Object.entries(networks ?? {}).filter(
                   ([chainID]) => !validNetworks.includes(chainID)
-                )
+                ) ?? {}
               ),
           }}
         >

src/app/InitWallet.tsx

@@ -1,6 +1,5 @@
 import { PropsWithChildren, useEffect } from "react"
-import { WalletStatus } from "@terra-money/wallet-types"
-import { useWallet } from "@terra-money/use-wallet"
+import { WalletStatus, useWallet } from "@terra-money/wallet-kit"
 import { isWallet, useAuth } from "auth"
 import Online from "./containers/Online"
 import NetworkLoading from "./NetworkLoading"
@@ -15,7 +14,7 @@ const InitWallet = ({ children }: PropsWithChildren<{}>) => {
       timeout={{
         time: 3000,
         fallback: () => {
-          localStorage.removeItem("__terra_extension_router_session__")
+          localStorage.removeItem("__wallet_kit_connected_wallet")
           window.location.reload()
         },
       }}

src/app/sections/ConnectWallet.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next"
 import UsbIcon from "@mui/icons-material/Usb"
-import { useWallet } from "@terra-money/wallet-provider"
+import { useWallet } from "@terra-money/wallet-kit"
 import { STATION } from "config/constants"
 import { RenderButton } from "types/components"
 import { useAddress } from "data/wallet"
@@ -20,7 +20,7 @@ interface Props {
 const ConnectWallet = ({ renderButton }: Props) => {
   const { t } = useTranslation()
 
-  const { connect, availableConnections, availableInstallations } = useWallet()
+  const { connect, availableWallets } = useWallet()
 
   const { available } = useAuth()
 
@@ -34,23 +34,25 @@ const ConnectWallet = ({ renderButton }: Props) => {
   )
 
   const list = [
-    ...availableConnections
-      .filter(({ type }) => type !== "READONLY")
-      .map(({ type, identifier, name, icon }) => ({
+    ...availableWallets
+      .filter(({ isInstalled }) => isInstalled)
+      .map(({ id, name, icon }) => ({
         src: icon,
         children: name,
-        onClick: () => connect(type, identifier),
+        onClick: () => connect(id),
       })),
     {
       icon: <UsbIcon />,
       to: "/auth/ledger",
       children: t("Access with ledger"),
     },
-    ...availableInstallations.map(({ name, icon, url }) => ({
-      src: icon,
-      children: t(`Install ${name}`),
-      href: url,
-    })),
+    ...availableWallets
+      .filter(({ isInstalled, website }) => !isInstalled && website)
+      .map(({ name, icon, website }) => ({
+        src: icon,
+        children: t(`Install ${name}`),
+        href: website ?? "",
+      })),
   ]
 
   return (

src/app/sections/Connected.tsx

@@ -18,7 +18,7 @@ import styles from "./Connected.module.scss"
 import { useRecoilState } from "recoil"
 import { isWalletBarOpen, walletBarRoute, Path } from "pages/wallet/Wallet"
 import { useNavigate } from "react-router-dom"
-import { useWallet } from "@terra-money/use-wallet"
+import { useConnectedWallet, useWallet } from "@terra-money/wallet-kit"
 import {
   Contacts as ContactsIcon,
   Logout as LogoutIcon,
@@ -30,6 +30,7 @@ const Connected = () => {
   const navigate = useNavigate()
   const { wallet, getLedgerKey, disconnect: disconnectLedger } = useAuth()
   const { disconnect } = useWallet()
+  const connectedWallet = useConnectedWallet()
   const { data: name } = useTnsName(address ?? "")
   const [, setWalletIsOpen] = useRecoilState(isWalletBarOpen)
   const [, setWalletRoute] = useRecoilState(walletBarRoute)
@@ -117,7 +118,9 @@ const Connected = () => {
         className={styles.button}
       >
         <span className={styles.button__text}>
-          {isWallet.local(wallet) ? wallet.name : truncate(name ?? address)}
+          {isWallet.local(wallet)
+            ? wallet.name
+            : connectedWallet?.name ?? truncate(name ?? address)}
         </span>
       </Button>
     </Popover>

src/app/sections/DisplayChainsSetting.tsx

@@ -32,7 +32,7 @@ const DisplayChainsSetting = () => {
       {(input) => (
         <SettingsSelectorToggle
           onChange={onChange}
-          options={Object.keys(network)
+          options={Object.keys(network ?? {})
             .filter(
               (chainID) =>
                 network[chainID].name

src/app/sections/LCDSetting.tsx

@@ -141,7 +141,7 @@ const LCDSetting = () => {
         />
       </FormItem>
 
-      <FormItem label={t("Chain")} error={errors.chainID?.message}>
+      <FormItem label={t("Chain")} error={errors?.chainID?.message}>
         <ChainSelector
           chainsList={networksList}
           value={chainID}

src/app/sections/LanguageSetting.tsx

@@ -7,7 +7,7 @@ const LanguageSetting = () => {
 
   return (
     <SettingsSelector
-      options={Object.values(Languages)}
+      options={Object.values(Languages ?? {})}
       value={i18n.language}
       onChange={(language) => i18n.changeLanguage(language)}
     />

src/app/sections/LatestTx.tsx

@@ -16,9 +16,11 @@ import { useThemeAnimation } from "data/settings/Theme"
 import { useNetworkName } from "data/wallet"
 import { Button, FinderLink, LinkButton } from "components/general"
 import { Modal, LoadingCircular } from "components/feedback"
+import { createAmplitudeClient } from "utils/analytics/setupAmplitude"
 import { Flex } from "components/layout"
 import TxMessage from "../containers/TxMessage"
 import styles from "./LatestTx.module.scss"
+import { AnalyticsEvent } from "utils/analytics"
 
 const { createActionRuleSet, getTxCanonicalMsgs, createLogMatcherForActions } =
   ruleset
@@ -30,6 +32,7 @@ enum Status {
 }
 
 const TxIndicator = ({ txhash }: { txhash: string }) => {
+  const amplitude = createAmplitudeClient()
   const { t } = useTranslation()
   const navigate = useNavigate()
   const animation = useThemeAnimation()
@@ -56,6 +59,12 @@ const TxIndicator = ({ txhash }: { txhash: string }) => {
     status === Status.SUCCESS && onSuccess?.()
   }, [status, onSuccess])
 
+  useEffect(() => {
+    if (status !== Status.LOADING) {
+      amplitude.trackEvent(AnalyticsEvent.TRANSACTION, { status })
+    }
+  }, [status, amplitude])
+
   /* render component */
   const icon = {
     [Status.LOADING]: <LoadingCircular size={36} thickness={2} />,

src/app/sections/Preferences.tsx

@@ -8,7 +8,7 @@ import NetworkSetting from "./NetworkSetting"
 import DisplayChainsSetting from "./DisplayChainsSetting"
 import LanguageSetting from "./LanguageSetting"
 import CurrencySetting from "./CurrencySetting"
-import { useWallet, WalletStatus } from "@terra-money/wallet-provider"
+import { useWallet, WalletStatus } from "@terra-money/wallet-kit"
 import { ModalButton } from "components/feedback"
 import SettingsButton from "components/layout/SettingsButton"
 import { useNetwork, useNetworkName } from "data/wallet"
@@ -70,15 +70,15 @@ const Preferences = () => {
       key: "network",
       tab: t("Network"),
       value: capitalize(networkName),
-      disabled:
-        !sandbox && connectedWallet.status === WalletStatus.WALLET_CONNECTED,
+      disabled: !sandbox && connectedWallet.status === WalletStatus.CONNECTED,
     },
     lang: {
       key: "lang",
       tab: t("Language"),
       value:
-        Object.values(Languages).find(({ value }) => value === i18n.language)
-          ?.label ?? Languages.en.label,
+        Object.values(Languages ?? {}).find(
+          ({ value }) => value === i18n.language
+        )?.label ?? Languages.en.label,
       disabled: false,
     },
     currency: {
@@ -142,7 +142,7 @@ const Preferences = () => {
       default:
         return (
           <FlexColumn gap={8}>
-            {Object.values(routes)
+            {Object.values(routes ?? {})
               .filter(({ disabled }) => !disabled)
               .map(({ tab, value, key, className }) => (
                 <SettingsButton

src/auth/hooks/useAddress.ts

@@ -1,9 +1,9 @@
-import { useConnectedWallet } from "@terra-money/use-wallet"
+import { useConnectedWallet } from "@terra-money/wallet-kit"
 import { useNetworks } from "app/InitNetworks"
 import { addressFromWords } from "utils/bech32"
 import useAuth from "./useAuth"
-import { useChainID } from "./useNetwork"
-import { useNetwork } from "data/wallet"
+import { useChainID, useNetwork, useNetworkWithFeature } from "./useNetwork"
+import { ChainFeature } from "types/chains"
 
 /* auth | walle-provider */
 const useAddress = () => {
@@ -25,17 +25,17 @@ export const useAllInterchainAddresses = () => {
 export const useInterchainAddresses = () => {
   const connected = useConnectedWallet()
   const { filterEnabledNetworks } = useNetworks()
-  const { wallet } = useAuth()
   const networks = useNetwork()
+  const { wallet } = useAuth()
 
   if (connected?.addresses) {
     return filterEnabledNetworks(connected.addresses)
   }
 
   const words = wallet?.words
-  if (!words) return
+  if (!words) return {}
 
-  const addresses = Object.values(networks).reduce(
+  const addresses = Object.values(networks ?? {}).reduce(
     (acc, { prefix, coinType, chainID }) => {
       acc[chainID] = addressFromWords(words[coinType] as string, prefix)
       return acc
@@ -45,4 +45,12 @@ export const useInterchainAddresses = () => {
   return addresses
 }
 
+export const useInterchainAddressesWithFeature = (feature?: ChainFeature) => {
+  const addresses = useInterchainAddresses()
+  const networks = useNetworkWithFeature(feature)
+  return Object.fromEntries(
+    Object.entries(addresses).filter(([key, _]) => networks[key])
+  )
+}
+
 export default useAddress

src/auth/hooks/useAuth.ts

@@ -148,8 +148,8 @@ const useAuth = () => {
     if (!wallet) throw new Error("Wallet is not defined")
     const { words } = wallet
     const address = addressFromWords(
-      words[networks[txOptions.chainID].coinType] ?? "",
-      networks[txOptions.chainID]?.prefix
+      words[networks[txOptions?.chainID].coinType] ?? "",
+      networks[txOptions?.chainID]?.prefix
     )
 
     return await lcd.tx.create([{ address }], txOptions)
@@ -192,7 +192,7 @@ const useAuth = () => {
     if (!wallet) throw new Error("Wallet is not defined")
 
     if (is.ledger(wallet)) {
-      const key = await getLedgerKey(networks[txOptions.chainID].coinType)
+      const key = await getLedgerKey(networks[txOptions?.chainID].coinType)
       const wallet = lcd.wallet(key)
       const signMode = SignatureV2.SignMode.SIGN_MODE_LEGACY_AMINO_JSON
       return await wallet.createAndSignTx({
@@ -204,10 +204,10 @@ const useAuth = () => {
       return await lcd.wallet(key).createAndSignTx(txOptions)
     }*/ else {
       const pk = getKey(password)
-      if (!pk || !pk[networks[txOptions.chainID].coinType])
+      if (!pk || !pk[networks[txOptions?.chainID].coinType])
         throw new PasswordError("Incorrect password")
       const key = new RawKey(
-        Buffer.from(pk[networks[txOptions.chainID].coinType] ?? "", "hex")
+        Buffer.from(pk[networks[txOptions?.chainID].coinType] ?? "", "hex")
       )
       const wallet = lcd.wallet(key)
       return await wallet.createAndSignTx(txOptions)
@@ -236,7 +236,7 @@ const useAuth = () => {
   const post = async (txOptions: CreateTxOptions, password = "") => {
     if (!wallet) throw new Error("Wallet is not defined")
     const signedTx = await sign(txOptions, password)
-    const result = await lcd.tx.broadcastSync(signedTx, txOptions.chainID)
+    const result = await lcd.tx.broadcastSync(signedTx, txOptions?.chainID)
     if (isTxError(result)) throw new Error(result.raw_log)
     return result
   }