feat: use spam filter with whitelist

config/wallet-config.json

@@ -129,5 +129,6 @@
     "SP2C2YFP12AJZB4MABJBAJ55XECVS7E4PMMZ89YZR.arkadiko-token::diko",
     "SNGWPN3XDAQE673MXYXF81016M50NHF5X5PWWM70.sbtc-token::sbtc-token",
     "SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-token::sbtc-token"
-  ]
+  ],
+  "spamFilterWhitelist": ["DOG.GO.TO.THE.MOON"]
 }

package.json

@@ -150,11 +150,11 @@
     "@leather.io/constants": "0.15.5",
     "@leather.io/crypto": "1.6.35",
     "@leather.io/models": "0.25.1",
-    "@leather.io/query": "2.26.21",
+    "@leather.io/query": "2.27.0",
     "@leather.io/stacks": "1.5.20",
     "@leather.io/tokens": "0.12.11",
     "@leather.io/ui": "1.48.3",
-    "@leather.io/utils": "0.25.2",
+    "@leather.io/utils": "0.26.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.5.0",
     "@noble/secp256k1": "2.1.0",

src/app/common/spam-filter/use-spam-filter.ts

@@ -0,0 +1,7 @@
+import { useConfigSpamFilterWhitelist } from '@leather.io/query';
+import { spamFilter } from '@leather.io/utils';
+
+export function useSpamFilterWithWhitelist() {
+  const whitelist = useConfigSpamFilterWhitelist();
+  return (input: string) => spamFilter({ input, whitelist });
+}

src/app/components/crypto-asset-item/crypto-asset-item-toggle.tsx

@@ -5,8 +5,8 @@ import { sanitize } from 'dompurify';
 import { Box, VStack } from 'leather-styles/jsx';
 
 import { ItemLayout, Pressable, Switch } from '@leather.io/ui';
-import { spamFilter } from '@leather.io/utils';
 
+import { useSpamFilterWithWhitelist } from '@app/common/spam-filter/use-spam-filter';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { manageTokensSlice } from '@app/store/manage-tokens/manage-tokens.slice';
 
@@ -31,6 +31,8 @@ export function CryptoAssetItemToggle({
   const switchRef = useRef<HTMLButtonElement>(null);
   const [_isPending, transition] = useTransition();
 
+  const spamFilter = useSpamFilterWithWhitelist();
+
   function handleSelection(enabled: boolean) {
     transition(() => {
       dispatch(

src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx

@@ -10,8 +10,8 @@ import {
   SkeletonLoader,
   shimmerStyles,
 } from '@leather.io/ui';
-import { spamFilter } from '@leather.io/utils';
 
+import { useSpamFilterWithWhitelist } from '@app/common/spam-filter/use-spam-filter';
 import { PrivateTextLayout } from '@app/components/privacy/private-text.layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
@@ -51,6 +51,8 @@ export function CryptoAssetItemLayout({
 }: CryptoAssetItemLayoutProps) {
   const { availableBalanceString, formattedBalance } = parseCryptoAssetBalance(availableBalance);
 
+  const spamFilter = useSpamFilterWithWhitelist();
+
   const titleRight = (
     <SkeletonLoader width="126px" isLoading={isLoading}>
       <BasicTooltip

src/app/components/transaction/transaction-title.tsx

@@ -1,9 +1,9 @@
 import { useRef, useState } from 'react';
 
 import { Title } from '@leather.io/ui';
-import { spamFilter } from '@leather.io/utils';
 
 import { useOnResizeListener } from '@app/common/hooks/use-on-resize-listener';
+import { useSpamFilterWithWhitelist } from '@app/common/spam-filter/use-spam-filter';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface TransactionTitleProps {
@@ -18,6 +18,8 @@ export function TransactionTitle(props: TransactionTitleProps) {
   );
   const onResize = () => setIsEllipsisActive(element?.scrollWidth > element?.clientWidth);
 
+  const spamFilter = useSpamFilterWithWhitelist();
+
   useOnResizeListener(onResize);
 
   return (