feat: WalletConnect integration, request

requests are supported. Tested: - send tez - delegate / UndelegationSignPage - originate / call contract - stake / unstake / finalize unstake
trilitech · Nov 11, 2024 · 1bf9402 · 1bf9402
1 parent 8fbd220
commit 1bf9402
Show file tree

Hide file tree

Showing 17 changed files with 281 additions and 65 deletions.
diff --git a/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx b/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx
@@ -2,7 +2,7 @@ import { BeaconMessageType, type OperationResponseInput } from "@airgap/beacon-w
 import { type TezosToolkit } from "@taquito/taquito";
 import { useDynamicModalContext } from "@umami/components";
 import { executeOperations, totalFee } from "@umami/core";
-import { WalletClient, useAsyncActionHandler, useFindNetwork } from "@umami/state";
+import { WalletClient, useAsyncActionHandler } from "@umami/state";
 import { useForm } from "react-hook-form";
 
 import { SuccessStep } from "../SuccessStep";
@@ -15,7 +15,6 @@ export const useSignWithBeacon = ({
 }: SdkSignPageProps): CalculatedSignProps => {
   const { isLoading: isSigning, handleAsyncAction } = useAsyncActionHandler();
   const { openWith } = useDynamicModalContext();
-  const findNetwork = useFindNetwork();
 
   const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
@@ -45,7 +44,6 @@ export const useSignWithBeacon = ({
     fee: totalFee(form.watch("executeParams")),
     isSigning,
     onSign,
-    network: findNetwork(headerProps.networkName),
-    form,
+    network: headerProps.network,
   };
 };
diff --git a/apps/web/src/components/SendFlow/WalletConnect/useSignWithWc.tsx b/apps/web/src/components/SendFlow/WalletConnect/useSignWithWc.tsx
@@ -0,0 +1,53 @@
+import { type TezosToolkit } from "@taquito/taquito";
+import { useDynamicModalContext } from "@umami/components";
+import { executeOperations, totalFee } from "@umami/core";
+import { useAsyncActionHandler, walletKit } from "@umami/state";
+import { formatJsonRpcResult } from "@walletconnect/jsonrpc-utils";
+import { useForm } from "react-hook-form";
+
+import { SuccessStep } from "../SuccessStep";
+import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
+
+export const useSignWithWalletConnect = ({
+  operation,
+  headerProps,
+  requestId,
+}: SdkSignPageProps): CalculatedSignProps => {
+  const { isLoading: isSigning, handleAsyncAction } = useAsyncActionHandler();
+  const { openWith } = useDynamicModalContext();
+
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
+
+  if (requestId.sdkType !== "walletconnect") {
+    return {
+      fee: 0,
+      isSigning: false,
+      onSign: async () => {},
+      network: null,
+    };
+  }
+
+  const onSign = async (tezosToolkit: TezosToolkit) =>
+    handleAsyncAction(
+      async () => {
+        const { opHash } = await executeOperations(
+          { ...operation, estimates: form.watch("executeParams") },
+          tezosToolkit
+        );
+
+        const response = formatJsonRpcResult(requestId.id, { hash: opHash });
+        await walletKit.respondSessionRequest({ topic: requestId.topic, response });
+        return openWith(<SuccessStep hash={opHash} />);
+      },
+      error => ({
+        description: `Failed to confirm Beacon operation: ${error.message}`,
+      })
+    );
+
+  return {
+    fee: totalFee(form.watch("executeParams")),
+    isSigning,
+    onSign,
+    network: headerProps.network,
+  };
+};
diff --git a/apps/web/src/components/SendFlow/sdk/BatchSignPage.tsx b/apps/web/src/components/SendFlow/sdk/BatchSignPage.tsx
@@ -23,14 +23,18 @@ import { useSignWithBeacon } from "../Beacon/useSignWithBeacon";
 import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type SdkSignPageProps } from "../utils";
