feat: implement walletconnect and scan qr code

dapp/App.tsx

@@ -29,11 +29,13 @@ import {
   Text,
   Select,
 } from '@chakra-ui/react';
-import { nanoid } from 'nanoid';
+import { SessionTypes } from '@walletconnect/types';
+import { Web3ModalSign, useConnect } from '@web3modal/sign-react';
 import React, { ChangeEvent, FC, useEffect, useState } from 'react';
 
 // Components
 import Fonts from '@extension/components/Fonts';
+import WalletConnectIcon from '@extension/components/WalletConnectIcon';
 
 // Config
 import { networks } from '@extension/config';
@@ -64,6 +66,16 @@ const App: FC = () => {
     isClosable: true,
     position: 'top',
   });
+  const { connect } = useConnect({
+    requiredNamespaces: {
+      algorand: {
+        chains: ['algorand:SGO1GKSzyE7IEPItTxCByw9x8FmnrCDe'], // testnet
+        events: [],
+        methods: ['algorand_signTransaction', 'algorand_signMessage'],
+      },
+    },
+  });
+  // states
   const [enabledAccounts, setEnabledAccounts] = useState<IAccountInformation[]>(
     []
   );
@@ -130,6 +142,11 @@ const App: FC = () => {
       });
     }
   };
+  const handleWalletConnectClick = async () => {
+    const data: SessionTypes.Struct = await connect();
+
+    console.log(data);
+  };
 
   useEffect(() => {
     if (enabledAccounts) {
@@ -140,6 +157,20 @@ const App: FC = () => {
   return (
     <ChakraProvider theme={theme}>
       <Fonts />
+      <Web3ModalSign
+        metadata={{
+          description: 'The Kibisis dApp example',
+          icons: [
+            `${window.location.protocol}//${window.location.host}/favicon.png`,
+          ],
+          name: document.title,
+          url: 'https://kibis.is',
+        }}
+        modalOptions={{
+          explorerRecommendedWalletIds: 'NONE',
+        }}
+        projectId="0451c3741ac5a5eba94c213ee1073cb1"
+      />
       <Center as="main" backgroundColor="white">
         <Flex
           alignItems="center"
@@ -174,40 +205,54 @@ const App: FC = () => {
                   </Tr>
                 </Thead>
                 <Tbody>
-                  {enabledAccounts.map((value) => (
-                    <Tr key={nanoid()}>
+                  {enabledAccounts.map((value, index) => (
+                    <Tr key={`enabled-account-item-${index}`}>
                       <Td>{value.address}</Td>
                       <Td>{value.name || '-'}</Td>
                     </Tr>
                   ))}
                 </Tbody>
               </Table>
             </TableContainer>
+
             {/* Enable CTAs */}
-            <HStack justifyContent="center" spacing={2} w="full">
-              <Button
-                borderRadius={theme.radii['3xl']}
-                colorScheme="primaryLight"
-                minW={250}
-                onClick={handleEnableClick(
-                  'SGO1GKSzyE7IEPItTxCByw9x8FmnrCDexi9/cOUJOiI=' // algorand testnet
-                )}
-                size="lg"
-              >
-                Enable Algorand TestNet
-              </Button>
+            <VStack>
+              <HStack justifyContent="center" spacing={2} w="full">
+                <Button
+                  borderRadius={theme.radii['3xl']}
+                  colorScheme="primaryLight"
+                  minW={250}
+                  onClick={handleEnableClick(
+                    'SGO1GKSzyE7IEPItTxCByw9x8FmnrCDexi9/cOUJOiI=' // algorand testnet
+                  )}
+                  size="lg"
+                >
+                  Enable Algorand TestNet
+                </Button>
+                <Button
+                  borderRadius={theme.radii['3xl']}
+                  colorScheme="primaryLight"
+                  minW={250}
+                  onClick={handleEnableClick(
+                    'xK6y2kD4Rnq9EYD1Ta1JTf56TBQTu2/zGwEEcg3C8Gg=' // voi testnet
+                  )}
+                  size="lg"
+                >
+                  Enable Voi TestNet
+                </Button>
+              </HStack>
+
               <Button
                 borderRadius={theme.radii['3xl']}
-                colorScheme="primaryLight"
+                colorScheme="blue"
                 minW={250}
-                onClick={handleEnableClick(
-                  'xK6y2kD4Rnq9EYD1Ta1JTf56TBQTu2/zGwEEcg3C8Gg=' // voi testnet
-                )}
+                onClick={handleWalletConnectClick}
+                rightIcon={<WalletConnectIcon />}
                 size="lg"
               >
-                Enable Voi TestNet
+                Connect WalletConnect
               </Button>
-            </HStack>
+            </VStack>
             {/* Select address */}
             <HStack spacing={2} w="full">
               <Text>Address:</Text>
@@ -216,8 +261,8 @@ const App: FC = () => {
                 placeholder="Select an address"
                 value={selectedAccount?.address || undefined}
               >
-                {enabledAccounts.map((value) => (
-                  <option key={nanoid()} value={value.address}>
+                {enabledAccounts.map((value, index) => (
+                  <option key={`address-option-${index}`} value={value.address}>
                     {value.address}
                   </option>
                 ))}

dapp/ApplicationActionsTab.tsx

@@ -28,7 +28,6 @@ import {
   SignedTransaction,
   Transaction,
 } from 'algosdk';
-import { nanoid } from 'nanoid';
 import React, { ChangeEvent, FC, useState } from 'react';
 
 // Enums
@@ -211,8 +210,10 @@ const ApplicationActionsTab: FC<IProps> = ({
               type: TransactionTypeEnum.ApplicationUpdate,
               label: 'Send Update App Transaction',
             },
-          ].map(({ label, type }) => (
-            <GridItem key={nanoid()}>
+          ].map(({ label, type }, index) => (
+            <GridItem
+              key={`application-action-sign-transaction-button-item-${index}`}
+            >
               <Button
                 borderRadius={theme.radii['3xl']}
                 colorScheme="primaryLight"

dapp/AssetActionsTab.tsx

@@ -37,7 +37,6 @@ import {
   Transaction,
 } from 'algosdk';
 import BigNumber from 'bignumber.js';
-import { nanoid } from 'nanoid';
 import React, { ChangeEvent, FC, useEffect, useState } from 'react';
 
 // Enums
@@ -338,8 +337,8 @@ const AssetActionsTab: FC<IProps> = ({ account, network, toast }: IProps) => {
             w="full"
           >
             <Stack spacing={4} w="full">
-              {account.assets.map((asset) => (
-                <HStack key={nanoid()} spacing={2} w="full">
+              {account.assets.map((asset, index) => (
+                <HStack key={`asset-action-item-${index}`} spacing={2} w="full">
                   <Radio size="lg" value={asset.id} />
                   <Text size="md">{asset.name || asset.id}</Text>
                   <Spacer />
@@ -418,8 +417,10 @@ const AssetActionsTab: FC<IProps> = ({ account, network, toast }: IProps) => {
               type: TransactionTypeEnum.AssetUnfreeze,
               label: 'Send Asset Unfreeze Transaction',
             },
-          ].map(({ disabled, label, type }) => (
-            <GridItem key={nanoid()}>
+          ].map(({ disabled, label, type }, index) => (
+            <GridItem
+              key={`asset-action-sign-transaction-button-item-${index}`}
+            >
               <Button
                 borderRadius={theme.radii['3xl']}
                 colorScheme="primaryLight"

dapp/AtomicTransactionActionsTab.tsx

@@ -45,7 +45,6 @@ import {
   Transaction,
 } from 'algosdk';
 import BigNumber from 'bignumber.js';
-import { nanoid } from 'nanoid';
 import React, { FC, useEffect, useState } from 'react';
 
 // Enums
@@ -285,8 +284,8 @@ const AtomicTransactionActionsTab: FC<IProps> = ({
               </Tr>
             </Thead>
             <Tbody>
-              {signedTransactions.map((value) => (
-                <Tr key={nanoid()}>
+              {signedTransactions.map((value, index) => (
+                <Tr key={`atomic-transaction-action-item-${index}`}>
                   <Td>
                     <Code fontSize="sm" wordBreak="break-word">
                       {value ? value.txn.txID() : 'unsigned'}
@@ -307,9 +306,13 @@ const AtomicTransactionActionsTab: FC<IProps> = ({
           <Stack spacing={4} w="full">
             {/*assets*/}
             {assetValues.length > 0 ? (
-              assetValues.map((value) => (
-                <HStack key={nanoid()} spacing={2} w="full">
-                  {/*asset iD/name*/}
+              assetValues.map((value, index) => (
+                <HStack
+                  key={`atomic-transaction-action-asset-item-${index}`}
+                  spacing={2}
+                  w="full"
+                >
+                  {/*asset id/name*/}
                   <HStack>
                     <Checkbox
                       isChecked={value.isChecked}

package.json

@@ -58,6 +58,9 @@
     "@types/zxcvbn": "^4.4.1",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",
+    "@walletconnect/types": "^2.8.0",
+    "@web3modal/sign-react": "^2.4.5",
+    "add": "^2.0.6",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
@@ -82,7 +85,8 @@
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.0",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "^5.8.0",
+    "yarn": "^1.22.19"
   },
   "dependencies": {
     "@agoralabs-sh/algorand-provider": "^1.1.0",
@@ -98,6 +102,9 @@
     "@stablelib/base64": "^1.0.1",
     "@stablelib/hex": "^1.0.1",
     "@stablelib/utf8": "^1.0.1",
+    "@walletconnect/core": "^2.8.0",
+    "@walletconnect/utils": "^2.8.0",
+    "@walletconnect/web3wallet": "^1.8.0",
     "algosdk": "^2.1.0",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
@@ -106,7 +113,7 @@
     "dompurify": "^3.0.1",
     "framer-motion": "^10.0.1",
     "i18next": "^22.4.10",
-    "nanoid": "^4.0.1",
+    "jsqr": "^1.4.0",
     "numbro": "^2.3.6",
     "qrcode": "^1.5.1",
     "react": "^18.2.0",

src/extension/apps/main/Root.tsx

@@ -10,6 +10,7 @@ import ErrorModal from '@extension/components/ErrorModal';
 import MainLayout from '@extension/components/MainLayout';
 import SignBytesModal from '@extension/components/SignBytesModal';
 import SignTxnsModal from '@extension/components/SignTxnsModal';
+import WalletConnectModal from '@extension/components/WalletConnectModal';
 
 // Features
 import {
@@ -31,7 +32,11 @@ import {
   setSignBytesRequest,
   setSignTxnsRequest,
 } from '@extension/features/messages';
-import { fetchSessionsThunk } from '@extension/features/sessions';
+import {
+  closeWalletConnectModal,
+  fetchSessionsThunk,
+  initializeWalletConnectThunk,
+} from '@extension/features/sessions';
 import { fetchSettings } from '@extension/features/settings';
 
 // Hooks
@@ -87,13 +92,16 @@ const Root: FC = () => {
   const handleErrorModalClose = () => dispatch(setError(null));
   const handleSignBytesModalClose = () => dispatch(setSignBytesRequest(null));
   const handleSignTxnsModalClose = () => dispatch(setSignTxnsRequest(null));
+  const handleWalletConnectModalClose = () =>
+    dispatch(closeWalletConnectModal());
 
   useEffect(() => {
     dispatch(setNavigate(navigate));
     dispatch(setToast(toast));
     dispatch(fetchSettings());
     dispatch(fetchSessionsThunk());
     dispatch(fetchAssetsThunk());
+    dispatch(initializeWalletConnectThunk());
   }, []);
   // fetch accounts when the selected network has been found
   useEffect(() => {
@@ -149,6 +157,7 @@ const Root: FC = () => {
       <EnableModal onClose={handleEnableModalClose} />
       <SignTxnsModal onClose={handleSignTxnsModalClose} />
       <SignBytesModal onClose={handleSignBytesModalClose} />
+      <WalletConnectModal onClose={handleWalletConnectModalClose} />
       <ToastContainer />
       <MainLayout>
         <Outlet />

src/extension/components/AccountActivityTab/AccountActivityTab.tsx

@@ -1,6 +1,5 @@
 import { Box, HStack, Skeleton, Spacer, Text, VStack } from '@chakra-ui/react';
 import { generateAccount } from 'algosdk';
-import { nanoid } from 'nanoid';
 import React, { FC, ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -56,10 +55,10 @@ const AccountActivityTab: FC<IProps> = ({ account, network }: IProps) => {
     let nodes: ReactNode[] = [];
 
     if (accountTransaction) {
-      nodes = accountTransaction.transactions.map((value) => (
+      nodes = accountTransaction.transactions.map((value, index) => (
         <TransactionItem
           account={account}
-          key={nanoid()}
+          key={`account-activity-account-transaction-item-${index}`}
           network={network}
           transaction={value}
         />
@@ -69,8 +68,13 @@ const AccountActivityTab: FC<IProps> = ({ account, network }: IProps) => {
       if (accountTransaction.fetching) {
         nodes = [
           ...nodes,
-          ...Array.from({ length: 3 }, () => (
-            <Box key={nanoid()} px={3} py={2} w="full">
+          ...Array.from({ length: 3 }, (_, index) => (
+            <Box
+              key={`account-activity-account-transaction-fetching-item-${index}`}
+              px={3}
+              py={2}
+              w="full"
+            >
               <VStack
                 alignItems="flex-start"
                 justifyContent="center"