Skip to content

Commit

Permalink
fix: go to account from accountsheet, add real balances and address ref
Browse files Browse the repository at this point in the history
  • Loading branch information
pete-watters committed Nov 22, 2024
1 parent 8d0b3dd commit 5abb340
Show file tree
Hide file tree
Showing 14 changed files with 159 additions and 111 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@ import { useRef } from 'react';
import { AvatarIcon } from '@/components/avatar-icon';
import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
import { useToastContext } from '@/components/toast/toast-context';
import { AccountAddress } from '@/features/accounts/components/account-address';
import { AccountBalance } from '@/features/accounts/components/account-balance';
import { AccountCard } from '@/features/accounts/components/account-card';
import { NetworkBadge } from '@/features/settings/network-badge';
import { AccountCard } from '@/features/settings/wallet-and-accounts/account-card';
import { AccountNameSheet } from '@/features/settings/wallet-and-accounts/account-name-sheet';
import { AccountId } from '@/models/domain.model';
import { AppRoutes } from '@/routes';
Expand Down Expand Up @@ -70,12 +72,14 @@ function ConfigureAccount({ fingerprint, accountIndex, account }: ConfigureAccou
<AnimatedHeaderScreenLayout
rightHeaderElement={<NetworkBadge />}
title={t({
id: 'account.header_title',
id: 'configure_account.header_title',
message: 'Configure account',
})}
>
<Box pb="3">
<AccountCard
address={<AccountAddress fingerprint={fingerprint} accountIndex={accountIndex} />}
balance={<AccountBalance fingerprint={fingerprint} accountIndex={accountIndex} />}
icon={<AvatarIcon color={theme.colors['ink.background-primary']} icon={account.icon} />}
name={account.name}
key={account.id}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useRef } from 'react';
import { ScrollView } from 'react-native-gesture-handler';

import { AddWalletSheet } from '@/components/add-wallet/';
import { AccountSelectorSheet } from '@/features/account-selector-sheet';
import { AccountSelectorSheet } from '@/features/accounts/account-selector/account-selector-sheet';
import { useTotalBalance } from '@/queries/balance/total-balance.query';
import { AppRoutes } from '@/routes';
import { useAccounts } from '@/store/accounts/accounts.read';
Expand Down
94 changes: 0 additions & 94 deletions apps/mobile/src/features/account-selector-sheet.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { useTheme } from '@shopify/restyle';

import { Theme } from '@leather.io/ui/native';

import { AccountAddress } from '../components/account-address';
import { AccountBalance } from '../components/account-balance';
import { AccountListItem } from './account-list-item';
import { AccountAddress } from './components/account-address';
import { AccountBalance } from './components/account-balance';

