Merge pull request #528 from terra-money/is-sprint-26

IS-SPRINT-26

.gitignore

@@ -22,4 +22,7 @@ yarn-error.log*
 
 .prettierrc
 
-.vscode
+.vscode
+
+# commit hash used for update detection
+public/commit_hash

package.json

@@ -4,11 +4,11 @@
   "hompage": "https://station.money",
   "author": "Terra <[email protected]> (https://station.money)",
   "repository": "github:terra-money/station",
-  "version": "7.3.3",
+  "version": "7.3.4",
   "license": "MIT",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "echo \"$CF_PAGES_COMMIT_SHA\" > public/commit_hash && react-scripts start",
+    "build": "echo \"$CF_PAGES_COMMIT_SHA\" > public/commit_hash && react-scripts build",
     "test": "react-scripts test",
     "prepare": "husky install",
     "pre-commit": "lint-staged",
@@ -34,13 +34,13 @@
     "@terra-money/terra-utils": "^1.0.9",
     "@terra-money/terra.js": "^3.1.9",
     "@terra-money/terra.proto": "^2.0.0",
-    "@terra-money/wallet-kit": "^1.0.12",
+    "@terra-money/wallet-kit": "^1.0.15",
     "@tippyjs/react": "^4.2.6",
     "axios": "^0.27.2",
     "bech32": "^2.0.0",
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.28.0",
     "i18next": "^21.8.14",
@@ -51,17 +51,17 @@
     "lottie-react": "^2.3.1",
     "numeral": "^2.0.6",
     "prettier": "^2.6.2",
-    "qrcode.react": "^3.0.2",
+    "qrcode.react": "^3.1.0",
     "qs": "^6.11.0",
     "ramda": "^0.28.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "7.22.5",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.29.0",
     "react-i18next": "^11.18.1",
     "react-modal": "^3.15.1",
-    "react-query": "^3.39.0",
-    "react-router-dom": "^6.3.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.15.0",
     "recharts": "^2.1.16",
     "recoil": "^0.7.2",
     "sass": "^1.52.1",
@@ -71,18 +71,16 @@
     "xss": "1.0.11"
   },
   "devDependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
     "@types/crypto-js": "^4.1.1",
     "@types/jest": "^27.5.1",
     "@types/node": "^17.0.35",
     "@types/numeral": "^2.0.2",
     "@types/qrcode.react": "^1.0.2",
     "@types/qs": "^6.9.7",
     "@types/ramda": "^0.28.13",
-    "@types/react": "^18.0.9",
+    "@types/react": "^18.2.21",
     "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^18.2.7",
     "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/secp256k1": "^4.0.3",

src/app/App.tsx

@@ -34,6 +34,7 @@ import Wallet from "pages/wallet/Wallet"
 import NavButton from "./sections/NavButton"
 import NetworkStatus from "components/display/NetworkStatus"
 import EnableCoinType from "./sections/EnableCoinType"
+import UpdateNotification from "./update/UpdateNotification"
 
 const App = () => {
   const { element: routes } = useNav()
@@ -81,6 +82,7 @@ const App = () => {
           </ErrorBoundary>
         </Content>
       </Layout>
+      <UpdateNotification />
     </InitBankBalance>
   )
 }

src/app/components/Overlay.tsx

@@ -2,11 +2,13 @@ import classNames from "classnames"
 import { PropsWithChildren } from "react"
 import styles from "./Overlay.module.scss"
 
+const cx = classNames.bind(styles)
+
 const Overlay = ({
   children,
   className,
 }: PropsWithChildren<{ className?: string }>) => {
-  return <div className={classNames(styles.overlay, className)}>{children}</div>
+  return <div className={cx(styles.overlay, className)}>{children}</div>
 }
 
 export default Overlay

src/app/update/UpdateNotification.module.scss

