Skip to content

Commit

Permalink
fix: fix TNS multisig top menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@WaDadidou
WaDadidou committed Jul 10, 2023
1 parent 89fc3ba commit 3e4361f
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 94 deletions.
3 changes: 2 additions & 1 deletion packages/components/NetworkSelector/NetworkSelectorMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const NetworkSelectorMenu: FC<{
}> = ({ forceNetworkId, forceNetworkKind, forceNetworkFeatures, style }) => {
const { closeOpenedDropdown } = useDropdowns();
const dispatch = useAppDispatch();
const { wallets } = useWallets();
const { wallets, setMultisignWallet } = useWallets();
const { setToastError } = useFeedbacks();
const testnetsEnabled = useSelector(selectAreTestnetsEnabled);
const selectedNetworkInfo = useSelectedNetworkInfo();
Expand Down Expand Up @@ -69,6 +69,7 @@ export const NetworkSelectorMenu: FC<{
);

dispatch(setSelectedWalletId(selectedWallet?.id || ""));
setMultisignWallet(null);

closeOpenedDropdown();
};
Expand Down
167 changes: 94 additions & 73 deletions packages/components/TopMenu/TopMenuAccount.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { FC, useState } from "react";
import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";

import chevronDownSVG from "../../../assets/icons/chevron-down.svg";
Expand Down Expand Up @@ -36,7 +36,7 @@ const TINY_ADDRESSES_COUNT = 40;

