diff --git a/packages/components/NetworkSelector/NetworkSelectorMenu.tsx b/packages/components/NetworkSelector/NetworkSelectorMenu.tsx index 0210e07d6a..7b502ba11c 100644 --- a/packages/components/NetworkSelector/NetworkSelectorMenu.tsx +++ b/packages/components/NetworkSelector/NetworkSelectorMenu.tsx @@ -38,120 +38,120 @@ export const NetworkSelectorMenu: FC<{ onSelect, optionsMenuwidth = 172, }) => { - const { resetMediaPlayer } = useMediaPlayer(); - const dispatch = useAppDispatch(); - const { wallets } = useWallets(); - const { setToastError } = useFeedbacks(); - const selectedNetworkInfo = useSelectedNetworkInfo(); - const [networksModalVisible, setNetworksModalVisible] = useState(false); - const enabledNetworks = useEnabledNetworks(); - const isMobile = useIsMobile(); + const { resetMediaPlayer } = useMediaPlayer(); + const dispatch = useAppDispatch(); + const { wallets } = useWallets(); + const { setToastError } = useFeedbacks(); + const selectedNetworkInfo = useSelectedNetworkInfo(); + const [networksModalVisible, setNetworksModalVisible] = useState(false); + const enabledNetworks = useEnabledNetworks(); + const isMobile = useIsMobile(); - const onPressNetwork = (networkId: string) => { - onSelect(); - let walletProvider: WalletProvider | null = null; + const onPressNetwork = (networkId: string) => { + onSelect(); + let walletProvider: WalletProvider | null = null; - const network = getNetwork(networkId); - if (!network) { - setToastError({ - title: "Error", - message: `unsupported network ${networkId}`, - }); - return; - } + const network = getNetwork(networkId); + if (!network) { + setToastError({ + title: "Error", + message: `unsupported network ${networkId}`, + }); + return; + } - switch (network.kind) { - case NetworkKind.Ethereum: - walletProvider = WalletProvider.Metamask; - break; - case NetworkKind.Cosmos: - walletProvider = WalletProvider.Keplr; - break; - } + switch (network.kind) { + case NetworkKind.Ethereum: + walletProvider = WalletProvider.Metamask; + break; + case NetworkKind.Cosmos: + walletProvider = WalletProvider.Keplr; + break; + } - // Auto select the first connected wallet when switching network - dispatch(setSelectedNetworkId(networkId)); + // Auto select the first connected wallet when switching network + dispatch(setSelectedNetworkId(networkId)); - const selectedWallet = wallets.find( - (w) => w.connected && w.provider === walletProvider, - ); - - dispatch(setSelectedWalletId(selectedWallet?.id || "")); + const selectedWallet = wallets.find( + (w) => w.connected && w.provider === walletProvider, + ); - resetMediaPlayer(); - }; + dispatch(setSelectedWalletId(selectedWallet?.id || "")); - return ( - - {enabledNetworks - .filter((network) => { - return ( - (!forceNetworkId || network.id === forceNetworkId) && // check that it's the forced network id if forced to - (!forceNetworkKind || network.kind === forceNetworkKind) && // check that it's the correct network kind if forced to - (!forceNetworkFeatures || - forceNetworkFeatures.every((feature) => - network.features.includes(feature), - )) && - selectedNetworkInfo?.id !== network.id // check that it's not already selected - ); - }) - .map((network, index) => { - const selectable = true; - return ( - onPressNetwork(network.id)} - > - - - - {network?.displayName || "Unknown"} - - - - ); - })} - { - setNetworksModalVisible(true); - }} - fullWidth - /> - { - setNetworksModalVisible(false); - }} - /> - - ); + resetMediaPlayer(); }; + + return ( + + {enabledNetworks + .filter((network) => { + return ( + (!forceNetworkId || network.id === forceNetworkId) && // check that it's the forced network id if forced to + (!forceNetworkKind || network.kind === forceNetworkKind) && // check that it's the correct network kind if forced to + (!forceNetworkFeatures || + forceNetworkFeatures.every((feature) => + network.features.includes(feature), + )) && + selectedNetworkInfo?.id !== network.id // check that it's not already selected + ); + }) + .map((network, index) => { + const selectable = true; + return ( + onPressNetwork(network.id)} + > + + + + {network?.displayName || "Unknown"} + + + + ); + })} + { + setNetworksModalVisible(true); + }} + fullWidth + /> + { + setNetworksModalVisible(false); + }} + /> + + ); +}; diff --git a/packages/components/TopMenu/TopMenuMyWallets.tsx b/packages/components/TopMenu/TopMenuMyWallets.tsx index 4e78e6db88..d8ff4e665c 100644 --- a/packages/components/TopMenu/TopMenuMyWallets.tsx +++ b/packages/components/TopMenu/TopMenuMyWallets.tsx @@ -2,6 +2,7 @@ import { LinearGradient } from "expo-linear-gradient"; import React, { useMemo, useState } from "react"; import { StyleSheet, TouchableOpacity, View } from "react-native"; +import { TopMenuSection } from "./TopMenuSection"; import walletsSVG from "../../../assets/icons/wallets.svg"; import { useBalances } from "../../hooks/useBalances"; import { useDelegations } from "../../hooks/useDelegations"; @@ -37,7 +38,6 @@ import FlexRow from "../FlexRow"; import { SVG } from "../SVG"; import { SecondaryButton } from "../buttons/SecondaryButton"; import { SendModal } from "../modals/SendModal"; -import { TopMenuSection } from "./TopMenuSection"; import { DepositWithdrawModal } from "@/components/modals/DepositWithdrawModal"; import { useAppNavigation } from "@/hooks/navigation/useAppNavigation"; diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx index ec13e99a2e..5177e0c411 100644 --- a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx +++ b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx @@ -1,29 +1,24 @@ -import React from "react"; - - import { BrandText } from "@/components/BrandText"; import { ScreenContainer } from "@/components/ScreenContainer"; import { useForceNetworkSelection } from "@/hooks/useForceNetworkSelection"; import { NetworkFeature, NetworkKind } from "@/networks"; import { ScreenFC, useAppNavigation } from "@/utils/navigation"; -export const LaunchpadERC20ManageTokenScreen: ScreenFC<"LaunchpadERC20ManageToken"> = ({ - route: { params }, -}) => { - const network = params?.network; - useForceNetworkSelection(network); - const navigation = useAppNavigation(); - - return ( - Launchpad ERC 20} - forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]} - forceNetworkKind={NetworkKind.Gno} - isLarge - responsive - onBackPress={() => navigation.navigate("LaunchpadERC20Tokens")} - > +export const LaunchpadERC20ManageTokenScreen: ScreenFC< + "LaunchpadERC20ManageToken" +> = ({ route: { params } }) => { + const network = params?.network; + useForceNetworkSelection(network); + const navigation = useAppNavigation(); - - ); + return ( + Launchpad ERC 20} + forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]} + forceNetworkKind={NetworkKind.Gno} + isLarge + responsive + onBackPress={() => navigation.navigate("LaunchpadERC20Tokens")} + /> + ); }; diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx index 899e6d8549..bb2a445a49 100644 --- a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx +++ b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx @@ -1,10 +1,12 @@ -import React from "react"; +import { useState } from "react"; import { useWindowDimensions, View } from "react-native"; import exploreSVG from "../../../../assets/icons/explore-neutral77.svg"; import penSVG from "../../../../assets/icons/pen-neutral77.svg"; import registerSVG from "../../../../assets/icons/register-neutral77.svg"; +import { SelectUserTokenModal } from "../component/LaunchpadERC20SelectUserTokenModal"; import { TokensTable } from "../component/LaunchpadERC20TokensTable"; +import { useUserTokens } from "../hooks/useUserTokens"; import { breakpoints } from "../utils/breakpoints"; import { BrandText } from "@/components/BrandText"; @@ -16,8 +18,6 @@ import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork"; import useSelectedWallet from "@/hooks/useSelectedWallet"; import { NetworkFeature, NetworkKind } from "@/networks"; import { ScreenFC, useAppNavigation } from "@/utils/navigation"; -import { SelectUserTokenModal } from "../component/LaunchpadERC20SelectUserTokenModal"; -import { useUserTokens } from "../hooks/useUserTokens"; export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({ route: { params }, @@ -27,17 +27,15 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({ const networkId = useSelectedNetworkId(); const { width } = useWindowDimensions(); const navigation = useAppNavigation(); - const [isModalVisible, setIsModalVisible] = React.useState(false); + const [isModalVisible, setIsModalVisible] = useState(false); const selectedWallet = useSelectedWallet(); const caller = selectedWallet?.address; const { data: tokens } = useUserTokens(networkId, caller || ""); - const dropdownItems = tokens?.map((token) => - token.name - ); + const dropdownItems = tokens?.map((token) => token.name); const toggleModal = () => { setIsModalVisible(!isModalVisible); - } + }; return ( = ({ label="Manage" description="Mint, burn, or transfer the tokens you own" iconSVG={penSVG} - onPress={() => { setIsModalVisible(true) }} + onPress={() => { + setIsModalVisible(true); + }} style={{ marginHorizontal: width >= breakpoints.MD_BREAKPOINT ? 12 : 0, marginVertical: width >= breakpoints.LG_BREAKPOINT ? 0 : 12, @@ -75,11 +75,15 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({ label="Explore" description="Lookup tokens and explore their details" iconSVG={exploreSVG} - onPress={() => { }} + onPress={() => {}} disabled /> - + diff --git a/packages/screens/LaunchpadERC20/component/LaunchpadERC20AirdropsTable.tsx b/packages/screens/LaunchpadERC20/component/LaunchpadERC20AirdropsTable.tsx index f8c1a3c15a..6da10cd32f 100644 --- a/packages/screens/LaunchpadERC20/component/LaunchpadERC20AirdropsTable.tsx +++ b/packages/screens/LaunchpadERC20/component/LaunchpadERC20AirdropsTable.tsx @@ -15,8 +15,8 @@ import { TableRow } from "@/components/table/TableRow"; import { TableTextCell } from "@/components/table/TableTextCell"; import { TableWrapper } from "@/components/table/TableWrapper"; import { TableColumns } from "@/components/table/utils"; -import { Airdrop } from "@/utils/launchpadERC20/types"; import { screenContentMaxWidthLarge } from "@/utils/style/layout"; +import { Airdrop } from "@/utils/types/types"; const columns: TableColumns = { id: { diff --git a/packages/screens/LaunchpadERC20/component/LaunchpadERC20SalesTable.tsx b/packages/screens/LaunchpadERC20/component/LaunchpadERC20SalesTable.tsx index 69627f08b2..dfc6ff8939 100644 --- a/packages/screens/LaunchpadERC20/component/LaunchpadERC20SalesTable.tsx +++ b/packages/screens/LaunchpadERC20/component/LaunchpadERC20SalesTable.tsx @@ -11,8 +11,8 @@ import { TableRow } from "@/components/table/TableRow"; import { TableTextCell } from "@/components/table/TableTextCell"; import { TableWrapper } from "@/components/table/TableWrapper"; import { TableColumns } from "@/components/table/utils"; -import { Sale } from "@/utils/launchpadERC20/types"; import { screenContentMaxWidthLarge } from "@/utils/style/layout"; +import { Sale } from "@/utils/types/types"; const columns: TableColumns = { id: { diff --git a/packages/screens/LaunchpadERC20/component/LaunchpadERC20SelectUserTokenModal.tsx b/packages/screens/LaunchpadERC20/component/LaunchpadERC20SelectUserTokenModal.tsx index 0aefb149d2..fd6bb1f1f4 100644 --- a/packages/screens/LaunchpadERC20/component/LaunchpadERC20SelectUserTokenModal.tsx +++ b/packages/screens/LaunchpadERC20/component/LaunchpadERC20SelectUserTokenModal.tsx @@ -1,3 +1,8 @@ +import { useState } from "react"; +import { View } from "react-native"; + +import { LaunchpadERC20TokensDropdown } from "./LaunchpadERC20TokensDropdown"; + import { BrandText } from "@/components/BrandText"; import FlexRow from "@/components/FlexRow"; import { PrimaryButton } from "@/components/buttons/PrimaryButton"; @@ -6,56 +11,64 @@ import { SpacerColumn } from "@/components/spacer"; import { useAppNavigation } from "@/utils/navigation"; import { errorColor, neutral77 } from "@/utils/style/colors"; import { fontSemibold14 } from "@/utils/style/fonts"; -import { useState } from "react"; -import { View } from "react-native"; -import { LaunchpadERC20TokensDropdown } from "./LaunchpadERC20TokensDropdown"; interface SelectTokenModalProps { - isVisible: boolean; - onClose: () => void; - items: string[] | undefined; + isVisible: boolean; + onClose: () => void; + items: string[] | undefined; } -export const SelectUserTokenModal: React.FC = ({ isVisible, onClose, items }) => { - const [selectedItem, setSelectedItem] = useState(null); - const props = { isVisible: isVisible, onClose: onClose }; - const navigation = useAppNavigation(); +export const SelectUserTokenModal: React.FC = ({ + isVisible, + onClose, + items, +}) => { + const [selectedItem, setSelectedItem] = useState(null); + const props = { isVisible, onClose }; + const navigation = useAppNavigation(); - return ( - + + + Select your ERC20 Token + + + {items && items.length !== 0 ? ( + + ) : ( + + You don't have any ERC20 tokens + + )} + + + { + navigation.navigate("LaunchpadERC20ManageToken", {}); + onClose(); }} - > - - - Select your ERC20 Token - - - {items && items.length !== 0 ? - - : - You don't have any ERC20 tokens - - } - - - { navigation.navigate("LaunchpadERC20ManageToken", {}); onClose(); }} - text="Open" - size="SM" - disabled={!selectedItem} - /> - - - - - - ) -} \ No newline at end of file + text="Open" + size="SM" + disabled={!selectedItem} + /> + + + + + ); +}; diff --git a/packages/screens/LaunchpadERC20/component/LaunchpadERC20TokensDropdown.tsx b/packages/screens/LaunchpadERC20/component/LaunchpadERC20TokensDropdown.tsx index dd9d9c1be3..ba7dd5ac5f 100644 --- a/packages/screens/LaunchpadERC20/component/LaunchpadERC20TokensDropdown.tsx +++ b/packages/screens/LaunchpadERC20/component/LaunchpadERC20TokensDropdown.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { StyleSheet, TouchableOpacity, View } from "react-native"; +import { TouchableOpacity, View } from "react-native"; import chevronDownSVG from "../../../../assets/icons/chevron-down.svg"; import chevronUpSVG from "../../../../assets/icons/chevron-up.svg"; @@ -8,7 +8,7 @@ import { BrandText } from "@/components/BrandText"; import { SVG } from "@/components/SVG"; import { TertiaryBox } from "@/components/boxes/TertiaryBox"; import { Label } from "@/components/inputs/TextInputCustom"; -import { neutral17, secondaryColor } from "@/utils/style/colors"; +import { neutral17, neutralFF, secondaryColor } from "@/utils/style/colors"; import { fontSemibold16 } from "@/utils/style/fonts"; import { layout } from "@/utils/style/layout"; @@ -21,7 +21,12 @@ interface LaunchpadERC20TokensDropdownProps { export const LaunchpadERC20TokensDropdown: React.FC< LaunchpadERC20TokensDropdownProps -> = ({ items, setSelectedItem, selectedItem, placeholder = "Select an item" }) => { +> = ({ + items, + setSelectedItem, + selectedItem, + placeholder = "Select an item", +}) => { const [isDropdownOpen, setDropdownState] = useState(false); const selectItem = (item: string) => { @@ -31,13 +36,27 @@ export const LaunchpadERC20TokensDropdown: React.FC< return ( -