Skip to content

Commit

Permalink
added style for portfolio bottom sheet
Browse files Browse the repository at this point in the history
  • Loading branch information
@fullstackninja864
fullstackninja864 committed Jul 27, 2023
1 parent 00ff7e4 commit 16a6e8c
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 33 deletions.
51 changes: 42 additions & 9 deletions mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -515,15 +515,48 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
"bg-mono-light-v2-100": isLight,
"bg-mono-dark-v2-100": !isLight,
}),
headerRight: (): JSX.Element => {
header: (): JSX.Element => {
return (
<ThemedTouchableOpacityV2
style={tailwind("border-0 mr-5 mt-2")}
onPress={() => dismissModal(false)}
testID="close_bottom_sheet_button"
<ThemedViewV2
style={tailwind("pt-5 pb-3 rounded-t-xl-v2 border-b-0 relative px-5")}
>
<ThemedIcon iconType="Feather" name="x-circle" size={22} />
</ThemedTouchableOpacityV2>
<ThemedViewV2
style={tailwind("flex flex-row justify-center items-center")}
>
<ThemedViewV2
dark={tailwind("bg-mono-dark-v2-00 border-mono-dark-v2-200")}
light={tailwind("bg-mono-light-v2-00 border-mono-light-v2-200")}
style={tailwind(
"flex flex-row items-center m-auto rounded-2xl border-0.5 px-4 py-2"
)}
>
<View
style={tailwind("w-1.5 h-1.5 bg-green-v2 rounded-full mr-1")}
/>
<ThemedTextV2
style={tailwind("text-xs font-normal-v2 pr-1")}
dark={tailwind("text-mono-dark-v2-700")}
light={tailwind("text-mono-light-v2-700")}
>
{domain}
</ThemedTextV2>
<ThemedTextV2
style={tailwind("text-xs font-normal-v2")}
dark={tailwind("text-mono-dark-v2-700")}
light={tailwind("text-mono-light-v2-700")}
>
{translate("screens/PortfolioScreen", "network")}
</ThemedTextV2>
</ThemedViewV2>
</ThemedViewV2>
<ThemedTouchableOpacityV2
style={tailwind("border-0 absolute right-5")}
onPress={() => dismissModal(false)}
testID="close_bottom_sheet_button"
>
<ThemedIcon iconType="Feather" name="x-circle" size={22} />
</ThemedTouchableOpacityV2>
</ThemedViewV2>
);
},
};
Expand Down Expand Up @@ -568,7 +601,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
},
},
];
}, [address, isLight]);
}, [address, isLight, domain]);

// Hide splashscreen when first page is loaded to prevent white screen
// It is wrapped on a timeout so it will execute once the JS stack is cleared up
Expand Down Expand Up @@ -609,7 +642,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
iconType="MaterialCommunityIcons"
dark={tailwind("text-mono-dark-v2-900")}
light={tailwind("text-mono-light-v2-900")}
name={`${isBalancesDisplayed ? "eye" : "eye-off"}`}
name={isBalancesDisplayed ? "eye" : "eye-off"}
size={18}
/>
</ThemedTouchableOpacityV2>
Expand Down
63 changes: 42 additions & 21 deletions ...-app/app/screens/AppNavigator/screens/Portfolio/components/BottomSheetAddressDetailV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ import { useAddressLabel } from "@hooks/useAddressLabel";
import { useAppDispatch } from "@hooks/useAppDispatch";
import { openURL } from "@api/linking";
import { ThemedFlatListV2 } from "@components/themed/ThemedFlatListV2";
import { useWalletAddress } from "@hooks/useWalletAddress";
import { WalletAddressI, useWalletAddress } from "@hooks/useWalletAddress";
import { DomainType, useDomainContext } from "@contexts/DomainContext";
import { RandomAvatar } from "./RandomAvatar";

