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

IS-SPRINT-26

package.json

@@ -29,12 +29,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.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",
@@ -45,18 +46,18 @@
     "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",
-    "recharts": "^2.1.10",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.15.0",
+    "recharts": "^2.8.0",
     "recoil": "^0.7.2",
     "sass": "^1.52.1",
     "secp256k1": "^4.0.3",
@@ -65,8 +66,9 @@
     "xss": "1.0.11"
   },
   "devDependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/crypto-js": "^4.1.1",
     "@types/jest": "^27.5.1",
     "@types/node": "^17.0.35",

public/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Station Wallet",
-  "version": "7.4.8",
-  "version_name": "7.4.8",
+  "version": "7.4.9",
+  "version_name": "7.4.9",
   "background": {
     "service_worker": "background.js"
   },

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/components/PopoverNone.tsx

@@ -7,6 +7,7 @@ interface Props {
   className?: string
   footer?: { children: ReactNode; onClick: () => void; to?: string }
 }
+const cx = classNames.bind(styles)
 
 const PopoverNone = (props: PropsWithChildren<Props>) => {
   const { className, children, footer } = props
@@ -19,7 +20,7 @@ const PopoverNone = (props: PropsWithChildren<Props>) => {
   }
 
   return (
-    <div className={classNames(styles.component, className)}>
+    <div className={cx(styles.component, className)}>
       <div className={styles.inner}>{children}</div>
       {renderFooter()}
     </div>

src/app/sections/LastHeight.tsx

@@ -7,6 +7,8 @@ import { Flex } from "components/layout"
 import styles from "./LastHeight.module.scss"
 import { useChainID } from "data/wallet"
 
+const cx = classNames.bind(styles)
+
 const LastHeight = () => {
   const { t } = useTranslation()
   const { block } = useTerraObserver()
@@ -17,7 +19,7 @@ const LastHeight = () => {
   return (
     <Flex gap={4} className={styles.component} start>
       <div
-        className={classNames(
+        className={cx(
           styles.indicator,
           height ? styles.success : styles.loading
         )}

src/app/sections/Nav.tsx

@@ -20,7 +20,7 @@ const Nav = () => {
   return (
     <nav>
       <header className={styles.header}>
-        <div className={classNames(styles.item, styles.logo)}>
+        <div className={cx(styles.item, styles.logo)}>
           <img src={icon} alt="Station" />{" "}
           <strong className={styles.title}>Station</strong>
         </div>

src/app/sections/UpdateExtension.tsx

@@ -2,10 +2,12 @@ import classNames from "classnames"
 import { EXTENSION } from "config/constants"
 import styles from "./UpdateExtension.module.scss"
 
+const cx = classNames.bind(styles)
+
 const UpdateExtension = () => {
   if (window.isTerraExtensionAvailable && !window.isStationExtensionAvailable)
     return (
-      <div className={classNames(styles.text, styles.info)}>
+      <div className={cx(styles.text, styles.info)}>
         Please{" "}
         <a href={EXTENSION} target="_blank" rel="noreferrer">
           update

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 }[]

src/auth/modules/create/CreateWalletForm.tsx

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form"
 import { Grid } from "components/layout"
 import { Form, FormItem, FormWarning, Submit, Value } from "components/form"
 import { Checkbox, Input } from "components/form"
-import validate from "../../scripts/validate"
+import validate from "auth/scripts/validate"
 import { TooltipIcon } from "components/display"
 import { useCreateWallet, Values as DefaultValues } from "./CreateWalletWizard"
 

src/auth/modules/create/NewMultisigWalletForm.tsx

@@ -6,7 +6,7 @@ import { Form, FormItem } from "components/form"
 import { Input, Submit } from "components/form"
 import { Modal } from "components/feedback"
 import { addWallet } from "../../scripts/keystore"
-import validate from "../../scripts/validate"
+import validate from "auth/scripts/validate"
 import CreateMultisigWalletForm from "./CreateMultisigWalletForm"
 import CreatedWallet from "./CreatedWallet"
 import { wordsFromAddress } from "utils/bech32"

src/auth/modules/manage/ChangePasswordForm.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom"
 import { useForm } from "react-hook-form"
 import { Form, FormItem, Input, Submit } from "components/form"
 import { changePassword } from "../../scripts/keystore"
-import validate from "../../scripts/validate"
+import validate from "auth/scripts/validate"
 import useAuth from "../../hooks/useAuth"
 import ConfirmModal from "./ConfirmModal"
 

src/components/display/Dl.tsx

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

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}`, cx({ small }))
   return <InlineFlex className={className}>{children}</InlineFlex>
 }
 

src/components/form/AssetList.tsx

@@ -2,6 +2,8 @@ import styles from "./ChainSelector.module.scss"
 import WithSearchInput from "pages/custom/WithSearchInput"
 import classNames from "classnames"
 
+const cx = classNames.bind(styles)
+
 interface AssetType {
   denom: string
   balance: string
@@ -25,7 +27,7 @@ const ChainList = ({ list, onChange, value, small, noSearch }: Props) => {
       <WithSearchInput disabled={noSearch} inline gap={4}>
         {(search) => (
           <div
-            className={classNames(
+            className={cx(
               styles.options__container,
               small && styles.options__container__small
             )}

src/components/form/ChainList.tsx

@@ -3,6 +3,8 @@ import WithSearchInput from "pages/custom/WithSearchInput"
 import classNames from "classnames"
 import { InterchainNetwork } from "types/network"
 
+const cx = classNames.bind(styles)
+
 interface Props {
   list: InterchainNetwork[]
   onChange: (chain: string) => void
@@ -17,7 +19,7 @@ const ChainList = ({ list, onChange, value, small, noSearch }: Props) => {
       <WithSearchInput disabled={noSearch} inline gap={4}>
         {(search) => (
           <div
-            className={classNames(
+            className={cx(
               styles.options__container,
               small && styles.options__container__small
             )}

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

@@ -39,17 +39,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()
@@ -79,7 +77,7 @@ export const SearchInput = forwardRef(
   ) => {
     return (
       <div
-        className={classNames(
+        className={cx(
           styles.wrapper,
           styles.search,
           attrs.small && styles.search__small,
@@ -89,10 +87,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/StandardDropDown.tsx

@@ -3,6 +3,8 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
 import classNames from "classnames"
 import styles from "./ChainSelector.module.scss"
 
+const cx = classNames.bind(styles)
+
 interface StandardDropdownProps {
   onChange: (chain: string) => void
   setNetworkIndex: (index: number) => void
@@ -39,7 +41,7 @@ const StandardDropdown = ({
       {open && (
         <div className={styles.options}>
           <div
-            className={classNames(
+            className={cx(
               styles.options__container,
               small && styles.options__container__small
             )}

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/FinderLink.tsx

@@ -7,6 +7,8 @@ import { ExternalLink } from "./External"
 import { getChainIDFromAddress } from "utils/bech32"
 import styles from "./FinderLink.module.scss"
 
+const cx = classNames.bind(styles)
+
 interface Props extends HTMLAttributes<HTMLAnchorElement> {
   value?: string
   /* path (default: address) */
@@ -28,7 +30,7 @@ const FinderLink = forwardRef(
     const value =
       rest.value || (typeof children === "string" ? (children as string) : "")
 
-    const className = classNames(attrs.className, styles.link)
+    const className = cx(attrs.className, styles.link)
     const explorer =
       networks[chainID ?? getChainIDFromAddress(value, networks) ?? ""]
         ?.explorer

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>

src/components/layout/Card.tsx

@@ -77,9 +77,7 @@ const Card = (props: PropsWithChildren<Props>) => {
               </header>
             )}
 
-            <section
-              className={classNames(styles.main, mainClassName, twoTone)}
-            >
+            <section className={cx(styles.main, mainClassName, twoTone)}>
               {wrong ?? (children && <ErrorBoundary>{children}</ErrorBoundary>)}
             </section>
           </>

src/components/layout/ChainFilter.tsx

@@ -4,6 +4,8 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import styles from "./ChainFilter.module.scss"
 
+const cx = classNames.bind(styles)
+
 const ChainFilter = ({
   children,
   all,
@@ -29,13 +31,7 @@ const ChainFilter = ({
 
   return (
     <div className={outside ? styles.chainfilter__out : styles.chainfilter}>
-      <div
-        className={classNames(
-          className,
-          styles.header,
-          swap ? styles.swap : ""
-        )}
-      >
+      <div className={cx(className, styles.header, swap ? styles.swap : "")}>
         {title && <h1>{title}</h1>}
         <div className={styles.pills}>
           {all && (