feat: kado integration and updated wallet buttons

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/FiatRampModal.module.scss

@@ -0,0 +1,22 @@
+@import "mixins";
+
+.container {
+  position: relative;
+  @include flex;
+  height: 600px;
+  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

@@ -2,6 +2,7 @@ import { FIAT_RAMP, KADO_API_KEY } from "config/constants"
 import { useAddress } from "data/wallet"
 import { useState } from "react"
 import { LoadingCircular } from "components/feedback"
+import styles from "./FiatRampModal.module.scss"
 
 const FiatRampModal = () => {
   const address = useAddress()
@@ -11,23 +12,26 @@ const FiatRampModal = () => {
     network: "Terra",
     onToAddress: address || "",
     apiKey: KADO_API_KEY,
+    product: "BUY",
+    onRevCurrency: "USDC",
   }
 
   const kadoUrlParams = new URLSearchParams(rampParams).toString()
 
   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={`${FIAT_RAMP}?${kadoUrlParams}`}
+        title="Kado Ramp"
+        onLoad={() => setIsLoading(false)}
+      />
+    </div>
   )
 }
 

src/pages/wallet/NetWorth.module.scss

@@ -1,32 +1,53 @@
+@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;
+  @include flex(space-around);
   margin-top: 20px;
+  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,12 @@ 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"
+
+const cx = classNames.bind(styles)
 
 const NetWorth = () => {
   const { t } = useTranslation()
@@ -40,27 +46,46 @@ 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>
+        <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>
   )