wip: manage token page

gno/r/launchpad_grc20/token_factory_grc20.gno

@@ -190,6 +190,19 @@ func GetLastTokensJSON() string {
 	return json.ArrayNode("", nodes).String()
 }
 
+func GetUserTokensJSON(user string) string {
+	userAddr := std.Address(user)
+	var nodes []*json.Node
+	tokens.Iterate("", "", func(key string, value interface{}) bool {
+		token, _ := value.(*Token)
+		if token.admin.Owner() == userAddr {
+			nodes = append(nodes, token.ToJSON())
+		}
+		return false
+	})
+	return json.ArrayNode("", nodes).String()
+}
+
 func mustGetToken(name string) *Token {
 	t, exists := tokens.Get(name)
 	if !exists {

packages/components/navigation/getNormalModeScreens.tsx

@@ -28,6 +28,7 @@ import { LaunchpadERC20CreateSaleScreen } from "@/screens/LaunchpadERC20/Launchp
 import { LaunchpadERC20SalesScreen } from "@/screens/LaunchpadERC20/LaunchpadERC20Sales/LaunchpadERC20SalesScreen";
 import { LaunchpadERC20Screen } from "@/screens/LaunchpadERC20/LaunchpadERC20Screen";
 import { LaunchpadERC20CreateTokenScreen } from "@/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20CreateTokenScreen";
+import { LaunchpadERC20ManageTokenScreen } from "@/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken";
 import { LaunchpadERC20TokensScreen } from "@/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen";
 import { LaunchpadERC20AirdropsScreen } from "@/screens/LaunchpadERC20/LaunchpadERCAirdrops/LaunchpadERC20AirdropsScreen";
 import { LaunchpadERC20CreateAirdropScreen } from "@/screens/LaunchpadERC20/LaunchpadERCAirdrops/LaunchpadERC20CreateAirdropScreen";
@@ -315,6 +316,15 @@ export const getNormalModeScreens = ({ appMode }: { appMode: AppMode }) => {
         }}
       />
 
+      <Nav.Screen
+        name="LaunchpadERC20ManageToken"
+        component={LaunchpadERC20ManageTokenScreen}
+        options={{
+          header: () => null,
+          title: screenTitle("Launchpad ERC20 Manage Token"),
+        }}
+      />
+
       <Nav.Screen
         name="LaunchpadERC20Airdrops"
         component={LaunchpadERC20AirdropsScreen}

packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20CreateTokenSign.tsx

@@ -117,6 +117,7 @@ export const CreateTokenSign: React.FC = () => {
       );
 
       await queryClient.invalidateQueries(["lastTokens"]);
+      await queryClient.invalidateQueries(["userTokens"]);
 
       setIsShowConfirmModal(false);
       setIsShowModal(true);

packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx

@@ -0,0 +1,40 @@
+import { LaunchpadERC20DetailTokenBox } from "../component/LaunchpadERC20DetailTokenBox";
+
+import { BrandText } from "@/components/BrandText";
+import { ScreenContainer } from "@/components/ScreenContainer";
+import { SpacerColumn } from "@/components/spacer";
+import { useForceNetworkSelection } from "@/hooks/useForceNetworkSelection";
+import { NetworkFeature, NetworkKind } from "@/networks";
+import { ScreenFC, useAppNavigation } from "@/utils/navigation";
+import { useState } from "react";
+import { LaunchpadERC20TokenAmountButton } from "../component/LaunchpadERC20TokenAmountButton";
+
+export const LaunchpadERC20ManageTokenScreen: ScreenFC<
+  "LaunchpadERC20ManageToken"
+> = ({ route: { params } }) => {
+  const network = params?.network;
+  const token = params.token;
+  useForceNetworkSelection(network);
+  const navigation = useAppNavigation();
+  const [mintAmount, setMintAmount] = useState(0);
+  const [burnAmount, setBurnAmount] = useState(0);
+
+  return (
+    <ScreenContainer
+      headerChildren={<BrandText>Launchpad ERC 20</BrandText>}
+      forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]}
+      forceNetworkKind={NetworkKind.Gno}
+      isLarge
+      responsive
+      onBackPress={() => navigation.navigate("LaunchpadERC20Tokens")}
+    >
+      <SpacerColumn size={8} />
+      <BrandText>
+        Tokens Details
+      </BrandText>
+      <SpacerColumn size={1} />
+      <LaunchpadERC20DetailTokenBox item={token} />
+      <LaunchpadERC20TokenAmountButton amount={mintAmount} setAmount={setMintAmount} buttonLabel={"Mint"} />
+    </ScreenContainer>
+  );
+};

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";
@@ -13,6 +15,7 @@ import { FlowCard } from "@/components/cards/FlowCard";
 import { SpacerColumn } from "@/components/spacer";
 import { useForceNetworkSelection } from "@/hooks/useForceNetworkSelection";
 import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
