Merge remote-tracking branch 'origin/sync-8.0.5.2'

stationmoney · Jan 25, 2024 · b582235 · b582235
2 parents 4e10cbc + c000d46
commit b582235
Show file tree

Hide file tree

Showing 84 changed files with 1,164 additions and 1,802 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,12 +22,12 @@
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.9.1",
     "@sentry/react": "^7.53.1",
-    "@terra-money/feather.js": "^1.0.11",
+    "@terra-money/feather.js": "1.0.11",
     "@terra-money/ledger-station-js": "^1.3.7",
     "@terra-money/log-finder-ruleset": "^3.0.3",
     "@terra-money/msg-reader": "^3.0.1",
     "@terra-money/station-connector": "^1.0.12",
-    "@terra-money/station-ui": "^1.0.3",
+    "@terra-money/station-ui": "^1.0.4",
     "@terra-money/terra-utils": "^1.2.0-beta.7",
     "@terra-money/terra.js": "^3.1.9",
     "@terra-money/terra.proto": "^2.0.0",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Station Wallet",
-  "version": "8.0.5.1",
-  "version_name": "8.0.5.1",
+  "version": "8.0.5.2",
+  "version_name": "8.0.5.2",
   "background": {
     "service_worker": "background.js"
   },

diff --git a/src/app/sections/DashboardButton.tsx b/src/app/sections/DashboardButton.tsx
@@ -8,9 +8,7 @@ const DashboardButton = forwardRef(
     const openDashboard = () => window.open(STATION, "_blank")
     return (
       <HeaderIconButton onClick={openDashboard} ref={ref}>
-        <DashboardIcon
-          style={{ height: 18, width: 18, fill: "var(--token-dark-900)" }}
-        />
+        <DashboardIcon height={18} width={18} fill={"var(--token-dark-900)"} />
       </HeaderIconButton>
     )
   }

