@coinbase/cds-mobile 8.53.1 → 8.55.0

package/esm/dates/__stories__/DatePicker.stories.js

@@ -1,4 +1,6 @@
+const _excluded = ["date"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { useState } from 'react';
 import { InputLabel } from '../../controls/InputLabel';
 import { TextInput } from '../../controls/TextInput';
@@ -10,23 +12,25 @@ import { Tooltip } from '../../overlays/tooltip/Tooltip';
 import { Text } from '../../typography/Text';
 import { DatePicker } from '../DatePicker';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
+const today = new Date(new Date().setHours(0, 0, 0, 0));
 const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
-const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
+const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
 const exampleProps = {
-  maxDate: nextMonth15th,
-  minDate: lastMonth15th,
   invalidDateError: 'Please enter a valid date',
   disabledDateError: 'Date unavailable',
   requiredError: 'This field is required'
 };
-const ExampleDatePicker = props => {
-  const [date, setDate] = useState(null);
+const ExampleDatePicker = _ref => {
+  let {
+      date
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [dateValue, setDateValue] = useState(date != null ? date : null);
   const [error, setError] = useState(null);
   return /*#__PURE__*/_jsx(DatePicker, _extends({}, exampleProps, props, {
-    date: date,
+    date: dateValue,
     error: error,
-    onChangeDate: setDate,
+    onChangeDate: setDateValue,
     onErrorDate: setError
   }));
 };
@@ -36,20 +40,20 @@ export const FullExample = () => {
       title: "Default",
       children: /*#__PURE__*/_jsx(ExampleDatePicker, {
         required: true,
-        calendarIconButtonAccessibilityLabel: "Birthdate calendar",
-        label: "Birthdate"
+        label: "Birthdate",
+        openCalendarAccessibilityLabel: "Birthdate calendar"
       })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Multiple pickers",
       children: /*#__PURE__*/_jsxs(HStack, {
         gap: 2,
         children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example 1 calendar",
           label: "Example 1",
+          openCalendarAccessibilityLabel: "Example 1 calendar",
           width: "auto"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example 2 calendar",
           label: "Example 2",
+          openCalendarAccessibilityLabel: "Example 2 calendar",
           width: "auto"
         })]
       })
@@ -62,8 +66,8 @@ export const FullExample = () => {
           placeholder: "1",
           width: "auto"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar",
           label: "Example Date",
+          openCalendarAccessibilityLabel: "Example calendar",
           width: "auto"
         })]
       })
@@ -76,8 +80,8 @@ export const FullExample = () => {
           placeholder: "1",
           width: "50%"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar",
           label: "Example Date",
+          openCalendarAccessibilityLabel: "Example calendar",
           width: "auto"
         })]
       })
@@ -85,7 +89,6 @@ export const FullExample = () => {
       title: "DatePicker with labelNode",
       children: /*#__PURE__*/_jsx(ExampleDatePicker, {
         accessibilityLabel: "Birthdate",
-        calendarIconButtonAccessibilityLabel: "Birthdate calendar",
         labelNode: /*#__PURE__*/_jsxs(HStack, {
           alignItems: "center",
           children: [/*#__PURE__*/_jsx(InputLabel, {
@@ -100,7 +103,8 @@ export const FullExample = () => {
               size: "xs"
             })
           })]
-        })
+        }),
+        openCalendarAccessibilityLabel: "Birthdate calendar"
       })
     }), /*#__PURE__*/_jsx(Example, {
       title: "DatePicker fit-content width",
@@ -108,19 +112,41 @@ export const FullExample = () => {
         flexWrap: "wrap",
         gap: 2,
         children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar",
           label: "Example Date",
+          openCalendarAccessibilityLabel: "Example calendar",
           width: "fit-content"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar 2",
           label: "Example Date 2",
+          openCalendarAccessibilityLabel: "Example calendar 2",
           width: "fit-content"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar 3",
           label: "Example Date 3",
+          openCalendarAccessibilityLabel: "Example calendar 3",
           width: "fit-content"
         })]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with seed date (next month)",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        label: "Event date",
+        openCalendarAccessibilityLabel: "Seed date calendar",
+        seedDate: nextMonth15th
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with pre-selected date (next month)",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        date: nextMonth15th,
+        label: "Event date",
+        openCalendarAccessibilityLabel: "Seed date calendar"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with minimum date of tomorrow",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        disabledDateError: "Future dates only",
+        invalidDateError: "Future dates only",
+        label: "Future date",
+        minDate: tomorrow
+      })
     })]
   });
 };
