From 83d02209a04cd8dce8a586a1c1a653c54b3454ed Mon Sep 17 00:00:00 2001 From: plubber Date: Wed, 22 Mar 2023 13:57:50 -0400 Subject: [PATCH 01/11] feat: kado integration and updated wallet buttons --- src/pages/wallet/NetWorth.module.scss | 41 ++++++++++++---- src/pages/wallet/NetWorth.tsx | 67 ++++++++++++++++++--------- 2 files changed, 77 insertions(+), 31 deletions(-) diff --git a/src/pages/wallet/NetWorth.module.scss b/src/pages/wallet/NetWorth.module.scss index 5183fc0d6..860a3ad56 100644 --- a/src/pages/wallet/NetWorth.module.scss +++ b/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); } } diff --git a/src/pages/wallet/NetWorth.tsx b/src/pages/wallet/NetWorth.tsx index daa02f081..384b2eef1 100644 --- a/src/pages/wallet/NetWorth.tsx +++ b/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 = () => {
- - +
+ +

{capitalize(t("send"))}

+
+
+ +

{capitalize(t("receive"))}

+
+
+ ( + + )} + > + + +

{t(capitalize("buy"))}

+
) From 3358332e8431445e5f6be3d366f8a813ea300e2e Mon Sep 17 00:00:00 2001 From: plubber Date: Wed, 22 Mar 2023 16:17:58 -0400 Subject: [PATCH 02/11] fix: style updates --- src/pages/wallet/FiatRampModal.module.scss | 22 +++++++++++++++++ src/pages/wallet/FiatRampModal.tsx | 28 ++++++++++++---------- 2 files changed, 38 insertions(+), 12 deletions(-) create mode 100644 src/pages/wallet/FiatRampModal.module.scss diff --git a/src/pages/wallet/FiatRampModal.module.scss b/src/pages/wallet/FiatRampModal.module.scss new file mode 100644 index 000000000..77dc8a083 --- /dev/null +++ b/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%; +} diff --git a/src/pages/wallet/FiatRampModal.tsx b/src/pages/wallet/FiatRampModal.tsx index 0c6e1c800..9aeb9fb51 100644 --- a/src/pages/wallet/FiatRampModal.tsx +++ b/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 && } - { -