7.2.6 (#384)

* fix: always show native assets regardless of denoms (#348)

* St 353 display chain selection on inactive chain click in OtherChainButtons (#329)

* WIP: chains display prefs open

* feat: open preferences on click

* cleanup

* cleanup

* feat: swap terra.kitchen/utils for @terra-money/terra-utils (#321)

* feat: guard against empty networks, chaindID, or lcd (#327)

* feat: kado integration and updated wallet buttons (#320)

* feat: kado integration and updated wallet buttons

* Fix passing/not passing

* fix prettier

* fix: always show native assets regardless of denoms

* Update chain.ts

* fix: hide low balance

* fix: remove log

* fix: code readability

Changing code to follow logic for improved readability.

* fix: exclude cw20 tokens

---------

Co-authored-by: Mike <[email protected]>
Co-authored-by: Alessandro Candeago <[email protected]>
Co-authored-by: Manuel Alessandro Collazo <[email protected]>

* fix: error checking (#345)

* fix: error checking

Error received may be empty object which is truthy in JavaScript.  Check for falsy values OR empty objects when deciding if an error is truthy.

* fix: Wrong error check

* fix: broken history links (#380)

* St 355 moon theme (#379)

* changes blossom theme colors and changed some font styles mainly font-smoothing and font weight adjusted to reflect antialiased smoothing

* Added navigation background and aside blurs ST-309

* changed blossom mp4 location

* fixed aside blur on smaller heights

* changed where the aside blurs are placed and added better management for mobile and small heights

* fixed other changes I wanted in

* changes colors

* completed moon theme changes. Also implimented two toned cards the are on all themes along with some other small UI changes ST-355

* fixing mobile issues ST-355

* added theme stake amounts back in

* changed background blob color to lighter, changed preview svg and removed staking minimums to themes

* removed image I forgot to delete

* St 355 pt4 (#382)

* updated moon preview

* changed preview colors

* removed system default theme and makes it dark mode ST-433 (#383)

* fix: password validation (#385)

* fix: password validation

* fix: onFocus password confirmation

---------

Co-authored-by: plubber <[email protected]>
Co-authored-by: Mike <[email protected]>
Co-authored-by: Alessandro Candeago <[email protected]>
Co-authored-by: Joshua Brigati <[email protected]>

src/app/App.tsx

@@ -12,24 +12,27 @@ import UpdateExtension from "./sections/UpdateExtension"
 /* sidebar */
 import Nav from "./sections/Nav"
 import Aside from "./sections/Aside"
+import AsideBackground from "./components/AsideBackground"
 
 /* header */
 import NetworkHeader from "./sections/NetworkHeader"
 import Refresh from "./sections/Refresh"
 import Preferences from "./sections/Preferences"
 import ConnectWallet from "./sections/ConnectWallet"
+import ActionsBackground from "./components/ActionsBackground"
+import NavBackgrounds from "./components/NavBackgrounds"
 
 /* extra */
 import LatestTx from "./sections/LatestTx"
 import ValidatorButton from "./sections/ValidatorButton"
 import DevTools from "./sections/DevTools"
+import BackgroundBlobs from "components/layout/BackgroundBlobs"
 
 /* init */
 import InitBankBalance from "./InitBankBalance"
 import Wallet from "pages/wallet/Wallet"
 import NavButton from "./sections/NavButton"
 import NetworkStatus from "components/display/NetworkStatus"
-import NavBackgrounds from "./sections/NavBackgrounds"
 
 const App = () => {
   const { element: routes } = useNav()
@@ -44,6 +47,7 @@ const App = () => {
         <Sidebar>
           <Nav />
           <Aside />
+          <AsideBackground />
         </Sidebar>
 
         <Header>
@@ -60,13 +64,15 @@ const App = () => {
             <ValidatorButton />
             <ConnectWallet />
             <NavButton />
+            <ActionsBackground />
           </Actions>
           <LatestTx />
         </Header>
 
         <Content>
           <ErrorBoundary fallback={fallback}>
             <MainContainer>
+              <BackgroundBlobs />
               {routes}
               <Wallet />
             </MainContainer>

src/app/components/ActionsBackground.module.scss

@@ -0,0 +1,9 @@
+.background_blur {
+  background-color: var(--menu-bg);
+  width: 325px;
+  position: absolute;
+  z-index: -1;
+  height: 125%;
+  right: 0px;
+  filter: blur(45px);
+}

src/app/components/ActionsBackground.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from "data/settings/Theme"
+import styles from "./ActionsBackground.module.scss"
+
+const ActionsBackground = () => {
+  const { name } = useTheme()
+
+  if (name === "light" || name === "whale") {
+    return <></>
+  }
+
+  return <div className={styles.background_blur} />
+}
+
+export default ActionsBackground

src/app/components/AsideBackground.module.scss

@@ -0,0 +1,16 @@
+.aside_background {
+  position: absolute;
+  top: 20%;
+
+  @media screen and (max-height: 1100px) {
+    top: 10%;
+  }
+
+  @media screen and (max-height: 900px) {
+    top: 0%;
+  }
+
+  @media screen and (max-width: 992px) {
+    display: none;
+  }
+}

src/app/components/AsideBackground.tsx

@@ -0,0 +1,37 @@
+import MoonVideo from "styles/themes/Moon/Rocket V5 schuin.mp4"
+import { useTheme } from "data/settings/Theme"
+import styles from "./AsideBackground.module.scss"
+
+const AsideBackground = () => {
+  const { name } = useTheme()
+
+  const handleVideoEnd = (e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+    const video = e.currentTarget
+
+    video.pause()
+
+    setTimeout(() => {
+      video.play()
+    }, 60 * 1000)
+  }
+
+  if (name === "moon") {
+    return (
+      <div className={`${styles.aside_background} ${styles.moon}`}>
+        <video
+          onEnded={handleVideoEnd}
+          key={MoonVideo}
+          autoPlay
+          muted
+          playsInline
+        >
+          <source src={MoonVideo} type="video/mp4" />
+        </video>
+      </div>
+    )
+  }
+
+  return <></>
+}
+
+export default AsideBackground

src/app/components/NavBackgrounds.module.scss

@@ -0,0 +1,23 @@
+@import "mixins";
+
+.nav_background_wrapper {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  overflow: hidden;
+
+  &.moon {
+    width: 100%;
+    object-fit: cover;
+
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  @include mobile {
+    display: none;
+  }
+}

src/app/components/NavBackgrounds.tsx

@@ -0,0 +1,32 @@
+import { useTheme } from "data/settings/Theme"
+import BlossomVideo from "styles/themes/Blossom/Nav.mp4"
+import MoonVideo from "styles/themes/Moon/Top Large 2V7.mp4"
+import styles from "./NavBackgrounds.module.scss"
+
+const NavBackgrounds = () => {
+  const { name } = useTheme()
+
+  if (name === "blossom") {
+    return (
+      <div className={styles.nav_background_wrapper}>
+        <video key={BlossomVideo} autoPlay muted loop playsInline>
+          <source src={BlossomVideo} type="video/mp4" />
+        </video>
+      </div>
+    )
+  }
+
+  if (name === "moon") {
+    return (
+      <div className={`${styles.nav_background_wrapper} ${styles.moon}`}>
+        <video key={MoonVideo} autoPlay muted loop playsInline>
+          <source src={MoonVideo} type="video/mp4" />
+        </video>
+      </div>
+    )
+  }
+
+  return <></>
+}
+
+export default NavBackgrounds

src/app/sections/Nav.module.scss

@@ -4,6 +4,7 @@
   @include flex(space-between);
   border-bottom: var(--border-width) solid var(--menu-border);
   margin-bottom: 26px;
+  z-index: 1;
 }
 
 /* mobile */
@@ -20,6 +21,8 @@
 .item {
   color: var(--menu-text);
   fill: var(--menu-text);
+  z-index: 1;
+  position: relative;
 
   &:hover {
     text-decoration: none;

src/auth/modules/create/CreateWalletForm.tsx

@@ -54,6 +54,7 @@ const CreateWalletForm = () => {
           {...register("confirm", {
             validate: (confirm) => validate.confirm(password, confirm),
           })}
+          onFocus={() => form.trigger("confirm")}
           type="password"
         />
       </FormItem>

src/auth/modules/manage/ChangePasswordForm.tsx

@@ -64,6 +64,7 @@ const ChangePasswordForm = () => {
             {...register("confirm", {
               validate: (value) => validate.confirm(password, value),
             })}
+            onFocus={() => form.trigger("confirm")}
             type="password"
           />
         </FormItem>

src/auth/scripts/decrypt.ts

@@ -4,8 +4,8 @@ const keySize = 256
 const iterations = 100
 
 const decrypt = (transitmessage: string, pass: string) => {
-  const salt = CryptoJS.enc.Hex.parse(transitmessage.substr(0, 32))
-  const iv = CryptoJS.enc.Hex.parse(transitmessage.substr(32, 32))
+  const salt = CryptoJS.enc.Hex.parse(transitmessage.substring(0, 32))
+  const iv = CryptoJS.enc.Hex.parse(transitmessage.substring(32, 64))
   const encrypted = transitmessage.substring(64)
 
   const key = CryptoJS.PBKDF2(pass, salt, {
@@ -17,10 +17,14 @@ const decrypt = (transitmessage: string, pass: string) => {
     iv: iv,
     padding: CryptoJS.pad.Pkcs7,
     mode: CryptoJS.mode.CBC,
-  }).toString(CryptoJS.enc.Utf8)
+  })
+
+  const decoded = decrypted.toString(CryptoJS.enc.Utf8)
+
+  if (!decoded || decrypted.sigBytes < 128)
+    throw new Error("Incorrect password")
 
-  if (!decrypted) throw new Error("Invalid Password")
-  return decrypted
+  return decoded
 }
 
 export default decrypt

src/components/feedback/Fetching.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode, useState } from "react"
 import LinearProgress from "@mui/material/LinearProgress"
-import { getErrorMessage } from "utils/error"
+import { getErrorMessage, isError } from "utils/error"
 import useTimeout from "utils/hooks/useTimeout"
 import { Card } from "../layout"
 import Wrong from "./Wrong"
@@ -37,7 +37,7 @@ export const WithFetching = (props: WithFetchingProps) => {
             sx={{ position: "absolute" /* to overwrite */ }}
           />
         ) : undefined,
-        error ? <Wrong>{getErrorMessage(error)}</Wrong> : undefined
+        isError(error) ? <Wrong>{getErrorMessage(error)}</Wrong> : undefined
       )}
     </>
   )

src/components/general/FinderLink.tsx

@@ -26,7 +26,7 @@ const FinderLink = forwardRef(
     const { block, tx, validator, chainID, ...attrs } = rest
     const networks = useNetwork()
     const value =
-      rest.value ?? typeof children === "string" ? (children as string) : ""
+      rest.value || (typeof children === "string" ? (children as string) : "")
 
     const className = classNames(attrs.className, styles.link)
     const explorer =

src/components/layout/BackgroundBlobs.module.scss

@@ -0,0 +1,30 @@
+.blob1,
+.blob2,
+.blob3 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  background: #85cafb7a;
+  z-index: -1;
+  filter: blur(250px);
+}
+
+.blob1 {
+  top: 50%;
+  left: 45%;
+  height: 600px;
+  width: 700px;
+}
+
+.blob2 {
+  top: 5%;
+  left: 5%;
+  height: 200px;
+  width: 200px;
+}
+
+.blob3 {
+  top: 5%;
+  right: 15%;
+  height: 200px;
+  width: 200px;
+}

src/components/layout/BackgroundBlobs.tsx

@@ -0,0 +1,20 @@
+import { useTheme } from "data/settings/Theme"
+import styles from "./BackgroundBlobs.module.scss"
+
+const BackgroundBlobs = () => {
+  const { name } = useTheme()
+
+  if (name === "moon") {
+    return (
+      <>
+        <div className={styles.blob1} />
+        <div className={styles.blob2} />
+        <div className={styles.blob3} />
+      </>
+    )
+  }
+
+  return <></>
+}
+
+export default BackgroundBlobs

src/components/layout/Card.module.scss

@@ -10,6 +10,10 @@
   background: var(--card-bg);
   overflow: hidden; // truncate title, linear progress
   position: relative; // for progress bar
+
+  &.moon {
+    background: var(--card-special);
+  }
 }
 
 .inputCard {
@@ -82,6 +86,16 @@
   }
 }
 
+.twoTone {
+  .header {
+    border-bottom: var(--border-width) solid var(--card-border);
+  }
+
+  .main {
+    background-color: var(--card-bg-muted);
+  }
+}
+
 /* theme */
 .default {
   padding: var(--card-padding);