chore: only show relevant fund assets and deprecate tooltip for send …

…BRC-20, ref #5071 #4949
leather-io · Mar 21, 2024 · 990ee0e · 990ee0e
1 parent 4cc2b3d
commit 990ee0e
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 43 deletions.
diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
@@ -34,7 +34,6 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
       {props.brc20Tokens?.map(token => (
         <Brc20TokenAssetItemLayout
           key={token.ticker}
-          displayNotEnoughBalance={!hasPositiveBtcBalanceForFees}
           token={token}
           onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
         />

diff --git a/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -12,41 +12,33 @@ import { Pressable } from '@app/ui/pressable/pressable';
 interface Brc20TokenAssetItemLayoutProps {
   token: Brc20Token;
   onClick?(): void;
-  displayNotEnoughBalance?: boolean;
 }
 export function Brc20TokenAssetItemLayout({
   onClick,
-  displayNotEnoughBalance,
+
   token,
 }: Brc20TokenAssetItemLayoutProps) {
   const balance = createMoney(Number(token.overall_balance), token.ticker, 0);
   const formattedBalance = formatBalance(balance.amount.toString());
 
   return (
-    <BasicTooltip
-      asChild
-      disabled={!displayNotEnoughBalance}
-      label="Not enough BTC in balance"
-      side="top"
-    >
-      <Pressable onClick={onClick} my="space.02">
-        <ItemLayout
-          flagImg={<Brc20AvatarIcon />}
-          titleLeft={token.ticker}
-          captionLeft="BRC-20"
-          titleRight={
-            <BasicTooltip
-              asChild
-              label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-              side="left"
-            >
-              <styled.span data-testid={token.ticker} fontWeight={500} textStyle="label.02">
-                {formattedBalance.value}
-              </styled.span>
-            </BasicTooltip>
-          }
-        />
-      </Pressable>
-    </BasicTooltip>
+    <Pressable onClick={onClick} my="space.02">
+      <ItemLayout
+        flagImg={<Brc20AvatarIcon />}
+        titleLeft={token.ticker}
+        captionLeft="BRC-20"
+        titleRight={
+          <BasicTooltip
+            asChild
+            label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
+            side="left"
+          >
+            <styled.span data-testid={token.ticker} fontWeight={500} textStyle="label.02">
+              {formattedBalance.value}
+            </styled.span>
+          </BasicTooltip>
+        }
+      />
+    </Pressable>
   );
 }
diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx
@@ -17,8 +17,13 @@ import { CryptoAssetListItem } from './crypto-asset-list-item';
 interface CryptoAssetListProps {
   cryptoAssetBalances: AllTransferableCryptoAssetBalances[];
   onItemClick(cryptoAssetBalance: AllTransferableCryptoAssetBalances): void;
+  variant: 'send' | 'fund';
 }
-export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAssetListProps) {
+export function CryptoAssetList({
+  cryptoAssetBalances,
+  onItemClick,
+  variant,
+}: CryptoAssetListProps) {
   const { whenWallet } = useWalletType();
 
   return (
@@ -46,18 +51,19 @@ export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAsse
           }
         />
       ))}
-      {whenWallet({
-        software: (
-          <BitcoinNativeSegwitAccountLoader current>
-            {() => (
-              <Brc20TokensLoader>
-                {brc20Tokens => <Brc20TokenAssetList brc20Tokens={brc20Tokens} />}
-              </Brc20TokensLoader>
-            )}
-          </BitcoinNativeSegwitAccountLoader>
-        ),
-        ledger: null,
-      })}
+      {variant === 'send' &&
+        whenWallet({
+          software: (
+            <BitcoinNativeSegwitAccountLoader current>
+              {() => (
+                <Brc20TokensLoader>
+                  {brc20Tokens => <Brc20TokenAssetList brc20Tokens={brc20Tokens} />}
+                </Brc20TokensLoader>
+              )}
+            </BitcoinNativeSegwitAccountLoader>
+          ),
+          ledger: null,
+        })}
     </Stack>
   );
 }
diff --git a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx
@@ -33,7 +33,7 @@ export function ChooseCryptoAssetToFund() {
     [stxCryptoCurrencyAssetBalance, checkBlockchainAvailable, whenWallet]
   );
 
-  const navigateToSendForm = useCallback(
+  const navigateToFund = useCallback(
     (cryptoAssetBalance: AllTransferableCryptoAssetBalances) => {
       const { asset } = cryptoAssetBalance;
 
@@ -55,8 +55,9 @@ export function ChooseCryptoAssetToFund() {
         >
           <Box pb="space.04" px="space.03">
             <CryptoAssetList
-              onItemClick={navigateToSendForm}
+              onItemClick={navigateToFund}
               cryptoAssetBalances={filteredCryptoAssetBalances}
+              variant="fund"
             />
           </Box>
         </Card>

diff --git a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
@@ -59,6 +59,7 @@ export function ChooseCryptoAsset() {
               software: true,
             })
           )}
+          variant="send"
         />
       </Box>
     </Card>
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ export function ChooseCryptoAsset() { @@
                   software: true,
                 })
               )}
+              variant="send"
             />
           </Box>
         </Card>
@@ Expand Down @@