Skip to content

Commit 9cb2a6a

Browse files
DalcorDalcor
committed
feat: pinned tokens improvements
1 parent f62313b commit 9cb2a6a

File tree

7 files changed

+55
-8
lines changed

7 files changed

+55
-8
lines changed

‎apps/web/components/dialogs/AccountDialog.tsx

+20-5
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,12 @@ import TabButton from "@/components/buttons/TabButton";
2020
import RecentTransaction from "@/components/common/RecentTransaction";
2121
import { useConnectWalletDialogStateStore } from "@/components/dialogs/stores/useConnectWalletStore";
2222
import { wallets } from "@/config/wallets";
23-
import { copyToClipboard } from "@/functions/copyToClipboard";
2423
import { formatFloat } from "@/functions/formatFloat";
2524
import getExplorerLink, { ExplorerLinkType } from "@/functions/getExplorerLink";
2625
import truncateMiddle from "@/functions/truncateMiddle";
2726
import useCurrentChainId from "@/hooks/useCurrentChainId";
2827
import useTokenBalances from "@/hooks/useTokenBalances";
2928
import { useTokens } from "@/hooks/useTokenLists";
30-
import addToast from "@/other/toast";
3129
import { Currency } from "@/sdk_hybrid/entities/currency";
3230
import { Standard } from "@/sdk_hybrid/standard";
3331
import { usePinnedTokensStore } from "@/stores/usePinnedTokensStore";
@@ -125,7 +123,7 @@ function AccountDialogContent({ setIsOpenedAccount, activeTab, setActiveTab }: a
125123
const { connector } = useAccount();
126124

127125
const tokens = useTokens();
128-
const { tokens: pinnedTokensAddresses, toggleToken } = usePinnedTokensStore();
126+
const { tokens: pinnedTokensAddresses } = usePinnedTokensStore();
129127

130128
const pinnedTokens = useMemo(() => {
131129
const lookupMap: Map<"native" | Address, Currency> = new Map(
@@ -227,8 +225,25 @@ function AccountDialogContent({ setIsOpenedAccount, activeTab, setActiveTab }: a
227225
</ScrollbarContainer>
228226
</div>
229227
) : (
230-
<div className="flex flex-col items-center justify-center h-[376px] overflow-auto gap-2 bg-empty-no-tokens bg-no-repeat bg-right-top -mx-4 card-spacing-x sm:-mx-6 lg:-mx-10 -mt-3 pt-3 max-md:bg-size-180">
231-
<span className="text-secondary-text">{t("assets_will_be_displayed_here")}</span>
228+
<div className="flex flex-col justify-center h-[376px] overflow-auto gap-2 bg-empty-no-pinned-tokens bg-no-repeat bg-right-top -mx-4 card-spacing-x sm:-mx-6 lg:-mx-10 -mt-3 pt-3 max-md:bg-size-180">
229+
<button className="h-12 items-center w-full duration-200 text-secondary-text mb-3 bg-tertiary-bg flex justify-between rounded-2 border-l-4 border-green pl-4 pr-3 hocus:bg-green-bg hocus:text-primary-text group">
230+
<span className="flex items-center gap-2">
231+
<Svg
232+
className="text-tertiary-text group-hocus:text-green duration-200 "
233+
iconName="pin-fill"
234+
/>
235+
Manage pinned tokens
236+
</span>
237+
<div className="relative before:opacity-0 before:duration-200 group-hocus:before:opacity-40 before:absolute before:w-4 before:h-4 before:rounded-full before:bg-green-hover-icon before:blur-[8px] before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2">
238+
<Svg
239+
className="text-tertiary-text group-hocus:text-green-hover-icon duration-200 "
240+
iconName="next"
241+
/>
242+
</div>
243+
</button>
244+
<div className="flex-grow flex items-center justify-center">
245+
<span className="text-secondary-text">{t("assets_will_be_displayed_here")}</span>
246+
</div>
232247
</div>
233248
)}
234249
</>

‎apps/web/components/dialogs/PickTokenDialog.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { filterTokens } from "@/functions/searchTokens";
2121
import useCurrentChainId from "@/hooks/useCurrentChainId";
2222
import useTokenBalances from "@/hooks/useTokenBalances";
2323
import { useTokens } from "@/hooks/useTokenLists";
24+
import addToast from "@/other/toast";
2425
import { Currency } from "@/sdk_hybrid/entities/currency";
2526
import { useManageTokensDialogStore } from "@/stores/useManageTokensDialogStore";
2627
import { usePinnedTokensStore } from "@/stores/usePinnedTokensStore";
@@ -183,6 +184,8 @@ function TokenRow({
183184
e.stopPropagation();
184185
if (pinnedTokens[currency.chainId]?.length < 8 || isTokenPinned) {
185186
toggleToken(currency.isNative ? "native" : currency.address0, currency.chainId);
187+
} else {
188+
addToast("Pinning limit reached: 8 tokens", "info");
186189
}
187190
}}
188191
active={isTokenPinned}

‎apps/web/messages/en.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,11 @@
8888
"unlock": "Unlock",
8989
"not_connected": "Not connected",
9090
"disconnect": "Disconnect",
91-
"total_balance": "Total Balance",
91+
"total_balance": "Pinned tokens balance",
9292
"tokens": "Tokens",
9393
"pinned_tokens": "Pinned tokens",
9494
"transactions": "Transactions",
95-
"assets_will_be_displayed_here": "All assets will be displayed here."
95+
"assets_will_be_displayed_here": "Your pinned tokens will appear here"
9696
},
9797
"ManageTokens": {
9898
"manage_lists": "Manage lists",

‎apps/web/public/images/empty-large/no-pinned.svg

+19
Loading

‎apps/web/tailwind.config.ts

+9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1+
const emptyImagePath = "/images/empty-large";
2+
13
/** @type {import('tailwindcss').Config} */
24
module.exports = {
35
presets: [require("@repo/tailwind-config/tailwind-presets")],
6+
theme: {
7+
extend: {
8+
backgroundImage: {
9+
"empty-no-pinned-tokens": `url('${emptyImagePath}/no-pinned.svg')`,
10+
},
11+
},
12+
},
413
};

‎packages/tailwind-config/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"name": "@repo/tailwind-config",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"license": "MIT"
55
}

‎packages/tailwind-config/tailwind-presets.js

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const config = {
4949
"empty-no-margin-positions": `url('${emptyImagePath}/no-margin-positions.svg')`,
5050
"empty-no-positions": `url('${emptyImagePath}/no-positions.svg')`,
5151
"empty-no-tokens": `url('${emptyImagePath}/no-tokens.svg')`,
52+
"empty-no-pinned-tokens": `url('${emptyImagePath}/no-pinned.svg')`,
5253
"empty-no-transactions": `url('${emptyImagePath}/no-transactions.svg')`,
5354
"empty-not-found-lending-order": `url('${emptyImagePath}/not-found-lending-order.svg')`,
5455
"empty-not-found-lending-position": `url('${emptyImagePath}/not-found-lending-position.svg')`,

0 commit comments

Comments
 (0)