interface AccountListProps {
accounts: Account[];
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { RefObject, useRef } from 'react';
import { ScrollView } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';

import { AvatarIcon } from '@/components/avatar-icon';
import { Draggable } from '@/components/draggable';
import { Account } from '@/store/accounts/accounts';
import { useSettings } from '@/store/settings/settings';
import { defaultIconTestId } from '@/utils/testing-utils';
import { useTheme } from '@shopify/restyle';

import { Box, Sheet, SheetRef, Theme } from '@leather.io/ui/native';

import { AccountAddress } from '../components/account-address';
import { AccountBalance } from '../components/account-balance';
import { AccountCard } from '../components/account-card';

interface AccountSelectorSheetLayoutProps {
accounts: Account[];
onAccountPress: (accountId: string) => void;
swapAccountIndexes: (from: number, to: number) => void;
sheetRef: RefObject<SheetRef>;
}

export function AccountSelectorSheetLayout({
accounts,
onAccountPress,
swapAccountIndexes,
sheetRef,
}: AccountSelectorSheetLayoutProps) {
const scrollViewRef = useRef<ScrollView>(null);
const placeholderIdx = useSharedValue<null | number>(null);
const direction = useSharedValue<'down' | 'up'>('down');
const theme = useTheme<Theme>();
const { themeDerivedFromThemePreference } = useSettings();

return (
<Sheet isScrollView ref={sheetRef} themeVariant={themeDerivedFromThemePreference}>
<Box p="5" gap="5">
{accounts.map((account, idx) => (
<Draggable
idx={idx}
direction={direction}
scrollViewRef={scrollViewRef}
placeholderIdx={placeholderIdx}
cardsLength={accounts.length}
key={account.id}
cardId={account.id}
onCardPress={() => onAccountPress(account.id)}
swapCardIndexes={swapAccountIndexes}
>
<AccountCard
address={
<AccountAddress
accountIndex={account.accountIndex}
fingerprint={account.fingerprint}
/>
}
balance={
<AccountBalance
accountIndex={account.accountIndex}
fingerprint={account.fingerprint}
/>
}
icon={
<AvatarIcon color={theme.colors['ink.background-primary']} icon={account.icon} />
}
name={account.name}
iconTestID={defaultIconTestId(account.icon)}
/>
</Draggable>
))}
</Box>
</Sheet>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { RefObject, useCallback, useMemo } from 'react';

import { AppRoutes } from '@/routes';
import { useAccounts } from '@/store/accounts/accounts.read';
import { userUpdatesAccountOrder } from '@/store/accounts/accounts.write';
import { useAppDispatch } from '@/store/utils';
import { useRouter } from 'expo-router';

import { SheetRef } from '@leather.io/ui/native';

import { AccountSelectorSheetLayout } from './account-selector-sheet.layout';

export function AccountSelectorSheet({ sheetRef }: { sheetRef: RefObject<SheetRef> }) {
const accounts = useAccounts().list;
const router = useRouter();
const dispatch = useAppDispatch();
const checkIdxWithinBounds = useCallback(
(id: number) => {
return id >= 0 && id < accounts.length;
},
[accounts.length]
);

const accountIds = useMemo(() => accounts.map(acc => acc.id), [accounts]);
const swapAccountIndexes = useCallback(
(idx1: number | null, idx2: number | null) => {
if (
idx1 === null ||
idx2 === null ||
!checkIdxWithinBounds(idx1) ||
!checkIdxWithinBounds(idx2) ||
!accountIds[idx1] ||
!accountIds[idx2]
)
return;
const temp = accountIds[idx1];
accountIds[idx1] = accountIds[idx2];
accountIds[idx2] = temp;
dispatch(userUpdatesAccountOrder({ accountIds }));
},
[accountIds, checkIdxWithinBounds, dispatch]
);
const onAccountPress = useCallback(
(accountId: string) => {
sheetRef.current?.close();
router.navigate({
pathname: AppRoutes.Account,
params: { accountId },
});
},
[router, sheetRef]
);

return (
<AccountSelectorSheetLayout
accounts={accounts}
onAccountPress={onAccountPress}
swapAccountIndexes={swapAccountIndexes}
sheetRef={sheetRef}
/>
);
}
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { LayoutChangeEvent } from 'react-native';

import { t } from '@lingui/macro';

import { Box, Text, TouchableOpacity } from '@leather.io/ui/native';

interface AccountCardProps {
address: React.ReactNode;
balance: React.ReactNode;
icon: React.ReactNode;
name: string;
onPress?(): void;
Expand All @@ -14,6 +14,8 @@ interface AccountCardProps {
iconTestID?: string;
}
export function AccountCard({
address,
balance,
icon,
name,
onPress,
Expand Down Expand Up @@ -50,10 +52,8 @@ export function AccountCard({
<Box flexDirection="row" justifyContent="space-between">
<Text variant="label01">{name}</Text>
<Box>
<Text variant="label01">$1231</Text>
<Text variant="caption01" color="ink.text-subdued">
{t`Placeholder for address`}
</Text>
{balance}
{address}
</Box>
</Box>
</Container>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { AvatarIcon } from '@/components/avatar-icon';
import { AccountListItem } from '@/features/account-list/account-list-item';
import { AccountAddress } from '@/features/account-list/components/account-address';
import { AccountBalance } from '@/features/account-list/components/account-balance';
import { AccountListItem } from '@/features/accounts/account-list/account-list-item';
import { AccountAddress } from '@/features/accounts/components/account-address';
import { AccountBalance } from '@/features/accounts/components/account-balance';
import { useAccountsByFingerprint } from '@/store/accounts/accounts.read';
import { useWallets } from '@/store/wallets/wallets.read';
import { t } from '@lingui/macro';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FullHeightSheetHeader } from '@/components/full-height-sheet/full-height-sheet-header';
import { FullHeightSheetLayout } from '@/components/full-height-sheet/full-height-sheet.layout';
import { AccountList } from '@/features/account-list/account-list';
import { AccountList } from '@/features/accounts/account-list/account-list';
import { NetworkBadge } from '@/features/settings/network-badge';
import { Account } from '@/store/accounts/accounts';
import { useAccounts } from '@/store/accounts/accounts.read';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FullHeightSheetHeader } from '@/components/full-height-sheet/full-height-sheet-header';
import { FullHeightSheetLayout } from '@/components/full-height-sheet/full-height-sheet.layout';
import { AccountList } from '@/features/account-list/account-list';
import { AccountList } from '@/features/accounts/account-list/account-list';
import { NetworkBadge } from '@/features/settings/network-badge';
import { Account } from '@/store/accounts/accounts';
import { useAccounts } from '@/store/accounts/accounts.read';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useState } from 'react';

import { SpinnerIcon } from '@/components/spinner-icon';
import { useToastContext } from '@/components/toast/toast-context';
import { AccountList } from '@/features/account-list/account-list';
import { AccountList } from '@/features/accounts/account-list/account-list';
import { WalletId } from '@/models/domain.model';
import { AppRoutes } from '@/routes';
import { TestId } from '@/shared/test-id';
Expand Down

0 comments on commit 5abb340

Please sign in to comment.