use-wallet integration (#24)

* refactor: use wallet wip

* refactor: refining codebase

* fix(deps): update all non-major dependencies

* chore(deps): update nextjs monorepo to v13

* chore(deps): update node.js to v18

* fix(deps): update dependency react-number-format to v5

* refactor: finalizing integration

* refactor: bumping version

* refactor: updating react-number-format

* refactor: fixing eslint

* refactor: refining tests

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.nvmrc

@@ -1 +1 @@
-16.18
+18.12

next.config.js

@@ -17,6 +17,8 @@ const moduleExports = {
   },
   images: {
     domains: [
+      '*.nf.domains',
+      'images.nf.domains',
       'cf-ipfs.com',
       'dweb.link',
       'cloudflare-ipfs.com',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "algoworld-explorer",
   "description": "Open source version of AlgoWorldExplorer powered by Algorand ⚡️",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "private": true,
   "author": "AlgoWorld <[email protected]>",
   "license": "GPL-3.0",
@@ -31,69 +31,72 @@
     ]
   },
   "dependencies": {
+    "@blockshake/defly-connect": "1.0.0",
     "@emotion/cache": "11.10.5",
     "@emotion/react": "11.10.5",
     "@emotion/server": "11.10.0",
     "@emotion/styled": "11.10.5",
     "@fontsource/roboto": "4.5.8",
     "@hookform/resolvers": "2.9.10",
     "@json-rpc-tools/utils": "1.7.6",
-    "@mui/icons-material": "5.10.16",
-    "@mui/lab": "5.0.0-alpha.110",
-    "@mui/material": "5.10.16",
-    "@mui/x-data-grid": "5.17.13",
+    "@mui/icons-material": "5.11.0",
+    "@mui/lab": "5.0.0-alpha.114",
+    "@mui/material": "5.11.3",
+    "@mui/x-data-grid": "5.17.17",
+    "@perawallet/connect": "1.0.7",
     "@randlabs/myalgo-connect": "1.4.2",
     "@reduxjs/toolkit": "1.9.1",
+    "@txnlab/use-wallet": "1.0.5",
     "@walletconnect/client": "1.8.0",
     "algorand-walletconnect-qrcode-modal": "1.8.0",
-    "algosdk": "1.23.2",
+    "algosdk": "1.24.1",
     "axios": "1.2.2",
-    "next": "12.3.4",
+    "next": "13.1.1",
     "next-pwa": "5.6.0",
     "nextjs-google-analytics": "2.2.2",
     "notistack": "2.0.8",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-number-format": "4.9.4",
+    "react-number-format": "5.1.2",
     "react-redux": "8.0.5",
-    "react-tsparticles": "2.5.3",
+    "react-tsparticles": "2.7.1",
     "react-use": "17.4.0",
     "swr": "2.0.0",
-    "tsparticles": "2.5.3",
+    "tsparticles": "2.7.1",
     "uuid": "8.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "17.3.0",
     "@commitlint/config-conventional": "17.3.0",
-    "@playwright/test": "1.28.1",
+    "@playwright/test": "1.29.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.2.3",
-    "@types/node": "17.0.41",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.9",
+    "@types/jest": "29.2.5",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.45.0",
-    "@typescript-eslint/parser": "5.45.0",
+    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/parser": "5.48.0",
     "autoprefixer": "10.4.13",
     "cd": "0.3.3",
-    "commitizen": "4.2.5",
+    "commitizen": "4.2.6",
     "cz-conventional-changelog": "3.3.0",
     "dotenv": "16.0.3",
-    "eslint": "8.28.0",
-    "eslint-config-next": "12.3.4",
-    "eslint-config-prettier": "8.5.0",
+    "eslint": "8.31.0",
+    "eslint-config-next": "13.1.1",
+    "eslint-config-prettier": "8.6.0",
     "eslint-import-resolver-typescript": "3.5.2",
     "eslint-plugin-prettier": "4.2.1",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
-    "lint-staged": "13.0.4",
-    "postcss": "8.4.19",
-    "prettier": "2.8.0",
+    "lint-staged": "13.1.0",
+    "postcss": "8.4.20",
+    "prettier": "2.8.1",
     "ts-jest": "29.0.3",
-    "typescript": "4.9.3"
+    "typescript": "4.9.4"
   },
   "config": {
     "commitizen": {

ponicode.config.json

@@ -0,0 +1,10 @@
+{
+  "schemaVersion": "1",
+  "javascript": {
+    "name": "algoworld-explorer",
+    "rootDir": "./",
+    "testEnvironment": "node",
+    "testLocationStrategy": "relativeToProjectRoot",
+    "testLocationFolder": "./"
+  }
+}

src/components/Cards/PackCard.tsx

@@ -26,14 +26,17 @@ import { useAppDispatch, useAppSelector } from '@/redux/store/hooks';
 import { stringToHexColor } from '@/utils/stringToHexColor';
 import { setIsWalletPopupOpen } from '@/redux/slices/applicationSlice';
 import { CITY_PACK_IMAGE_URL } from '@/common/constants';
+import { useWallet } from '@txnlab/use-wallet';
 
 type Props = {
   pack: CityPack;
   purchaseClicked: (pack: CityPack) => void;
 };
 
 const PackCard = ({ pack, purchaseClicked }: Props) => {
-  const { address, gateway } = useAppSelector((state) => state.walletConnect);
+  const { activeAddress: address } = useWallet();
+
+  const { gateway } = useAppSelector((state) => state.application);
   const dispatch = useAppDispatch();
 
   return (

src/components/Dialogs/AboutDialog.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import AboutDialog from './AboutDialog';
+
+describe(`AboutDialog`, () => {
+  it(`renders the correct content and handles the close button correctly`, () => {
+    const changeStateMock = jest.fn();
+    const { getByText } = render(
+      <AboutDialog open={true} changeState={changeStateMock} />,
+    );
+
+    // Check that the dialog renders with the correct title and content
+    expect(
+      getByText(
+        `AlgoWorld Explorer is a free and open-source NFT explorer built for AlgoWorld NFT community. Distributed under GPLv3 license.`,
+        { exact: false },
+      ),
+    ).toBeInTheDocument();
+
+    // Check that clicking the close button calls the changeState function with the correct argument
+    fireEvent.click(getByText(`Close`));
+    expect(changeStateMock).toHaveBeenCalledWith(false);
+  });
+});

src/components/Dialogs/AboutDialog.tsx

@@ -23,7 +23,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import pJson from '@/package.json';
+import pJson from '../../../package.json';
 
 type Props = {
   open: boolean;

src/components/Dialogs/ConfirmPackPurchaseDialog.tsx

@@ -39,10 +39,10 @@ import {
 import { useAppDispatch, useAppSelector } from '@/redux/store/hooks';
 import { Asset } from '@/models/Asset';
 import { PERFORM_SWAP_OPTIN_BUTTON_ID } from '@/common/constants';
-import { connector } from '@/redux/store/connector';
 import getPackAssetsToOptIn from '@/utils/assets/getPackAssetsToOptIn';
 import { LoadingButton } from '@mui/lab';
-import { performOptAssets } from '@/redux/slices/walletConnectSlice';
+import { performOptAssets } from '@/redux/slices/applicationSlice';
+import { useWallet } from '@txnlab/use-wallet';
 
 type Props = {
   title: string;
@@ -63,12 +63,13 @@ const ConfirmPackPurchaseDialog = ({
   onConfirm,
   transactionsFee,
 }: Props) => {
+  const { activeAddress: address, signTransactions } = useWallet();
+
   const {
     chain,
-    address,
     assets: existingAssets,
     gateway,
-  } = useAppSelector((state) => state.walletConnect);
+  } = useAppSelector((state) => state.application);
 
   const dispatch = useAppDispatch();
 
@@ -168,23 +169,30 @@ const ConfirmPackPurchaseDialog = ({
         <Button id={DIALOG_CANCEL_BTN_ID} onClick={() => setOpen(false)}>
           Cancel
         </Button>
-        {assetsToOptIn.length > 0 && (
-          <LoadingButton
-            color="primary"
-            disabled={hasNoBalanceForAssets}
-            id={PERFORM_SWAP_OPTIN_BUTTON_ID}
-            onClick={() => {
-              dispatch(
-                performOptAssets({
-                  assetIndexes: assetsToOptIn,
-                  connector,
-                }),
-              );
-            }}
-          >
-            Opt-In
-          </LoadingButton>
-        )}
+        {assetsToOptIn.length > 0 &&
+          !(
+            hasZeroBalanceAssets ||
+            (!swapIsActiveState.loading && !swapIsActive)
+          ) && (
+            <LoadingButton
+              color="primary"
+              disabled={hasNoBalanceForAssets}
+              id={PERFORM_SWAP_OPTIN_BUTTON_ID}
+              onClick={() => {
+                dispatch(
+                  performOptAssets({
+                    assetIndexes: assetsToOptIn,
+                    gateway,
+                    chain,
+                    activeAddress: address as string,
+                    signTransactions,
+                  }),
+                );
+              }}
+            >
+              Opt-In
+            </LoadingButton>
+          )}
         <Button
           disabled={
             assetsToOptIn.length > 0 ||

src/components/Dialogs/ConnectProviderDialog.tsx

@@ -0,0 +1,116 @@
+/**
+ * AlgoWorld Explorer
+ * Copyright (C) 2022 AlgoWorld
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import { setIsWalletPopupOpen } from '@/redux/slices/applicationSlice';
+import { useAppDispatch } from '@/redux/store/hooks';
+import {
+  DialogActions,
+  Button,
+  ListItemAvatar,
+  Divider,
+  ListItemButton,
+  Typography,
+} from '@mui/material';
+import { CONNECT_PROVIDER_DIALOG_ID } from './constants';
+import Image from 'next/image';
+import { useWallet } from '@txnlab/use-wallet';
+
+type Props = {
+  open: boolean;
+};
+
+const ConnectProviderDialog = ({ open }: Props) => {
+  const dispatch = useAppDispatch();
+
+  const { providers } = useWallet();
+
+  return (
+    <>
+      <Dialog id={CONNECT_PROVIDER_DIALOG_ID} open={open}>
+        <DialogTitle>Connect a wallet</DialogTitle>
+        <List>
+          {providers?.map((provider) => (
+            <React.Fragment key={`provider-${provider.metadata.id}`}>
+              <ListItem>
+                <ListItemButton
+                  onClick={() => {
+                    provider
+                      .connect()
+                      .then(() => {
+                        dispatch(setIsWalletPopupOpen(false));
+                      })
+                      .catch(() => {
+                        dispatch(setIsWalletPopupOpen(false));
+                      });
+                  }}
+                >
+                  <ListItemAvatar>
+                    <div
+                      style={{
+                        borderRadius: `50%`,
+                        overflow: `hidden`,
+                        width: `48px`,
+                        height: `48px`,
+                      }}
+                    >
+                      <Image
+                        src={provider.metadata.icon}
+                        width={48}
+                        height={48}
+                        placeholder="blur"
+                        blurDataURL={provider.metadata.icon}
+                        alt={`Wallet icon`}
+                      />
+                    </div>
+                  </ListItemAvatar>
+                  <ListItemText
+                    sx={{ pl: 2, pr: 2 }}
+                    primary={
+                      <Typography fontWeight={`bold`} variant="h5">
+                        {provider.metadata.name}
+                      </Typography>
+                    }
+                    secondary={provider.isActive ? `Active` : ``}
+                  />
+                </ListItemButton>
+              </ListItem>
+              <Divider />
+            </React.Fragment>
+          ))}
+        </List>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              dispatch(setIsWalletPopupOpen(false));
+            }}
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default ConnectProviderDialog;