@@ -132,7 +158,6 @@ export const CustomLabel = () => {
         gap: 2,
         children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
           accessibilityLabel: "Date of birth",
-          calendarIconButtonAccessibilityLabel: "Date of birth calendar",
           labelNode: /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(InputLabel, {
@@ -147,11 +172,11 @@ export const CustomLabel = () => {
                 size: "xs"
               })
             })]
-          })
+          }),
+          openCalendarAccessibilityLabel: "Date of birth calendar"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
           compact: true,
           accessibilityLabel: "Start date",
-          calendarIconButtonAccessibilityLabel: "Start date calendar",
           labelNode: /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             gap: 0.5,
@@ -162,10 +187,10 @@ export const CustomLabel = () => {
               font: "label1",
               children: "*"
             })]
-          })
+          }),
+          openCalendarAccessibilityLabel: "Start date calendar"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
           accessibilityLabel: "End date",
-          calendarIconButtonAccessibilityLabel: "End date calendar",
           labelNode: /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             gap: 1,
@@ -178,7 +203,8 @@ export const CustomLabel = () => {
               children: "(optional)"
             })]
           }),
-          labelVariant: "inside"
+          labelVariant: "inside",
+          openCalendarAccessibilityLabel: "End date calendar"
         })]
       })
     })

package/esm/overlays/__stories__/TrayAction.stories.js

@@ -1,7 +1,7 @@
 const _excluded = ["media"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { FlatList } from 'react-native';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { Button } from '../../buttons/Button';
@@ -12,7 +12,7 @@ import { SectionHeader } from '../../section-header/SectionHeader';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { Link } from '../../typography/Link';
 import { Text } from '../../typography/Text';
-import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { Tray } from '../tray/Tray';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultOptions = [{
   title: 'Ethereum',
@@ -142,6 +142,19 @@ export const WithStickyFooter = () => {
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
       disableCapturePanGestureToDismiss: true,
+      footer: _ref3 => {
+        let {
+          handleClose
+        } = _ref3;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Button"
+          })
+        });
+      },
       handleBarAccessibilityLabel: "Dismiss",
       onCloseComplete: setIsTrayVisibleToFalse,
       onVisibilityChange: handleTrayVisibilityChange,
@@ -149,25 +162,11 @@ export const WithStickyFooter = () => {
         paddingX: 3,
         title: "Section header"
       }),
-      children: _ref3 => {
-        let {
-          handleClose
-        } = _ref3;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsx(FlatList, {
-            data: items,
-            keyExtractor: handleKeyExtractor,
-            renderItem: renderItem
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              children: "Button"
-            })
-          })]
-        });
-      }
+      children: /*#__PURE__*/_jsx(FlatList, {
+        data: items,
+        keyExtractor: handleKeyExtractor,
+        renderItem: renderItem
+      })
     })]
   });
 };

package/esm/overlays/__stories__/TrayInformational.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { HStack, VStack } from '../../layout';
@@ -6,7 +6,7 @@ import { SectionHeader } from '../../section-header/SectionHeader';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { Text } from '../../typography/Text';
 import { ProgressBar } from '../../visualizations/ProgressBar';
-import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Default = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
@@ -22,50 +22,47 @@ export const Default = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
-      handleBarAccessibilityLabel: "Dismiss",
-      onCloseComplete: setIsTrayVisibleToFalse,
-      onVisibilityChange: handleTrayVisibilityChange,
-      title: /*#__PURE__*/_jsx(SectionHeader, {
-        paddingX: 3,
-        title: "Trading activity"
-      }),
-      children: _ref => {
+      footer: _ref => {
         let {
           handleClose
         } = _ref;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            paddingBottom: 1,
-            paddingX: 3,
-            children: [/*#__PURE__*/_jsx(Text, {
-              color: "fgMuted",
-              font: "body",
-              paddingBottom: 3,
-              children: "The percentage of Coinbase customers who increased or decreased their net position in 00 over the past 24 hours through trading. What this means: Increased buying activity can signal that the asset is gaining popularity. Last updated on May 2, 2023."
-            }), /*#__PURE__*/_jsx(Text, {
-              font: "headline",
-              children: "What this means:"
-            }), /*#__PURE__*/_jsx(Text, {
-              color: "fgMuted",
-              font: "body",
-              paddingBottom: 3,
-              children: "Increased buying activity can signal that the asset is gaining popularity."
-            }), /*#__PURE__*/_jsx(Text, {
-              color: "fgMuted",
-              font: "legal",
-              children: "Last updated on May 2, 2023."
-            })]
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              variant: "secondary",
-              children: "Got it"
-            })
-          })]
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            variant: "secondary",
+            children: "Got it"
+          })
         });
