Merge pull request #432 from terra-money/staging

7.2.9

package.json

@@ -19,11 +19,11 @@
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.9.1",
     "@sentry/react": "^7.53.1",
-    "@terra-money/feather.js": "^1.0.4",
+    "@terra-money/feather.js": "^1.0.6",
     "@terra-money/ledger-station-js": "^1.3.7",
     "@terra-money/log-finder-ruleset": "^3.0.0",
     "@terra-money/terra-utils": "^1.0.9",
-    "@terra-money/terra.js": "^3.1.7",
+    "@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",

src/app/InitBankBalance.tsx

@@ -30,7 +30,8 @@ const InitBankBalance = ({ children }: PropsWithChildren<{}>) => {
   )
 
   native.list.forEach(({ id }) => {
-    const [chain, denom] = id.split(":")
+    const [chain, ...denomData] = id.split(":")
+    const denom = denomData.join(":")
     if (
       !bankBalance.find(
         (balance) => balance.denom === denom && balance.chain === chain

src/components/display/DateTimeRenderer.tsx

@@ -0,0 +1,25 @@
+import { ToNow } from "."
+
+const validFormats = ["relative", "localestring"] as const
+
+interface Props {
+  children: string | Date
+  format: typeof validFormats[number]
+  update?: boolean
+}
+
+const DateTimeRenderer = ({ children: timestamp, format, update }: Props) => {
+  const dateString =
+    typeof timestamp === "string" ? timestamp : timestamp.toISOString()
+
+  switch (format) {
+    case "relative":
+      return <ToNow update={update}>{new Date(dateString)}</ToNow>
+    case "localestring":
+      return <span>{new Date(dateString).toLocaleString()}</span>
+    default:
+      return <span>{dateString}</span>
+  }
+}
+
+export default DateTimeRenderer

src/components/display/index.ts

@@ -5,4 +5,5 @@ export * from "./List"
 export { default as Tag } from "./Tag"
 export { default as ToNow } from "./ToNow"
 export { default as Tooltip } from "./Tooltip"
+export { default as DateTimeRenderer } from "./DateTimeRenderer"
 export * from "./Tooltip"

src/components/general/CopyIcon.tsx

@@ -5,8 +5,9 @@ import { useState } from "react"
 interface Props {
   text: string
   className?: string
+  size?: number
 }
-const CopyIcon = ({ text, className }: Props) => {
+const CopyIcon = ({ text, className, size }: Props) => {
   const [copied, setCopied] = useState(false)
 
   return (
@@ -19,9 +20,9 @@ const CopyIcon = ({ text, className }: Props) => {
       }}
     >
       {copied ? (
-        <Check style={{ fontSize: 18 }} />
+        <Check style={{ fontSize: size ?? 18 }} />
       ) : (
-        <ContentCopy style={{ fontSize: 18 }} />
+        <ContentCopy style={{ fontSize: size ?? 18 }} />
       )}
     </button>
   )

src/components/token/TokenIcon.module.scss

@@ -1,6 +1,5 @@
 .icon {
   border-radius: 50%;
-  background-color: var(--button-default-bg);
 }
 
 .inherit {

src/components/token/TokenIcon.tsx

@@ -27,9 +27,8 @@ const TokenIcon = ({ token, icon, size, ...rest }: Props) => {
     size === "inherit"
       ? undefined
       : {
-          width: size ?? 34,
-          height: size ?? 34,
-          style: { padding: (size ?? 34) / 3.5 },
+          width: size ?? 24,
+          height: size ?? 24,
         }
 
   const attrs = { ...rest, ...sizes, src, className: cx(styles.icon, size) }

src/data/token.tsx

@@ -90,7 +90,10 @@ export const useNativeDenoms = () => {
 
   let decimals = DEFAULT_NATIVE_DECIMALS
 
-  function readNativeDenom(denom: Denom, chainID?: string): TokenItem {
+  function readNativeDenom(
+    denom: Denom,
+    chainID?: string
+  ): TokenItem & { isNonWhitelisted?: boolean } {
     let tokenType = ""
 
     if (denom.startsWith("ibc/")) {
@@ -114,8 +117,12 @@ export const useNativeDenoms = () => {
         break
 
       case "factory": {
-        // TODO - lookup whitelist for factory tokens.
-        fixedDenom = "..."
+        const factoryParts = denom.split(/[/:]/)
+        let tokenAddress = ""
+        if (factoryParts.length >= 2) {
+          tokenAddress = factoryParts.slice(2).join(" ")
+        }
+        fixedDenom = tokenAddress
         break
       }
 
@@ -176,6 +183,7 @@ export const useNativeDenoms = () => {
             ? factoryIcon
             : "https://assets.terra.money/icon/svg/Terra.svg",
         decimals,
+        isNonWhitelisted: true,
       }
     )
   }

src/pages/gov/ProposalDeposits.tsx

@@ -7,7 +7,7 @@ import { useProposal } from "data/queries/gov"
 import { useDeposits, useDepositParams } from "data/queries/gov"
 import { Card } from "components/layout"
 import { Read } from "components/token"
-import { ToNow } from "components/display"
+import { DateTimeRenderer } from "components/display"
 import Orb from "./components/Orb"
 import styles from "./ProposalDeposits.module.scss"
 import { useNetwork } from "data/wallet"
@@ -55,7 +55,11 @@ const ProposalDeposits = ({ id, chain, card }: Props) => {
       },
       {
         title: t("Deposit end time"),
-        content: <ToNow>{new Date(deposit_end_time)}</ToNow>,
+        content: (
+          <DateTimeRenderer format={"localestring"}>
+            {deposit_end_time}
+          </DateTimeRenderer>
+        ),
       },
     ]
 

src/pages/gov/ProposalHeader.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next"
 import { ProposalResult, useParseProposalType } from "data/queries/gov"
 import { useProposalStatusItem } from "data/queries/gov"
-import { ToNow } from "components/display"
+import { DateTimeRenderer } from "components/display"
 import styles from "./ProposalHeader.module.scss"
 import { useNetwork } from "data/wallet"
 
@@ -34,7 +34,10 @@ const ProposalHeader = ({
 
       <h1 className={styles.title}>{title}</h1>
       <p className={styles.date}>
-        {t("Submitted")} <ToNow>{new Date(submit_time)}</ToNow>
+        {t("Submitted")}{" "}
+        <DateTimeRenderer format={"localestring"}>
+          {submit_time}
+        </DateTimeRenderer>
       </p>
     </header>
   )

src/pages/gov/ProposalVotes.tsx

@@ -11,7 +11,7 @@ import { useStakingPool } from "data/queries/staking"
 import { Col, Row, Card, Grid } from "components/layout"
 import { Fetching, Empty } from "components/feedback"
 import { Read } from "components/token"
-import { ToNow } from "components/display"
+import { DateTimeRenderer } from "components/display"
 import VoteProgress from "./components/VoteProgress"
 import styles from "./ProposalVotes.module.scss"
 
@@ -121,7 +121,9 @@ const ProposalVotes = ({
 
           <p className={styles.end}>
             {new Date(voting_end_time) > new Date() ? t("Ends") : t("Ended")}{" "}
-            <ToNow>{new Date(voting_end_time)}</ToNow>
+            <DateTimeRenderer format={"localestring"}>
+              {voting_end_time}
+            </DateTimeRenderer>
           </p>
         </Grid>
       </Grid>

src/pages/gov/components/VoteProgress.module.scss

@@ -5,7 +5,7 @@
 
   .label,
   .line {
-    transform: translate(-50%, 0);
+    transform: translate(var(--x-pos), 0);
   }
 }
 

src/pages/gov/components/VoteProgress.tsx

@@ -1,12 +1,40 @@
-import { PropsWithChildren } from "react"
-import classNames from "classnames"
-import { Flex } from "components/layout"
+import { useLayoutEffect, PropsWithChildren, useRef, useState } from "react"
 import styles from "./VoteProgress.module.scss"
+import { Flex } from "components/layout"
+import classNames from "classnames"
 
 const Flag = ({ left, children }: PropsWithChildren<{ left: string }>) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState(0)
+
+  useLayoutEffect(() => {
+    if (ref.current) setWidth(ref.current.offsetWidth)
+  }, [ref.current?.offsetWidth])
+
+  let maxTranslate = 45
+  switch (children) {
+    case "Pass Threshold":
+      maxTranslate = 45
+      break
+    case "Vote Threshold":
+      maxTranslate = 45.3
+      break
+    case "Quorum":
+      maxTranslate = 23.9
+      break
+  }
+
+  const translateStyle = {
+    "--x-pos":
+      (parseFloat(left) / 100) * width < maxTranslate
+        ? `-${(parseFloat(left) / 100) * width}px`
+        : "-50%",
+  } as React.CSSProperties
   return (
-    <div className={styles.flag} style={{ left }}>
-      <span className={styles.label}>{children}</span>
+    <div ref={ref} className={styles.flag} style={{ left }}>
+      <span className={styles.label} style={translateStyle}>
+        {children}
+      </span>
       <span className={styles.line} />
     </div>
   )

src/pages/history/HistoryItem.tsx

@@ -2,7 +2,7 @@ import { Fragment } from "react"
 import { useTranslation } from "react-i18next"
 import { FinderLink } from "components/general"
 import { Card } from "components/layout"
-import { Dl, ToNow } from "components/display"
+import { Dl, DateTimeRenderer } from "components/display"
 import { ReadMultiple } from "components/token"
 import HistoryMessage from "./HistoryMessage"
 import styles from "./HistoryItem.module.scss"
@@ -73,7 +73,9 @@ const HistoryItem = ({
         </p>
         <p className={styles.time}>
           <DateRangeIcon />
-          <ToNow>{new Date(timestamp)}</ToNow>
+          <DateTimeRenderer format={"localestring"}>
+            {timestamp}
+          </DateTimeRenderer>
         </p>
       </header>