+import { useSignWithWalletConnect } from "../WalletConnect/useSignWithWc";
 
 export const BatchSignPage = (
   signProps: SdkSignPageProps,
   operationDetails: PartialTezosOperation[]
 ) => {
   const color = useColor();
 
-  const calculatedProps = useSignWithBeacon({ ...signProps });
+  const beaconCalculatedProps = useSignWithBeacon({ ...signProps });
+  const walletConnectCalculatedProps = useSignWithWalletConnect({ ...signProps });
+  const calculatedProps =
+    signProps.requestId.sdkType === "beacon" ? beaconCalculatedProps : walletConnectCalculatedProps;
 
   const { isSigning, onSign, network, fee, form } = calculatedProps;
   const { signer, operations } = signProps.operation;

diff --git a/apps/web/src/components/SendFlow/sdk/ContractCallSignPage.tsx b/apps/web/src/components/SendFlow/sdk/ContractCallSignPage.tsx
@@ -12,7 +12,7 @@ import {
   ModalFooter,
 } from "@chakra-ui/react";
 import { type ContractCall } from "@umami/core";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Header } from "./Header";
 import { useColor } from "../../../styles/useColor";
@@ -24,18 +24,22 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const ContractCallSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
+export const ContractCallSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
   const {
     amount: mutezAmount,
     contract,
     entrypoint,
     args,
   } = operation.operations[0] as ContractCall;
   const color = useColor();