export const TopMenuAccount: React.FC = () => {
const { selectedWallet, selectedMultisignWallet } = useSelectedWallet();
const { setMultisignWallet } = useWallets();
const { setMultisignWallet, wallets } = useWallets();
const selectedNetworkInfo = useSelectedNetworkInfo();
const { data: multisigList } = useFetchMultisigList(
selectedWallet?.address || ""
Expand All @@ -45,15 +45,6 @@ export const TopMenuAccount: React.FC = () => {
const [isAccountsListShown, setAccountsListShown] = useState<boolean>(false);
const [hoveredIndex, setHoveredIndex] = useState<number>(0);

const selectedNetworkId = useSelectedNetworkId();
const network = getCosmosNetwork(selectedNetworkId);
//TODO: Make same as bellow but with all user wallets and all multisig wallets (selectedMultisignWallet.userId)
const userInfo = useNSUserInfo(selectedWallet?.userId);
const userName =
userInfo?.metadata?.tokenId ||
tinyAddress(selectedWallet?.address, TINY_ADDRESSES_COUNT) ||
"";

return (
<FlexCol>
<UserNameInline
Expand Down Expand Up @@ -105,78 +96,108 @@ export const TopMenuAccount: React.FC = () => {
<BrandText style={styles.menuSectionTitle}>User wallets</BrandText>
</View>

<CustomPressable
onHoverIn={() => setHoveredIndex(1)}
onHoverOut={() => setHoveredIndex(0)}
onPress={() => {
setMultisignWallet(null);
setAccountsListShown(false);
}}
style={[hoveredIndex === 1 && { opacity: 0.5 }, styles.walletLine]}
>
<RoundedGradientImage
size="XXS"
sourceURI={userInfo?.metadata?.image}
fallbackURI={network?.nameServiceDefaultImage}
/>
<BrandText
style={styles.itemText}
ellipsizeMode="middle"
numberOfLines={1}
{/*===== Single wallets */}
{wallets.map((item, index) => (
<CustomPressable
key={index}
disabled={item.address === selectedWallet?.address}
onHoverIn={() => setHoveredIndex(1)}
onHoverOut={() => setHoveredIndex(0)}
onPress={() => {
setMultisignWallet(null);
setAccountsListShown(false);
}}
style={[
(hoveredIndex === 1 ||
item.address === selectedWallet?.address) && { opacity: 0.5 },
styles.walletLine,
]}
>
{userName}
</BrandText>
</CustomPressable>
<WalletRow
address={item?.address || ""}
userId={item?.userId || ""}
/>
</CustomPressable>
))}

<View style={styles.menuSectionTitleContainer}>
<BrandText style={styles.menuSectionTitle}>
Multisig wallets
</BrandText>
</View>
{/*===== Multisig wallets */}
{!!multisigList?.length && (
<>
<View style={styles.menuSectionTitleContainer}>
<BrandText style={styles.menuSectionTitle}>
Multisig wallets
</BrandText>
</View>

{multisigList !== undefined &&
multisigList.map((item, index: number) => (
<CustomPressable
onHoverIn={() => setHoveredIndex(index + 2)}
onHoverOut={() => setHoveredIndex(0)}
onPress={() => {
setMultisignWallet({
id: `keplr-${item.address}`,
address: item.address,
userId: getUserId(selectedNetworkInfo?.id, item.address),
networkId: selectedNetworkInfo?.id,
networkKind: NetworkKind.Cosmos,
provider: WalletProvider.Keplr,
connected: true,
} as Wallet);
setHoveredIndex(0);
setAccountsListShown(false);
}}
style={[
hoveredIndex === index + 2 && { opacity: 0.5 },
styles.walletLine,
]}
>
<RoundedGradientImage
size="XXS"
sourceURI={userInfo?.metadata?.image}
fallbackURI={network?.nameServiceDefaultImage}
/>
<BrandText
style={styles.itemText}
ellipsizeMode="middle"
numberOfLines={1}
{multisigList.map((item, index: number) => (
<CustomPressable
key={index}
disabled={item.address === selectedMultisignWallet?.address}
onHoverIn={() => setHoveredIndex(index + 2)}
onHoverOut={() => setHoveredIndex(0)}
onPress={() => {
setMultisignWallet({
id: `keplr-${item.address}`,
address: item.address,
userId: getUserId(selectedNetworkInfo?.id, item.address),
networkId: selectedNetworkInfo?.id,
networkKind: NetworkKind.Cosmos,
provider: WalletProvider.Keplr,
connected: true,
} as Wallet);
setAccountsListShown(false);
}}
style={[
(hoveredIndex === index + 2 ||
item.address === selectedMultisignWallet?.address) && {
opacity: 0.5,
},
styles.walletLine,
]}
>
{tinyAddress(item.address, TINY_ADDRESSES_COUNT)}
</BrandText>
</CustomPressable>
))}
<WalletRow
address={item.address}
userId={getUserId(selectedNetworkInfo?.id, item.address)}
/>
</CustomPressable>
))}
</>
)}
</ScrollView>
)}
</FlexCol>
);
};

const WalletRow: FC<{ address: string; userId: string }> = ({
address,
userId,
}) => {
const selectedNetworkId = useSelectedNetworkId();
const network = getCosmosNetwork(selectedNetworkId);
const userInfo = useNSUserInfo(userId);
const userName =
userInfo?.metadata?.tokenId ||
tinyAddress(address, TINY_ADDRESSES_COUNT) ||
"";
return (
<>
<RoundedGradientImage
size="XXS"
sourceURI={userInfo?.metadata?.image}
fallbackURI={network?.nameServiceDefaultImage}
/>
<BrandText
style={styles.itemText}
ellipsizeMode="middle"
numberOfLines={1}
>
{userName}
</BrandText>
</>
);
};

const styles = StyleSheet.create({
userImageLine: {
width: "100%",
Expand Down
9 changes: 1 addition & 8 deletions packages/hooks/multisig/useFetchMultisigTransactionsByAddress.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,7 @@ export const useFetchMultisigTransactionsByAddress = (userAddress: string) => {
data: data.map((s: MultisigTransactionResponseType) => ({
...s,
msgs: JSON.parse(s.msgs),
// We use a JSON.parse fallback because some fee are "auto" in DB (Unexpected, but need this fallback to avoid error)
fee: () => {
try {
return JSON.parse(s.fee);
} catch {
return s.fee;
}
},
fee: JSON.parse(s.fee),
})),
after,
};
Expand Down
9 changes: 1 addition & 8 deletions packages/hooks/multisig/useFetchMultisigTransactionsById.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,7 @@ export const useFetchMultisigTransactionsById = (
data: data.map((s: MultisigTransactionResponseType) => ({
...s,
msgs: JSON.parse(s.msgs),
// We use a JSON.parse fallback because some fee are "auto" in DB (Unexpected, but need this fallback to avoid error)
fee: () => {
try {
return JSON.parse(s.fee);
} catch {
return s.fee;
}
},
fee: JSON.parse(s.fee),
})),
after: afterData,
before,
Expand Down
4 changes: 2 additions & 2 deletions packages/screens/Multisig/MultisigTransferScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const MultisigTransferScreen: ScreenFC<"MultisigTransfer"> = ({
return (
<ScreenContainer
headerChildren={
<BrandText style={fontSemibold20}>New Transaction</BrandText>
<BrandText style={fontSemibold20}>New Transfer</BrandText>
}
onBackPress={() =>
navigation.canGoBack()
Expand All @@ -123,7 +123,7 @@ export const MultisigTransferScreen: ScreenFC<"MultisigTransfer"> = ({
>
<MultisigTransactionForm
type="transfer"
title={`Create a new Transaction from ${walletName}`}
title={`Create a new Transfer from ${walletName}`}
transferText="Send to"
submitBtnText="Create Transaction"
onSubmit={onSubmitForm}
Expand Down
4 changes: 2 additions & 2 deletions packages/screens/Multisig/components/RightSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const RightSection = () => {
<SpacerColumn size={2} />
<PrimaryButton
size="M"
text="Create Transaction"
text="Send"
fullWidth
onPress={() =>
navigation.navigate("MultisigTransfer", { address, walletName })
Expand All @@ -59,7 +59,7 @@ export const RightSection = () => {
<SpacerColumn size={2.5} />
<PrimaryButton
size="M"
text="Create Delegation"
text="Delegate"
fullWidth
onPress={() =>
navigation.navigate("MultisigDelegate", { address, walletName })
Expand Down

0 comments on commit 3e4361f

Please sign in to comment.