-      }
+      },
+      handleBarAccessibilityLabel: "Dismiss",
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: "Trading activity",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: 1,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          paddingBottom: 3,
+          children: "The percentage of Coinbase customers who increased or decreased their net position in 00 over the past 24 hours through trading. What this means: Increased buying activity can signal that the asset is gaining popularity. Last updated on May 2, 2023."
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "What this means:"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          paddingBottom: 3,
+          children: "Increased buying activity can signal that the asset is gaining popularity."
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "legal",
+          children: "Last updated on May 2, 2023."
+        })]
+      })
     })]
   });
 };
@@ -94,7 +91,7 @@ export const WithProgressBar = () => {
         let {
           handleClose
         } = _ref2;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
+        return /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsxs(VStack, {
             paddingBottom: 1,
             paddingX: 3,

package/esm/overlays/__stories__/TrayMessaging.stories.js

@@ -1,11 +1,11 @@
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { SpotSquare } from '../../illustrations';
 import { Box, VStack } from '../../layout';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { Text } from '../../typography/Text';
-import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Default = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
@@ -21,45 +21,44 @@ export const Default = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
-      handleBarAccessibilityLabel: "Dismiss",
-      onCloseComplete: setIsTrayVisibleToFalse,
-      onVisibilityChange: handleTrayVisibilityChange,
-      children: _ref => {
+      footer: _ref => {
         let {
           handleClose
         } = _ref;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            paddingBottom: 1,
-            paddingTop: 1,
-            paddingX: 3,
-            children: [/*#__PURE__*/_jsx(Box, {
-              alignItems: "center",
-              paddingBottom: 4,
-              children: /*#__PURE__*/_jsx(SpotSquare, {
-                name: "borrowWallet"
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              font: "title1",
-              paddingBottom: 1,
-              children: "You\u2019re ready to explore"
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              color: "fgMuted",
-              font: "body",
-              children: "You don\u2019t have any dapps open right now. Here\u2019s one you might like: [dapp]"
-            })]
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              children: "Button"
-            })
-          })]
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Button"
+          })
         });
-      }
+      },
+      handleBarAccessibilityLabel: "Dismiss",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      children: /*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: 1,
+        paddingTop: 1,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          paddingBottom: 4,
+          children: /*#__PURE__*/_jsx(SpotSquare, {
+            name: "borrowWallet"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          font: "title1",
+          paddingBottom: 1,
+          children: "You\u2019re ready to explore"
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          color: "fgMuted",
+          font: "body",
+          children: "You don\u2019t have any dapps open right now. Here\u2019s one you might like: [dapp]"
+        })]
+      })
     })]
   });
 };

package/esm/overlays/__stories__/TrayPromotional.stories.js

@@ -1,13 +1,11 @@
 const _excluded = ["key"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { memo, useCallback, useRef, useState } from 'react';
-import { Platform } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { memo, useCallback, useRef, useState } from 'react';
 import { Button } from '../../buttons/Button';
 import { ListCell } from '../../cells/ListCell';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { useDimensions } from '../../hooks/useDimensions';
+import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
 import { Icon } from '../../icons';
 import { SpotRectangle } from '../../illustrations';
 import { Box, HStack, VStack } from '../../layout';
@@ -17,7 +15,7 @@ import { defaultTheme } from '../../themes/defaultTheme';
 import { Text } from '../../typography/Text';
 import { TextBody } from '../../typography/TextBody';
 import { TextTitle1 } from '../../typography/TextTitle1';
-import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Default = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
@@ -33,45 +31,44 @@ export const Default = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
-      handleBarAccessibilityLabel: "Dismiss",
-      onCloseComplete: setIsTrayVisibleToFalse,
-      onVisibilityChange: handleTrayVisibilityChange,
-      children: _ref => {
+      footer: _ref => {
         let {
           handleClose
         } = _ref;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            paddingBottom: 1,
-            paddingTop: 1,
-            paddingX: 3,
-            children: [/*#__PURE__*/_jsx(Box, {
-              alignItems: "center",
-              paddingBottom: 3,
-              children: /*#__PURE__*/_jsx(SpotRectangle, {
-                name: "exploreDecentralizedApps"
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              font: "title1",
-              paddingBottom: 2,
-              children: "Earn crypto by lending, staking, and more"
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              color: "fgMuted",
-              font: "body",
-              children: "Many decentralized apps (\u201Cdapps\u201D) let you earn yield on your crypto. Check out trusted dapps like Aave and Compound without leaving Coinbaes."
-            })]
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              children: "Explore Dapps"
-            })
-          })]
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Explore Dapps"
+          })
         });
