-
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 021d090
Showing
18 changed files
with
1,050 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 default function ModalFooter({ | ||
| onApprove, | ||
| approveLoader, | ||
| onReject, | ||
| rejectLoader, | ||
| infoBoxCondition, | ||
| infoBoxText, | ||
| disableApprove, | ||
| disableReject, | ||
| }: Props) { | ||
| const form = useFormContext(); | ||
| return ( | ||
| <Box as="footer" padding={4}> | ||
| {infoBoxCondition && ( | ||
| <Box marginBottom={4} textAlign="left"> | ||
| <Card marginLeft={2}>{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 { Box, Button, Card, CardBody, Link, Text, Tooltip } from "@chakra-ui/react"; | ||
| import { truncate } from "@umami/tezos"; | ||
|
|
||
| import { CrossedCircleIcon } from "../../assets/icons"; // Ensure this path is correct | ||
|
|
||
| interface IProps { | ||
| name?: string; | ||
| url?: string; | ||
| topic?: string; | ||
| onDelete: () => Promise<void>; | ||
| } | ||
|
|
||
| export default function PairingCard({ topic, name, url, onDelete }: IProps) { | ||
| return ( | ||
| <Card position="relative" minHeight="70px" marginBottom={6} borderWidth={1} borderColor="light"> | ||
| <CardBody | ||
| alignItems="center" | ||
| justifyContent="space-between" | ||
| flexDirection="row" | ||
| display="flex" | ||
| overflow="hidden" | ||
| padding={4} | ||
| > | ||
| <Box flex="1"> | ||
| <Text marginLeft={9} data-testid={`pairing-text-${topic}`}> | ||
| {name} | ||
| </Text> | ||
| <Link marginLeft={9} data-testid={`pairing-text-${topic}`} href={url}> | ||
| {truncate(url?.split("https://")[1] ?? "Unknown", 23)} | ||
| </Link> | ||
| </Box> | ||
| <Tooltip label="Delete" placement="left"> | ||
| <Button | ||
| minWidth="auto" | ||
| padding={1} | ||
| _hover={{ bg: "red.100", transition: "all 0.2s" }} | ||
| colorScheme="red" | ||
| data-testid={`pairing-delete-${topic}`} | ||
| onClick={onDelete} | ||
| variant="outline" | ||
| > | ||
| <CrossedCircleIcon alt="delete icon" /> | ||
| </Button> | ||
| </Tooltip> | ||
| </CardBody> | ||
| </Card> | ||
| ); | ||
| } |
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, 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 default function 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={4}> | ||
| <Text data-testid="session-info-card-text"> | ||
| <Text as="span" fontWeight="bold"> | ||
| {name} | ||
| </Text>{" "} | ||
| <br /> | ||
| <Heading size="md">wants to {intention ? intention : "connect"}</Heading> | ||
| </Text> | ||
| </Box> | ||
| <Box marginTop={4}> | ||
| <Link | ||
| verticalAlign="middle" | ||
| marginLeft={2} | ||
| data-testid="session-info-card-url" | ||
| href={url} | ||
| isExternal | ||
| > | ||
| {url} | ||
| </Link> | ||
| </Box> | ||
| <Flex alignItems="center" justifyContent="center" marginTop={4}> | ||
| <PencilIcon style={{ verticalAlign: "bottom" }} /> | ||
| <Card marginLeft={2}>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,73 @@ | ||
| import { Divider } from "@chakra-ui/react"; | ||
| import { type CoreTypes } from "@walletconnect/types"; | ||
| import { Fragment, type ReactNode, useMemo } from "react"; | ||
|
|
||
| import ModalFooter, { type LoaderProps } 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 default function RequestModal({ | ||
| children, | ||
| metadata, | ||
| onApprove, | ||
| onReject, | ||
| approveLoader, | ||
| rejectLoader, | ||
| intention, | ||
| infoBoxCondition, | ||
| infoBoxText, | ||
| disableApprove, | ||
| disableReject, | ||
| }: IProps) { | ||
| const modalContent = useMemo( | ||
| () => ( | ||
| <> | ||
| <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} | ||
| /> | ||
| </> | ||
| ), | ||
| [ | ||
| approveLoader, | ||
| children, | ||
| infoBoxCondition, | ||
| infoBoxText, | ||
| intention, | ||
| metadata, | ||
| onApprove, | ||
| onReject, | ||
| rejectLoader, | ||
| disableApprove, | ||
| disableReject, | ||
| ] | ||
| ); | ||
| return <Fragment>{modalContent}</Fragment>; | ||
| } |
28 changes: 28 additions & 0 deletions
28
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,28 @@ | ||
| import { Card, Heading, ModalBody, ModalHeader } from "@chakra-ui/react"; | ||
| import { Fragment, type ReactNode } from "react"; | ||
|
|
||
| /** | ||
| * Types | ||
| */ | ||
| interface IProps { | ||
| title?: string; | ||
| children: ReactNode | ReactNode[]; | ||
| } | ||
|
|
||
| /** | ||
| * Component | ||
| */ | ||
| export default function RequestModalContainer({ children, title }: IProps) { | ||
| return ( | ||
| <Fragment> | ||
| {title ? ( | ||
| <ModalHeader> | ||
| <Heading size="sm">{title}</Heading> | ||
| </ModalHeader> | ||
| ) : null} | ||
| <ModalBody> | ||
| <Card>{children}</Card> | ||
| </ModalBody> | ||
| </Fragment> | ||
| ); | ||
| } |
Oops, something went wrong.