Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 1x 2x 2x 2x 2x 2x 4x 4x 2x | import { cn } from '@sb/libs';
import { FC, ReactNode } from 'react';
import { Text, View } from 'react-native';
import { WalletUiMessage } from '@sb/types';
import { WalletSwitcherProps } from '../WalletSwitcher.types';
import { useThemeColors } from '@sb/hooks/Utilities/useThemeColors';
import { useWalletSwitcher } from '@sb/api/hooks/Wallet/useWalletSwitcher';
import { Account } from '@sb/ui/components/molecules/Account/index.native';
import { DialogBox } from '@sb/ui/components/molecules/DialogBox/index.native';
export const WalletSwitcher: FC<WalletSwitcherProps> = ({
accounts,
className,
onAccountSelect,
onAccountDepositClick,
}) => {
const { themedColors } = useThemeColors();
const {
otherAccounts,
featureAccount,
handleOnAccountClick,
clearAllHookMessages,
handleOnWalletActivate,
useWalletSwitcherMessage,
} = useWalletSwitcher(accounts, onAccountSelect);
const walletMessage: WalletUiMessage | null = useWalletSwitcherMessage ?? null;
const OtherAccounts = (): ReactNode => {
return (
<View className="mt-4 w-full">
<Text style={{ color: themedColors.colorText_Main }} className="font-Bold mb-3 text-2xl">
Weitere Konten
</Text>
<View className="flex flex-row gap-3">
{otherAccounts!.map((account) => {
const { _id } = account.wallet;
return (
<Account
key={_id}
{...account}
showFooter={false}
showDepositButton={false}
showActivateButton={false}
onAccountClick={() => handleOnAccountClick(_id)}
onWalletActivate={() => handleOnWalletActivate(_id)}
className={cn('w-1/2', { 'flex-1': otherAccounts!.length % 2 === 0 })}
/>
);
})}
</View>
</View>
);
};
return (
<View
style={{ backgroundColor: themedColors.colorPrimary }}
className={cn('gap-2 rounded-sm px-4 py-6', className)}
>
{featureAccount && (
<Account
{...featureAccount}
showFooter={false}
showDefaultHighlighting={true}
onDeposit={onAccountDepositClick}
showActivateButton={!featureAccount.wallet.isActive}
onAccountClick={() => handleOnAccountClick(featureAccount.wallet._id)}
onWalletActivate={() => handleOnWalletActivate(featureAccount.wallet._id)}
/>
)}
{otherAccounts.length > 0 && <OtherAccounts />}
{/* Error Dialog */}
{walletMessage && (
<DialogBox
id="wallet-switcher-dialogbox"
closable={true}
animation={'fade'}
showCloseIcon={true}
isOpen={!!walletMessage}
showFooterButtons={false}
backdropClickClose={true}
title={walletMessage.title}
content={walletMessage.message}
variant={walletMessage.variant}
onClose={() => clearAllHookMessages()}
/>
)}
</View>
);
};
|