interface BottomSheetAddressDetailProps {
Expand Down Expand Up @@ -78,11 +79,14 @@ export const BottomSheetAddressDetailV2 = (
const toast = useToast();
const [showToast, setShowToast] = useState(false);
const TOAST_DURATION = 2000;
const [availableAddresses, setAvailableAddresses] = useState<string[]>([]);
const [availableAddresses, setAvailableAddresses] = useState<
WalletAddressI[]
>([]);
const [canCreateAddress, setCanCreateAddress] = useState<boolean>(false);
const { fetchWalletAddresses } = useWalletAddress();
const logger = useLogger();
const dispatch = useAppDispatch();
const { domain } = useDomainContext();
const blockCount = useSelector((state: RootState) => state.block.count);
const hasPendingJob = useSelector((state: RootState) =>
hasTxQueued(state.transactionQueue)
Expand Down Expand Up @@ -127,7 +131,7 @@ export const BottomSheetAddressDetailV2 = (
// Getting addresses
const fetchAddresses = async (): Promise<void> => {
const addresses = await fetchWalletAddresses();
setAvailableAddresses(addresses.map(({ dfi }) => dfi));
setAvailableAddresses(addresses);
await isNextAddressUsable();
};

Expand Down Expand Up @@ -189,15 +193,21 @@ export const BottomSheetAddressDetailV2 = (

const AddressListItem = useCallback(
// eslint-disable-next-line react/no-unused-prop-types
({ item, index }: { item: string; index: number }): JSX.Element => {
const isSelected = item === props.address;
({
item,
index,
}: {
item: WalletAddressI;
index: number;
}): JSX.Element => {
const isSelected = item.dfi === props.address;
const hasLabel =
labeledAddresses?.[item]?.label != null &&
labeledAddresses?.[item]?.label !== "";

labeledAddresses?.[item.dfi]?.label != null &&
labeledAddresses?.[item.dfi]?.label !== "";
const displayAddress = domain === DomainType.DFI ? item.dfi : item.evm;
return (
<ThemedTouchableOpacityV2
key={item}
key={item.dfi}
style={tailwind(
"px-5 py-4.5 flex flex-row items-center justify-between border-0 mx-5 rounded-lg-v2 h-20"
)}
Expand All @@ -214,7 +224,7 @@ export const BottomSheetAddressDetailV2 = (
"flex-auto": Platform.OS === "web",
})}
>
<RandomAvatar name={item} size={36} />
<RandomAvatar name={item.dfi} size={36} />
<View style={tailwind("ml-3 flex-auto")}>
{hasLabel && (
<View style={tailwind("flex-row items-center")}>
Expand All @@ -223,7 +233,7 @@ export const BottomSheetAddressDetailV2 = (
testID={`list_address_label_${item}`}
numberOfLines={1}
>
{labeledAddresses[item]?.label}
{labeledAddresses[item.dfi]?.label}
</ThemedTextV2>
{isSelected && (
<ThemedIcon
Expand All @@ -233,7 +243,7 @@ export const BottomSheetAddressDetailV2 = (
light={tailwind("text-green-v2")}
dark={tailwind("text-green-v2")}
style={tailwind("ml-1")}
testID={`address_active_indicator_${item}`}
testID={`address_active_indicator_${displayAddress}`}
/>
)}
</View>
Expand All @@ -247,11 +257,13 @@ export const BottomSheetAddressDetailV2 = (
light={tailwind("text-green-v2")}
dark={tailwind("text-green-v2")}
style={tailwind("mr-1")}
testID={`address_active_indicator_${item}`}
testID={`address_active_indicator_${displayAddress}`}
/>
)}
<ThemedTouchableOpacityV2
onPress={async () => await openURL(getAddressUrl(item))}
onPress={async () =>
await openURL(getAddressUrl(displayAddress))
}
disabled={!isSelected}
style={tailwind(
"border-0 flex flex-1 flex-row items-center"
Expand All @@ -265,7 +277,7 @@ export const BottomSheetAddressDetailV2 = (
numberOfLines={1}
testID={`address_row_text_${index}`}
>
{item}
{displayAddress}
</ThemedTextV2>
{isSelected && (
<ThemedIcon
Expand All @@ -287,9 +299,11 @@ export const BottomSheetAddressDetailV2 = (
name: props.navigateToScreen.screenName,
params: {
title: "Edit wallet label",
address: item,
address: item.dfi,
addressLabel:
labeledAddresses != null ? labeledAddresses[item] : "",
labeledAddresses != null
? labeledAddresses[item.dfi]
: "",
index: index + 1,
type: "edit",
onSaveButtonPress: (labelAddress: LabeledAddress) => {
Expand All @@ -314,7 +328,7 @@ export const BottomSheetAddressDetailV2 = (
merge: true,
});
}}
testID={`address_edit_indicator_${item}`}
testID={`address_edit_indicator_${displayAddress}`}
>
<ThemedIcon
size={16}
Expand All @@ -328,10 +342,13 @@ export const BottomSheetAddressDetailV2 = (
</ThemedTouchableOpacityV2>
);
},
[labeledAddresses]
[labeledAddresses, domain]
);

const AddressDetailHeader = useCallback(() => {
const activeAddress = availableAddresses.find(
({ dfi }) => dfi === props.address
);
return (
<ThemedViewV2
style={tailwind("flex flex-col w-full px-5 py-2 items-center")}
Expand All @@ -350,7 +367,11 @@ export const BottomSheetAddressDetailV2 = (
</View>
)}
<ActiveAddress
address={props.address}
address={
(domain === DomainType.DFI
? activeAddress?.dfi
: activeAddress?.evm) ?? ""
}
onPress={onActiveAddressPress}
/>
<View
Expand All @@ -363,7 +384,7 @@ export const BottomSheetAddressDetailV2 = (
</View>
</ThemedViewV2>
);
}, [props, addressLength, activeLabel]);
}, [props, addressLength, activeLabel, domain, availableAddresses]);

return (
<FlatList
Expand Down
19 changes: 16 additions & 3 deletions ...pp/app/screens/AppNavigator/screens/Portfolio/components/CreateOrEditAddressLabelForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { SubmitButtonGroup } from "@components/SubmitButtonGroup";
import { WalletAddressI, useWalletAddress } from "@hooks/useWalletAddress";
import { useSelector } from "react-redux";
import { RootState } from "@store";
import { DomainType, useDomainContext } from "@contexts/DomainContext";
import { RandomAvatar } from "./RandomAvatar";

export interface CreateOrEditAddressLabelFormProps {
Expand All @@ -31,6 +32,7 @@ export const CreateOrEditAddressLabelForm = memo(
({ route, navigation }: Props): JSX.Element => {
const { title, address, addressLabel, onSaveButtonPress } = route.params;
const { isLight } = useThemeContext();
const { domain } = useDomainContext();
const [walletAddress, setWalletAddress] = useState<WalletAddressI[]>([]);
const { fetchWalletAddresses } = useWalletAddress();
const walletAddressFromStore = useSelector(
Expand Down Expand Up @@ -129,7 +131,12 @@ export const CreateOrEditAddressLabelForm = memo(
{translate("components/CreateOrEditAddressLabelForm", title)}
</ThemedTextV2>
</View>
{address !== undefined && <AddressDisplay address={address} />}
{address !== undefined && (
<AddressDisplay
address={address}
label={domain === DomainType.DFI ? address : getEVMAddress(address)}
/>
)}
<ThemedTextV2
style={tailwind("font-normal-v2 text-xs mt-4 mb-2 ml-5")}
light={tailwind("text-mono-light-v2-500")}
Expand Down Expand Up @@ -199,7 +206,13 @@ export const CreateOrEditAddressLabelForm = memo(
}
);

function AddressDisplay({ address }: { address: string }): JSX.Element {
function AddressDisplay({
address,
label,
}: {
address: string;
label: string;
}): JSX.Element {
return (
<View style={tailwind("flex flex-col mt-8 items-center")}>
<RandomAvatar name={address} size={64} />
Expand All @@ -209,7 +222,7 @@ function AddressDisplay({ address }: { address: string }): JSX.Element {
{ "w-10/12": Platform.OS === "web" }
)}
>
{address}
{label}
</ThemedTextV2>
</View>
);
Expand Down

0 comments on commit 16a6e8c

Please sign in to comment.