feat: add qr code dialog and use peer-connect lib

cardano-foundation · Mar 17, 2023 · b7f3ef8 · b7f3ef8
1 parent 1e26409
commit b7f3ef8
Show file tree

Hide file tree

Showing 7 changed files with 32,042 additions and 23,724 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,9 +1,11 @@
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: '@storybook/react',
-};
+  core: {
+    builder: '@storybook/builder-webpack5'
+  },
+  docs: {
+    autodocs: true
+  }
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,8 @@
   "license": "Apache-2.0",
   "description": "This package aims to provide useful hooks and React components to simplify the cardano dapp integration",
   "dependencies": {
+    "@fabianbormann/cardano-peer-connect": "^1.2.2",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@types/node": "^18.15.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -41,6 +43,7 @@
     "@storybook/addon-interactions": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack4": "^6.5.16",
     "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
@@ -50,6 +53,7 @@
     "react-dom": ">=18.2.0",
     "rollup": "^3.19.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.34.1"
+    "rollup-plugin-typescript2": "^0.34.1",
+    "webpack": "^5.76.2"
   }
 }
diff --git a/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -19,6 +19,9 @@ import {
   estimateAvailableWallets,
   WalletExtensionNotFoundError,
 } from '../../utils/common';
+import { DAppPeerConnect } from '@fabianbormann/cardano-peer-connect';
+import { useEffect, useRef, useState } from 'react';
+import ModalDialog from '../ModalDialog/ModalDialog';
 
 const ConnectWalletButton = ({
   label,
@@ -49,6 +52,8 @@ const ConnectWalletButton = ({
   onSignMessage,
   onStakeAddressClick,
   onConnectError,
+  dAppName = 'Awesome DApp',
+  dAppUrl = 'http://awesome-dapp-url.tld/',
 }: ConnectWalletButtonProps) => {
   const {
     isEnabled,
@@ -61,6 +66,48 @@ const ConnectWalletButton = ({
     enabledWallet,
   } = useCardano({ limitNetwork: limitNetwork });
 
+  const dAppConnect = useRef<null | DAppPeerConnect>(null);
+  const [meerkatAddress, setMeerkatAddress] = useState('');
+  const [showModalDialog, setShowModalDialog] = useState(false);
+
+  useEffect(() => {
+    if (peerConnectEnabled && dAppConnect.current === null) {
+      const verifyConnection = (
+        walletInfo: any,
+        callback: (granted: boolean, allowAutoConnect: boolean) => void
+      ) => {
+        callback(
+          window.confirm(
+            `Do you want to connect to wallet ${walletInfo.address}?`
+          ),
+          true
+        );
+      };
+
+      const onApiInject = (name: string, address: string) => {
+        connect(name);
+      };
+
+      const onApiEject = (name: string, address: string) => {
+        disconnect();
+      };
+
+      dAppConnect.current = new DAppPeerConnect({
+        dAppInfo: {
+          name: dAppName,
+          url: dAppUrl,
+        },
+        verifyConnection: verifyConnection,
+        onApiInject: onApiInject,
+        onApiEject: onApiEject,
+      });
+
+      dAppConnect.current.generateIdenticon();
+
+      setMeerkatAddress(dAppConnect.current.getAddress());
+    }
+  }, []);
+
   const mobileWallets = ['flint'];
   const isMobile = checkIsMobile();
   const availableWallets = estimateAvailableWallets(
@@ -174,7 +221,7 @@ const ConnectWalletButton = ({
           borderRadius={borderRadius}
           primaryColor={themeColorObject.hex()}
           primaryColorLight={themeColorObject.mix(Color('white'), 0.9).hex()}
-          onClick={() => alert(5)}
+          onClick={() => setShowModalDialog(true)}
         >
           <MenuItemIcon src={getWalletIcon('peer-connect')} />
           Link Wallet
@@ -279,6 +326,14 @@ const ConnectWalletButton = ({
       customCSS={customCSS}
       primaryColor={themeColorObject.hex()}
     >
+      {peerConnectEnabled && (
+        <ModalDialog
+          handleClose={() => setShowModalDialog(false)}
+          content={meerkatAddress}
+          icon={dAppConnect.current?.getIdenticon()}
+          visible={showModalDialog}
+        />
+      )}
       <Button
         id="connect-wallet-button"
         onClick={clickStakeAddress}

diff --git a/src/components/ModalDialog/ModalDialog.tsx b/src/components/ModalDialog/ModalDialog.tsx
@@ -1,11 +1,32 @@
 import { ModalDialogProps } from '../../global';
 import { Modal, ModalContent } from './StyledDialogElements';
+import { QRCode } from 'react-qrcode-logo';
 
 const ModalDialog = (props: ModalDialogProps) => {
+  const { visible, content, handleClose, icon } = props;
+
   return (
-    <Modal>
+    <Modal
+      onClick={() => {
+        if (typeof handleClose === 'function') {
+          handleClose();
+        }
+      }}
+      style={{ display: visible ? 'block' : 'none' }}
+    >
       <ModalContent>
-        <p>{props.content}</p>
+        <QRCode
+          removeQrCodeBehindLogo={true}
+          logoImage={icon ? icon : undefined}
+          ecLevel="H"
+          eyeRadius={5}
+          qrStyle="dots"
+          value={content}
+        />
+        <p style={{ maxWidth: 300 }}>
+          You can use a CIP45 compliant mobile wallet on your smartphone (e.g.
+          Eternl) to connect an external peer to peer wallet
+        </p>
       </ModalContent>
     </Modal>
   );

diff --git a/src/components/ModalDialog/StyledDialogElements.tsx b/src/components/ModalDialog/StyledDialogElements.tsx
@@ -17,6 +17,9 @@ export const ModalContent = styled.div`
   margin: 15% auto;
   padding: 20px;
   border: 1px solid #aeaeae;
-  border-radius: 3px;
+  border-radius: 9px;
   width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
diff --git a/src/global/types.ts b/src/global/types.ts
@@ -30,6 +30,8 @@ export type ConnectWalletButtonProps = {
   hideActionMenu?: boolean;
   limitNetwork?: NetworkType;
   peerConnectEnabled?: boolean;
+  dAppUrl?: string;
+  dAppName?: string;
   onConnect?: (walletName: string) => void;
   onDisconnect?: () => void;
   onSignMessage?: (signature: string, key: string | undefined) => void;
@@ -51,7 +53,10 @@ export type ConnectWalletListProps = {
 };
 
 export type ModalDialogProps = {
+  visible: boolean;
   content: string;
+  icon: undefined | string | null;
+  handleClose: () => void;
 };
 
 export interface CustomStyle {