Fixing type errors in react example

Author: corbanbrook

examples/components/src/Header.tsx

@@ -108,7 +108,7 @@ const NetworkSelect = () => {
         >
           <div className="flex items-center gap-2">
             <NetworkImage chainId={chainId} size="sm" />
-            <Text display={{ sm: 'none', lg: 'block' }} variant="normal" fontWeight="bold" color="primary">
+            <Text className="hidden lg:block" variant="normal" fontWeight="bold" color="primary">
               {chains.find(chain => chain.id === chainId)?.name || chainId}
             </Text>
           </div>

examples/react/src/components/Connected.tsx

@@ -701,7 +701,8 @@ export const Connected = () => {
                           <Text variant="xsmall">{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
                         </div>
                         <div className="flex flex-row">
-                          <Text>Wallet balance for {option.token.name}: </Text> <Text>{option.balanceFormatted}</Text>
+                          <Text>Wallet balance for {option.token.name}: </Text>{' '}
+                          <Text>{'balanceFormatted' in option ? option.balanceFormatted : null}</Text>
                         </div>
                       </div>
                     ),
@@ -717,7 +718,7 @@ export const Connected = () => {
                     )
 
                     if (selected?.token.contractAddress !== undefined) {
-                      if (!selected.hasEnoughBalanceForFee) {
+                      if (!('hasEnoughBalanceForFee' in selected) || !selected.hasEnoughBalanceForFee) {
                         setFeeOptionAlert({
                           title: 'Insufficient balance',
                           description: `You do not have enough balance to pay the fee with ${selected.token.name}, please make sure you have enough balance in your wallet for the selected fee option.`,

examples/react/src/components/CustomCheckout/index.tsx

@@ -76,7 +76,7 @@ export const CustomCheckout = () => {
     }
 
     if (orderSummary.error) {
-      return <Text color="error">Error loading order summary</Text>
+      return <Text color="negative">Error loading order summary</Text>
     }
 
     return (
@@ -128,7 +128,7 @@ export const CustomCheckout = () => {
     }
 
     if (creditCardPayment.error) {
-      return <Text color="error">Error loading credit card payment</Text>
+      return <Text color="negative">Error loading credit card payment</Text>
     }
 
     const CreditCardIframe = creditCardPayment.data?.CreditCardIframe
@@ -152,7 +152,7 @@ export const CustomCheckout = () => {
     }
 
     if (cryptoPayment.cryptoOptions.error) {
-      return <Text color="error">Error loading crypto payment</Text>
+      return <Text color="negative">Error loading crypto payment</Text>
     }
 
     return (
@@ -183,15 +183,15 @@ export const CustomCheckout = () => {
   return (
     <div className="flex pt-16 pb-8 px-6 gap-2 flex-col">
       <Text color="primary">The following data is generated by the useCheckoutUI hook</Text>
-      <Text fontSize="large" fontWeight="bold" color="primary">
+      <Text variant="large" fontWeight="bold" color="primary">
         Order Summary section
       </Text>
       <OrderSummary />
-      <Text fontSize="large" fontWeight="bold" color="primary">
+      <Text variant="large" fontWeight="bold" color="primary">
         Crypto Payment section
       </Text>
       <CryptoPayment />
-      <Text fontSize="large" fontWeight="bold" color="primary">
+      <Text variant="large" fontWeight="bold" color="primary">
         Credit Card Payment section
       </Text>
       <CreditCardPayment />

examples/react/src/components/ImmutableCallback.tsx

@@ -24,7 +24,7 @@ export function ImmutableCallback() {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen">
       <Spinner size="lg" />
-      <Text marginTop="4">Processing Immutable login...</Text>
+      <Text className="mt-4">Processing Immutable login...</Text>
     </div>
   )
 }