+import useSelectedWallet from "@/hooks/useSelectedWallet";
 import { NetworkFeature, NetworkKind } from "@/networks";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
 
@@ -24,6 +27,14 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({
   const networkId = useSelectedNetworkId();
   const { width } = useWindowDimensions();
   const navigation = useAppNavigation();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const selectedWallet = useSelectedWallet();
+  const caller = selectedWallet?.address;
+  const { data: tokens } = useUserTokens(networkId, caller || "");
+
+  const toggleModal = () => {
+    setIsModalVisible(!isModalVisible);
+  };
 
   return (
     <ScreenContainer
@@ -51,12 +62,13 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({
           label="Manage"
           description="Mint, burn, or transfer the tokens you own"
           iconSVG={penSVG}
-          onPress={() => {}}
+          onPress={() => {
+            setIsModalVisible(true);
+          }}
           style={{
             marginHorizontal: width >= breakpoints.MD_BREAKPOINT ? 12 : 0,
             marginVertical: width >= breakpoints.LG_BREAKPOINT ? 0 : 12,
           }}
-          disabled
         />
         <FlowCard
           label="Explore"
@@ -66,6 +78,11 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({
           disabled
         />
       </View>
+      <SelectUserTokenModal
+        isVisible={isModalVisible}
+        onClose={toggleModal}
+        items={tokens}
+      />
       <SpacerColumn size={2} />
       <TokensTable networkId={networkId} />
     </ScreenContainer>

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: {

packages/screens/LaunchpadERC20/component/LaunchpadERC20DetailTokenBox.tsx

@@ -0,0 +1,36 @@
+import { View } from "react-native";
+
+import { BrandText } from "@/components/BrandText";
+import { neutralA3 } from "@/utils/style/colors";
+import { layout } from "@/utils/style/layout";
+import { Token } from "@/utils/types/types";
+
+interface SelectTokenModalProps {
+  item: Token;
+}
+
+export const LaunchpadERC20DetailTokenBox: React.FC<SelectTokenModalProps> = ({
+  item,
+}) => {
+  return (
+    <View
+      style={{
+        width: "100%",
+        borderWidth: 2,
+        borderRadius: 4,
+        borderColor: neutralA3,
+        paddingHorizontal: layout.spacing_x1,
+        paddingVertical: layout.spacing_x0_75,
+      }}
+    >
+      <BrandText>{"Name: " + item.name}</BrandText>
+      <BrandText>{"Symbol: " + item.symbol}</BrandText>
+      <BrandText>{"Decimals: " + item.decimals}</BrandText>
+      <BrandText>
+        {"Total Supply : " + item.totalSupply + " " + item.symbol}
+      </BrandText>
+      <BrandText>{item.allowMint ? "Allow Mint" : "Not Allow Mint"}</BrandText>
+      <BrandText>{item.allowBurn ? "Allow Burn" : "Not Allow Burn"}</BrandText>
+    </View>
+  );
+};

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: {

packages/screens/LaunchpadERC20/component/LaunchpadERC20SelectUserTokenModal.tsx

@@ -0,0 +1,77 @@
+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";
+import ModalBase from "@/components/modals/ModalBase";
+import { SpacerColumn } from "@/components/spacer";
+import { useAppNavigation } from "@/utils/navigation";
+import { errorColor, neutral77 } from "@/utils/style/colors";
+import { fontSemibold14 } from "@/utils/style/fonts";
+import { emptyToken, Token } from "@/utils/types/types";
+
+interface SelectTokenModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  items: Token[] | undefined | null;
+}
+
+export const SelectUserTokenModal: React.FC<SelectTokenModalProps> = ({
+  isVisible,
+  onClose,
+  items,
+}) => {
+  const [selectedItem, setSelectedItem] = useState<Token>(emptyToken);
+  const props = { isVisible, onClose };
+  const navigation = useAppNavigation();
+
+  return (
+    <View
+      style={{
+        width: "100%",
+        alignItems: "center",
+      }}
+    >
+      <ModalBase
+        onClose={props.onClose}
+        label="Select your ERC20 Token"
+        visible={props.isVisible}
+        width={480}
+      >
+        <BrandText style={[{ color: neutral77 }, fontSemibold14]}>
+          Select your ERC20 Token
+        </BrandText>
+        <SpacerColumn size={2.5} />
+        {items && items.length !== 0 ? (
+          <LaunchpadERC20TokensDropdown
+            items={items}
+            setSelectedItem={setSelectedItem}
+            selectedItem={selectedItem}
+          />
+        ) : (
+          <BrandText style={[{ color: errorColor }, fontSemibold14]}>
+            You don't have any ERC20 tokens
+          </BrandText>
+        )}
+        <SpacerColumn size={3.5} />
+        <FlexRow style={{ justifyContent: "center" }}>
+          <PrimaryButton
+            onPress={() => {
+              navigation.navigate("LaunchpadERC20ManageToken", {
+                token: selectedItem,
+              });
+              onClose();
+            }}
+            text="Open"
+            size="SM"
+            disabled={!selectedItem}
+          />
+        </FlexRow>
+        <SpacerColumn size={2} />
+      </ModalBase>
+    </View>
+  );
+};

packages/screens/LaunchpadERC20/component/LaunchpadERC20TokenAmountButton.tsx

@@ -0,0 +1,67 @@
+import { TertiaryBox } from "@/components/boxes/TertiaryBox";
+import { PrimaryButton } from "@/components/buttons/PrimaryButton";
+import { Label } from "@/components/inputs/TextInputCustom";
+import { neutral17, neutralFF } from "@/utils/style/colors";
+import { fontSemibold16 } from "@/utils/style/fonts";
+import { layout } from "@/utils/style/layout";
+import { StyleProp, TextInput, View, ViewStyle } from "react-native";
+
+interface LaunchpadERC20TokenAmountButtonProps {
+    amount: number;
+    setAmount: (amount: number) => void;
+    placeholder?: string;
+    buttonLabel: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    viewStyle: StyleProp<ViewStyle>;
+}
+
+export const LaunchpadERC20TokenAmountButton: React.FC<LaunchpadERC20TokenAmountButtonProps> = ({
+    amount,
+    setAmount,
+    placeholder = "Amount",
+    buttonLabel,
+    onPress,
+    disabled,
+    viewStyle
+}) => {
+    return (
+        <View
+            style={viewStyle}
+        >
+            <Label style={{ marginBottom: layout.spacing_x1 }} isRequired>
+                {placeholder}
+            </Label>
+
+            <TertiaryBox
+                style={{
+                    width: "100%",
+                    height: 40,
+                    flexDirection: "row",
+                    paddingHorizontal: 12,
+                    backgroundColor: neutral17,
+                    alignItems: "center",
+                }}
+            >
+                <TextInput
+                    style={{
+                        flex: 1,
+                        color: neutralFF,
+                        ...fontSemibold16,
+                    }}
+                    placeholder={placeholder}
+                    placeholderTextColor={neutralFF}
+                    value={amount.toString()}
+                    onChangeText={(text) => setAmount(Number(text))}
+                    keyboardType="numeric"
+                />
+                <PrimaryButton
+                    onPress={onPress}
+                    text={buttonLabel}
+                    size="SM"
+                    disabled={disabled}
+                />
+            </TertiaryBox>
+        </View>
+    );
+};