-
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 000c6e6
Showing
14 changed files
with
815 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,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"; | ||
|
|
||
| type 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> | ||
| ); | ||
| }; |
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"; | ||
|
|
||
| type 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> | ||
| ); |
209 changes: 209 additions & 0 deletions
209
apps/web/src/components/WalletConnect/SessionProposalModal.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,209 @@ | ||
| import { | ||
| Box, | ||
| Button, | ||
| Card, | ||
| Divider, | ||
| FormControl, | ||
| FormErrorMessage, | ||
| HStack, | ||
| Icon, | ||
| ModalContent, | ||
| ModalFooter, | ||
| Text, | ||
| VStack, | ||
| useToast, | ||
| } from "@chakra-ui/react"; | ||
| import { type WalletKitTypes } from "@reown/walletkit"; | ||
| import { useDynamicModalContext } from "@umami/components"; | ||
| import { | ||
| useAsyncActionHandler, | ||
| useAvailableNetworks, | ||
| useGetImplicitAccount, | ||
| walletKit, | ||
| } from "@umami/state"; | ||
| import { type Network } from "@umami/tezos"; | ||
| import { buildApprovedNamespaces, getSdkError } from "@walletconnect/utils"; | ||
| import { useState } from "react"; | ||
| import { FormProvider, useForm } from "react-hook-form"; | ||
|
|
||
| import { CheckmarkIcon, CloseIcon } from "../../assets/icons"; | ||
| import { OwnedImplicitAccountsAutocomplete } from "../AddressAutocomplete"; | ||
| import { ProjectInfoCard } from "./ProjectInfoCard"; | ||
| import { RequestModalContainer } from "./RequestModalContainer"; | ||
| import { VerifyInfobox } from "./VerifyInfobox"; | ||
|
|
||
| export const SessionProposalModal = ({ | ||
| proposal, | ||
| }: { | ||
| proposal: WalletKitTypes.SessionProposal; | ||
| }) => { | ||
| const getAccount = useGetImplicitAccount(); | ||
| const availableNetworks: Network[] = useAvailableNetworks(); | ||
| const toast = useToast(); | ||
|
|
||
| const { onClose } = useDynamicModalContext(); | ||
| const { handleAsyncAction } = useAsyncActionHandler(); | ||
|
|
||
| const [isLoadingApprove, setIsLoadingApprove] = useState(false); | ||
|
|
||
| const form = useForm<{ address: string }>({ | ||
| mode: "onBlur", | ||
| }); | ||
| const { | ||
| getValues, | ||
| formState: { errors, isValid }, | ||
| } = form; | ||
|
|
||
| // dApp sends in the session proposal the required networks and the optional networks. | ||
| // The response must contain all the required networks but Umami supports just one per request. | ||
| // So if the list of required networks is more than one or the required network is not supported, we can only reject the proposal. | ||
| const requiredNetworks = Object.entries(proposal.params.requiredNamespaces) | ||
| .map(([key, values]) => (key.includes(":") ? key : values.chains)) | ||
| .flat(); | ||
|
|
||
| let network = undefined; | ||
| let error = undefined; | ||
| if (requiredNetworks.length !== 1 || requiredNetworks[0] === undefined) { | ||
| error = "Expected only one required network, got " + requiredNetworks; | ||
| } else { | ||
| network = requiredNetworks[0]; | ||
| const availablenetworks = availableNetworks.map(network => network.name); | ||
| if (!availablenetworks.includes(network.split(":")[1])) { | ||
| // the network contains a namespace, e.g. tezos:mainnet | ||
| error = `The required network ${network} is not supported. Available: ${availablenetworks}`; | ||
| } | ||
| } | ||
|
|
||
| if (error) { | ||
| console.error(error); | ||
| toast({ description: error, status: "error" }); | ||
| } | ||
|
|
||
| const onApprove = () => | ||
| handleAsyncAction(async () => { | ||
| setIsLoadingApprove(true); | ||
| const account = getAccount(getValues().address); | ||
|
|
||
| try { | ||
| const namespaces = buildApprovedNamespaces({ | ||
| proposal: proposal.params, | ||
| supportedNamespaces: { | ||
| tezos: { | ||
| chains: [network ?? ""], | ||
| methods: ["tezos_getAccounts", "tezos_sign", "tezos_send"], | ||
| events: [], | ||
| accounts: [`${network}:${account.address.pkh}`], | ||
| }, | ||
| }, | ||
| }); | ||
| console.debug("approvedNamespaces", namespaces); | ||
|
|
||
| await walletKit.approveSession({ | ||
| id: proposal.id, | ||
| namespaces, | ||
| sessionProperties: {}, | ||
| }); | ||
| onClose(); | ||
| } catch (e) { | ||
| toast({ description: (e as Error).message, status: "error" }); | ||
| setIsLoadingApprove(false); | ||
| // keeping the modal open to show that the approval failed | ||
| return; | ||
| } | ||
| }); | ||
|
|
||
| // Handle reject action | ||
| const onReject = () => | ||
| handleAsyncAction(async () => { | ||
| // close immediately assuming that the user wants to get rid of the modal | ||
| onClose(); | ||
| try { | ||
| await walletKit.rejectSession({ | ||
| id: proposal.id, | ||
| reason: getSdkError("USER_REJECTED_METHODS"), | ||
| }); | ||
| } catch (e) { | ||
| toast({ description: (e as Error).message, status: "error" }); | ||
| return; | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <FormProvider {...form}> | ||
| <ModalContent> | ||
| <RequestModalContainer title=""> | ||
| <ProjectInfoCard metadata={proposal.params.proposer.metadata} /> | ||
| <Divider /> | ||
| <Box marginBottom="16px" fontSize="xl" fontWeight="semibold"> | ||
| Requested permissions | ||
| </Box> | ||
|
|
||
| <VStack align="start" spacing="8px"> | ||
| <HStack> | ||
| <Icon as={CheckmarkIcon} /> | ||
| <Card marginLeft="8px">View your balance and activity</Card> | ||
| </HStack> | ||
| <HStack> | ||
| <Icon as={CheckmarkIcon} /> | ||
| <Card marginLeft="8px">Send approval requests</Card> | ||
| </HStack> | ||
| <HStack color="gray.500"> | ||
| <Icon as={CloseIcon} /> | ||
| <Card marginLeft="8px">Move funds without permission</Card> | ||
| </HStack> | ||
| </VStack> | ||
|
|
||
| <Box marginTop="8px"> | ||
| {network ? ( | ||
| <> | ||
| <FormControl marginTop="24px" isInvalid={!!errors.address}> | ||
| <OwnedImplicitAccountsAutocomplete | ||
| allowUnknown={false} | ||
| inputName="address" | ||
| label="Select Account" | ||
| /> | ||
| {errors.address && <FormErrorMessage>{errors.address.message}</FormErrorMessage>} | ||
| </FormControl> | ||
| <Text marginTop="16px" color="gray.500"> | ||
| Network: | ||
| </Text> | ||
| <Text marginLeft="8px">{network}</Text> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Text color="gray.600">Accounts</Text> | ||
| <Text>None available</Text> | ||
| <Text marginTop="16px" color="gray.500"> | ||
| Network | ||
| </Text> | ||
| <Text>None of the required networks is supported</Text> | ||
| </> | ||
| )} | ||
| </Box> | ||
| <Divider /> | ||
| <VerifyInfobox /> | ||
| </RequestModalContainer> | ||
| <ModalFooter> | ||
| <Button | ||
| width="100%" | ||
| isDisabled={isLoadingApprove} | ||
| onClick={onReject} | ||
| size="lg" | ||
| > | ||
| Reject | ||
| </Button> | ||
| <Button | ||
| width="100%" | ||
| isDisabled={!!error || !isValid} | ||
| isLoading={isLoadingApprove} | ||
| loadingText="Approving..." | ||
| onClick={onApprove} | ||
| size="lg" | ||
| > | ||
| Approve | ||
| </Button> | ||
| </ModalFooter> | ||
| </ModalContent> | ||
| </FormProvider> | ||
| ); | ||
| }; |
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,17 @@ | ||
| import { Box, Card, HStack, Icon, VStack } from "@chakra-ui/react"; | ||
|
|
||
| import { AlertCircleIcon } from "../../assets/icons"; | ||
|
|
||
| export const VerifyInfobox = () => ( | ||
| <Box textAlign="center"> | ||
| <VStack spacing="16px"> | ||
| <HStack margin="auto"> | ||
| <Icon as={AlertCircleIcon} verticalAlign="bottom" /> | ||
| <Card marginLeft="8px">Unknown domain</Card> | ||
| </HStack> | ||
| <Box margin="auto"> | ||
| <Card>This domain was not verified. To be implemented.</Card> | ||
| </Box> | ||
| </VStack> | ||
| </Box> | ||
| ); |
Oops, something went wrong.