-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: WalletConnect integration, part 1, session proposal
This is the first part of the WalletConnect integration. It includes the following components: - initiating WalletKit by WalletConnect - subscribing to basic events - handling session proposal on a basic level Limitations: - all requests are rejected - no pairing list - no way to disconnect - no verification of dapp, no check for scam
- Loading branch information
1 parent
82b2cd2
commit 22d7d7c
Showing
16 changed files
with
914 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { Box, Button, Card, HStack } from "@chakra-ui/react"; | ||
| import { useFormContext } from "react-hook-form"; | ||
| export interface LoaderProps { | ||
| color?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "white"; | ||
| active?: boolean; | ||
| } | ||
| interface Props { | ||
| onApprove: () => void; | ||
| onReject: () => void; | ||
| infoBoxCondition?: boolean; | ||
| infoBoxText?: string; | ||
| approveLoader?: LoaderProps; | ||
| rejectLoader?: LoaderProps; | ||
| disableApprove?: boolean; | ||
| disableReject?: boolean; | ||
| } | ||
|
|
||
| export const ModalFooter = ({ | ||
| onApprove, | ||
| approveLoader, | ||
| onReject, | ||
| rejectLoader, | ||
| infoBoxCondition, | ||
| infoBoxText, | ||
| disableApprove, | ||
| disableReject, | ||
| }: Props) => { | ||
| const form = useFormContext(); | ||
| return ( | ||
| <Box as="footer" padding="16px"> | ||
| {infoBoxCondition && ( | ||
| <Box marginBottom="16px" textAlign="left"> | ||
| <Card marginLeft="8px">{infoBoxText || ""}</Card> | ||
| </Box> | ||
| )} | ||
| <HStack alignItems="center" justifyContent="space-between"> | ||
| <Button | ||
| colorScheme="gray" | ||
| data-testid="session-reject-button" | ||
| isDisabled={disableReject || rejectLoader?.active} | ||
| onClick={onReject} | ||
| variant="solid" | ||
| > | ||
| {rejectLoader && rejectLoader.active ? "Loading..." : "Reject"} | ||
| </Button> | ||
| <Button | ||
| colorScheme="blue" | ||
| data-testid="session-approve-button" | ||
| isDisabled={ | ||
| disableApprove || approveLoader?.active || Boolean(form.formState.errors.password) | ||
| } | ||
| onClick={form.handleSubmit(onApprove)} | ||
| variant="solid" | ||
| > | ||
| {approveLoader && approveLoader.active ? "Loading..." : "Approve"} | ||
| </Button> | ||
| </HStack> | ||
| </Box> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { Avatar, Box, Card, Flex, Heading, Icon, Link, Text } from "@chakra-ui/react"; | ||
| import { type SignClientTypes } from "@walletconnect/types"; | ||
|
|
||
| import { PencilIcon } from "../../assets/icons"; | ||
|
|
||
| interface IProps { | ||
| metadata: SignClientTypes.Metadata; | ||
| intention?: string; | ||
| } | ||
|
|
||
| /** | ||
| * dApp project info card. Contains verification info to help user decide if the dApp is safe to connect. | ||
| */ | ||
| export const ProjectInfoCard = ({ metadata, intention }: IProps) => { | ||
| const { icons, name, url } = metadata; | ||
|
|
||
| return ( | ||
| <Box textAlign="center"> | ||
| <Box> | ||
| <Avatar marginX="auto" size="lg" src={icons[0]} /> | ||
| </Box> | ||
| <Box marginTop="16px"> | ||
| <Text data-testid="session-info-card-text"> | ||
| <Text as="span" fontWeight="bold"> | ||
| {name} | ||
| </Text>{" "} | ||
| <br /> | ||
| <Heading size="md">wants to {intention ?? "connect"}</Heading> | ||
| </Text> | ||
| </Box> | ||
| <Box marginTop="16px"> | ||
| <Link | ||
| verticalAlign="middle" | ||
| marginLeft="8px" | ||
| data-testid="session-info-card-url" | ||
| href={url} | ||
| isExternal | ||
| > | ||
| {url} | ||
| </Link> | ||
| </Box> | ||
| <Flex alignItems="center" justifyContent="center" marginTop="16px"> | ||
| <Icon as={PencilIcon} verticalAlign="bottom" /> | ||
| <Card marginLeft="8px">Cannot Verify: to be implemented</Card> | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { Divider } from "@chakra-ui/react"; | ||
| import { type CoreTypes } from "@walletconnect/types"; | ||
| import { type ReactNode } from "react"; | ||
|
|
||
| import { type LoaderProps, ModalFooter } from "./ModalFooter"; | ||
| import { ProjectInfoCard } from "./ProjectInfoCard"; | ||
| import { RequestModalContainer } from "./RequestModalContainer"; | ||
| import { VerifyInfobox } from "./VerifyInfobox"; | ||
|
|
||
| interface IProps { | ||
| children: ReactNode; | ||
| metadata: CoreTypes.Metadata; | ||
| onApprove: () => void; | ||
| onReject: () => void; | ||
| intention?: string; | ||
| infoBoxCondition?: boolean; | ||
| infoBoxText?: string; | ||
| approveLoader?: LoaderProps; | ||
| rejectLoader?: LoaderProps; | ||
| disableApprove?: boolean; | ||
| disableReject?: boolean; | ||
| } | ||
| export const RequestModal = ({ | ||
| children, | ||
| metadata, | ||
| onApprove, | ||
| onReject, | ||
| approveLoader, | ||
| rejectLoader, | ||
| intention, | ||
| infoBoxCondition, | ||
| infoBoxText, | ||
| disableApprove, | ||
| disableReject, | ||
| }: IProps) => ( | ||
| <> | ||
| <RequestModalContainer title=""> | ||
| <ProjectInfoCard intention={intention} metadata={metadata} /> | ||
| <Divider /> | ||
| {children} | ||
| <Divider /> | ||
| <VerifyInfobox /> | ||
| </RequestModalContainer> | ||
| <ModalFooter | ||
| approveLoader={approveLoader} | ||
| disableApprove={disableApprove} | ||
| disableReject={disableReject} | ||
| infoBoxCondition={infoBoxCondition} | ||
| infoBoxText={infoBoxText} | ||
| onApprove={onApprove} | ||
| onReject={onReject} | ||
| rejectLoader={rejectLoader} | ||
| /> | ||
| </> | ||
| ); |
20 changes: 20 additions & 0 deletions
20
apps/web/src/components/WalletConnect/RequestModalContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { Card, ModalBody, ModalHeader } from "@chakra-ui/react"; | ||
| import { Fragment, type ReactNode } from "react"; | ||
|
|
||
| interface IProps { | ||
| title?: string; | ||
| children: ReactNode | ReactNode[]; | ||
| } | ||
|
|
||
| export const RequestModalContainer = ({ children, title }: IProps) => ( | ||
| <Fragment> | ||
| {title ? ( | ||
| <ModalHeader> | ||
| <Card>{title}</Card> | ||
| </ModalHeader> | ||
| ) : null} | ||
| <ModalBody> | ||
| <Card>{children}</Card> | ||
| </ModalBody> | ||
| </Fragment> | ||
| ); |
Oops, something went wrong.