fix: always show native assets regardless of denoms

src/components/layout/SimpleChainList.tsx

@@ -1,6 +1,5 @@
 import styles from "./SimpleChainList.module.scss"
 import classNames from "classnames"
-import { isTerraChain } from "utils/chain"
 import { useDisplayChains } from "utils/localStorage"
 
 interface Props {

src/pages/gov/ProposalVotes.tsx

@@ -190,8 +190,10 @@ const calcTallies = (
     ? { x: quorum.toNumber(), type: "quorum" as const }
     : { x: thresholdX, type: "threshold" as const }
 
-  const consentRatio = list.slice(0, 2).map(({ ratio }) => ratio.byVoted)
-  const isPassing = !isBelowQuorum && BigNumber.sum(...consentRatio).gte(0.5)
+  const yesRatio = list[0].ratio.byVoted
+  const noRatio = list.slice(2, 4).map(({ ratio }) => ratio.byVoted)
+
+  const isPassing = !isBelowQuorum && BigNumber.sum(...noRatio).lte(yesRatio)
 
   return { list, total: { ...total, ratio }, flag, isPassing }
 }

src/pages/wallet/AssetList.module.scss

@@ -4,6 +4,7 @@
   background-color: var(--card-bg-muted);
   padding-inline: 10px;
   grid-area: list;
+
   display: grid;
   grid-template-areas: "title" "list";
   grid-template-rows: min-content auto;
@@ -22,18 +23,3 @@
   grid-area: list;
   padding-bottom: 1.6rem;
 }
-
-.btn__container {
-  @include flex(center);
-  box-shadow: var(--box-shadow-btn);
-  background-color: var(--card-bg);
-  border-top: var(--border-width) solid var(--card-border);
-  align-self: flex-end;
-  margin: 0 -10px;
-  width: calc(100% + 20px);
-}
-
-.btn {
-  margin: 16px 0px;
-  width: calc(100% - 40px);
-}

src/pages/wallet/AssetList.tsx

@@ -10,10 +10,7 @@ import Asset from "./Asset"
 import styles from "./AssetList.module.scss"
 import { useTokenFilters } from "utils/localStorage"
 import { toInput } from "txs/utils"
