From 5a0ae3aca71169805f5ed35ad634176a4de26b7c Mon Sep 17 00:00:00 2001 From: Joshua Date: Thu, 4 Jan 2024 22:43:57 -0600 Subject: [PATCH 01/27] replaced Swap and Send with new AssetSekector changes --- src/pages/wallet/SendPage/Submit.tsx | 33 ++++++++++++---------------- src/txs/swap/SwapSetup.tsx | 33 ++++++++++++++++++---------- 2 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/pages/wallet/SendPage/Submit.tsx b/src/pages/wallet/SendPage/Submit.tsx index 0077da178..4b64e03eb 100644 --- a/src/pages/wallet/SendPage/Submit.tsx +++ b/src/pages/wallet/SendPage/Submit.tsx @@ -1,7 +1,6 @@ import { InputInLine, - SendAmount, - TokenSingleChainListItem, + AssetSelectorFrom, Button, InputWrapper, Input, @@ -31,13 +30,13 @@ const Submit = () => { const showIBCWarning = useMemo(() => { return originChain && - assetInfo?.denom.startsWith("ibc/") && + assetInfo?.denom.startsWith("ibc/") && assetInfo.tokenChain !== destination && destination !== originChain }, [assetInfo, originChain, destination]) useEffect(() => { - setValue('ibcWarning', false); + setValue('ibcWarning', false) }, [setValue]) useEffect(() => { @@ -73,31 +72,26 @@ const Submit = () => { extra={truncate(recipient)} value={getWalletName(recipient)} /> - goToStep(2)} + tokenIcon={tokenImg} + chainIcon={assetInfo.chain.icon} + chainName={assetInfo.chain.label} + amountInputAttrs={{ ...register("input", { required: true, valueAsNumber: true, validate: validate.input(toInput(balance, decimals), decimals), }), }} - tokenAmount={input ?? 0} - currencyInputAttrs={{ - ...register("currencyAmount", { - valueAsNumber: true, - required: true, - deps: ["input"], - }), - }} + amount={input ?? 0} currencyAmount={currencyAmount ?? 0} - tokenIcon={tokenImg} - symbol={symbol} currencySymbol={currency.symbol} - price={price} - formState={formState} /> - { ) } + export default Submit diff --git a/src/txs/swap/SwapSetup.tsx b/src/txs/swap/SwapSetup.tsx index 53f1cc1e0..a3fd39837 100644 --- a/src/txs/swap/SwapSetup.tsx +++ b/src/txs/swap/SwapSetup.tsx @@ -121,11 +121,11 @@ const SwapForm = () => { // Values const currencyAmount = useMemo(() => { - const offer = `${currency.symbol} ${( + const offer = `${( offerAsset.price * Number(offerInput) ).toFixed(2)}` - const ask = `${currency.symbol} ${toInput( + const ask = `${toInput( Number(route?.amountOut) * askAsset.price, askAsset.decimals ).toFixed(2)}` @@ -136,6 +136,15 @@ const SwapForm = () => { const disabled = !(offerInput && !error && route) const loading = !!(has(offerInput) && !error && !route) + const handleMaxClick = () => { + setValue( + "offerInput", + toInput(offerAsset.balance, offerAsset.decimals).toString() + ) + } + + console.log("🚀 ~ file: SwapSetup.tsx:134 ~ currencyAmount ~ currencyAmount:", currencyAmount) + console.log("parseFloat(currencyAmount.offer): ", parseFloat(currencyAmount.offer)) return (
{ - } + setValue={setValue} + handleMaxClick={handleMaxClick} + walletAmount={toInput(offerAsset.balance, offerAsset.decimals)} symbol={offerAsset.symbol} chainIcon={offerAsset.chain?.icon} chainName={offerAsset.chain?.name} tokenIcon={offerAsset.icon ?? ""} onSymbolClick={() => handleOpenModal(SwapAssetType.OFFER)} - currencyAmount={currencyAmount.offer} amountInputAttrs={{ ...register("offerInput") }} + amount={parseFloat(offerInput)} + currencyAmount={parseFloat(currencyAmount.offer)} + currencySymbol={currency.symbol} /> } + walletAmount={toInput(offerAsset.balance, offerAsset.decimals)} symbol={askAsset?.symbol} chainIcon={askAsset?.chain?.icon} chainName={askAsset?.chain?.name} tokenIcon={askAsset?.icon ?? ""} onSymbolClick={() => handleOpenModal(SwapAssetType.ASK)} - amount={Number(askAssetAmount).toFixed(2)} - currencyAmount={currencyAmount.ask} + amount={parseFloat(askAssetAmount)} + currencyAmount={parseFloat(currencyAmount.ask)} + currencySymbol={currency.symbol} />
From ffa20c2b874717cea6ca03257b44a6b2c89a78e6 Mon Sep 17 00:00:00 2001 From: Joshua Date: Tue, 9 Jan 2024 09:38:14 -0600 Subject: [PATCH 02/27] big WIP --- package-lock.json | 4 +- .../sections/settings/LCDSetting.module.scss | 8 ++ src/app/sections/settings/LCDSetting.tsx | 68 ++++++------ src/app/sections/settings/NetworkSetting.tsx | 8 +- src/app/sections/settings/PreferencesPage.tsx | 2 +- .../sections/settings/PreferencesRouter.tsx | 6 +- src/app/sections/settings/SecuritySetting.tsx | 8 +- src/extension/auth/AddWalletPage.tsx | 7 +- .../components/ExtensionPageV2.module.scss | 105 ++++++++++++++++++ src/extension/components/ExtensionPageV2.tsx | 87 +++++++++++++++ src/styles/_mixins.scss | 6 + src/txs/AddressBook/AddressBook.module.scss | 7 ++ src/txs/AddressBook/AddressBookForm.tsx | 83 +++++++------- src/txs/swap/Swap.module.scss | 13 ++- src/txs/swap/SwapConfirm.tsx | 21 +++- src/txs/swap/SwapSettingsPage.tsx | 11 +- src/txs/swap/SwapTx.tsx | 5 +- 17 files changed, 349 insertions(+), 100 deletions(-) create mode 100644 src/extension/components/ExtensionPageV2.module.scss create mode 100644 src/extension/components/ExtensionPageV2.tsx diff --git a/package-lock.json b/package-lock.json index de02c5bf9..5cc5da285 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7539,7 +7539,7 @@ "node_modules/@terra-money/station-ui": { "version": "0.0.0", "resolved": "file:../station-ui/terra-money-station-ui-0.0.0.tgz", - "integrity": "sha512-N4QUiZise39RLOG0uT3iu3KgnCuPfWpJ5JWU9bQIjVLrtlsLXa7djzfeGx450pRv1jz3L+BBUu676syOGAxdGA==", + "integrity": "sha512-9MusD0dIwUltSCM5FHGwh44NBR31kSrHQybI7qS2mzDctBDl44wSLEhnRuIGCkwnJIXXqztBfZ3uuuPe3bkq5Q==", "dependencies": { "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.1", @@ -39060,7 +39060,7 @@ }, "@terra-money/station-ui": { "version": "file:../station-ui/terra-money-station-ui-0.0.0.tgz", - "integrity": "sha512-N4QUiZise39RLOG0uT3iu3KgnCuPfWpJ5JWU9bQIjVLrtlsLXa7djzfeGx450pRv1jz3L+BBUu676syOGAxdGA==", + "integrity": "sha512-9MusD0dIwUltSCM5FHGwh44NBR31kSrHQybI7qS2mzDctBDl44wSLEhnRuIGCkwnJIXXqztBfZ3uuuPe3bkq5Q==", "requires": { "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.1", diff --git a/src/app/sections/settings/LCDSetting.module.scss b/src/app/sections/settings/LCDSetting.module.scss index 8459f7585..5d241b13d 100644 --- a/src/app/sections/settings/LCDSetting.module.scss +++ b/src/app/sections/settings/LCDSetting.module.scss @@ -1,3 +1,11 @@ + +.form__container { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 24px; +} + .button__padding { margin-bottom: 50px; } diff --git a/src/app/sections/settings/LCDSetting.tsx b/src/app/sections/settings/LCDSetting.tsx index 078f35c98..d84a4a80a 100644 --- a/src/app/sections/settings/LCDSetting.tsx +++ b/src/app/sections/settings/LCDSetting.tsx @@ -17,6 +17,7 @@ import { InputWrapper, ButtonInlineWrapper, SubmitButton, + FlexColumn, } from "@terra-money/station-ui" import classNames from "classnames" import DeleteButton from "components/form/DeleteButton" @@ -133,36 +134,41 @@ const LCDSetting = (props: Props) => { } return ( -
- - setValue("network", network)} - /> - - - - setValue("chainID", chainID)} - /> - - - - + + + + setValue("network", network)} + /> + + + + setValue("chainID", chainID)} + /> + + + + + {selectedChainID && } { label="Create Custom RPC" /> -
+ ) } diff --git a/src/app/sections/settings/NetworkSetting.tsx b/src/app/sections/settings/NetworkSetting.tsx index 382f6ef5a..b9fd885e8 100644 --- a/src/app/sections/settings/NetworkSetting.tsx +++ b/src/app/sections/settings/NetworkSetting.tsx @@ -1,11 +1,13 @@ import { useNetworkOptions, useNetworkState } from "data/wallet" import SettingsSelector from "components/layout/SettingsSelector" import { + FlexColumn, NavButton, SectionHeader, AddressSelectableListItem, + BuyIcon, } from "@terra-money/station-ui" -import { FlexColumn } from "components/layout" +// import { FlexColumn } from "components/layout" import AddIcon from "@mui/icons-material/Add" import { useCustomLCDs } from "utils/localStorage" import { useNetwork } from "data/wallet" @@ -28,7 +30,7 @@ const NetworkSetting = () => { if (!networkOptions) return null return ( - + { onChange={setNetwork} /> } + icon={} label="Add Custom LCD Endpoint" onClick={() => navigate("/preferences/network/lcd")} /> diff --git a/src/app/sections/settings/PreferencesPage.tsx b/src/app/sections/settings/PreferencesPage.tsx index a1bfb328a..2cb940b5d 100644 --- a/src/app/sections/settings/PreferencesPage.tsx +++ b/src/app/sections/settings/PreferencesPage.tsx @@ -46,7 +46,7 @@ const PreferencesPage = () => { ) return ( - + {sandbox && ( { const { routes } = useSettingsRoutes() @@ -14,14 +15,13 @@ const PreferencesRouter = () => { {r.element} - + } key={r.route} /> diff --git a/src/app/sections/settings/SecuritySetting.tsx b/src/app/sections/settings/SecuritySetting.tsx index a75a4df3a..0606833e5 100644 --- a/src/app/sections/settings/SecuritySetting.tsx +++ b/src/app/sections/settings/SecuritySetting.tsx @@ -1,14 +1,12 @@ -import { NavButton } from "@terra-money/station-ui" -import { FlexColumn } from "components/layout" -import LockOutlinedIcon from "@mui/icons-material/LockOutlined" +import { NavButton, FlexColumn, LockIcon } from "@terra-money/station-ui" import { useNavigate } from "react-router-dom" const SecuritySetting = () => { const navigate = useNavigate() return ( - + } + icon={} label="Change Password" onClick={() => navigate(`/preferences/security/change-password`)} /> diff --git a/src/extension/auth/AddWalletPage.tsx b/src/extension/auth/AddWalletPage.tsx index 54276b2cf..6ec4208c9 100644 --- a/src/extension/auth/AddWalletPage.tsx +++ b/src/extension/auth/AddWalletPage.tsx @@ -1,18 +1,17 @@ -import ExtensionPage from "extension/components/ExtensionPage" import { useTranslation } from "react-i18next" +import ExtensionPageV2 from "extension/components/ExtensionPageV2" import AddWallet from "./AddWallet" export default function AddWalletPage() { const { t } = useTranslation() return ( - - + ) } diff --git a/src/extension/components/ExtensionPageV2.module.scss b/src/extension/components/ExtensionPageV2.module.scss new file mode 100644 index 000000000..92597df3d --- /dev/null +++ b/src/extension/components/ExtensionPageV2.module.scss @@ -0,0 +1,105 @@ +@import "mixins"; +@import "font_mixins"; + +.page { + overflow-x: hidden; + overflow-y: scroll; + background-color: var(--token-dark-200); + display: flex; + flex-direction: column; + + padding: 24px 24px 32px 24px; + height: calc(100vh - var(--header-height)); + + display: flex; + flex-direction: column; + gap: 24px; + + &.full__height { + padding-top: 40px; + height: 100vh; + } + + &.over__navbar { + padding-top: 40px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + height: 100vh; + } + + .header__container { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 24px; + + position: relative; + + .back__button { + position: absolute; + top: -20px; + left: -24px; + padding: 24px; + } + + .close { + position: absolute; + top: -20px; + right: -24px; + padding: 26px; + } + + .header__with__back { + margin-left: 44px; + } + } + + // .header { + // text-align: center; + // width: 100%; + // } + + .icon { + font-size: 56px; + line-height: 1; + } + + .title { + @include Medium-Large; + } + + .subtitle { + @include X-Small; + color: var(--token-light-100); + margin-top: 4px; + } + + .main { + height: 100%; + display: flex; + align-items: flex-start; + + & > * { + flex: 1; + height: 100%; + } + } + + @include extension { + .title { + text-align: left; + } + + .subtitle { + text-align: left; + } + + // .close { + // margin: 24px 0; + // } + } +} \ No newline at end of file diff --git a/src/extension/components/ExtensionPageV2.tsx b/src/extension/components/ExtensionPageV2.tsx new file mode 100644 index 000000000..b9304f4f1 --- /dev/null +++ b/src/extension/components/ExtensionPageV2.tsx @@ -0,0 +1,87 @@ +import { PropsWithChildren } from "react" +import { useNavigate } from "react-router-dom" +import classNames from "classnames" +import { ErrorBoundary } from "components/feedback" +import Container from "../layouts/Container" +import ExtensionFooter from "./ExtensionFooter" +import { BackArrowIcon, CloseIcon } from "@terra-money/station-ui" +import styles from "./ExtensionPageV2.module.scss" + +interface Props extends QueryState { + title?: string + subtitle?: string + fullHeight?: boolean + overNavbar?: boolean + backButtonPath?: string + hideCloseButton?: boolean +} + +const ExtensionPageV2 = (props: PropsWithChildren) => { + const { + title, + subtitle, + fullHeight, + overNavbar, + backButtonPath, + hideCloseButton, + children, + } = props + const cx = classNames.bind(styles) + const navigate = useNavigate() + + return ( + +
+ {(title || backButtonPath) && ( +
+ {backButtonPath && ( + + )} + +
+

{title}

+

+ {subtitle} +

+
+ + {!hideCloseButton && ( + + )} +
+ )} + +
+ {children} +
+ +
+ + + ) +} + +export default ExtensionPageV2 diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index e841a4dfa..4db787594 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -44,3 +44,9 @@ $breakpoint: 992px; @content; } } + +@mixin extension { + @media (max-width: 400px) { + @content; + } +} diff --git a/src/txs/AddressBook/AddressBook.module.scss b/src/txs/AddressBook/AddressBook.module.scss index a1c4245bd..8b67ec358 100644 --- a/src/txs/AddressBook/AddressBook.module.scss +++ b/src/txs/AddressBook/AddressBook.module.scss @@ -1,3 +1,10 @@ +.form__container { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 24px; +} + .confirm__delete__container { display: flex; flex-direction: column; diff --git a/src/txs/AddressBook/AddressBookForm.tsx b/src/txs/AddressBook/AddressBookForm.tsx index 12fea7ada..a4a66a63f 100644 --- a/src/txs/AddressBook/AddressBookForm.tsx +++ b/src/txs/AddressBook/AddressBookForm.tsx @@ -10,10 +10,12 @@ import { Input, SubmitButton, ButtonInlineWrapper, + FlexColumn, } from "@terra-money/station-ui" import DeleteButton from "components/form/DeleteButton" import { EmojiButton } from "components/form" import { useLocation, useNavigate } from "react-router-dom" +import styles from "./AddressBook.module.scss" interface Props { item?: AddressBook @@ -50,45 +52,50 @@ const AddressBookForm = (props: Props) => { } return ( -
- - , - }} - {...register("name", { - required: true, - })} - /> - + + + + , + }} + {...register("name", { + required: true, + })} + /> + - - - + + + - - - - - - + + + + + + + {index !== undefined && ( { )} -
+ ) } diff --git a/src/txs/swap/Swap.module.scss b/src/txs/swap/Swap.module.scss index a66415f99..7554d2c32 100644 --- a/src/txs/swap/Swap.module.scss +++ b/src/txs/swap/Swap.module.scss @@ -6,10 +6,19 @@ margin: -20px 0px -20px 65%; } .container { - margin: 10px; + // margin: 10px; display: flex; flex-direction: column; - gap: 15px; + gap: 24px; + + justify-content: space-between; +} + +.form__container { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 24px; } .text { diff --git a/src/txs/swap/SwapConfirm.tsx b/src/txs/swap/SwapConfirm.tsx index 672a87c0a..6730eb3f9 100644 --- a/src/txs/swap/SwapConfirm.tsx +++ b/src/txs/swap/SwapConfirm.tsx @@ -1,6 +1,6 @@ import { useMemo } from "react" import { MsgTransfer, Coin, MsgExecuteContract } from "@terra-money/feather.js" -import { Form } from "@terra-money/station-ui" +import { SectionHeader, Grid } from "@terra-money/station-ui" import { useNavigate } from "react-router-dom" import SwapTimeline from "./components/SwapTimeline" import { SwapState } from "data/queries/swap/types" @@ -11,6 +11,8 @@ import { queryKey } from "data/query" import Errors from "./components/ConfirmErrors" import { Coins } from "@terra-money/feather.js" import { useIsLedger } from "utils/ledger" +import styles from "./Swap.module.scss" +import { useTranslation } from 'react-i18next' export const validateAssets = ( assets: Partial @@ -24,6 +26,7 @@ export const validateAssets = ( } const Confirm = () => { + const { t } = useTranslation() const { form } = useSwap() const navigate = useNavigate() const { watch, handleSubmit, getValues } = form @@ -85,12 +88,18 @@ const Confirm = () => { {/* @ts-ignore */} {({ fee, submit }) => ( -
- - {fee.render()} - + + + + + {fee.render()} + + {submit.button} - + )}
) diff --git a/src/txs/swap/SwapSettingsPage.tsx b/src/txs/swap/SwapSettingsPage.tsx index 8cc54e5a7..0c29055d9 100644 --- a/src/txs/swap/SwapSettingsPage.tsx +++ b/src/txs/swap/SwapSettingsPage.tsx @@ -32,8 +32,12 @@ const SlippagePage = () => { } return ( -
- + + {/* */} + @@ -45,7 +49,8 @@ const SlippagePage = () => { /> - + {/* */} + ) } diff --git a/src/txs/swap/SwapTx.tsx b/src/txs/swap/SwapTx.tsx index afd7969a8..5c8b7b911 100644 --- a/src/txs/swap/SwapTx.tsx +++ b/src/txs/swap/SwapTx.tsx @@ -5,6 +5,7 @@ import Confirm from "./SwapConfirm" import SwapContext from "./SwapContext" import { Routes, Route, useLocation } from "react-router-dom" import SwapSettings from "./SwapSettingsPage" +import ExtensionPageV2 from 'extension/components/ExtensionPageV2' const SwapTx = () => { const location = useLocation() @@ -24,9 +25,9 @@ const SwapTx = () => { key={r.path} path={r.path} element={ - + {r.element} - + } /> ))} From ead5c1b4e7e8014ef9cd106ffb0db841522c64a6 Mon Sep 17 00:00:00 2001 From: Joshua Date: Thu, 11 Jan 2024 16:33:02 -0600 Subject: [PATCH 03/27] More fixing of pages mainly swap and all settings pages --- .../sections/settings/LCDSetting.module.scss | 26 -------- src/app/sections/settings/LCDSetting.tsx | 28 ++++----- src/app/sections/settings/NetworkSetting.tsx | 13 ++-- .../settings/PreferencesPage.module.scss | 9 +-- src/app/sections/settings/PreferencesPage.tsx | 58 ++++++++++-------- .../sections/settings/PreferencesRouter.tsx | 3 +- src/app/sections/settings/SecuritySetting.tsx | 6 +- src/app/sections/settings/routes.tsx | 2 +- .../modules/manage/ChangePasswordForm.tsx | 61 +++++++++++-------- src/components/form/EmojiButton.module.scss | 10 +-- src/components/form/EmojiButton.tsx | 51 ++++++++-------- .../components/ExtensionPageV2.module.scss | 38 ++++++------ src/extension/components/ExtensionPageV2.tsx | 24 +++++--- .../SendPage/Components/AddressBookList.tsx | 20 ++++-- .../Components/LocalWalletList.module.scss | 5 ++ .../SendPage/Components/LocalWalletList.tsx | 13 +++- src/txs/AddressBook/AddressBook.module.scss | 8 --- src/txs/AddressBook/AddressBook.tsx | 12 ++-- src/txs/AddressBook/AddressBookForm.tsx | 29 +++++---- src/txs/AddressBook/ConfirmDelete.tsx | 42 +++++++------ src/txs/Tx.module.scss | 4 -- src/txs/Tx.tsx | 1 - src/txs/swap/Swap.module.scss | 7 --- src/txs/swap/SwapConfirm.tsx | 24 +++----- src/txs/swap/SwapSettingsPage.tsx | 16 ++--- src/txs/swap/SwapTx.tsx | 11 ++-- 26 files changed, 271 insertions(+), 250 deletions(-) create mode 100644 src/pages/wallet/SendPage/Components/LocalWalletList.module.scss diff --git a/src/app/sections/settings/LCDSetting.module.scss b/src/app/sections/settings/LCDSetting.module.scss index 5d241b13d..9708b12bc 100644 --- a/src/app/sections/settings/LCDSetting.module.scss +++ b/src/app/sections/settings/LCDSetting.module.scss @@ -1,29 +1,3 @@ - -.form__container { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 24px; -} - -.button__padding { - margin-bottom: 50px; -} - -.button__conainer { - position: absolute; - display: flex; - flex-direction: column; - margin-top: 0; - padding: 20px; - background-color: var(--card-bg); - bottom: 0; - left: 0; - width: 100%; - border-bottom-left-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); -} - .loading { color: var(--info); } diff --git a/src/app/sections/settings/LCDSetting.tsx b/src/app/sections/settings/LCDSetting.tsx index d84a4a80a..0e18264c5 100644 --- a/src/app/sections/settings/LCDSetting.tsx +++ b/src/app/sections/settings/LCDSetting.tsx @@ -1,27 +1,27 @@ -import { useNetworkName, useNetworkOptions } from "data/wallet" +import { useEffect, useMemo } from "react" import { useForm } from "react-hook-form" import { useTranslation } from "react-i18next" +import { useLocation, useNavigate } from "react-router-dom" +import classNames from "classnames" +import { useNetworkName, useNetworkOptions } from "data/wallet" import { useNetworks } from "app/InitNetworks" -import { useEffect, useMemo } from "react" -import styles from "./LCDSetting.module.scss" import { useValidateLCD } from "data/queries/tendermint" import { LoadingCircular } from "components/feedback" import ClearIcon from "@mui/icons-material/Clear" import CheckIcon from "@mui/icons-material/Check" -import { Flex } from "components/layout" +import DeleteButton from "components/form/DeleteButton" import { useCustomLCDs } from "utils/localStorage" import { Dropdown, Input, - Form, InputWrapper, ButtonInlineWrapper, SubmitButton, + Flex, FlexColumn, + Form, } from "@terra-money/station-ui" -import classNames from "classnames" -import DeleteButton from "components/form/DeleteButton" -import { useLocation, useNavigate } from "react-router-dom" +import styles from "./LCDSetting.module.scss" const cx = classNames.bind(styles) @@ -134,10 +134,7 @@ const LCDSetting = (props: Props) => { } return ( -
+ { /> - + { label="Create Custom RPC" /> - + ) } diff --git a/src/app/sections/settings/NetworkSetting.tsx b/src/app/sections/settings/NetworkSetting.tsx index b9fd885e8..2c2f625ea 100644 --- a/src/app/sections/settings/NetworkSetting.tsx +++ b/src/app/sections/settings/NetworkSetting.tsx @@ -1,5 +1,7 @@ -import { useNetworkOptions, useNetworkState } from "data/wallet" +import { useNavigate } from "react-router-dom" +import { useNetworkOptions, useNetworkState, useNetwork } from "data/wallet" import SettingsSelector from "components/layout/SettingsSelector" +import { useCustomLCDs } from "utils/localStorage" import { FlexColumn, NavButton, @@ -7,11 +9,6 @@ import { AddressSelectableListItem, BuyIcon, } from "@terra-money/station-ui" -// import { FlexColumn } from "components/layout" -import AddIcon from "@mui/icons-material/Add" -import { useCustomLCDs } from "utils/localStorage" -import { useNetwork } from "data/wallet" -import { useNavigate } from "react-router-dom" const NetworkSetting = () => { const [network, setNetwork] = useNetworkState() @@ -38,7 +35,9 @@ const NetworkSetting = () => { onChange={setNetwork} /> } + icon={ + + } label="Add Custom LCD Endpoint" onClick={() => navigate("/preferences/network/lcd")} /> diff --git a/src/app/sections/settings/PreferencesPage.module.scss b/src/app/sections/settings/PreferencesPage.module.scss index 7ec49fc59..09f851bd8 100644 --- a/src/app/sections/settings/PreferencesPage.module.scss +++ b/src/app/sections/settings/PreferencesPage.module.scss @@ -1,12 +1,13 @@ +@import "font_mixins"; + .subtitle { padding-left: 28px; + @include X-SmallLH; color: var(--token-dark-900); - font-size: 12px; - font-weight: 500; - line-height: 14px; } .version { - font-size: 10px; + margin-top: 16px; + @include XX-Small; color: var(--token-light-100); } diff --git a/src/app/sections/settings/PreferencesPage.tsx b/src/app/sections/settings/PreferencesPage.tsx index 2cb940b5d..b6f8da66f 100644 --- a/src/app/sections/settings/PreferencesPage.tsx +++ b/src/app/sections/settings/PreferencesPage.tsx @@ -1,13 +1,17 @@ +import { ReactElement } from "react" +import { useNavigate } from "react-router-dom" import { useTranslation } from "react-i18next" -import { Checkbox, FlexColumn, Grid } from "@terra-money/station-ui" +import browser from "webextension-polyfill" import { sandbox } from "auth/scripts/env" -import { NavButton, SectionHeader } from "@terra-money/station-ui" -import { ReactElement } from "react" +import { useReplaceKeplr } from "utils/localStorage" import { useSettingsRoutes } from "./routes" -import { useNavigate } from "react-router-dom" +import { + NavButton, + SectionHeader, + Checkbox, + FlexColumn, +} from "@terra-money/station-ui" import styles from "./PreferencesPage.module.scss" -import { useReplaceKeplr } from "utils/localStorage" -import browser from "webextension-polyfill" export interface SettingsPage { route?: string @@ -31,7 +35,7 @@ const PreferencesPage = () => { }: { settings: Record }) => ( - + {Object.values(settings) .filter(({ disabled }) => !disabled) .map(({ title, route, onClick, ...rest }) => ( @@ -47,23 +51,7 @@ const PreferencesPage = () => { return ( - {sandbox && ( - navigate(`/preferences/${routes.network.route}`) - : routes.network.onClick - } - /> - )} - - - - - - + { />

{t( - "Activating this will prioritize station over other wallet extensions when connecting to apps." + "Activating this will prioritize station over other wallet extensions you may have installed when connecting to apps." )}

- + + {sandbox && ( + <> + + navigate(`/preferences/${routes.network.route}`) + : routes.network.onClick + } + /> + + )} + + + +

{"Station Wallet v" + browser.runtime?.getManifest?.()?.version}

diff --git a/src/app/sections/settings/PreferencesRouter.tsx b/src/app/sections/settings/PreferencesRouter.tsx index 9eb3a471d..1ec338860 100644 --- a/src/app/sections/settings/PreferencesRouter.tsx +++ b/src/app/sections/settings/PreferencesRouter.tsx @@ -1,8 +1,7 @@ import { Route, Routes, useLocation } from "react-router-dom" import { useSettingsRoutes } from "./routes" -import ExtensionPage from "extension/components/ExtensionPage" import ConfirmDelete from "txs/AddressBook/ConfirmDelete" -import ExtensionPageV2 from 'extension/components/ExtensionPageV2' +import ExtensionPageV2 from "extension/components/ExtensionPageV2" const PreferencesRouter = () => { const { routes } = useSettingsRoutes() diff --git a/src/app/sections/settings/SecuritySetting.tsx b/src/app/sections/settings/SecuritySetting.tsx index 0606833e5..49107f540 100644 --- a/src/app/sections/settings/SecuritySetting.tsx +++ b/src/app/sections/settings/SecuritySetting.tsx @@ -1,12 +1,14 @@ -import { NavButton, FlexColumn, LockIcon } from "@terra-money/station-ui" import { useNavigate } from "react-router-dom" +import { NavButton, FlexColumn, LockIcon } from "@terra-money/station-ui" const SecuritySetting = () => { const navigate = useNavigate() return ( } + icon={ + + } label="Change Password" onClick={() => navigate(`/preferences/security/change-password`)} /> diff --git a/src/app/sections/settings/routes.tsx b/src/app/sections/settings/routes.tsx index a1ebc26eb..5df3f1ab9 100644 --- a/src/app/sections/settings/routes.tsx +++ b/src/app/sections/settings/routes.tsx @@ -108,7 +108,7 @@ export const useSettingsRoutes = () => { addressBookNew: { route: "address-book/new", element: , - title: t("New Address Entry"), + title: t("New Address"), }, myWallet: { route: "address-book/my-addresses", diff --git a/src/auth/modules/manage/ChangePasswordForm.tsx b/src/auth/modules/manage/ChangePasswordForm.tsx index 304b2c2e1..207340972 100644 --- a/src/auth/modules/manage/ChangePasswordForm.tsx +++ b/src/auth/modules/manage/ChangePasswordForm.tsx @@ -19,6 +19,7 @@ import { SummaryHeader, Grid, Button, + FlexColumn, } from "@terra-money/station-ui" interface Values { @@ -82,41 +83,47 @@ const ChangePasswordForm = () => { } return ( -
- - - + + + + + - - - + + + + + + validate.confirm(password, value), + })} + type="password" + /> + - - validate.confirm(password, value), - })} - type="password" - /> - - - + + !!message) || diff --git a/src/components/form/EmojiButton.module.scss b/src/components/form/EmojiButton.module.scss index 573d7b90c..8ef099ab1 100644 --- a/src/components/form/EmojiButton.module.scss +++ b/src/components/form/EmojiButton.module.scss @@ -1,14 +1,16 @@ +@import "font_mixins"; + .picker { display: flex; flex-wrap: wrap; - gap: 20px; - margin: 10px; + gap: 32px; + flex-direction: row; + justify-content: center; } .emojiButton { background: none; border: none; - font-size: 24px; cursor: pointer; - padding: 5px; + @include Large; } diff --git a/src/components/form/EmojiButton.tsx b/src/components/form/EmojiButton.tsx index 9a051920a..4e50d6e74 100644 --- a/src/components/form/EmojiButton.tsx +++ b/src/components/form/EmojiButton.tsx @@ -1,12 +1,13 @@ +import { useState } from "react" import { ModalButton, Input, InputWrapper, Button, useModal, + FlexColumn, + LaughIcon, } from "@terra-money/station-ui" -import { useState } from "react" -import { ReactComponent as EmptyEmoji } from "styles/images/icons/EmptyEmoji.svg" import styles from "./EmojiButton.module.scss" const emojiOptions = [ "💳", @@ -35,26 +36,28 @@ const EmojiPage = (props: Props) => { const icon = props.icon ?? "" const [emoji, setEmoji] = useState(icon) return ( - <> - - setEmoji(e.target.value)} - /> - -
- {emojiOptions.map((emoji) => ( - - ))} -
+ + + + setEmoji(e.target.value)} + /> + +
+ {emojiOptions.map((emoji) => ( + + ))} +
+ )} -
+

