Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿

refactor: enhance notification and balance components with validation checks and key improvements

yoginth.com 938ca05c 8341090d

verified
+40 -23
+6 -2
apps/web/src/components/Notification/List.tsx
··· 108 108 return ( 109 109 <Card className="virtual-divider-list-window"> 110 110 <WindowVirtualizer> 111 - {notifications.map((notification, index) => { 111 + {notifications.map((notification) => { 112 + if (!("id" in notification)) { 113 + return null; 114 + } 115 + 112 116 const Component = 113 117 notificationComponentMap[ 114 118 notification.__typename as keyof typeof notificationComponentMap ··· 119 123 className={cn({ 120 124 "p-5": notification.__typename !== "FollowNotification" 121 125 })} 122 - key={index} 126 + key={notification.id} 123 127 > 124 128 {Component && <Component notification={notification as never} />} 125 129 </div>
+25 -14
apps/web/src/components/Settings/Funds/Balances.tsx
··· 83 83 84 84 return ( 85 85 <div className="m-5 space-y-7"> 86 - {data?.balancesBulk.map((balance, index) => ( 87 - <div key={index}> 88 - {balance.__typename === "NativeAmount" && ( 89 - <TokenBalance symbol={NATIVE_TOKEN_SYMBOL} value={balance.value} /> 90 - )} 91 - {balance.__typename === "Erc20Amount" && ( 92 - <TokenBalance 93 - currency={balance.asset.contract.address} 94 - symbol={balance.asset.symbol} 95 - value={balance.value} 96 - /> 97 - )} 98 - </div> 99 - ))} 86 + {data?.balancesBulk.map((balance) => { 87 + if (!("asset" in balance)) { 88 + return null; 89 + } 90 + 91 + const address = balance.asset.contract.address; 92 + 93 + return ( 94 + <div key={address}> 95 + {balance.__typename === "NativeAmount" && ( 96 + <TokenBalance 97 + symbol={NATIVE_TOKEN_SYMBOL} 98 + value={balance.value} 99 + /> 100 + )} 101 + {balance.__typename === "Erc20Amount" && ( 102 + <TokenBalance 103 + currency={balance.asset.contract.address} 104 + symbol={balance.asset.symbol} 105 + value={balance.value} 106 + /> 107 + )} 108 + </div> 109 + ); 110 + })} 100 111 </div> 101 112 ); 102 113 };
+9 -7
apps/web/src/components/Shared/Sidebar/WhoToFollow.tsx
··· 33 33 return ( 34 34 <Card className="space-y-4 p-5"> 35 35 <Title /> 36 - {Array.from({ length: 5 }).map((_, index) => ( 37 - <div className="flex items-center gap-x-3" key={index}> 38 - <div className="w-full"> 39 - <SingleAccountShimmer showFollowUnfollowButton /> 36 + {Array.from({ length: 5 }, (_, index) => `placeholder-${index}`).map( 37 + (id) => ( 38 + <div className="flex items-center gap-x-3" key={id}> 39 + <div className="w-full"> 40 + <SingleAccountShimmer showFollowUnfollowButton /> 41 + </div> 42 + <XMarkIcon className="size-4 text-gray-500" /> 40 43 </div> 41 - <XMarkIcon className="size-4 text-gray-500" /> 42 - </div> 43 - ))} 44 + ) 45 + )} 44 46 <div className="pt-2 pb-1"> 45 47 <Skeleton className="h-3 w-5/12 rounded-full" /> 46 48 </div>