Skip to content
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.

Sign up for GitHub

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

Updates for adding token in Keplr list #24

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

Updates for adding token in Keplr list #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 18 additions & 14 deletions src/modules/cw20/components/CollectionRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,24 @@ const Cw20CollectionRow: FC<Cw20CollectionRowProps> = (props) => {

return (
<Box p="12" rounded="2xl" bg="gray.100" data-testid="cw20-collection-row">
<SimpleGrid columns={4} spacing="6">
<GridItem data-testid="collection-logo">
<FallbackImage
src={tokenInfo?.marketingInfo?.logo?.url}
alt="Image"
borderRadius="lg"
cursor='pointer'
_hover={{ scale: "110%" }}
transform='auto'
transition='ease-in'
transitionProperty='all'
transitionDuration='150ms'
/>
</GridItem>
<SimpleGrid
templateColumns="repeat(auto-fit, minmax(150px, 1fr))" spacing="6">
{tokenInfo?.marketingInfo?.logo ?
<GridItem data-testid="collection-logo">
<FallbackImage
src={tokenInfo?.marketingInfo?.logo?.url}
alt="Image"
borderRadius="lg"
cursor='pointer'
_hover={{ scale: "110%" }}
transform='auto'
transition='ease-in'
transitionProperty='all'
transitionDuration='150ms'
/>
</GridItem>
: ""
}
<GridItem colSpan={3} data-testid="collection-details">
<Flex direction="column" gap="4" alignItems="stretch">
<HStack w='full' data-testid="collection-header">
Expand Down
16 changes: 11 additions & 5 deletions src/modules/exchange/ExchangeIntro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const ExchangeIntro: FC<ExchangeIntroProps> = (props) => {
const { data: tokenInfo } = useGetCw20MarketingInfo(cw20);



return (
<Flex direction="row" justify={"space-between"} my={"auto"} data-testid="exchange-intro">
<Flex direction="column" width={663}>
Expand All @@ -27,11 +28,16 @@ const ExchangeIntro: FC<ExchangeIntroProps> = (props) => {
<Text fontWeight="light" fontSize="md" mt="2" mb="2" data-testid="intro-description">
{tokenInfo?.marketingInfo?.description}
</Text>
<Link href={tokenInfo?.marketingInfo?.project} target="_blank" data-testid="learn-more-link">
<PromiseButton width={"fit-content"} backgroundColor={"gray.900"} paddingX={12} data-testid="learn-more-button">
Learn more
</PromiseButton>
</Link>

{tokenInfo?.marketingInfo?.project ?
<Link href={tokenInfo?.marketingInfo?.project} target="_blank" data-testid="learn-more-link">
<PromiseButton width={"fit-content"} backgroundColor={"gray.900"} paddingX={12} data-testid="learn-more-button">
Learn more
</PromiseButton>
</Link>
: ""
}

</Flex>
</Flex>
);
Expand Down
191 changes: 170 additions & 21 deletions src/modules/exchange/ExchangePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,47 @@
import { IExchangeCollection } from "@/lib/app/types";
import { Box, Button, Flex, Text } from "@chakra-ui/react";
import React, { ChangeEvent, FC, useState } from "react";
import { Box, Button, Flex, Text, useToast } from "@chakra-ui/react";
import React, { ChangeEvent, FC, useMemo, useState } from "react";
import ExchangeIntro from "./ExchangeIntro";
import ExchangeCard from "./ExchangeCard";
import CONFIG from "@/config";
import PromiseButton from "../common/ui/PromiseButton";
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
ModalFooter,
useDisclosure
} from "@chakra-ui/react";
import { HamburgerIcon } from "@chakra-ui/icons";
import { ArrowBigRight, ArrowRight } from "lucide-react";
import { apolloClient } from "@/lib/graphql";
import { IKeplrConfigQuery } from "@andromedaprotocol/gql/dist/__generated/react";
import { refetchKeplrConfigQuery } from "@andromedaprotocol/gql/dist/__generated/react";
import { useAndromedaStore } from "@/zustand/andromeda";



interface Props {
collection: IExchangeCollection;
}

const ExchangePage: FC<Props> = (props) => {
const toast = useToast({
position: "top-right",
duration: 3000,
isClosable: true,
});
const [error, setError] = useState("")
const { isOpen, onOpen, onClose } = useDisclosure();
const state = useAndromedaStore()

const isCosmwasmError = useMemo(() => {
return (error.includes("The chain doesn't support cosmwasm"))

}, [error])

const { collection } = props;

Expand All @@ -22,16 +53,49 @@ const ExchangePage: FC<Props> = (props) => {
}
}
const handleAddToKeplr = async () => {

if (window.keplr) {
try {
await window.keplr.enable(CONFIG.chainId);
await window.keplr.suggestToken(CONFIG.chainId, collection.cw20);
} catch (error) {
console.error("Failed to add token to Keplr", error);
setError("")
toast({
title: `Token added successfully`,

});
} catch (error: any) {
console.error("Failed to add token to Keplr.", error);
setError(error.message)
toast({
title: `Error while adding token`,
description: error.message,
status: "error",
});

onOpen()
}
}
}

const suggestChain = async () => {
try {
console.log("Suggesting chain")
const keplrConfig = await apolloClient.query<IKeplrConfigQuery>(refetchKeplrConfigQuery({
'identifier': state.chainId
}))

await state.keplr?.experimentalSuggestChain({ ...keplrConfig.data.keplrConfigs.config, features: ["cosmwasm"] });
toast({
title: `Chain connected successfully`,

});

} catch (err) {

console.log("SuggestChainError : ", err)
}
}


return (

Expand All @@ -47,25 +111,110 @@ const ExchangePage: FC<Props> = (props) => {
data-testid="exchange-card"
/>
</Flex>
<Box borderWidth='1px' borderRadius='lg' padding={6} backgroundColor={"gray.50"} mt="4" mb="4">
<Flex direction={"column"} justifyContent={'space-between'} padding={4}>
<Text fontWeight="bold" fontSize="3xl" mt="2" lineHeight="shorter" data-testid="add-contract-addr" mb='2' color={'blackAlpha.800'}>
Add your cw20 token to Keplr for easy balance tracking
</Text>
<Text fontSize="md" color={'blackAlpha.700'} mb='4'>
• You only need to do this once per token.
<br />
• Make sure your Keplr wallet is connected before proceeding.
<br />
• After adding, you can find the token in your Keplr asset list.
</Text>
<Flex justify={"center"}>
<PromiseButton width={"fit-content"} backgroundColor={"gray.900"} display={"block"} size={"md"} paddingX={'12'} onClick={handleAddToKeplr}>Add token to keplr</PromiseButton>

{state.isConnected &&
<Box borderWidth='1px' borderRadius='lg' padding={6} backgroundColor={"gray.50"} mt="4" mb="4">
<Flex direction={"column"} justifyContent={'space-between'} padding={4}>
<Text fontWeight="bold" fontSize="3xl" mt="2" lineHeight="shorter" data-testid="add-contract-addr" mb='2' color={'blackAlpha.800'}>
Add your cw20 token to Keplr for easy balance tracking
</Text>
<Text fontSize="md" color={'blackAlpha.700'} mb='4'>
• You only need to do this once per token.
<br />
• Make sure your Keplr wallet is connected before proceeding.
<br />
• After adding, you can find the token in your Keplr asset list.
</Text>
<Flex alignItems={"center"} justify={"center"} gap={4} >
<PromiseButton width={"fit-content"} backgroundColor={"gray.900"} display={"block"} size={"md"} paddingX={'12'} onClick={handleAddToKeplr}>Add token to keplr</PromiseButton>

{isCosmwasmError &&
<Modal isOpen={isOpen} onClose={onClose} size={"6xl"}>
<ModalOverlay />
<ModalContent bg={"gray.800"} color={"white"}>
<ModalHeader fontSize={"xl"} style={{ color: "InactiveCaption" }}> The chain you are using has been detected to have been previously setup in a way that does not support auto-adding contracts. To resolve, follow this steps :- </ModalHeader>
<ModalCloseButton />
<ModalBody>
<div style={{
display: "flex",
justifyContent: "space-between",
height: "100%",
gap: "24px",
padding: "22px",
border: "1px solid white",
color: "ActiveBorder",
borderColor: "GrayText"
}}>
{/* Step 1 */}
<div style={{ display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }}>
<strong style={{ color: "ActiveCaption" }} >Step 1:</strong>
<span>Open Keplr. Go to</span>
<HamburgerIcon />
<ArrowRight />
<span>Setting</span>
<ArrowRight />
<span>General</span>
<ArrowRight />
<span>Add/Remove Non-Native Chains.</span>
<span>Remove the name of your connected chain.</span>
</div>

{/* Step 2 */}
<div style={{ display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap", }}>
<strong style={{ color: "ActiveCaption" }}>Step 2:</strong>
<span>Click this button to add your chain:</span>
<PromiseButton
width="fit-content"
size="md"
backgroundColor="gray.900"
paddingX="12"
onClick={suggestChain}
>
Add Chain to Keplr
</PromiseButton>
</div>

{/* Step 3 */}
<div style={{ display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }}>
<strong style={{ color: "ActiveCaption" }}>Step 3:</strong>
<span>Click on the button to add token to Keplr</span>
<PromiseButton
width="fit-content"
backgroundColor="gray.900"
size="md"
paddingX="12"
onClick={handleAddToKeplr}
>
Add Token to Keplr
</PromiseButton>
</div>
</div>

</ModalBody>
<ModalFooter>
<Button colorScheme="gray" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
}
</Flex>
</Flex>
</Flex>
</Box>
</Flex>
</Box >
}
</Flex >
)
}

export default ExchangePage;