feat: connect button on front page

apps/web/src/assets/icons/index.ts

@@ -52,6 +52,7 @@ export { default as PencilIcon } from "./pencil.svg";
 export { default as PlusIcon } from "./plus.svg";
 export { default as PlusCircleIcon } from "./plus-circle.svg";
 export { default as PyramidIcon } from "./pyramid.svg";
+export { default as QRCodeIcon } from "./qrcode.svg";
 export { default as RefreshIcon } from "./refresh.svg";
 export { default as RadioIcon } from "./radio.svg";
 export { default as RedditIcon } from "./reddit.svg";

apps/web/src/components/AccountCard/AccountButtons.test.tsx

@@ -67,6 +67,12 @@ describe("<AccountButtons />", () => {
     expect(screen.getByRole("button", { name: "Receive" })).toBeVisible();
   });
 
+  it("renders a connect button", () => {
+    render(<AccountButtons />, { store });
+
+    expect(screen.getByRole("button", { name: "Connect" })).toBeVisible();
+  });
+
   describe("renders a send button", () => {
     it("if user has enough balance", async () => {
       const user = userEvent.setup();
@@ -121,7 +127,7 @@ describe("<AccountButtons />", () => {
       );
     });
 
-    it.each(["Buy", "Send", "Receive"])("%s button is disabled", buttonName => {
+    it.each(["Buy", "Connect", "Send", "Receive"])("%s button is disabled", buttonName => {
       render(<AccountButtons />, { store });
 
       const button = screen.getByLabelText(buttonName);

apps/web/src/components/AccountCard/AccountButtons.tsx

@@ -1,19 +1,22 @@
 import { Box, Flex, Link } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
-import { useBuyTezUrl, useCurrentAccount } from "@umami/state";
+import { useAddPeer, useBuyTezUrl, useCurrentAccount } from "@umami/state";
 
 import { SendTezButton } from "./SendTezButton";
-import { ArrowDownLeftIcon, WalletIcon } from "../../assets/icons";
+import { ArrowDownLeftIcon, QRCodeIcon, WalletIcon } from "../../assets/icons";
 import { AccountInfoModal } from "../AccountSelectorModal";
 import { IconButtonWithText } from "../IconButtonWithText";
 import { useIsAccountVerified } from "../Onboarding/VerificationFlow";
+import { useOnWalletConnect } from "../WalletConnect";
 
 export const AccountButtons = () => {
   const { openWith } = useDynamicModalContext();
   const currentAccount = useCurrentAccount()!;
   const address = currentAccount.address.pkh;
   const buyTezUrl = useBuyTezUrl(address);
   const isVerified = useIsAccountVerified();
+  const onBeaconConnect = useAddPeer();
+  const onWalletConnect = useOnWalletConnect();
 
   return (
     <Box data-testid="account-buttons" paddingX="12px">
@@ -33,6 +36,19 @@ export const AccountButtons = () => {
           variant="iconButtonSolid"
         />
         <Flex gap="24px">
+          <IconButtonWithText
+            icon={QRCodeIcon}
+            isDisabled={!isVerified}
+            label="Connect"
+            onClick={() =>
+              navigator.clipboard
+                .readText()
+                .then(payload =>
+                  payload.startsWith("wc:") ? onWalletConnect(payload) : onBeaconConnect(payload)
+                )
+            }
+            variant="iconButtonSolid"
+          />
           <IconButtonWithText
             icon={ArrowDownLeftIcon}
             isDisabled={!isVerified}

packages/state/src/hooks/beacon.ts

@@ -110,10 +110,10 @@ export const useAddPeer = () => {
       .then(parsePeerInfo)
       .then(peer => WalletClient.addPeer(peer as ExtendedPeerInfo))
       .then(() => refresh())
-      .catch(e => {
+      .catch(() => {
         const description =
-          "Beacon sync code in the clipboard is invalid. Please copy a beacon sync code from the dApp";
-        const type = "error";
+          "To connect, open the dApp’s connect menu and copy the QR code. Look for a Beacon or WalletConnect option.";
+        const type = "info";
 
         toast.show
           ? toast.show({
@@ -124,7 +124,5 @@ export const useAddPeer = () => {
               description,
               status: type,
             });
-
-        console.error(e);
       });
 };