@@ -78,6 +83,14 @@ const AssetChain = (props: Props) => {
))}
{path &&
{path.map((c) => networks[c]?.name ?? c).join(" → ")}
} + {devMode && ( +
+
+ {truncate(denom)}
+
{currency.symbol}{" "}
diff --git a/src/pages/wallet/AssetList.module.scss b/src/pages/wallet/AssetList.module.scss
index 7ef17312d..bf8148f48 100644
--- a/src/pages/wallet/AssetList.module.scss
+++ b/src/pages/wallet/AssetList.module.scss
@@ -16,6 +16,21 @@
grid-area: title;
}
+.manage__button {
+ display: flex;
+ gap: 8px;
+
+ svg {
+ width: 16px;
+ height: 16px;
+
+ path {
+ fill: var(--button-primary-bg);
+ stroke: var(--button-primary-bg);
+ }
+ }
+}
+
.assetlist__list {
overflow-y: auto;
grid-area: list;
diff --git a/src/pages/wallet/AssetList.tsx b/src/pages/wallet/AssetList.tsx
index 359cee6fc..d6a4e5326 100644
--- a/src/pages/wallet/AssetList.tsx
+++ b/src/pages/wallet/AssetList.tsx
@@ -16,6 +16,7 @@ import {
} from "data/settings/CustomTokens"
import { useIBCBaseDenoms } from "data/queries/ibc"
import { useNetwork } from "data/wallet"
+import { ReactComponent as ManageAssets } from "styles/images/icons/ManageAssets.svg"
const AssetList = () => {
const { t } = useTranslation()
@@ -77,7 +78,7 @@ const AssetList = () => {
// @ts-expect-error
unknownIBCDenoms[denom]?.chainID ?? data.chainID ?? chain,
data.token,
- ].join(":")
+ ].join("*")
if (acc[key]) {
acc[key].balance = `${
@@ -98,7 +99,7 @@ const AssetList = () => {
chains: [chain],
id: key,
whitelisted: !(
- data.symbol.endsWith("...") ||
+ data.isNonWhitelisted ||
unknownIBCDenoms[denom]?.chainIDs.find((c) => !networks[c])
),
},
@@ -166,7 +167,10 @@ const AssetList = () => {
Assets
{(open) => (
- {t("Manage tokens")}
+
+ {t("Manage")}
+
)}
diff --git a/src/pages/wallet/AssetPage.module.scss b/src/pages/wallet/AssetPage.module.scss
index 947f2a462..ae3597b2f 100644
--- a/src/pages/wallet/AssetPage.module.scss
+++ b/src/pages/wallet/AssetPage.module.scss
@@ -22,27 +22,31 @@
}
}
+.chainlist__container {
+ padding-top: 25px;
+ padding-bottom: 1.6rem;
+}
+
.chainlist {
background-color: var(--card-bg-muted);
- padding-top: 1.6rem;
padding-inline: 10px;
grid-area: list;
display: grid;
grid-template-areas: "title" "list";
grid-template-rows: min-content auto;
overflow-y: hidden;
+}
- h3 {
- padding-left: 10px;
- grid-area: title;
- margin-bottom: 10px;
- }
+.chainlist__title {
+ grid-area: title;
+ margin-bottom: 5px;
+ padding-left: 10px;
}
.chainlist__list {
overflow-y: auto;
grid-area: list;
- padding-bottom: 1.6rem;
+ padding-bottom: 1rem;
}
.actions {
diff --git a/src/pages/wallet/AssetPage.tsx b/src/pages/wallet/AssetPage.tsx
index cbca3c45a..38635d8a1 100644
--- a/src/pages/wallet/AssetPage.tsx
+++ b/src/pages/wallet/AssetPage.tsx
@@ -21,8 +21,8 @@ const AssetPage = () => {
const { t } = useTranslation()
const { setRoute, route } = useWalletRoute()
const routeDenom = route.path === Path.coin ? route.denom ?? "uluna" : "uluna"
- const [chain, denom] = routeDenom.includes(":")
- ? routeDenom.split(":")
+ const [chain, denom] = routeDenom.includes("*")
+ ? routeDenom.split("*")
: [undefined, routeDenom]
const { token, symbol, icon, decimals } = readNativeDenom(denom, chain)
@@ -70,22 +70,18 @@ const AssetPage = () => {
{currency.symbol}{" "}
-
-
-
{t("Chains")}
+
+
+
{t("Chains")}
+
{filteredBalances
.sort((a, b) => parseInt(b.amount) - parseInt(a.amount))
@@ -96,6 +92,7 @@ const AssetPage = () => {
balance={b.amount}
chain={b.chain}
token={token}
+ denom={b.denom}
decimals={decimals}
/>
{token === "uluna" && isTerraChain(b.chain) &&
)}
{filteredUnsupportedBalances.length > 0 && (
-
-
{t("Unsupported Chains")}
+
+
+
{t("Unsupported Chains")}
+
{filteredUnsupportedBalances
.sort((a, b) => parseInt(b.amount) - parseInt(a.amount))
@@ -117,6 +116,7 @@ const AssetPage = () => {
balance={b.amount}
chain={b.chain}
token={token}
+ denom={b.denom}
decimals={decimals}
path={unknownIBCDenoms[b.denom]?.chains}
ibcDenom={b.denom}
diff --git a/src/pages/wallet/IbcSendBackTx.tsx b/src/pages/wallet/IbcSendBackTx.tsx
index 0e345777b..d63583d50 100644
--- a/src/pages/wallet/IbcSendBackTx.tsx
+++ b/src/pages/wallet/IbcSendBackTx.tsx
@@ -182,7 +182,7 @@ function IbcSendBackTx({ token, chainID }: Props) {
const createTx = useCallback(
({ input }: TxValues) => {
- if (!ibcDetails || !addresses || !IBCdenom || input === undefined) return
+ if (!ibcDetails || !addresses || !IBCdenom || !input) return
const msgs = [
new MsgTransfer(
@@ -192,7 +192,8 @@ function IbcSendBackTx({ token, chainID }: Props) {
addresses[chains[step]],
addresses[chains[step + 1]],
undefined,
- (Date.now() + 120 * 1000) * 1e6
+ (Date.now() + 120 * 1000) * 1e6,
+ undefined
),
]
diff --git a/src/pages/wallet/NetWorth.module.scss b/src/pages/wallet/NetWorth.module.scss
index eac9d10e9..a25c44236 100644
--- a/src/pages/wallet/NetWorth.module.scss
+++ b/src/pages/wallet/NetWorth.module.scss
@@ -12,9 +12,10 @@
}
h1 {
- font-size: 32px;
- line-height: 150%;
+ font-size: 40px;
margin-top: 4px;
+ word-spacing: -10px;
+ line-height: 120%;
}
grid-area: details;
@@ -23,9 +24,9 @@
}
.networth__buttons {
display: flex;
- gap: 48px;
+ gap: 40px;
justify-content: center;
- margin-top: 28px;
+ margin-top: 24px;
width: 100%;
.button__wrapper {
@@ -41,15 +42,49 @@
padding: 16px;
@include flex;
}
-}
-.icon {
- font-size: 24px;
+ .wallet_primary {
+ box-shadow: inset 0px 1.5px 0px 0px rgb(255 255 255 / 30%),
+ 0px 4px 24px 0px rgb(36 36 40 / 30%);
+ transition: all 0.1s ease-in-out;
+
+ &:hover {
+ box-shadow: inset 0px 1.5px 0px 0px rgb(255 255 255 / 20%),
+ 0px 4px 24px 0px rgb(36 36 40 / 30%);
+ }
- &.send {
- transform: rotate(-90deg);
+ &:active {
+ box-shadow: inset 0px 0.25px 0px 0px rgb(255 255 255 / 20%),
+ 0px 4px 24px 0px rgb(36 36 40 / 30%);
+ }
}
- &.receive {
- transform: rotate(90deg);
+
+ .wallet_default {
+ box-shadow: inset 0px 1.5px 0px 0px rgb(255 255 255 / 8%),
+ 0px 4px 24px 0px rgb(36 36 40 / 30%);
+ transition: all 0.1s ease-in-out;
+
+ &:hover {
+ box-shadow: inset 0px 1.5px 0px 0px rgb(255 255 255 / 5%),
+ 0px 4px 24px 0px rgb(36 36 40 / 30%);
+ }
+
+ &:active {
+ box-shadow: inset 0px 0.25px 0px 0px rgb(255 255 255 / 5%),
+ 0px 4px 24px 0px rgb(36 36 40 / 30%);
+ }
+
+ svg {
+ width: 18px;
+ height: 18px;
+
+ path {
+ fill: var(--button-default-text);
+ }
+ }
}
}
+
+.icon {
+ font-size: 24px;
+}
diff --git a/src/pages/wallet/NetWorth.tsx b/src/pages/wallet/NetWorth.tsx
index 154ffb592..024cec504 100644
--- a/src/pages/wallet/NetWorth.tsx
+++ b/src/pages/wallet/NetWorth.tsx
@@ -12,10 +12,13 @@ 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 { Add as AddIcon, Send as SendIcon } from "@mui/icons-material"
import classNames from "classnames"
import { useInterchainAddresses } from "auth/hooks/useAddress"
import { useNetworkName } from "data/wallet"
+import { ReactComponent as SendIcon } from "styles/images/icons/Send_v2.svg"
+import { ReactComponent as ReceiveIcon } from "styles/images/icons/Receive_v2.svg"
+import { ReactComponent as AddIcon } from "styles/images/icons/Buy_v2.svg"
const cx = classNames.bind(styles)
@@ -47,12 +50,20 @@ const NetWorth = () => {
{currency.symbol}{" "}
-
@@ -82,7 +94,7 @@ const NetWorth = () => {
(
-