7.2.1 (#337)

* St 353 display chain selection on inactive chain click in OtherChainButtons (#329) * WIP: chains display prefs open * feat: open preferences on click * 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 z-index for LatestTx popup * fix chain filter (#344) --------- Co-authored-by: Mike <[email protected]> Co-authored-by: Alessandro Candeago <[email protected]>
stationmoney · Apr 19, 2023 · ae1fb94 · ae1fb94
1 parent 21f09c7
commit ae1fb94
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 68 deletions.
diff --git a/src/app/sections/LatestTx.module.scss b/src/app/sections/LatestTx.module.scss
@@ -6,7 +6,7 @@
   position: absolute;
   top: calc(100% + var(--grid-gap));
   right: var(--grid-gap);
-  z-index: 1;
+  z-index: 12;
 
   background: var(--card-bg);
   border-radius: var(--border-radius);

diff --git a/src/components/layout/ChainFilter.tsx b/src/components/layout/ChainFilter.tsx
@@ -135,9 +135,19 @@ const ChainFilter = ({
     all ? undefined : initNetwork?.chainID
   )
 
+  useEffect(() => {
+    if (terraOnly) {
+      const terra = Object.values(network).find((n) =>
+        isTerraChain(n.prefix)
+      )?.chainID
+      setChain(terra)
+    } else {
+      setChain(savedChain)
+    }
+  }, [terraOnly])
+
   const handleSetChain = (chain: string | undefined) => {
     setChain(chain)
-    if (terraOnly) return
     changeSavedChain(chain)
     changeSelectedDisplayChain(chain)
   }

diff --git a/src/components/layout/SimpleChainList.tsx b/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 {

diff --git a/src/pages/gov/ProposalVotes.tsx b/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 }
 }
diff --git a/src/pages/wallet/AssetList.module.scss b/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);
-}
diff --git a/src/pages/wallet/FiatRampModal.module.scss b/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%;
+}
diff --git a/src/pages/wallet/FiatRampModal.tsx b/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>
   )
 }
 

diff --git a/src/pages/wallet/NetWorth.module.scss b/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);
   }
 }
diff --git a/src/pages/wallet/NetWorth.tsx b/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>
   )

diff --git a/src/pages/wallet/SendPage.module.scss b/src/pages/wallet/SendPage.module.scss
@@ -64,7 +64,7 @@
   left: 0;
   width: 100%;
   background-color: var(--card-bg-muted);
-  z-index: 9;
+  z-index: 1;
 }
 
 .destination {