-  const { isSigning, onSign, network, fee, form } = calculatedSignProps;
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
   return (
     <FormProvider {...form}>

diff --git a/apps/web/src/components/SendFlow/sdk/DelegationSignPage.tsx b/apps/web/src/components/SendFlow/sdk/DelegationSignPage.tsx
@@ -1,6 +1,6 @@
 import { Flex, FormLabel, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react";
 import { type Delegation } from "@umami/core";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Header } from "./Header";
 import { AddressTile } from "../../AddressTile/AddressTile";
@@ -9,13 +9,17 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const DelegationSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
+export const DelegationSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
   const { recipient } = operation.operations[0] as Delegation;
 
-  const { isSigning, onSign, network, fee, form } = calculatedSignProps;
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
   return (
     <FormProvider {...form}>

diff --git a/apps/web/src/components/SendFlow/sdk/FinalizeUnstakeSignPage.tsx b/apps/web/src/components/SendFlow/sdk/FinalizeUnstakeSignPage.tsx
@@ -1,6 +1,6 @@
 import { Flex, FormLabel, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react";
 import { useAccountTotalFinalizableUnstakeAmount } from "@umami/state";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Header } from "./Header";
 import { AddressTile } from "../../AddressTile/AddressTile";
@@ -9,11 +9,15 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const FinalizeUnstakeSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
-  const { isSigning, onSign, network, fee, form } = calculatedSignProps;
+export const FinalizeUnstakeSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
   const totalFinalizableAmount = useAccountTotalFinalizableUnstakeAmount(
     operation.signer.address.pkh
   );

diff --git a/apps/web/src/components/SendFlow/sdk/Header.tsx b/apps/web/src/components/SendFlow/sdk/Header.tsx
@@ -16,7 +16,7 @@ export const Header = ({ headerProps }: { headerProps: SignHeaderProps }) => {
           Network:
         </Heading>
         <Text color={color("700")} fontWeight="400" size="sm">
-          {capitalize(headerProps.networkName)}
+          {capitalize(headerProps.network.name)}
         </Text>
       </Flex>
 

diff --git a/apps/web/src/components/SendFlow/sdk/OriginationOperationSignPage.tsx b/apps/web/src/components/SendFlow/sdk/OriginationOperationSignPage.tsx
@@ -17,7 +17,7 @@ import {
 } from "@chakra-ui/react";
 import { type ContractOrigination } from "@umami/core";
 import { capitalize } from "lodash";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { CodeSandboxIcon } from "../../../assets/icons";
 import { useColor } from "../../../styles/useColor";
@@ -27,13 +27,17 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const OriginationOperationSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
-  const { isSigning, onSign, network, form, fee } = calculatedSignProps;
+export const OriginationOperationSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
   const color = useColor();
   const { code, storage } = operation.operations[0] as ContractOrigination;
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
   return (
     <FormProvider {...form}>
@@ -48,7 +52,7 @@ export const OriginationOperationSignPage = (
                 Network:
               </Heading>
               <Text color={color("700")} fontWeight="400" size="sm">
-                {capitalize(headerProps.networkName)}
+                {capitalize(headerProps.network.name)}
               </Text>
             </Flex>
           </ModalHeader>

diff --git a/apps/web/src/components/SendFlow/sdk/SingleSignPage.tsx b/apps/web/src/components/SendFlow/sdk/SingleSignPage.tsx
@@ -8,11 +8,16 @@ import { TezSignPage } from "./TezSignPage";
 import { UndelegationSignPage } from "./UndelegationSignPage";
 import { UnstakeSignPage } from "./UnstakeSignPage";
 import { useSignWithBeacon } from "../Beacon/useSignWithBeacon";
+import { useSignWithWalletConnect } from "../WalletConnect/useSignWithWc";
 
 export const SingleSignPage = (signProps: SdkSignPageProps) => {
   const operationType = signProps.operation.operations[0].type;
 
-  const calculatedProps = useSignWithBeacon({ ...signProps });
+  const beaconCalculatedProps = useSignWithBeacon({ ...signProps });
+  const walletConnectCalculatedProps = useSignWithWalletConnect({ ...signProps });
+  const calculatedProps =
+    signProps.requestId.sdkType === "beacon" ? beaconCalculatedProps : walletConnectCalculatedProps;
+  console.log("SingleSignPage, signProps, calculatedProps", signProps, calculatedProps);
 
   switch (operationType) {
     case "tez": {

diff --git a/apps/web/src/components/SendFlow/sdk/StakeSignPage.tsx b/apps/web/src/components/SendFlow/sdk/StakeSignPage.tsx
@@ -1,6 +1,6 @@
 import { Flex, FormLabel, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react";
 import { type Stake } from "@umami/core";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Header } from "./Header";
 import { AddressTile } from "../../AddressTile/AddressTile";
@@ -9,13 +9,17 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const StakeSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
+export const StakeSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
   const { amount: mutezAmount } = operation.operations[0] as Stake;
 
-  const { isSigning, onSign, network, fee, form } = calculatedSignProps;
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
   return (
     <FormProvider {...form}>

diff --git a/apps/web/src/components/SendFlow/sdk/TezSignPage.tsx b/apps/web/src/components/SendFlow/sdk/TezSignPage.tsx
@@ -1,6 +1,6 @@
 import { Flex, FormLabel, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react";
 import { type TezTransfer } from "@umami/core";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Header } from "./Header";
 import { AddressTile } from "../../AddressTile/AddressTile";
@@ -10,13 +10,16 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const TezSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
+export const TezSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
   const { amount: mutezAmount, recipient } = operation.operations[0] as TezTransfer;
-
-  const { isSigning, onSign, network, fee, form } = calculatedSignProps;
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
   return (
     <FormProvider {...form}>

diff --git a/apps/web/src/components/SendFlow/sdk/UndelegationSignPage.tsx b/apps/web/src/components/SendFlow/sdk/UndelegationSignPage.tsx
@@ -1,5 +1,5 @@
 import { Flex, FormLabel, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Header } from "./Header";
 import { AddressTile } from "../../AddressTile/AddressTile";
@@ -8,11 +8,15 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const UndelegationSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
-  const { isSigning, onSign, network, form, fee } = calculatedSignProps;
+export const UndelegationSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
   return (
     <FormProvider {...form}>

diff --git a/apps/web/src/components/SendFlow/sdk/UnstakeSignPage.tsx b/apps/web/src/components/SendFlow/sdk/UnstakeSignPage.tsx
@@ -1,6 +1,6 @@
 import { Flex, FormLabel, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react";
 import { type Unstake } from "@umami/core";
-import { FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Header } from "./Header";
 import { AddressTile } from "../../AddressTile/AddressTile";
@@ -9,13 +9,17 @@ import { SignButton } from "../SignButton";
 import { SignPageFee } from "../SignPageFee";
 import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 
-export const UnstakeSignPage = (
-  { operation, headerProps }: SdkSignPageProps,
-  calculatedSignProps: CalculatedSignProps
-) => {
+export const UnstakeSignPage = ({
+  operation,
+  headerProps,
+  isSigning,
+  onSign,
+  network,
+  fee,
+}: SdkSignPageProps & CalculatedSignProps) => {
   const { amount: mutezAmount } = operation.operations[0] as Unstake;
 
-  const { isSigning, onSign, network, fee, form } = calculatedSignProps;
+  const form = useForm({ defaultValues: { executeParams: operation.estimates } });
 
   return (
     <FormProvider {...form}>