Optimize wallet connecting interactions for mobile

[woodenfurniture]

Overview

Enhance rendering performance for low-compute mobile devices, specifically focusing on the initial login and wallet connection phases.

Current performance bottlenecks have been identified in sub-optimal use of React Hooks, notably the absence of useMemo and useCallback for expensive computations and function references.

References and additional details

1. Profile the application using Chrome DevTools with 6x throttling to identify components causing re-renders.
2. Implement useMemo for computationally expensive render elements.
3. Utilize useCallback to memoize function references passed to child components.
4. Review Chakra UI components for potential performance optimizations, such as lazy-loading or conditional rendering.

https://www.notion.so/shapeshift/Mobile-profiling-0321f42373a14e399db7e5255676a97c

Acceptance Criteria

• Improved in rendering performance on low-compute devices.
• No degradation in user experience or functionality.

Need By Date

No response

Screenshots/Mockups

No response

Estimated effort

No response