feat: WalletConnect integration, request

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

Hide file tree

Showing 19 changed files with 199 additions and 297 deletions.
diff --git a/apps/desktop/src/Router.tsx b/apps/desktop/src/Router.tsx
@@ -1,12 +1,7 @@
 /* istanbul ignore file */
 import { DynamicModalContext, useDynamicModal } from "@umami/components";
 import { useDataPolling } from "@umami/data-polling";
-import {
-  WalletClient,
-  useImplicitAccounts,
-  useResetBeaconConnections,
-  useResetWcConnections,
-} from "@umami/state";
+import { WalletClient, useImplicitAccounts, useResetBeaconConnections } from "@umami/state";
 import { noop } from "lodash";
 import { useEffect } from "react";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
@@ -65,12 +60,10 @@ const LoggedInRouterWithPolling = () => {
 
 const LoggedOutRouter = () => {
   const resetBeaconConnections = useResetBeaconConnections();
-  const resetWcConnections = useResetWcConnections();
 
   useEffect(() => {
     WalletClient.destroy().then(resetBeaconConnections).catch(noop);
-    resetWcConnections();
-  }, [resetBeaconConnections, resetWcConnections]);
+  }, [resetBeaconConnections]);
 
   return (
     <HashRouter>

diff --git a/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx b/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx
@@ -45,6 +45,5 @@ export const useSignWithBeacon = ({
     isSigning,
     onSign,
     network: headerProps.network,
-    form,
   };
 };
diff --git a/apps/web/src/components/SendFlow/WalletConnect/useSignWithWc.tsx b/apps/web/src/components/SendFlow/WalletConnect/useSignWithWc.tsx
@@ -24,7 +24,6 @@ export const useSignWithWalletConnect = ({
       isSigning: false,
       onSign: async () => {},
       network: null,
-      form,
     };
   }
 
@@ -50,6 +49,5 @@ export const useSignWithWalletConnect = ({
     isSigning,
     onSign,
     network: headerProps.network,
-    form,
   };
 };
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/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
@@ -17,6 +17,7 @@ export const SingleSignPage = (signProps: SdkSignPageProps) => {
   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}>

diff --git a/apps/web/src/components/SendFlow/utils.tsx b/apps/web/src/components/SendFlow/utils.tsx
@@ -55,7 +55,6 @@ export type CalculatedSignProps = {
   isSigning: boolean;
   onSign: (tezosToolkit: TezosToolkit) => Promise<void>;
   network: any;
-  form: any;
 };
 
 export type sdkType = "beacon" | "walletconnect";

diff --git a/apps/web/src/components/WalletConnect/SessionProposalModal.tsx b/apps/web/src/components/WalletConnect/SessionProposalModal.tsx
@@ -17,13 +17,11 @@ import {
 import { type WalletKitTypes } from "@reown/walletkit";
 import { useDynamicModalContext } from "@umami/components";
 import {
-  useAddWcConnection,
   useAsyncActionHandler,
   useGetImplicitAccount,
-  useWcPeers,
+  useToggleWcPeerListUpdated,
   walletKit,
 } from "@umami/state";
-import { type NetworkName } from "@umami/tezos";
 import { type SessionTypes } from "@walletconnect/types";
 import { buildApprovedNamespaces, getSdkError } from "@walletconnect/utils";
 import { FormProvider, useForm } from "react-hook-form";
@@ -40,9 +38,9 @@ export const SessionProposalModal = ({
   proposal: WalletKitTypes.SessionProposal;
   network: NetworkType;
 }) => {
-  const addConnectionToWcSlice = useAddWcConnection();
+  // const addWcTopicToAcc = useAddWcTopicToAcc();
   const getAccount = useGetImplicitAccount();
-  const { refresh } = useWcPeers();
+  const toggleWcPeerListUpdated = useToggleWcPeerListUpdated();
 
   const { onClose } = useDynamicModalContext();
   const { isLoading, handleAsyncAction } = useAsyncActionHandler();
@@ -77,8 +75,8 @@ export const SessionProposalModal = ({
         namespaces,
         sessionProperties: {},
       });
-      await addConnectionToWcSlice(session, account.address.pkh, network.split(":")[1] as NetworkName);
-      await refresh();
+      console.log("Approved session", session);
+      toggleWcPeerListUpdated();
       onClose();
     });
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,6 +45,5 @@ export const useSignWithBeacon = ({ @@
         isSigning,
         onSign,
         network: headerProps.network,
-        form,
       };
     };