@@ -0,0 +1,26 @@
+@import "mixins";
+
+.notification {
+  z-index: 1000;
+  position: absolute;
+  bottom: 1.2rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: var(--bg);
+  padding: 0.5rem 1.4rem;
+  border-radius: 1rem;
+  //font-size: var(--font-size-small);
+  white-space: nowrap;
+  // same shadow as send/receive/buy buttons
+  box-shadow: inset 0px 1.5px 0px 0px rgb(255 255 255 / 8%),
+    0px 4px 24px 0px rgb(36 36 40 / 30%);
+
+  button {
+    color: var(--button-primary-bg);
+    margin-left: 1rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/app/update/UpdateNotification.tsx

@@ -0,0 +1,44 @@
+import { RefetchOptions } from "data/query"
+import { useQuery } from "react-query"
+import styles from "./UpdateNotification.module.scss"
+import { useTranslation } from "react-i18next"
+import axios from "axios"
+import { useEffect, useRef, useState } from "react"
+
+const useCommithash = (disabled: boolean) => {
+  return useQuery(
+    [],
+    async () => {
+      // fetch commit_hash file created at build time
+      const { data: commit_hash } = await axios.get("/commit_hash")
+      return commit_hash
+    },
+    { ...RefetchOptions.DEFAULT, enabled: !disabled }
+  )
+}
+
+export default function UpdateNotification() {
+  const old_commit_hash = useRef<string>()
+  const { t } = useTranslation()
+  const [showNotification, setShownotification] = useState<boolean>(false)
+  const { data: commit_hash } = useCommithash(showNotification)
+
+  useEffect(() => {
+    if (showNotification) return
+    if (!old_commit_hash.current) old_commit_hash.current = commit_hash
+
+    setShownotification(old_commit_hash.current !== commit_hash)
+  }, [commit_hash, showNotification])
+
+  // no update available or request still in progress
+  // (comment out next line to test)
+  if (!showNotification) return null
+
+  // update available
+  return (
+    <div className={styles.notification}>
+      {t("There is a new version available")}
+      <button onClick={() => window.location.reload()}>{t("Reload")}</button>
+    </div>
+  )
+}

src/auth/hooks/useNetwork.ts

@@ -54,6 +54,7 @@ export const useNetwork = (): Record<ChainID, InterchainNetwork> => {
   const wallet = useRecoilValue(walletState)
   const connectedWallet = useWallet()
   const { customLCDs } = useCustomLCDs()
+  const useOverrideAssets = process.env.REACT_APP_STATION_ASSETS
 
   function withCustomLCDs(networks: Record<ChainID, InterchainNetwork>) {
     return Object.fromEntries(
@@ -64,6 +65,10 @@ export const useNetwork = (): Record<ChainID, InterchainNetwork> => {
     )
   }
 
+  if (useOverrideAssets) {
+    return networks[network]
+  }
+
   // check connected wallet
   if (connectedWallet.status === WalletStatus.CONNECTED) {
     if (network !== "mainnet" && "phoenix-1" in connectedWallet.network) {
@@ -81,27 +86,9 @@ export const useNetwork = (): Record<ChainID, InterchainNetwork> => {
     ) {
       setNetwork("localterra")
     }
-
-    const networksWithVersion = Object.fromEntries(
-      Object.entries(
-        connectedWallet.network as Record<ChainID, InterchainNetwork>
-      ).map(([key, value]) => {
-        if (value.version === undefined) {
-          if (key === "phoenix-1" || key === "pisco-1") {
-            return [
-              key,
-              {
-                ...value,
-                version: "0.46",
-              },
-            ]
-          }
-        }
-        return [key, value]
-      })
+    return filterEnabledNetworks(
+      connectedWallet.network as Record<ChainID, InterchainNetwork>
     )
-
-    return filterEnabledNetworks(networksWithVersion)
   }
 
   // multisig wallet are supported only on terra

src/auth/modules/create/CreateMultisigWalletForm.tsx

@@ -13,7 +13,7 @@ import { Grid } from "components/layout"
 import { Form, FormGroup, FormItem } from "components/form"
 import { FormError, FormWarning } from "components/form"
 import { Input, Submit, Paste } from "components/form"
-import validate from "../../scripts/validate"
+import validate from "auth/scripts/validate"
 
 interface Values {
   addresses: { value: AccAddress }[]
@@ -125,7 +125,7 @@ const CreateMultisigWalletForm = ({ onCreated }: Props) => {
             <FormItem>
               <Input
                 {...register(`addresses.${index}.value`, {
-                  validate: AccAddress.validate,
+                  validate: validate.accAddress,
                 })}
                 placeholder={SAMPLE_ADDRESS}
               />

src/auth/scripts/validate.ts

@@ -1,3 +1,4 @@
+import { AccAddress } from "@terra-money/feather.js"
 import { getStoredWallet } from "./keystore"
 import wordlist from "bip39/src/wordlists/english.json"
 
@@ -21,7 +22,10 @@ const validate = {
       }
     },
   },
-
+  accAddress: {
+    address: (address: string) =>
+      AccAddress.validate(address) || "Invalid address",
+  },
   password: {
     required: (password: string) => !!password.length || "Password is required",
     length: (password: string) =>

src/components/display/Tag.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const Tag = ({ color, small, children }: PropsWithChildren<Props>) => {
-  const className = classNames(styles.tag, `bg-${color}`, cx({ small }))
+  const className = cx(styles.tag, `bg-${color}`, { small })
   return <InlineFlex className={className}>{children}</InlineFlex>
 }
 

src/components/form/FormHelp.tsx

@@ -4,10 +4,12 @@ import InfoIcon from "@mui/icons-material/Info"
 import { Flex } from "../layout"
 import styles from "./FormHelp.module.scss"
 
+const cx = classNames.bind(styles)
+
 const Component = (props: PropsWithChildren<{ className: string }>) => {
   const { children, className } = props
   return (
-    <div className={classNames(styles.component, className)}>
+    <div className={cx(styles.component, className)}>
       <Flex>
         <InfoIcon fontSize="inherit" style={{ fontSize: 18 }} />
       </Flex>

src/components/form/Input.tsx

@@ -40,17 +40,15 @@ const Input = forwardRef(
         {token && (
           <WithTokenItem token={token}>
             {({ symbol }) => (
-              <Flex className={classNames(styles.symbol, styles.after)}>
-                {symbol}
-              </Flex>
+              <Flex className={cx(styles.symbol, styles.after)}>{symbol}</Flex>
             )}
           </WithTokenItem>
         )}
 
         {actionButton && (
           <button
             type="button"
-            className={classNames(styles.symbol, styles.after)}
+            className={cx(styles.symbol, styles.after)}
             onClick={(e) => {
               actionButton.onClick()
               e.stopPropagation()
@@ -80,7 +78,7 @@ export const SearchInput = forwardRef(
   ) => {
     return (
       <div
-        className={classNames(
+        className={cx(
           styles.wrapper,
           styles.search,
           attrs.small && styles.search__small,
@@ -90,10 +88,7 @@ export const SearchInput = forwardRef(
       >
         <input
           {...attrs}
-          className={classNames(
-            styles.input,
-            attrs.small && styles.input__small
-          )}
+          className={cx(styles.input, attrs.small && styles.input__small)}
           inputMode="search"
           autoComplete="off"
           ref={ref}

src/components/form/Select.tsx

@@ -18,7 +18,7 @@ const Select = forwardRef(
     const className = cx(styles.select, { small, before })
 
     return (
-      <div className={classNames(styles.wrapper, attrs.className)}>
+      <div className={cx(styles.wrapper, attrs.className)}>
         <select {...attrs} className={className} ref={ref} />
         <ArrowDropDownIcon style={{ fontSize: 18 }} className={styles.caret} />
       </div>

src/components/form/Submit.tsx

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes } from "react"
 import { useTranslation } from "react-i18next"
-import { Button } from "../general"
-import { LoadingCircular } from "../feedback"
+import { Button } from "components/general"
 import styles from "./Form.module.scss"
+import { LoadingCircular } from "../feedback"
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   submitting?: boolean

src/components/general/Button.tsx

@@ -21,7 +21,7 @@ type Props = ButtonConfig & ButtonHTMLAttributes<HTMLButtonElement>
 const Button = forwardRef(
   ({ children, ...props }: Props, ref?: ForwardedRef<HTMLButtonElement>) => {
     const { icon, size, color, outline, block, loading, ...attrs } = props
-    const className = classNames(getClassName(props), props.className)
+    const className = cx(getClassName(props), props.className)
 
     return (
       <button type="button" {...attrs} className={className} ref={ref}>

src/components/general/LinkButton.tsx

@@ -2,11 +2,13 @@ import { Link, LinkProps } from "react-router-dom"
 import classNames from "classnames"
 import { ButtonConfig, getClassName } from "./Button"
 
+const cx = classNames.bind({})
+
 type Props = ButtonConfig & LinkProps
 
 const LinkButton = (props: Props) => {
   const { icon, size, color, outline, block, children, ...attrs } = props
-  const className = classNames(getClassName(props), props.className)
+  const className = cx(getClassName(props), props.className)
 
   return attrs.disabled ? (
     <span {...attrs} className={className}>

src/components/general/Pre.tsx

@@ -31,7 +31,7 @@ const Pre = ({ height, title, children, copy, ...props }: Props) => {
         </header>
       )}
 
-      <pre style={{ height }} className={cx(styles.pre, props)}>
+      <pre style={{ height }} className={cx(styles.pre, { ...props })}>
         {text}
       </pre>
     </Grid>