-import {
-  useCustomTokensCW20,
-  useCustomTokensNative,
-} from "data/settings/CustomTokens"
+import { isNativeToken } from "utils/chain"
 
 const AssetList = () => {
   const { t } = useTranslation()
@@ -23,16 +20,6 @@ const AssetList = () => {
   const coins = useBankBalance()
   const { data: prices } = useExchangeRates()
   const readNativeDenom = useNativeDenoms()
-  const native = useCustomTokensNative()
-  const cw20 = useCustomTokensCW20()
-  const alwaysVisibleDenoms = useMemo(
-    () =>
-      new Set([
-        ...cw20.list.map((a) => a.token),
-        ...native.list.map((a) => a.denom),
-      ]),
-    [cw20.list, native.list]
-  )
 
   const list = useMemo(
     () =>
@@ -68,22 +55,15 @@ const AssetList = () => {
           (a) => (hideNoWhitelist ? !a.symbol.endsWith("...") : true) // TODO: update and implement whitelist check
         )
         .filter((a) => {
-          if (!hideLowBal || a.price === 0 || alwaysVisibleDenoms.has(a.denom))
+          if (!(hideLowBal && a.price === 0) || isNativeToken(a.denom))
             return true
           return a.price * toInput(a.balance) >= 1
         })
         .sort(
           (a, b) =>
             b.price * parseInt(b.balance) - a.price * parseInt(a.balance)
         ),
-    [
-      coins,
-      readNativeDenom,
-      prices,
-      hideNoWhitelist,
-      hideLowBal,
-      alwaysVisibleDenoms,
-    ]
+    [coins, readNativeDenom, prices, hideNoWhitelist, hideLowBal]
   )
 
   const render = () => {

src/pages/wallet/FiatRampModal.module.scss

@@ -0,0 +1,22 @@
+@import "mixins";
+
+.container {
+  position: relative;
+  @include flex;
+  height: 700px;
+  width: 450px;
+}
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}

src/pages/wallet/FiatRampModal.tsx

@@ -1,33 +1,53 @@
 import { FIAT_RAMP, KADO_API_KEY } from "config/constants"
-import { useAddress } from "data/wallet"
+import { useNetwork } from "data/wallet"
 import { useState } from "react"
 import { LoadingCircular } from "components/feedback"
+import styles from "./FiatRampModal.module.scss"
+import { useTheme } from "data/settings/Theme"
+import qs from "qs"
+import { useInterchainAddresses } from "auth/hooks/useAddress"
 
 const FiatRampModal = () => {
-  const address = useAddress()
+  const addresses = useInterchainAddresses()
+  const network = useNetwork()
   const [isLoading, setIsLoading] = useState(true)
+  const { name: theme } = useTheme()
+
+  if (!addresses) return null
+
+  const onToAddressMulti = Object.keys(addresses)
+    .map((key) => `${network[key]?.name}:${addresses[key]}`)
+    .join(",")
 
   const rampParams = {
     network: "Terra",
-    onToAddress: address || "",
     apiKey: KADO_API_KEY,
+    product: "BUY",
+    onRevCurrency: "USDC",
+    networkList: ["TERRA", "OSMOSIS", "KUJIRA", "JUNO"].join(","),
+    productList: ["BUY", "SELL"].join(","),
+    theme,
+    onToAddressMulti,
+    cryptoList: ["USDC"].join(","),
   }
 
-  const kadoUrlParams = new URLSearchParams(rampParams).toString()
+  const kadoUrlParams = qs.stringify(rampParams)
 
+  const src = `${FIAT_RAMP}?${kadoUrlParams}`
   return (
-    <>
-      {isLoading && <LoadingCircular size={36} thickness={2} />}
-      {
-        <iframe
-          src={`${FIAT_RAMP}?${kadoUrlParams}`}
-          width="500"
-          height="686"
-          title="Kado Ramp"
-          onLoad={() => setIsLoading(false)}
-        />
-      }
-    </>
+    <div className={styles.container}>
+      {isLoading && (
+        <div className={styles.loading}>
+          <LoadingCircular size={36} thickness={2} />
+        </div>
+      )}
+      <iframe
+        className={styles.iframe}
+        src={src}
+        title="Kado"
+        onLoad={() => setIsLoading(false)}
+      />
+    </div>
   )
 }
 

src/pages/wallet/NetWorth.module.scss

@@ -1,32 +1,55 @@
+@import "mixins";
+
 .networth {
+  @include flex-column;
   padding: 1.6rem;
   border-bottom: var(--border-width) solid var(--card-border);
 
   p {
     color: var(--text-muted);
+    font-size: 14px;
+    line-height: 140%;
   }
 
   h1 {
-    font-weight: 600;
-    font-size: 22pt;
+    font-size: 32px;
+    line-height: 150%;
+    margin-top: 4px;
   }
 
   grid-area: details;
   height: fit-content;
   background-color: var(--card-bg);
 }
-
 .networth__buttons {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-top: 20px;
+  gap: 48px;
+  justify-content: center;
+  margin-top: 28px;
+  width: 100%;
+
+  .button__wrapper {
+    @include flex-column;
+    gap: 8px;
+  }
 
   button {
     min-width: 0;
-    width: 100%;
-    padding-block: 20px;
-    height: fit-content;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    padding: 16px;
+    @include flex;
+  }
+}
+
+.icon {
+  font-size: 24px;
+
+  &.send {
+    transform: rotate(-90deg);
+  }
+  &.receive {
+    transform: rotate(90deg);
   }
 }

src/pages/wallet/NetWorth.tsx

@@ -10,6 +10,13 @@ import styles from "./NetWorth.module.scss"
 import { useWalletRoute, Path } from "./Wallet"
 import { capitalize } from "@mui/material"
 import NetWorthTooltip from "./NetWorthTooltip"
+import { ModalButton } from "components/feedback"
+import FiatRampModal from "./FiatRampModal"
+import { Add as AddIcon, Send as SendIcon } from "@mui/icons-material"
+import classNames from "classnames"
+import { useConnectedWallet } from "@terra-money/use-wallet"
+
+const cx = classNames.bind(styles)
 
 const NetWorth = () => {
   const { t } = useTranslation()
@@ -18,6 +25,7 @@ const NetWorth = () => {
   const { data: prices } = useExchangeRates()
   const readNativeDenom = useNativeDenoms()
   const { setRoute, route } = useWalletRoute()
+  const isConnected = useConnectedWallet()
 
   // TODO: show CW20 balances and staked tokens
   const coinsValue = coins?.reduce((acc, { amount, denom }) => {
@@ -40,27 +48,48 @@ const NetWorth = () => {
         <Read amount={coinsValue} decimals={0} fixed={2} denom="" token="" />
       </h1>
       <div className={styles.networth__buttons}>
-        <Button
-          color="primary"
-          onClick={() =>
-            setRoute({
-              path: Path.send,
-              previousPage: route,
-            })
-          }
-        >
-          {capitalize(t("Send"))}
-        </Button>
-        <Button
-          onClick={() =>
-            setRoute({
-              path: Path.receive,
-              previousPage: route,
-            })
-          }
-        >
-          {capitalize(t("receive"))}
-        </Button>
+        <div className={styles.button__wrapper}>
+          <Button
+            color="primary"
+            onClick={() =>
+              setRoute({
+                path: Path.send,
+                previousPage: route,
+              })
+            }
+          >
+            <SendIcon className={cx(styles.icon, styles.send)} />
+          </Button>
+          <h3>{capitalize(t("send"))}</h3>
+        </div>
+        <div className={styles.button__wrapper}>
+          <Button
+            onClick={() =>
+              setRoute({
+                path: Path.receive,
+                previousPage: route,
+              })
+            }
+          >
+            <SendIcon className={cx(styles.icon, styles.receive)} />
+          </Button>
+          <h3>{capitalize(t("receive"))}</h3>
+        </div>
+        {isConnected && (
+          <div className={styles.button__wrapper}>
+            <ModalButton
+              minimal
+              renderButton={(open) => (
+                <Button onClick={open}>
+                  <AddIcon className={styles.icon} />
+                </Button>
+              )}
+            >
+              <FiatRampModal />
+            </ModalButton>
+            <h2>{t(capitalize("buy"))}</h2>
+          </div>
+        )}
       </div>
     </article>
   )

src/utils/chain.ts

@@ -55,3 +55,6 @@ export const useSortedDisplayChains = () => {
 
 export const useTerraChainName = () =>
   useNetworkName() === "mainnet" ? "phoenix-1" : "pisco-1"
+
+export const isNativeToken = (denom: string) =>
+  !denom.startsWith("ibc/") && !denom.startsWith("factory/")