Function SelectWallet

screen/wallets/SelectWallet.tsx:23–151

()

type RouteProps = RouteProp<SendDetailsStackParamList, 'SelectWallet'>;

const SelectWallet: React.FC = () => {
  const route = useRoute<RouteProps>();
  const {
    chainType,
    onWalletSelect,
    availableWallets,
    noWalletExplanationText,
    onChainRequireSend = false,
    selectedWalletID,
  } = route.params;
  const [isLoading, setIsLoading] = useState(true);
  const navigation = useExtendedNavigation<NavigationProps>();
  const { wallets } = useStorage();
  const { colors } = useTheme();
  const isModal = useNavigationState(state => state.routes.length > 1);
  const walletsCarousel = useRef<any>(null);
  const previousRouteName = useNavigationState(state => state.routes[state.routes.length - 2]?.name);
  const [filteredWallets, setFilteredWallets] = useState<TWallet[]>([]);

  const stylesHook = StyleSheet.create({
    loading: {
      backgroundColor: colors.background,
    },
  });

  const filterWallets = useCallback(() => {
    if (availableWallets && availableWallets.length > 0) {
      return availableWallets;
    }

    if (!onChainRequireSend && chainType === Chain.ONCHAIN) {
      return wallets.filter(item => item.chain === Chain.ONCHAIN);
    }

    if (chainType) {
      return wallets.filter(item => item.chain === chainType && item.allowSend());
    }

    return wallets.filter(item => item.allowSend());
  }, [availableWallets, chainType, onChainRequireSend, wallets]);

  // Initialize filtered wallets and handle loading state
  useEffect(() => {
    console.log('SelectWallet - useEffect');
    const filtered = filterWallets();
    setFilteredWallets(filtered);
    setIsLoading(false);
  }, [filterWallets]);

  // Scroll to the selected wallet if provided
  useEffect(() => {
    if (!isLoading && selectedWalletID && walletsCarousel.current) {
      const walletIndex = filteredWallets.findIndex(wallet => wallet.getID() === selectedWalletID);

      if (walletIndex !== -1) {
        // Add a slight delay to ensure the carousel is fully rendered
        setTimeout(() => {
          if (walletsCarousel.current) {