diff --git a/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx b/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx index 7def3c8f69..80ca2bf2ab 100644 --- a/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx +++ b/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx @@ -11,7 +11,6 @@ import { type CalculatedSignProps, type SdkSignPageProps } from "../utils"; export const useSignWithBeacon = ({ operation, headerProps, - requestId, }: SdkSignPageProps): CalculatedSignProps => { const { isLoading: isSigning, handleAsyncAction } = useAsyncActionHandler(); const { openWith } = useDynamicModalContext(); @@ -28,7 +27,7 @@ export const useSignWithBeacon = ({ const response: OperationResponseInput = { type: BeaconMessageType.OperationResponse, - id: requestId.id.toString(), + id: headerProps.requestId.id.toString(), transactionHash: opHash, }; await WalletClient.respond(response); diff --git a/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx b/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx index 809c9e7a31..71ce454142 100644 --- a/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx +++ b/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx @@ -11,12 +11,12 @@ 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 } }); + const requestId = headerProps.requestId; if (requestId.sdkType !== "walletconnect") { return { diff --git a/apps/web/src/components/SendFlow/common/BatchSignPage.tsx b/apps/web/src/components/SendFlow/common/BatchSignPage.tsx index eee5749c08..b80e8ea1a3 100644 --- a/apps/web/src/components/SendFlow/common/BatchSignPage.tsx +++ b/apps/web/src/components/SendFlow/common/BatchSignPage.tsx @@ -34,7 +34,9 @@ export const BatchSignPage = ( const beaconCalculatedProps = useSignWithBeacon({ ...signProps }); const walletConnectCalculatedProps = useSignWithWalletConnect({ ...signProps }); const calculatedProps = - signProps.requestId.sdkType === "beacon" ? beaconCalculatedProps : walletConnectCalculatedProps; + signProps.headerProps.requestId.sdkType === "beacon" + ? beaconCalculatedProps + : walletConnectCalculatedProps; const { isSigning, onSign, network, fee } = calculatedProps; const { signer, operations } = signProps.operation; diff --git a/apps/web/src/components/SendFlow/common/Header.tsx b/apps/web/src/components/SendFlow/common/Header.tsx index c032a227d6..c806f31567 100644 --- a/apps/web/src/components/SendFlow/common/Header.tsx +++ b/apps/web/src/components/SendFlow/common/Header.tsx @@ -3,6 +3,7 @@ import { capitalize } from "lodash"; import { CodeSandboxIcon } from "../../../assets/icons"; import { useColor } from "../../../styles/useColor"; +import { VerifyInfobox } from "../../WalletConnect/VerifyInfobox"; import { SignPageHeader } from "../SignPageHeader"; import { type SignHeaderProps } from "../utils"; @@ -10,33 +11,41 @@ export const Header = ({ headerProps }: { headerProps: SignHeaderProps }) => { const color = useColor(); return ( - - - - Network: - - - {capitalize(headerProps.network.name)} - - + <> + + + + Network: + + + {capitalize(headerProps.network.name)} + + - - - } - src={headerProps.appIcon} - /> - - {headerProps.appName} - - + + + } + src={headerProps.appIcon} + /> + + {headerProps.appName} + + + {headerProps.requestId.sdkType === "walletconnect" ? ( + + ) : null} + ); }; diff --git a/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx b/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx index b9f4f89e9a..c54e81238c 100644 --- a/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx +++ b/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx @@ -35,11 +35,11 @@ const headerProps: SignHeaderProps = { network: GHOSTNET, appName: message.appMetadata.name, appIcon: message.appMetadata.icon, + requestId: { sdkType: "beacon", id: message.id }, }; const signProps: SdkSignPageProps = { headerProps: headerProps, operation: operation, - requestId: { sdkType: "beacon", id: message.id }, }; jest.mock("@umami/core", () => ({ diff --git a/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx b/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx index 1f61a0ebe2..7bc25ac05d 100644 --- a/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx +++ b/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx @@ -81,6 +81,7 @@ describe("", () => { network: GHOSTNET, appName: message.appMetadata.name, appIcon: message.appMetadata.icon, + requestId: { sdkType: "beacon", id: message.id }, }; store.dispatch(networksActions.setCurrent(GHOSTNET)); @@ -89,7 +90,6 @@ describe("", () => { const signProps: SdkSignPageProps = { headerProps: headerProps, operation: operation, - requestId: { sdkType: "beacon", id: message.id }, }; jest.mocked(useGetSecretKey).mockImplementation(() => () => Promise.resolve("secretKey")); diff --git a/apps/web/src/components/SendFlow/common/SingleSignPage.tsx b/apps/web/src/components/SendFlow/common/SingleSignPage.tsx index 5c35f7addf..2716600398 100644 --- a/apps/web/src/components/SendFlow/common/SingleSignPage.tsx +++ b/apps/web/src/components/SendFlow/common/SingleSignPage.tsx @@ -18,7 +18,9 @@ export const SingleSignPage = (signProps: SdkSignPageProps) => { const beaconCalculatedProps = useSignWithBeacon({ ...signProps }); const walletConnectCalculatedProps = useSignWithWalletConnect({ ...signProps }); const calculatedProps = - signProps.requestId.sdkType === "beacon" ? beaconCalculatedProps : walletConnectCalculatedProps; + signProps.headerProps.requestId.sdkType === "beacon" + ? beaconCalculatedProps + : walletConnectCalculatedProps; switch (operationType) { case "tez": { diff --git a/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx b/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx index 538ff08fa2..407e910d68 100644 --- a/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx +++ b/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx @@ -55,11 +55,11 @@ describe("", () => { network: GHOSTNET, appName: message.appMetadata.name, appIcon: message.appMetadata.icon, + requestId: { sdkType: "beacon", id: message.id }, }; const signProps: SdkSignPageProps = { headerProps: headerProps, operation: operation, - requestId: { sdkType: "beacon", id: message.id }, }; store.dispatch(networksActions.setCurrent(GHOSTNET)); @@ -73,6 +73,8 @@ describe("", () => { expect(screen.getByText("Ghostnet")).toBeInTheDocument(); expect(screen.queryByText("Mainnet")).not.toBeInTheDocument(); + expect(screen.queryByText("verifyinfobox")).not.toBeInTheDocument(); + const signButton = screen.getByRole("button", { name: "Confirm Transaction", }); diff --git a/apps/web/src/components/SendFlow/utils.tsx b/apps/web/src/components/SendFlow/utils.tsx index a2c639c54d..2b77f88f7f 100644 --- a/apps/web/src/components/SendFlow/utils.tsx +++ b/apps/web/src/components/SendFlow/utils.tsx @@ -1,3 +1,4 @@ +import { type SigningType } from "@airgap/beacon-wallet"; import { Button, type ButtonProps } from "@chakra-ui/react"; import { type TezosToolkit } from "@taquito/taquito"; import { useDynamicModalContext } from "@umami/components"; @@ -5,6 +6,7 @@ import { type Account, type AccountOperations, type EstimatedAccountOperations, + type ImplicitAccount, type Operation, estimate, executeOperations, @@ -74,14 +76,27 @@ export type SignHeaderProps = { network: Network; appName: string; appIcon?: string; + isScam?: boolean; + validationStatus?: "VALID" | "INVALID" | "UNKNOWN"; + requestId: SignRequestId; }; export type SdkSignPageProps = { - requestId: SignRequestId; operation: EstimatedAccountOperations; headerProps: SignHeaderProps; }; +export type SignPayloadProps = { + requestId: SignRequestId; + appName: string; + appIcon?: string; + payload: string; + isScam?: boolean; + validationStatus?: "VALID" | "INVALID" | "UNKNOWN"; + signer: ImplicitAccount; + signingType: SigningType; +}; + export const FormSubmitButton = ({ title = "Preview", ...props }: ButtonProps) => { const { formState: { isValid }, diff --git a/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx b/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx index 78cc0ce66e..04b850952d 100644 --- a/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx +++ b/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx @@ -1,8 +1,6 @@ -import { Avatar, Box, Card, Flex, Icon, Link, Text } from "@chakra-ui/react"; +import { Avatar, Box, Card, Link, Text } from "@chakra-ui/react"; import { type SignClientTypes } from "@walletconnect/types"; -import { PencilIcon } from "../../assets/icons"; - type Props = { metadata: SignClientTypes.Metadata; intention?: string; @@ -38,10 +36,6 @@ export const ProjectInfoCard = ({ metadata, intention }: Props) => { {url} - - - Cannot Verify: to be implemented - ); }; diff --git a/apps/web/src/components/WalletConnect/SessionProposalModal.tsx b/apps/web/src/components/WalletConnect/SessionProposalModal.tsx index 0122248b56..91b7c4c188 100644 --- a/apps/web/src/components/WalletConnect/SessionProposalModal.tsx +++ b/apps/web/src/components/WalletConnect/SessionProposalModal.tsx @@ -22,7 +22,7 @@ import { useToggleWcPeerListUpdated, walletKit, } from "@umami/state"; -import { type SessionTypes } from "@walletconnect/types"; +import { type SessionTypes, type Verify } from "@walletconnect/types"; import { buildApprovedNamespaces, getSdkError } from "@walletconnect/utils"; import { FormProvider, useForm } from "react-hook-form"; @@ -46,6 +46,10 @@ export const SessionProposalModal = ({ const { onClose } = useDynamicModalContext(); const { isLoading, handleAsyncAction } = useAsyncActionHandler(); + const verifyContext: Verify.Context = proposal.verifyContext; + const isScam = verifyContext.verified.isScam ?? false; + const validationStatus = verifyContext.verified.validation; + const form = useForm<{ address: string }>({ mode: "onBlur", }); @@ -97,6 +101,7 @@ export const SessionProposalModal = ({ + Requested permissions @@ -132,7 +137,6 @@ export const SessionProposalModal = ({ {network} - @@ -141,7 +145,7 @@ export const SessionProposalModal = ({