-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
wip: manage token page #1309
base: main
Are you sure you want to change the base?
wip: manage token page #1309
Changes from all commits
f49f847
fecd2c9
47eb174
335aac6
e5ccc4d
f3f5ec3
de49b72
6030a55
9bf022a
ca02808
54bb6a7
42bfdd4
d884d23
a0b7eff
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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"), | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
}} | ||||||
/> | ||||||
|
||||||
<Nav.Screen | ||||||
name="LaunchpadERC20Airdrops" | ||||||
component={LaunchpadERC20AirdropsScreen} | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -117,6 +117,7 @@ export const CreateTokenSign: React.FC = () => { | |
); | ||
|
||
await queryClient.invalidateQueries(["lastTokens"]); | ||
await queryClient.invalidateQueries(["userTokens"]); | ||
Comment on lines
119
to
+120
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why invalidate all networks |
||
|
||
setIsShowConfirmModal(false); | ||
setIsShowModal(true); | ||
|
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
@@ -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"; | ||||
Check failure on line 9 in packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx GitHub Actions / lint-and-build
|
||||
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); | ||||
Check failure on line 20 in packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx GitHub Actions / lint-and-build
|
||||
|
||||
return ( | ||||
<ScreenContainer | ||||
headerChildren={<BrandText>Launchpad ERC 20</BrandText>} | ||||
forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]} | ||||
forceNetworkKind={NetworkKind.Gno} | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
don't need to force the network kind since you force based on features |
||||
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"} /> | ||||
Check failure on line 37 in packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20ManageToken.tsx GitHub Actions / lint-and-build
|
||||
</ScreenContainer> | ||||
); | ||||
}; |
Original file line number | Diff line number | Diff line change | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -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 || ""); | ||||||||||||
|
||||||||||||
Comment on lines
+31
to
+33
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||||
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> | ||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should index tokens by owner instead of iterating through all tokens here