Branding updates

src/components/Cart.tsx

@@ -8,10 +8,10 @@ import { useCartContext } from '~/contexts/Cart';
 import { api } from '~/utils/api';
 import { useSendCalls, useShowCallsStatus } from 'wagmi/experimental'
 import { client } from '~/providers/Thirdweb';
-import { useActiveAccount, useActiveWallet } from 'thirdweb/react';
+import { useActiveAccount, useActiveWallet, useWalletBalance } from 'thirdweb/react';
 import { DEFAULT_CHAIN } from '~/constants/chain';
 import { Connect } from '~/components/Connect';
-import { parseAbiItem, encodeFunctionData } from "viem";
+import { parseAbiItem, encodeFunctionData, isAddressEqual } from "viem";
 import { flattenObject } from '~/helpers/flattenObject';
 import Donation from '~/components/Donation';
 import { REFERRAL_CODE_NFT } from '~/constants/addresses';
@@ -20,13 +20,25 @@ import ReferralChip from '~/components/Referral/ReferralChip';
 import posthog from "posthog-js";
 import { env } from '~/env';
 import { config } from '~/providers/Wagmi';
+import { GAS_FREE_TOKEN } from '~/constants/addresses';
+
+const GAS_FREE_TOKEN_BALANCE_THRESHOLD = 1_000_000n; // 1M gas free tokens
 
 const Cart: FC = () => {
   const { showCallsStatus } = useShowCallsStatus({ config });
   const { sendCalls } = useSendCalls();
   const { cart, referralCode, updateItem, deleteItem } = useCartContext();
   const wallet = useActiveWallet();
   const account = useActiveAccount();
+  const { data: gasFreeTokenBalance } = useWalletBalance({
+    address: account?.address,
+    tokenAddress: GAS_FREE_TOKEN,
+    chain: DEFAULT_CHAIN,
+    client,
+  });
+  const meetsGasFreeTokenBalanceThreshold = useMemo(() => {
+    return gasFreeTokenBalance && gasFreeTokenBalance.value >= GAS_FREE_TOKEN_BALANCE_THRESHOLD;
+  }, [gasFreeTokenBalance]);
   const { data: etherPrice } = api.dex.getEtherPrice.useQuery({
     chainId: base.id,
   });
@@ -136,9 +148,14 @@ const Cart: FC = () => {
           auxiliaryFunds: {
             supported: true
           },
-          paymasterService: {
-            url: env.NEXT_PUBLIC_PAYMASTER_URL,
-          }
+          ...(cart.some(item => 
+            isAddressEqual(item.address, GAS_FREE_TOKEN) && 
+            item.usdAmountDesired >= 10
+          ) || meetsGasFreeTokenBalanceThreshold ? {
+            paymasterService: {
+              url: env.NEXT_PUBLIC_PAYMASTER_URL,
+            }
+          } : {})
         }
       }, {
         onSuccess(tx) {

src/components/Donation.tsx

@@ -20,7 +20,7 @@ export const Donation: FC = () => {
   const [offset, setOffset] = useState<number>(0);
   const CAUSES_PER_PAGE = 5;
   const { data: causeData, isLoading: causesIsLoading } = api.endaoment.search.useQuery({
-    searchTerm: debounceQuery ?? 'paws',
+    searchTerm: debounceQuery ?? 'cats',
     claimedStatus: 'claimed',
     count: CAUSES_PER_PAGE,
     offset: offset,
@@ -67,19 +67,36 @@ export const Donation: FC = () => {
     });
   };
 
+  const CauseImage = ({ cause }: { cause: EndaomentOrg }) => {
+    const [error, setError] = useState<boolean>(false);
+    if (error) {
+      return (
+        <div className="bg-base-300 rounded-full w-10 h-10" />
+      );
+    }
+    return (
+      <Image
+        src={cause.logoUrl ?? COINGECKO_UNKNOWN_IMG}
+        alt={cause.name}
+        width={40}
+        height={40}
+        className="rounded-full"
+        onError={() => setError(true)}
+      />
+    );
+  };
+
   const Cause: FC<{ cause: EndaomentOrg }> = ({ cause }) => {
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
     return (
       <div className="w-full">
         <div className="flex items-start gap-2 overflow-x-auto">
-          <Image
-            src={cause.logoUrl ?? COINGECKO_UNKNOWN_IMG}
-            alt={cause.name}
-            width={40}
-            height={40}
-            className="rounded-full"
-          />
+          <div className="avatar">
+            <div className="w-10 rounded-full">
+              <CauseImage cause={cause} />
+            </div>
+          </div>
           <div 
             className="flex overflow-x-auto flex-col cursor-pointer"
             onClick={() => setIsExpanded(!isExpanded)}