-
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.
Merge pull request #1959 from trilitech/add-wc-connect
feat: WalletConnect integration, part 1, session proposal
- Loading branch information
Showing
19 changed files
with
998 additions
and
9 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
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,47 @@ | ||
| import { Avatar, Box, Card, Flex, Icon, Link, Text } from "@chakra-ui/react"; | ||
| import { type SignClientTypes } from "@walletconnect/types"; | ||
|
|
||
| import { PencilIcon } from "../../assets/icons"; | ||
|
|
||
| type Props = { | ||
| 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 }: Props) => { | ||
| const { icons, name, url } = metadata; | ||
|
|
||
| return ( | ||
| <Box textAlign="center"> | ||
| <Box> | ||
| <Avatar marginX="auto" size="lg" src={icons[0]} /> | ||
| </Box> | ||
| <Box marginTop="16px"> | ||
| <Card data-testid="session-info-card-text"> | ||
| <Text as="span" fontWeight="bold"> | ||
| {name} | ||
| </Text> | ||
| <Text size="md">wants to {intention ?? "connect"}</Text> | ||
| </Card> | ||
| </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> | ||
| ); | ||
| }; |
149 changes: 149 additions & 0 deletions
149
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,149 @@ | ||
| import { type NetworkType } from "@airgap/beacon-wallet"; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Card, | ||
| Divider, | ||
| FormControl, | ||
| FormErrorMessage, | ||
| HStack, | ||
| Icon, | ||
| ModalBody, | ||
| ModalContent, | ||
| ModalFooter, | ||
| Text, | ||
| VStack, | ||
| } from "@chakra-ui/react"; | ||
| import { type WalletKitTypes } from "@reown/walletkit"; | ||
| import { useDynamicModalContext } from "@umami/components"; | ||
| import { useAsyncActionHandler, useGetImplicitAccount, walletKit } from "@umami/state"; | ||
| import { type SessionTypes } from "@walletconnect/types"; | ||
| import { buildApprovedNamespaces, getSdkError } from "@walletconnect/utils"; | ||
| import { FormProvider, useForm } from "react-hook-form"; | ||
|
|
||
| import { CheckmarkIcon, CloseIcon } from "../../assets/icons"; | ||
| import { OwnedImplicitAccountsAutocomplete } from "../AddressAutocomplete"; | ||
| import { ProjectInfoCard } from "./ProjectInfoCard"; | ||
| import { VerifyInfobox } from "./VerifyInfobox"; | ||
| import { useColor } from "../../styles/useColor"; | ||
|
|
||
| export const SessionProposalModal = ({ | ||
| proposal, | ||
| network, | ||
| }: { | ||
| proposal: WalletKitTypes.SessionProposal; | ||
| network: NetworkType; | ||
| }) => { | ||
| const getAccount = useGetImplicitAccount(); | ||
| const color = useColor(); | ||
|
|
||
| const { onClose } = useDynamicModalContext(); | ||
| const { isLoading, handleAsyncAction } = useAsyncActionHandler(); | ||
|
|
||
| const form = useForm<{ address: string }>({ | ||
| mode: "onBlur", | ||
| }); | ||
| const { | ||
| getValues, | ||
| formState: { errors, isValid }, | ||
| } = form; | ||
|
|
||
| const onApprove = () => | ||
| handleAsyncAction(async () => { | ||
| const account = getAccount(getValues("address")); | ||
|
|
||
| // prepare the list of accounts and networks to approve | ||
| const namespaces = buildApprovedNamespaces({ | ||
| proposal: proposal.params, | ||
| supportedNamespaces: { | ||
| tezos: { | ||
| chains: [network], | ||
| methods: ["tezos_getAccounts", "tezos_sign", "tezos_send"], | ||
| events: [], | ||
| accounts: [`${network}:${account.address.pkh}`], | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const session: SessionTypes.Struct = await walletKit.approveSession({ | ||
| id: proposal.id, | ||
| namespaces, | ||
| sessionProperties: {}, | ||
| }); | ||
| console.log("WC session approved", session); | ||
| onClose(); | ||
| }); | ||
|
|
||
| const onReject = () => | ||
| handleAsyncAction(async () => { | ||
| // close immediately assuming that the user wants to get rid of the modal | ||
| onClose(); | ||
| await walletKit.rejectSession({ | ||
| id: proposal.id, | ||
| reason: getSdkError("USER_REJECTED_METHODS"), | ||
| }); | ||
| }); | ||
|
|
||
| return ( | ||
| <FormProvider {...form}> | ||
| <ModalContent> | ||
| <ModalBody> | ||
| <Card> | ||
| <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={color("500")}> | ||
| <Icon as={CloseIcon} /> | ||
| <Card marginLeft="8px">Move funds without permission</Card> | ||
| </HStack> | ||
| </VStack> | ||
|
|
||
| <Box marginTop="8px"> | ||
| <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={color("500")}> | ||
| Network: | ||
| </Text> | ||
| <Text marginLeft="8px">{network}</Text> | ||
| </Box> | ||
| <Divider /> | ||
| <VerifyInfobox /> | ||
| </Card> | ||
| </ModalBody> | ||
| <ModalFooter> | ||
| <Button width="100%" isDisabled={isLoading} onClick={onReject} size="lg"> | ||
| Reject | ||
| </Button> | ||
| <Button | ||
| width="100%" | ||
| isDisabled={!isValid} | ||
| isLoading={isLoading} | ||
| 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.