{title}

-

- {subtitle} -

+

{subtitle}

{!hideCloseButton && ( -
+ +
+ + + + + +
+ ) } diff --git a/src/txs/Tx.module.scss b/src/txs/Tx.module.scss index f8c83974a..3dd633a67 100644 --- a/src/txs/Tx.module.scss +++ b/src/txs/Tx.module.scss @@ -16,7 +16,3 @@ .hidden { visibility: hidden; } - -.submit { - margin-bottom: 15px; -} diff --git a/src/txs/Tx.tsx b/src/txs/Tx.tsx index 2551ad8f0..064ff8e94 100644 --- a/src/txs/Tx.tsx +++ b/src/txs/Tx.tsx @@ -444,7 +444,6 @@ function Tx(props: Props) { {feesReady && ( } disabled={ !estimatedGas || !!disabled || !!walletError || !feesReady diff --git a/src/txs/swap/Swap.module.scss b/src/txs/swap/Swap.module.scss index 7554d2c32..df64c7ec6 100644 --- a/src/txs/swap/Swap.module.scss +++ b/src/txs/swap/Swap.module.scss @@ -14,13 +14,6 @@ justify-content: space-between; } -.form__container { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 24px; -} - .text { color: var(--text); } diff --git a/src/txs/swap/SwapConfirm.tsx b/src/txs/swap/SwapConfirm.tsx index 6730eb3f9..6ecd5421f 100644 --- a/src/txs/swap/SwapConfirm.tsx +++ b/src/txs/swap/SwapConfirm.tsx @@ -1,18 +1,17 @@ import { useMemo } from "react" -import { MsgTransfer, Coin, MsgExecuteContract } from "@terra-money/feather.js" -import { SectionHeader, Grid } from "@terra-money/station-ui" +import { useTranslation } from "react-i18next" import { useNavigate } from "react-router-dom" +import { MsgTransfer, Coin, MsgExecuteContract } from "@terra-money/feather.js" +import { toAmount } from "@terra-money/terra-utils" +import { Coins } from "@terra-money/feather.js" +import { SectionHeader, Grid, Form } from "@terra-money/station-ui" import SwapTimeline from "./components/SwapTimeline" +import Errors from "./components/ConfirmErrors" import { SwapState } from "data/queries/swap/types" -import { toAmount } from "@terra-money/terra-utils" -import Tx from "txs/Tx" -import { useSwap } from "./SwapContext" import { queryKey } from "data/query" -import Errors from "./components/ConfirmErrors" -import { Coins } from "@terra-money/feather.js" +import { useSwap } from "./SwapContext" import { useIsLedger } from "utils/ledger" -import styles from "./Swap.module.scss" -import { useTranslation } from 'react-i18next' +import Tx from "txs/Tx" export const validateAssets = ( assets: Partial @@ -88,10 +87,7 @@ const Confirm = () => { {/* @ts-ignore */} {({ fee, submit }) => ( -
+ @@ -99,7 +95,7 @@ const Confirm = () => { {submit.button} -
+ )} ) diff --git a/src/txs/swap/SwapSettingsPage.tsx b/src/txs/swap/SwapSettingsPage.tsx index 0c29055d9..9d123b654 100644 --- a/src/txs/swap/SwapSettingsPage.tsx +++ b/src/txs/swap/SwapSettingsPage.tsx @@ -1,16 +1,15 @@ -import style from "./Swap.module.scss" +import { useForm } from "react-hook-form" +import { useNavigate } from "react-router-dom" import { useTranslation } from "react-i18next" import { Button, Input, InputWrapper, ButtonInlineWrapper, - Form, SubmitButton, + Form, } from "@terra-money/station-ui" import { useSwap } from "./SwapContext" -import { useForm } from "react-hook-form" -import { useNavigate } from "react-router-dom" interface SlippageForm { slippage: string @@ -32,11 +31,7 @@ const SlippagePage = () => { } return ( -
- {/* */} + @@ -49,8 +44,7 @@ const SlippagePage = () => { /> - {/* */} - + ) } diff --git a/src/txs/swap/SwapTx.tsx b/src/txs/swap/SwapTx.tsx index 5c8b7b911..d5c012b78 100644 --- a/src/txs/swap/SwapTx.tsx +++ b/src/txs/swap/SwapTx.tsx @@ -1,11 +1,10 @@ import { useTranslation } from "react-i18next" -import ExtensionPage from "extension/components/ExtensionPage" +import { Routes, Route, useLocation } from "react-router-dom" import Setup from "./SwapSetup" import Confirm from "./SwapConfirm" import SwapContext from "./SwapContext" -import { Routes, Route, useLocation } from "react-router-dom" import SwapSettings from "./SwapSettingsPage" -import ExtensionPageV2 from 'extension/components/ExtensionPageV2' +import ExtensionPageV2 from "extension/components/ExtensionPageV2" const SwapTx = () => { const location = useLocation() @@ -25,7 +24,11 @@ const SwapTx = () => { key={r.path} path={r.path} element={ - + {r.element} } From 77dfdbaa06c560c2299b2f970a8900fb5d035372 Mon Sep 17 00:00:00 2001 From: Manuel Alessandro Collazo Date: Fri, 12 Jan 2024 15:57:21 -0300 Subject: [PATCH 04/27] feat: section header arrow --- package-lock.json | 490 +-------------------------------- src/pages/wallet/AssetList.tsx | 1 + 2 files changed, 4 insertions(+), 487 deletions(-) diff --git a/package-lock.json b/package-lock.json index 315705fd5..c2dc5486c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2580,54 +2580,6 @@ "version": "0.3.1", "license": "MIT" }, - "node_modules/@esbuild/android-arm": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", - "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "android" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", - "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "android" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", - "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "android" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, "node_modules/@esbuild/darwin-arm64": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", @@ -2644,294 +2596,6 @@ "node": ">=12" } }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", - "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", - "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "freebsd" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", - "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "freebsd" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", - "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", - "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", - "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", - "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", - "cpu": [ - "loong64" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", - "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", - "cpu": [ - "mips64el" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", - "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", - "cpu": [ - "ppc64" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", - "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", - "cpu": [ - "riscv64" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", - "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", - "cpu": [ - "s390x" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", - "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", - "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "netbsd" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", - "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "openbsd" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", - "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "sunos" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", - "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", - "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", - "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "peer": true, - "engines": { - "node": ">=12" - } - }, "node_modules/@eslint/eslintrc": { "version": "0.4.3", "dev": true, @@ -8065,8 +7729,8 @@ }, "node_modules/@terra-money/station-ui": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@terra-money/station-ui/-/station-ui-1.0.3.tgz", - "integrity": "sha512-NS+LTJPKDAcDzVDdjff9Gw+mxTX10Skd34/3nyuKIACRd4X+3JbiKG6GeUuvIUo+HyWA1gixhsSSe+U3jaAZzg==", + "resolved": "file:../station-ui/terra-money-station-ui-1.0.3.tgz", + "integrity": "sha512-uXOuOjh2zU4K+0U3a4kORn0BYH9oQbrfPtTeEI/8tMaNqA6bUR7R5owR7S5tfFQZ1qJspEv38W2ktCY/aJHq5A==", "dependencies": { "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.1", @@ -36837,27 +36501,6 @@ "@emotion/weak-memoize": { "version": "0.3.1" }, - "@esbuild/android-arm": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", - "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", - "optional": true, - "peer": true - }, - "@esbuild/android-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", - "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", - "optional": true, - "peer": true - }, - "@esbuild/android-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", - "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", - "optional": true, - "peer": true - }, "@esbuild/darwin-arm64": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", @@ -36865,132 +36508,6 @@ "optional": true, "peer": true }, - "@esbuild/darwin-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", - "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", - "optional": true, - "peer": true - }, - "@esbuild/freebsd-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", - "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", - "optional": true, - "peer": true - }, - "@esbuild/freebsd-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", - "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", - "optional": true, - "peer": true - }, - "@esbuild/linux-arm": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", - "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", - "optional": true, - "peer": true - }, - "@esbuild/linux-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", - "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", - "optional": true, - "peer": true - }, - "@esbuild/linux-ia32": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", - "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", - "optional": true, - "peer": true - }, - "@esbuild/linux-loong64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", - "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", - "optional": true, - "peer": true - }, - "@esbuild/linux-mips64el": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", - "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", - "optional": true, - "peer": true - }, - "@esbuild/linux-ppc64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", - "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", - "optional": true, - "peer": true - }, - "@esbuild/linux-riscv64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", - "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", - "optional": true, - "peer": true - }, - "@esbuild/linux-s390x": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", - "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", - "optional": true, - "peer": true - }, - "@esbuild/linux-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", - "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", - "optional": true, - "peer": true - }, - "@esbuild/netbsd-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", - "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", - "optional": true, - "peer": true - }, - "@esbuild/openbsd-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", - "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", - "optional": true, - "peer": true - }, - "@esbuild/sunos-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", - "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", - "optional": true, - "peer": true - }, - "@esbuild/win32-arm64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", - "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", - "optional": true, - "peer": true - }, - "@esbuild/win32-ia32": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", - "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", - "optional": true, - "peer": true - }, - "@esbuild/win32-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", - "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", - "optional": true, - "peer": true - }, "@eslint/eslintrc": { "version": "0.4.3", "dev": true, @@ -40455,8 +39972,7 @@ }, "@terra-money/station-ui": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@terra-money/station-ui/-/station-ui-1.0.3.tgz", - "integrity": "sha512-NS+LTJPKDAcDzVDdjff9Gw+mxTX10Skd34/3nyuKIACRd4X+3JbiKG6GeUuvIUo+HyWA1gixhsSSe+U3jaAZzg==", + "integrity": "sha512-uXOuOjh2zU4K+0U3a4kORn0BYH9oQbrfPtTeEI/8tMaNqA6bUR7R5owR7S5tfFQZ1qJspEv38W2ktCY/aJHq5A==", "requires": { "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.1", diff --git a/src/pages/wallet/AssetList.tsx b/src/pages/wallet/AssetList.tsx index 6b1ee8eac..156ca1bec 100644 --- a/src/pages/wallet/AssetList.tsx +++ b/src/pages/wallet/AssetList.tsx @@ -134,6 +134,7 @@ const AssetList = () => { count: assets.lowBal.length, })} withLine + withArrow /> {!hideLowBal && assets.lowBal.map(renderAsset)} From afd5fcb18ade09677a1046d5b7495626572b7090 Mon Sep 17 00:00:00 2001 From: Manuel Alessandro Collazo Date: Fri, 12 Jan 2024 17:38:40 -0300 Subject: [PATCH 05/27] fix: remove withArrow functionality until station-ui npm update --- src/pages/wallet/AssetList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/wallet/AssetList.tsx b/src/pages/wallet/AssetList.tsx index 156ca1bec..6b1ee8eac 100644 --- a/src/pages/wallet/AssetList.tsx +++ b/src/pages/wallet/AssetList.tsx @@ -134,7 +134,6 @@ const AssetList = () => { count: assets.lowBal.length, })} withLine - withArrow /> {!hideLowBal && assets.lowBal.map(renderAsset)} From a3969d7a1cddbd16cd663afb7a378db976c2537e Mon Sep 17 00:00:00 2001 From: Joshua Date: Fri, 12 Jan 2024 16:08:46 -0600 Subject: [PATCH 06/27] more light fixed and a Complete AssetPage overhaul --- src/components/layout/SettingsSelector.tsx | 39 ++--- .../components/ExtensionPageV2.module.scss | 4 +- src/pages/custom/TokenFilters.module.scss | 4 + src/pages/custom/TokenFilters.tsx | 14 +- src/pages/custom/TokenList.tsx | 2 +- src/pages/custom/WithSearchInput.tsx | 6 +- src/pages/wallet/AssetPage.module.scss | 149 +++++++++--------- src/pages/wallet/AssetPage.tsx | 41 +++-- src/pages/wallet/NetWorth.module.scss | 4 + src/pages/wallet/ReceivePage.module.scss | 1 - src/pages/wallet/ReceivePage.tsx | 10 +- src/pages/wallet/VestingDetailsPage.tsx | 2 +- src/pages/wallet/WalletActionButtons.tsx | 2 +- src/pages/wallet/WalletRouter.tsx | 16 +- src/txs/swap/components/SwapLoadingPage.tsx | 8 +- 15 files changed, 163 insertions(+), 139 deletions(-) create mode 100644 src/pages/custom/TokenFilters.module.scss diff --git a/src/components/layout/SettingsSelector.tsx b/src/components/layout/SettingsSelector.tsx index d11591c95..6fd0e67eb 100644 --- a/src/components/layout/SettingsSelector.tsx +++ b/src/components/layout/SettingsSelector.tsx @@ -1,6 +1,6 @@ import { useState } from "react" import { useNetworks } from "app/InitNetworks" -import { RadioList, RadioListItem } from "@terra-money/station-ui" +import { FlexColumn, RadioList, RadioListItem } from "@terra-money/station-ui" interface Props { value: string @@ -19,23 +19,26 @@ const SettingsSelector = ({ const { networks } = useNetworks() return ( - - {options.map(({ value, label }, index) => ( - onChange(value)} - {...(accordion && { - isOpen: openAcc === index, - setOpenAcc: () => setOpenAcc(openAcc === index ? undefined : index), - accContent: Object.values(networks[value]).map( - ({ name, icon }) => ({ name, icon }) - ), - })} - /> - ))} - + + + {options.map(({ value, label }, index) => ( + onChange(value)} + {...(accordion && { + isOpen: openAcc === index, + setOpenAcc: () => + setOpenAcc(openAcc === index ? undefined : index), + accContent: Object.values(networks[value]).map( + ({ name, icon }) => ({ name, icon }) + ), + })} + /> + ))} + + ) } diff --git a/src/extension/components/ExtensionPageV2.module.scss b/src/extension/components/ExtensionPageV2.module.scss index 4ed2dd48b..467342a3c 100644 --- a/src/extension/components/ExtensionPageV2.module.scss +++ b/src/extension/components/ExtensionPageV2.module.scss @@ -41,6 +41,7 @@ &.no__header { padding-top: 56px; + height: 100vh; } .header__container { @@ -86,9 +87,10 @@ } .main { - height: 100%; + width: 100%; display: flex; align-items: flex-start; + flex: 1; & > * { flex: 1; diff --git a/src/pages/custom/TokenFilters.module.scss b/src/pages/custom/TokenFilters.module.scss new file mode 100644 index 000000000..23b7026b0 --- /dev/null +++ b/src/pages/custom/TokenFilters.module.scss @@ -0,0 +1,4 @@ +.whitelisted__checkbox { + width: 100%; + margin: 4px 0; +} diff --git a/src/pages/custom/TokenFilters.tsx b/src/pages/custom/TokenFilters.tsx index eac646fe9..3990091e1 100644 --- a/src/pages/custom/TokenFilters.tsx +++ b/src/pages/custom/TokenFilters.tsx @@ -1,17 +1,21 @@ import { Checkbox } from "@terra-money/station-ui" import { useTokenFilters } from "utils/localStorage" import { useTranslation } from "react-i18next" +import styles from "./TokenFilters.module.scss" const TokenFilters = () => { const { onlyShowWhitelist, toggleOnlyShowWhitelist } = useTokenFilters() const { t } = useTranslation() return ( - +
+ +
) } diff --git a/src/pages/custom/TokenList.tsx b/src/pages/custom/TokenList.tsx index 4fc7c92de..8023190c6 100644 --- a/src/pages/custom/TokenList.tsx +++ b/src/pages/custom/TokenList.tsx @@ -32,7 +32,7 @@ const TokenList = (props: Props) => { ) : ( - + {sortedResults .sort((a, b) => Number(getIsAdded(b)) - Number(getIsAdded(a))) .map((i) => { diff --git a/src/pages/custom/WithSearchInput.tsx b/src/pages/custom/WithSearchInput.tsx index 16891d197..2b3813ba1 100644 --- a/src/pages/custom/WithSearchInput.tsx +++ b/src/pages/custom/WithSearchInput.tsx @@ -1,6 +1,6 @@ import { ReactNode, useState } from "react" -import { Grid } from "components/layout" import { SearchInput } from "components/form" +import { FlexColumn } from "@terra-money/station-ui" interface Props { gap?: number @@ -31,7 +31,7 @@ const WithSearchInput = ({ const [input, setInput] = useState(defaultInput ?? "") return ( - + {children(input)} - + ) } diff --git a/src/pages/wallet/AssetPage.module.scss b/src/pages/wallet/AssetPage.module.scss index de3125c1b..401c94925 100644 --- a/src/pages/wallet/AssetPage.module.scss +++ b/src/pages/wallet/AssetPage.module.scss @@ -1,96 +1,89 @@ @import "mixins"; @import "font_mixins"; -.details { - // background-color: var(--token-dark-500); - @include flex(center); - flex-direction: column; - width: 100%; - padding-bottom: 16px; - height: fit-content; - grid-area: details; +.asset__page__wrapper { + max-width: var(--extension-width); + margin: 0 auto; + min-height: calc(100vh - var(--header-height)); + display: flex; - .cost__container { - display: flex; - align-items: center; - flex-direction: column; - gap: 8px; - } - - .token { - @include flex(center); - color: var(--token-light-100); - gap: 8px; + .content__container { + background-color: var(--token-dark-300); - .icon { + .details { + position: relative; + background-color: var(--token-dark-500); display: flex; + flex-direction: column; align-items: center; - justify-content: center; - } + gap: 16px; + padding: 24px 24px 16px 24px; + border-bottom: 1px solid var(--token-dark-100); - .token__amount { - @include X-Small; - color: var(--token-light-100); - } - } + .back__button { + position: absolute; + top: 6px; + left: 8px; + padding: 16px; + } - h1 { - @include XX-Large; - color: var(--token-light-white); - margin-bottom: 24px; - } + .cost__container { + display: flex; + align-items: center; + flex-direction: column; + gap: 8px; - p { - color: var(--text-muted); - font-size: 12pt; - margin-top: 0.2rem; - } -} + .token { + display: flex; + align-items: center; + color: var(--token-light-100); + gap: 8px; -.chainlist__container { - padding: 24px 0; -} + .icon { + display: flex; + align-items: center; + justify-content: center; + } -.chainlist { - padding-inline: 10px; - grid-area: list; - display: grid; - grid-template-areas: "title" "list"; - grid-template-rows: min-content auto; - overflow-y: hidden; -} + .token__amount { + @include X-Small; + color: var(--token-light-100); + } + } -.chainlist__title { - grid-area: title; - padding: 0px 10px 6px; -} + h1 { + @include XX-Large; + color: var(--token-light-white); + } + } + } -.chainlist__list { - gap: 4px; - display: grid; - overflow-y: auto; - grid-area: list; - padding-bottom: 14px; -} + .chainlist__container { + padding: 24px 0; -.actions { - @include flex(space-between); - background-color: var(--card-bg); - padding-top: 0.6rem; - padding: 20px 20px; - gap: 0.6rem; - width: 100%; + .chainlist { + padding-inline: 14px; + overflow-y: hidden; + display: flex; + flex-direction: column; + gap: 6px; - button { - min-width: 0; - width: 100%; - padding-block: 20px; - height: fit-content; - } -} + .chainlist__title { + padding: 0px 10px; + } -.vesting { - width: 100%; - margin-bottom: 20px; - margin-top: 10px; + .chainlist__list { + overflow-y: auto; + margin-bottom: 14px; + } + } + } + + .vesting { + width: 100%; + margin-bottom: 20px; + margin-top: 10px; + padding: 0 10px; + } + } } diff --git a/src/pages/wallet/AssetPage.tsx b/src/pages/wallet/AssetPage.tsx index f2663d559..45277ac65 100644 --- a/src/pages/wallet/AssetPage.tsx +++ b/src/pages/wallet/AssetPage.tsx @@ -3,7 +3,11 @@ import { CoinBalance, useBankBalance } from "data/queries/bank" import { useNavigate, useParams } from "react-router-dom" import { useExchangeRates } from "data/queries/coingecko" import WalletActionButtons from "./WalletActionButtons" -import { SectionHeader } from "@terra-money/station-ui" +import { + BackArrowIcon, + FlexColumn, + SectionHeader, +} from "@terra-money/station-ui" import { Read, TokenIcon } from "components/token" import { useAccount } from "data/queries/vesting" import { useTranslation } from "react-i18next" @@ -72,7 +76,7 @@ const AssetPage = () => { withLine className={styles.chainlist__title} /> -
+ {data .sort((a, b) => parseInt(b.amount) - parseInt(a.amount)) .map((b) => ( @@ -86,7 +90,7 @@ const AssetPage = () => { decimals={decimals} /> ))} -
+ ) } @@ -99,6 +103,9 @@ const AssetPage = () => { return (
+
@@ -161,17 +168,23 @@ const AssetPage = () => { } return ( - <> - -
- - - -
- +
+ + +
+ + + +
+ +
) } diff --git a/src/pages/wallet/NetWorth.module.scss b/src/pages/wallet/NetWorth.module.scss index a1413b881..09482f926 100644 --- a/src/pages/wallet/NetWorth.module.scss +++ b/src/pages/wallet/NetWorth.module.scss @@ -22,6 +22,10 @@ @include flex; gap: 4px; width: 308px; + + .button__wrapper { + max-width: 74px; + } } .networth__buttons__labels { diff --git a/src/pages/wallet/ReceivePage.module.scss b/src/pages/wallet/ReceivePage.module.scss index d1d5f6ce7..5a428d064 100644 --- a/src/pages/wallet/ReceivePage.module.scss +++ b/src/pages/wallet/ReceivePage.module.scss @@ -6,5 +6,4 @@ .back { width: 100%; - margin: 20px 0px; } diff --git a/src/pages/wallet/ReceivePage.tsx b/src/pages/wallet/ReceivePage.tsx index a70ee4e3a..408464e2e 100644 --- a/src/pages/wallet/ReceivePage.tsx +++ b/src/pages/wallet/ReceivePage.tsx @@ -3,7 +3,11 @@ import { getChainNamefromID } from "data/queries/chains" import { useAllNetworks } from "data/wallet" import { useInterchainAddresses } from "auth/hooks/useAddress" import WithSearchInput from "pages/custom/WithSearchInput" -import { AddressSelectableListItem, Button } from "@terra-money/station-ui" +import { + AddressSelectableListItem, + Button, + FlexColumn, +} from "@terra-money/station-ui" import { truncate } from "@terra-money/terra-utils" import { capitalize } from "@mui/material" import styles from "./ReceivePage.module.scss" @@ -66,7 +70,7 @@ const ReceivePage = () => { if (!data.length) return null return ( - <> +