diff --git a/src/app/sections/settings/LCDSetting.module.scss b/src/app/sections/settings/LCDSetting.module.scss
@@ -1,21 +1,3 @@
-.button__padding {
-  margin-bottom: 50px;
-}
-
-.button__conainer {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  margin-top: 0;
-  padding: 20px;
-  background-color: var(--card-bg);
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
 .loading {
   color: var(--info);
 }

diff --git a/src/app/sections/settings/LCDSetting.tsx b/src/app/sections/settings/LCDSetting.tsx
@@ -1,26 +1,27 @@
-import { useNetworkName, useNetworkOptions } from "data/wallet"
+import { useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
+import { useLocation, useNavigate } from "react-router-dom"
+import classNames from "classnames"
+import { useNetworkName, useNetworkOptions } from "data/wallet"
 import { useNetworks } from "app/InitNetworks"
-import { useEffect, useMemo } from "react"
-import styles from "./LCDSetting.module.scss"
 import { useValidateLCD } from "data/queries/tendermint"
 import { LoadingCircular } from "components/feedback"
 import ClearIcon from "@mui/icons-material/Clear"
 import CheckIcon from "@mui/icons-material/Check"
-import { Flex } from "components/layout"
+import DeleteButton from "components/form/DeleteButton"
 import { useCustomLCDs } from "utils/localStorage"
 import {
   Dropdown,
   Input,
-  Form,
   InputWrapper,
   ButtonInlineWrapper,
   SubmitButton,
+  Flex,
+  FlexColumn,
+  Form,
 } from "@terra-money/station-ui"
-import classNames from "classnames"
-import DeleteButton from "components/form/DeleteButton"
-import { useLocation, useNavigate } from "react-router-dom"
+import styles from "./LCDSetting.module.scss"
 
 const cx = classNames.bind(styles)
 
@@ -133,36 +134,41 @@ const LCDSetting = (props: Props) => {
   }
 
   return (
-    <Form onSubmit={handleSubmit(submit)}>
-      <InputWrapper label={t("Network")} error={errors.network?.message}>
-        <Dropdown
-          options={networkOptions}
-          value={network}
-          onChange={(network) => setValue("network", network)}
-        />
-      </InputWrapper>
-
-      <InputWrapper label={t("Source Chain")} error={errors?.chainID?.message}>
-        <Dropdown
-          withSearch
-          options={networksList}
-          value={chainID}
-          onChange={(chainID) => setValue("chainID", chainID)}
-        />
-      </InputWrapper>
-      <InputWrapper
-        label={t("Custom URL")}
-        error={errorMessage}
-        extra={renderIsValidLCD()}
-      >
-        <Input
-          type="text"
-          placeholder={networks[network]?.[chainID]?.lcd}
-          {...register("lcd", {
-            value: customLCDs[chainID] ?? "",
-          })}
-        />
-      </InputWrapper>
+    <Form onSubmit={handleSubmit(submit)} spaceBetween>
+      <FlexColumn gap={24}>
+        <InputWrapper label={t("Network")} error={errors.network?.message}>
+          <Dropdown
+            options={networkOptions}
+            value={network}
+            onChange={(network) => setValue("network", network)}
+          />
+        </InputWrapper>
+
+        <InputWrapper
+          label={t("Source Chain")}
+          error={errors?.chainID?.message}
+        >
+          <Dropdown
+            withSearch
+            options={networksList}
+            value={chainID}
+            onChange={(chainID) => setValue("chainID", chainID)}
+          />
+        </InputWrapper>
+        <InputWrapper
+          label={t("Custom URL")}
+          error={errorMessage}
+          extra={renderIsValidLCD()}
+        >
+          <Input
+            type="text"
+            placeholder={networks[network]?.[chainID]?.lcd}
+            {...register("lcd", {
+              value: customLCDs[chainID] ?? "",
+            })}
+          />
+        </InputWrapper>
+      </FlexColumn>
       <ButtonInlineWrapper>
         {selectedChainID && <DeleteButton onClick={handleDelete} />}
         <SubmitButton

diff --git a/src/app/sections/settings/NetworkSetting.tsx b/src/app/sections/settings/NetworkSetting.tsx
@@ -1,15 +1,14 @@
-import { useNetworkOptions, useNetworkState } from "data/wallet"
+import { useNavigate } from "react-router-dom"
+import { useNetworkOptions, useNetworkState, useNetwork } from "data/wallet"
 import SettingsSelector from "components/layout/SettingsSelector"
+import { useCustomLCDs } from "utils/localStorage"
 import {
+  FlexColumn,
   NavButton,
   SectionHeader,
   AddressSelectableListItem,
+  BuyIcon,
 } from "@terra-money/station-ui"
-import { FlexColumn } from "components/layout"
-import AddIcon from "@mui/icons-material/Add"
-import { useCustomLCDs } from "utils/localStorage"
-import { useNetwork } from "data/wallet"
-import { useNavigate } from "react-router-dom"
 
 const NetworkSetting = () => {
   const [network, setNetwork] = useNetworkState()
@@ -28,15 +27,17 @@ const NetworkSetting = () => {
   if (!networkOptions) return null
 
   return (
-    <FlexColumn gap={30}>
+    <FlexColumn gap={40} justify="flex-start">
       <SettingsSelector
         accordion
         options={networkOptions}
         value={network}
         onChange={setNetwork}
       />
       <NavButton
-        icon={<AddIcon />}
+        icon={
+          <BuyIcon width={14} height={14} fill={"var(--token-light-white)"} />
+        }
         label="Add Custom LCD Endpoint"
         onClick={() => navigate("/preferences/network/lcd")}
       />

diff --git a/src/app/sections/settings/PreferencesPage.module.scss b/src/app/sections/settings/PreferencesPage.module.scss
@@ -1,12 +1,13 @@
+@import "font_mixins";
+
 .subtitle {
   padding-left: 28px;
+  @include X-SmallLH;
   color: var(--token-dark-900);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 14px;
 }
 
 .version {
-  font-size: 10px;
+  margin-top: 16px;
+  @include XX-Small;
   color: var(--token-light-100);
 }
diff --git a/src/app/sections/settings/PreferencesPage.tsx b/src/app/sections/settings/PreferencesPage.tsx
@@ -1,13 +1,17 @@
+import { ReactElement } from "react"
+import { useNavigate } from "react-router-dom"
 import { useTranslation } from "react-i18next"
-import { Checkbox, FlexColumn, Grid } from "@terra-money/station-ui"
+import browser from "webextension-polyfill"
 import { sandbox } from "auth/scripts/env"
-import { NavButton, SectionHeader } from "@terra-money/station-ui"
-import { ReactElement } from "react"
+import { useReplaceKeplr } from "utils/localStorage"
 import { useSettingsRoutes } from "./routes"
-import { useNavigate } from "react-router-dom"
+import {
+  NavButton,
+  SectionHeader,
+  Checkbox,
+  FlexColumn,
+} from "@terra-money/station-ui"
 import styles from "./PreferencesPage.module.scss"
-import { useReplaceKeplr } from "utils/localStorage"
-import browser from "webextension-polyfill"
 
 export interface SettingsPage {
   route?: string
@@ -31,7 +35,7 @@ const PreferencesPage = () => {
   }: {
     settings: Record<string, SettingsPage>
   }) => (
-    <FlexColumn gap={6}>
+    <FlexColumn gap={8}>
       {Object.values(settings)
         .filter(({ disabled }) => !disabled)
         .map(({ title, route, onClick, ...rest }) => (
@@ -46,35 +50,37 @@ const PreferencesPage = () => {
   )
 
   return (
-    <FlexColumn gap={16}>
-      {sandbox && (
-        <NavButton
-          {...routes.network}
-          label={t(routes.network.title)}
-          onClick={
-            routes.network.route
-              ? () => navigate(`/preferences/${routes.network.route}`)
-              : routes.network.onClick
-          }
-        />
-      )}
-      <SectionHeader withLine />
-      <SettingsGroup settings={functions} />
-      <SectionHeader withLine />
-      <SettingsGroup settings={settings} />
-      <SectionHeader withLine />
-      <Grid gap={8}>
+    <FlexColumn gap={16} justify="flex-start">
+      <FlexColumn gap={8} align="flex-start">
         <Checkbox
           label={t("Set Station as default browser wallet")}
           checked={replaceKeplr}
           onClick={() => setReplaceKeplr(!replaceKeplr)}
         />
         <p className={styles.subtitle}>
           {t(
-            "Activating this will prioritize station over other wallet extensions when connecting to apps."
+            "Activating this will prioritize station over other wallet extensions you may have installed when connecting to apps."
           )}
         </p>
-      </Grid>
+      </FlexColumn>
+      {sandbox && (
+        <>
+          <SectionHeader withLine />
+          <NavButton
+            {...routes.network}
+            label={t(routes.network.title)}
+            onClick={
+              routes.network.route
+                ? () => navigate(`/preferences/${routes.network.route}`)
+                : routes.network.onClick
+            }
+          />
+        </>
+      )}
+      <SectionHeader withLine />
+      <SettingsGroup settings={functions} />
+      <SectionHeader withLine />
+      <SettingsGroup settings={settings} />
       <p className={styles.version}>
         {"Station Wallet v" + browser.runtime?.getManifest?.()?.version}
       </p>

diff --git a/src/app/sections/settings/PreferencesRouter.tsx b/src/app/sections/settings/PreferencesRouter.tsx
@@ -1,7 +1,7 @@
 import { Route, Routes, useLocation } from "react-router-dom"
 import { useSettingsRoutes } from "./routes"
-import ExtensionPage from "extension/components/ExtensionPage"
 import ConfirmDelete from "txs/AddressBook/ConfirmDelete"
+import ExtensionPageV2 from "extension/components/ExtensionPageV2"
 
 const PreferencesRouter = () => {
   const { routes } = useSettingsRoutes()
@@ -14,14 +14,13 @@ const PreferencesRouter = () => {
         <Route
           path={r.route}
           element={
-            <ExtensionPage
+            <ExtensionPageV2
               title={r.title}
               fullHeight
-              modal
               backButtonPath={backPath}
             >
               {r.element}
-            </ExtensionPage>
+            </ExtensionPageV2>
           }
           key={r.route}
         />

diff --git a/src/app/sections/settings/SecuritySetting.tsx b/src/app/sections/settings/SecuritySetting.tsx
@@ -1,14 +1,14 @@
-import { NavButton } from "@terra-money/station-ui"
-import { FlexColumn } from "components/layout"
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined"
 import { useNavigate } from "react-router-dom"
+import { NavButton, FlexColumn, LockIcon } from "@terra-money/station-ui"
 
 const SecuritySetting = () => {
   const navigate = useNavigate()
   return (
-    <FlexColumn gap={16}>
+    <FlexColumn gap={16} justify="flex-start">
       <NavButton
-        icon={<LockOutlinedIcon />}
+        icon={
+          <LockIcon width={14} height={14} fill={"var(--token-light-white)"} />
+        }
         label="Change Password"
         onClick={() => navigate(`/preferences/security/change-password`)}
       />

diff --git a/src/app/sections/settings/SettingsButton.tsx b/src/app/sections/settings/SettingsButton.tsx
@@ -5,17 +5,14 @@ const SettingsButton = () => {
   const navigate = useNavigate()
 
   return (
-    <SettingsIcon
-      width={18}
-      height={18}
-      onClick={() => navigate("/preferences")}
-      style={{
-        cursor: "pointer",
-        //marginTop: "24px",
-        //marginBottom: "16px",
-      }}
-      fill={"var(--token-dark-900)"}
-    />
+    <button>
+      <SettingsIcon
+        width={18}
+        height={18}
+        onClick={() => navigate("/preferences")}
+        fill={"var(--token-dark-900)"}
+      />
+    </button>
   )
 }
 

diff --git a/src/app/sections/settings/routes.tsx b/src/app/sections/settings/routes.tsx
@@ -108,7 +108,7 @@ export const useSettingsRoutes = () => {
     addressBookNew: {
       route: "address-book/new",
       element: <AddAddressBookForm />,
-      title: t("New Address Entry"),
+      title: t("New Address"),
     },
     myWallet: {
       route: "address-book/my-addresses",