feat: pass token as parameter to display detail page

TERITORI · Oct 18, 2024 · d884d23 · d884d23
1 parent 42bfdd4
commit d884d23
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 13 deletions.
diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx
@@ -1,5 +1,8 @@
+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";
@@ -8,6 +11,7 @@ export const LaunchpadERC20ManageTokenScreen: ScreenFC<
   "LaunchpadERC20ManageToken"
 > = ({ route: { params } }) => {
   const network = params?.network;
+  const token = params.token;
   useForceNetworkSelection(network);
   const navigation = useAppNavigation();
 
@@ -19,6 +23,9 @@ export const LaunchpadERC20ManageTokenScreen: ScreenFC<
       isLarge
       responsive
       onBackPress={() => navigation.navigate("LaunchpadERC20Tokens")}
-    />
+    >
+      <SpacerColumn size={8} />
+      <LaunchpadERC20DetailTokenBox item={token} />
+    </ScreenContainer>
   );
 };
diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx
@@ -31,7 +31,6 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({
   const selectedWallet = useSelectedWallet();
   const caller = selectedWallet?.address;
   const { data: tokens } = useUserTokens(networkId, caller || "");
-  const dropdownItems = tokens?.map((token) => token.name);
 
   const toggleModal = () => {
     setIsModalVisible(!isModalVisible);
@@ -82,7 +81,7 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({
       <SelectUserTokenModal
         isVisible={isModalVisible}
         onClose={toggleModal}
-        items={dropdownItems}
+        items={tokens}
       />
       <SpacerColumn size={2} />
       <TokensTable networkId={networkId} />

diff --git a/packages/screens/LaunchpadERC20/component/LaunchpadERC20DetailTokenBox.tsx b/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>
+  );
+};
diff --git a/packages/screens/LaunchpadERC20/component/LaunchpadERC20SelectUserTokenModal.tsx b/packages/screens/LaunchpadERC20/component/LaunchpadERC20SelectUserTokenModal.tsx
@@ -11,19 +11,20 @@ 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: string[] | undefined;
+  items: Token[] | undefined | null;
 }
 
 export const SelectUserTokenModal: React.FC<SelectTokenModalProps> = ({
   isVisible,
   onClose,
   items,
 }) => {
-  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const [selectedItem, setSelectedItem] = useState<Token>(emptyToken);
   const props = { isVisible, onClose };
   const navigation = useAppNavigation();
 
@@ -59,7 +60,9 @@ export const SelectUserTokenModal: React.FC<SelectTokenModalProps> = ({
         <FlexRow style={{ justifyContent: "center" }}>
           <PrimaryButton
             onPress={() => {
-              navigation.navigate("LaunchpadERC20ManageToken", {});
+              navigation.navigate("LaunchpadERC20ManageToken", {
+                token: selectedItem,
+              });
               onClose();
             }}
             text="Open"

diff --git a/packages/screens/LaunchpadERC20/component/LaunchpadERC20TokensDropdown.tsx b/packages/screens/LaunchpadERC20/component/LaunchpadERC20TokensDropdown.tsx
@@ -11,11 +11,12 @@ import { Label } from "@/components/inputs/TextInputCustom";
 import { neutral17, neutralFF, secondaryColor } from "@/utils/style/colors";
 import { fontSemibold16 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
+import { Token } from "@/utils/types/types";
 
 interface LaunchpadERC20TokensDropdownProps {
-  items: string[];
-  setSelectedItem: (item: string) => void;
-  selectedItem?: string | null;
+  items: Token[];
+  setSelectedItem: (token: Token) => void;
+  selectedItem?: Token | null;
   placeholder?: string;
 }
 
@@ -29,7 +30,7 @@ export const LaunchpadERC20TokensDropdown: React.FC<
 }) => {
   const [isDropdownOpen, setDropdownState] = useState<boolean>(false);
 
-  const selectItem = (item: string) => {
+  const selectItem = (item: Token) => {
     setSelectedItem(item);
     setDropdownState(false);
   };
@@ -68,7 +69,7 @@ export const LaunchpadERC20TokensDropdown: React.FC<
               },
             ]}
           >
-            {selectedItem || placeholder}
+            {selectedItem?.name || placeholder}
           </BrandText>
           <SVG
             source={isDropdownOpen ? chevronUpSVG : chevronDownSVG}
@@ -110,7 +111,7 @@ export const LaunchpadERC20TokensDropdown: React.FC<
                         { marginLeft: layout.spacing_x1_5 },
                       ]}
                     >
-                      {item}
+                      {item.name}
                     </BrandText>
                   </View>
                 </TouchableOpacity>

diff --git a/packages/utils/navigation.ts b/packages/utils/navigation.ts
@@ -6,6 +6,7 @@ import { feedsTabItems } from "./social-feed";
 import { AppMode } from "./types/app-mode";
 import { NewPostFormValues } from "./types/feed";
 import { MessageFriendsTabItem } from "./types/message";
+import { Token } from "./types/types";
 import { uppTabItems } from "./upp";
 export type RouteName = keyof RootStackParamList;
 
@@ -43,7 +44,7 @@ export type RootStackParamList = {
   LaunchpadERC20: undefined;
   LaunchpadERC20Tokens?: { network?: string };
   LaunchpadERC20CreateToken: { step?: number };
-  LaunchpadERC20ManageToken: { network?: string };
+  LaunchpadERC20ManageToken: { network?: string; token: Token };
   LaunchpadERC20Airdrops?: { network?: string };
   LaunchpadERC20CreateAirdrop: { step?: number };
   LaunchpadERC20Sales?: { network?: string };

diff --git a/packages/utils/types/types.ts b/packages/utils/types/types.ts
@@ -14,6 +14,18 @@ export const zodToken = z.object({
 
 export type Token = z.infer<typeof zodToken>;
 
+export const emptyToken = {
+  symbol: "",
+  name: "",
+  decimals: "",
+  admin: "",
+  image: "",
+  totalSupply: "",
+  totalSupplyCap: "",
+  allowMint: false,
+  allowBurn: false,
+};
+
 export const zodAidrop = z.object({
   id: z.string(),
   tokenName: z.string(),