From 3e4361fab0d6181739636d37bd4af6ef63dfa17a Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Mon, 10 Jul 2023 19:25:52 +0200 Subject: [PATCH] fix: fix TNS multisig top menu --- .../NetworkSelector/NetworkSelectorMenu.tsx | 3 +- .../components/TopMenu/TopMenuAccount.tsx | 167 ++++++++++-------- .../useFetchMultisigTransactionsByAddress.ts | 9 +- .../useFetchMultisigTransactionsById.ts | 9 +- .../Multisig/MultisigTransferScreen.tsx | 4 +- .../Multisig/components/RightSection.tsx | 4 +- 6 files changed, 102 insertions(+), 94 deletions(-) diff --git a/packages/components/NetworkSelector/NetworkSelectorMenu.tsx b/packages/components/NetworkSelector/NetworkSelectorMenu.tsx index 288fe7c753..6b1b257f85 100644 --- a/packages/components/NetworkSelector/NetworkSelectorMenu.tsx +++ b/packages/components/NetworkSelector/NetworkSelectorMenu.tsx @@ -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(); @@ -69,6 +69,7 @@ export const NetworkSelectorMenu: FC<{ ); dispatch(setSelectedWalletId(selectedWallet?.id || "")); + setMultisignWallet(null); closeOpenedDropdown(); }; diff --git a/packages/components/TopMenu/TopMenuAccount.tsx b/packages/components/TopMenu/TopMenuAccount.tsx index 2cb36a5cf9..9a6a7b00b7 100644 --- a/packages/components/TopMenu/TopMenuAccount.tsx +++ b/packages/components/TopMenu/TopMenuAccount.tsx @@ -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"; @@ -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 || "" @@ -45,15 +45,6 @@ export const TopMenuAccount: React.FC = () => { const [isAccountsListShown, setAccountsListShown] = useState(false); const [hoveredIndex, setHoveredIndex] = useState(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 ( { User wallets - setHoveredIndex(1)} - onHoverOut={() => setHoveredIndex(0)} - onPress={() => { - setMultisignWallet(null); - setAccountsListShown(false); - }} - style={[hoveredIndex === 1 && { opacity: 0.5 }, styles.walletLine]} - > - - ( + setHoveredIndex(1)} + onHoverOut={() => setHoveredIndex(0)} + onPress={() => { + setMultisignWallet(null); + setAccountsListShown(false); + }} + style={[ + (hoveredIndex === 1 || + item.address === selectedWallet?.address) && { opacity: 0.5 }, + styles.walletLine, + ]} > - {userName} - - + + + ))} - - - Multisig wallets - - + {/*===== Multisig wallets */} + {!!multisigList?.length && ( + <> + + + Multisig wallets + + - {multisigList !== undefined && - multisigList.map((item, index: number) => ( - 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, - ]} - > - - ( + 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)} - - - ))} + + + ))} + + )} )} ); }; +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 ( + <> + + + {userName} + + + ); +}; + const styles = StyleSheet.create({ userImageLine: { width: "100%", diff --git a/packages/hooks/multisig/useFetchMultisigTransactionsByAddress.ts b/packages/hooks/multisig/useFetchMultisigTransactionsByAddress.ts index bf337f367b..4bdf9fb44c 100644 --- a/packages/hooks/multisig/useFetchMultisigTransactionsByAddress.ts +++ b/packages/hooks/multisig/useFetchMultisigTransactionsByAddress.ts @@ -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, }; diff --git a/packages/hooks/multisig/useFetchMultisigTransactionsById.ts b/packages/hooks/multisig/useFetchMultisigTransactionsById.ts index 2eaae00292..d2cdaf6469 100644 --- a/packages/hooks/multisig/useFetchMultisigTransactionsById.ts +++ b/packages/hooks/multisig/useFetchMultisigTransactionsById.ts @@ -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, diff --git a/packages/screens/Multisig/MultisigTransferScreen.tsx b/packages/screens/Multisig/MultisigTransferScreen.tsx index dcb9907b17..6d973afa11 100644 --- a/packages/screens/Multisig/MultisigTransferScreen.tsx +++ b/packages/screens/Multisig/MultisigTransferScreen.tsx @@ -104,7 +104,7 @@ export const MultisigTransferScreen: ScreenFC<"MultisigTransfer"> = ({ return ( New Transaction + New Transfer } onBackPress={() => navigation.canGoBack() @@ -123,7 +123,7 @@ export const MultisigTransferScreen: ScreenFC<"MultisigTransfer"> = ({ > { navigation.navigate("MultisigTransfer", { address, walletName }) @@ -59,7 +59,7 @@ export const RightSection = () => { navigation.navigate("MultisigDelegate", { address, walletName })