-      }
+      },
+      handleBarAccessibilityLabel: "Dismiss",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      children: /*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: 1,
+        paddingTop: 1,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          paddingBottom: 3,
+          children: /*#__PURE__*/_jsx(SpotRectangle, {
+            name: "exploreDecentralizedApps"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          font: "title1",
+          paddingBottom: 2,
+          children: "Earn crypto by lending, staking, and more"
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          color: "fgMuted",
+          font: "body",
+          children: "Many decentralized apps (\u201Cdapps\u201D) let you earn yield on your crypto. Check out trusted dapps like Aave and Compound without leaving Coinbaes."
+        })]
+      })
     })]
   });
 };
@@ -120,15 +117,7 @@ const CreditCardAddAssetsTrayExample = () => {
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       handleBarAccessibilityLabel: "Information about rewards details",
       onCloseComplete: setIsTrayVisibleOff,
-      title: trayContentType === 'addFundsInfo' ? /*#__PURE__*/_jsx(VStack, {
-        gap: 0.5,
-        paddingTop: 3,
-        paddingX: 3,
-        children: /*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          children: "Lifetime rewards details"
-        })
-      }) : null,
+      title: trayContentType === 'addFundsInfo' ? 'Lifetime rewards details' : null,
       children: trayContentType === 'addFundsInfo' ? /*#__PURE__*/_jsxs(VStack, {
         paddingX: 3,
         children: [/*#__PURE__*/_jsx(Text, {
@@ -154,8 +143,6 @@ const CreditCardAddAssetsTrayExample = () => {
     })]
   });
 };
-const TOP_TRAY_OFFSET = 20;
-const SAFE_AREA_OVERFLOW_MULTIPLIER = 2;
 const BACKGROUND_COLOR = '#011C92';
 const UPSELL_BENEFITS = [{
   key: '1',
@@ -195,13 +182,23 @@ const ProductUpsellTrayExample = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), []);
   const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  const safeBottomPadding = useSafeBottomPadding();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: setIsTrayVisibleOn,
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      disableSafeAreaPaddingBottom: true,
       handleBarAccessibilityLabel: "Product upsell details",
       onCloseComplete: setIsTrayVisibleOff,
+      styles: {
+        drawer: {
+          backgroundColor: BACKGROUND_COLOR
+        },
+        content: {
+          paddingBottom: safeBottomPadding
+        }
+      },
       verticalDrawerPercentageOfView: 0.95,
       children: _ref3 => {
         let {
@@ -220,11 +217,6 @@ const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayCon
     benefits,
     dismiss
   } = _ref4;
-  const {
-    screenWidth
-  } = useDimensions();
-  const insets = useSafeAreaInsets();
-  const bottom = Platform.OS === 'android' ? Math.max(insets.bottom, 24) : insets.bottom;
   const handlePrimaryCtaPress = useCallback(() => {
     alert('Primary CTA pressed');
     dismiss();
@@ -232,24 +224,9 @@ const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayCon
   return /*#__PURE__*/_jsx(ThemeProvider, {
     activeColorScheme: "dark",
     theme: defaultTheme,
-    children: /*#__PURE__*/_jsxs(VStack, {
+    children: /*#__PURE__*/_jsx(VStack, {
       position: "relative",
-      children: [/*#__PURE__*/_jsx(Box, {
-        bottom: -bottom * SAFE_AREA_OVERFLOW_MULTIPLIER,
-        dangerouslySetBackground: BACKGROUND_COLOR,
-        height: bottom * SAFE_AREA_OVERFLOW_MULTIPLIER,
-        left: 0,
-        position: "absolute",
-        right: 0,
-        width: "100%"
-      }), /*#__PURE__*/_jsx(Box, {
-        dangerouslySetBackground: BACKGROUND_COLOR,
-        height: TOP_TRAY_OFFSET,
-        left: 0,
-        position: "absolute",
-        right: 0,
-        top: -TOP_TRAY_OFFSET
-      }), /*#__PURE__*/_jsxs(VStack, {
+      children: /*#__PURE__*/_jsxs(VStack, {
         dangerouslySetBackground: BACKGROUND_COLOR,
         gap: 4,
         paddingTop: 5,
@@ -308,7 +285,7 @@ const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayCon
             })]
           })]
         })]
-      })]
+      })
     })
   });
 });