Sdk-dapp-core migration

package.json

@@ -9,8 +9,9 @@
     "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-core": "13.16.0",
-    "@multiversx/sdk-dapp": "3.1.6",
+    "@multiversx/sdk-dapp-core": "0.0.0-alpha.14",
+    "@multiversx/sdk-dapp-core-ui": "0.0.0-alpha.4",
+    "@multiversx/sdk-dapp-utils": "1.0.5",
     "axios": "1.7.4",
     "classnames": "2.3.2",
     "moment": "2.29.4",
@@ -24,9 +25,9 @@
     "start:devnet": "yarn run copy:devnet-config & vite dev",
     "start:testnet": "yarn run copy:testnet-config & vite dev",
     "start:mainnet": "yarn run copy:mainnet-config & vite dev",
-    "build:devnet": "yarn run copy:devnet-config & vite build",
-    "build:testnet": "yarn run copy:testnet-config & vite build",
-    "build:mainnet": "yarn run copy:mainnet-config & vite build",
+    "build:devnet": "tsc & yarn run copy:devnet-config & vite build",
+    "build:testnet": "tsc & yarn run copy:testnet-config & vite build",
+    "build:mainnet": "tsc & yarn run copy:mainnet-config & vite build",
     "copy:devnet-config": "cp ./src/config/config.devnet.ts ./src/config/index.ts",
     "copy:testnet-config": "cp ./src/config/config.testnet.ts ./src/config/index.ts",
     "copy:mainnet-config": "cp ./src/config/config.mainnet.ts ./src/config/index.ts",
@@ -49,13 +50,12 @@
     "@types/jest": "29.5.5",
     "@types/node": "20.7.1",
     "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.8",
     "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "6.7.0",
     "@typescript-eslint/parser": "6.7.0",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "@vitejs/plugin-basic-ssl": "1.0.1",
     "@vitejs/plugin-react": "4.1.0",
-    "@wdio/cli": "^8.33.1",
+    "@wdio/cli": "8.33.1",
     "@wdio/concise-reporter": "8.32.4",
     "@wdio/local-runner": "8.32.4",
     "@wdio/mocha-framework": "8.32.4",
@@ -68,7 +68,7 @@
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-sort-exports": "^0.9.1",
+    "eslint-plugin-sort-exports": "0.9.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-watch-typeahead": "2.2.2",

src/App.tsx

@@ -1,86 +1,28 @@
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
-import { Layout } from 'components';
-import {
-  apiTimeout,
-  environment,
-  sampleAuthenticatedDomains,
-  walletConnectV2ProjectId
-} from 'config';
-import {
-  AxiosInterceptorContext, // using this is optional
-  DappProvider,
-  NotificationModal,
-  SignTransactionsModals,
-  TransactionsToastList
-  // uncomment this to use the custom transaction tracker
-  // TransactionsTracker
-} from 'lib';
-import { RouteNamesEnum } from 'localConstants';
-import { PageNotFound } from 'pages';
+import { PageNotFound } from 'pages/PageNotFound/PageNotFound';
 import { routes } from 'routes';
-import { BatchTransactionsContextProvider } from 'wrappers';
-
-const AppContent = () => {
-  return (
-    <DappProvider
-      environment={environment}
-      customNetworkConfig={{
-        name: 'customConfig',
-        apiTimeout,
-        walletConnectV2ProjectId
-      }}
-      dappConfig={{
-        shouldUseWebViewProvider: true,
-        logoutRoute: RouteNamesEnum.unlock
-      }}
-      customComponents={{
-        transactionTracker: {
-          // uncomment this to use the custom transaction tracker
-          // component: TransactionsTracker,
-          props: {
-            onSuccess: (sessionId: string) => {
-              console.log(`Session ${sessionId} successfully completed`);
-            },
-            onFail: (sessionId: string, errorMessage: string) => {
-              console.log(`Session ${sessionId} failed. ${errorMessage ?? ''}`);
-            }
-          }
-        }
-      }}
-    >
-      <AxiosInterceptorContext.Listener>
-        <Layout>
-          <TransactionsToastList />
-          <NotificationModal />
-          <SignTransactionsModals />
-          <Routes>
-            {routes.map((route) => (
-              <Route
-                path={route.path}
-                key={`route-key-'${route.path}`}
-                element={<route.component />}
-              />
-            ))}
-            <Route path='*' element={<PageNotFound />} />
-          </Routes>
-        </Layout>
-      </AxiosInterceptorContext.Listener>
-    </DappProvider>
-  );
-};
+import { AxiosInterceptors, BatchTransactionsContextProvider } from 'wrappers';
+import { Layout } from './components';
 
 export const App = () => {
   return (
-    <AxiosInterceptorContext.Provider>
-      <AxiosInterceptorContext.Interceptor
-        authenticatedDomains={sampleAuthenticatedDomains}
-      >
-        <Router>
-          <BatchTransactionsContextProvider>
-            <AppContent />
-          </BatchTransactionsContextProvider>
-        </Router>
-      </AxiosInterceptorContext.Interceptor>
-    </AxiosInterceptorContext.Provider>
+    <Router>
+      <AxiosInterceptors>
+        <BatchTransactionsContextProvider>
+          <Layout>
+            <Routes>
+              {routes.map((route) => (
+                <Route
+                  key={`route-key-'${route.path}`}
+                  path={route.path}
+                  element={<route.component />}
+                />
+              ))}
+              <Route path='*' element={<PageNotFound />} />
+            </Routes>
+          </Layout>
+        </BatchTransactionsContextProvider>
+      </AxiosInterceptors>
+    </Router>
   );
 };

src/components/Layout/Header/Header.tsx

@@ -1,47 +1,39 @@
-import { useMatch } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Button, MxLink } from 'components';
 import { environment } from 'config';
-import { logout, useGetIsLoggedIn } from 'lib';
+import {
+  getAccountProvider,
+  ProviderFactory,
+  ProviderTypeEnum,
+  useGetIsLoggedIn,
+  UnlockButtonSDK,
+  UnlockPanelSDK
+} from 'lib';
 import { RouteNamesEnum } from 'localConstants';
 import MultiversXLogo from '../../../assets/img/multiversx-logo.svg?react';
-
-const callbackUrl = `${window.location.origin}/unlock`;
-const onRedirect = undefined; // use this to redirect with useNavigate to a specific page after logout
-const shouldAttemptReLogin = false; // use for special cases where you want to re-login after logout
-const options = {
-  /*
-   * @param {boolean} [shouldBroadcastLogoutAcrossTabs=true]
-   * @description If your dApp supports multiple accounts on multiple tabs,
-   * this param will broadcast the logout event across all tabs.
-   */
-  shouldBroadcastLogoutAcrossTabs: true,
-  /*
-   * @param {boolean} [hasConsentPopup=false]
-   * @description Set it to true if you want to perform async calls before logging out on Safari.
-   * It will open a consent popup for the user to confirm the action before leaving the page.
-   */
-  hasConsentPopup: false
-};
+import { useState } from 'react';
+import { ExtendedProviders } from 'initConfig';
+import { IProviderFactory } from '@multiversx/sdk-dapp-core/out/core/providers/types/providerFactory.types';
 
 export const Header = () => {
   const isLoggedIn = useGetIsLoggedIn();
-  const isUnlockRoute = Boolean(useMatch(RouteNamesEnum.unlock));
+  const navigate = useNavigate();
+  const provider = getAccountProvider();
+  const [open, setOpen] = useState(false);
 
-  const ConnectButton = isUnlockRoute ? null : (
-    <MxLink to={RouteNamesEnum.unlock}>Connect</MxLink>
-  );
+  const handleLogout = async () => {
+    await provider.logout();
+    navigate(RouteNamesEnum.home);
+  };
 
-  const handleLogout = () => {
-    sessionStorage.clear();
-    logout(
-      callbackUrl,
-      /*
-       * following are optional params. Feel free to remove them in your implementation
-       */
-      onRedirect,
-      shouldAttemptReLogin,
-      options
-    );
+  const handleLogin = async ({ type, anchor }: IProviderFactory) => {
+    const provider = await ProviderFactory.create({
+      type,
+      anchor
+    });
+    await provider?.login();
+    setOpen(false);
+    navigate(RouteNamesEnum.dashboard);
   };
 
   return (
@@ -68,8 +60,29 @@
               Close
             </Button>
           ) : (
-            ConnectButton
+            <Button onClick={() => setOpen(true)}>Connect</Button>
           )}
+          <UnlockPanelSDK
+            open={open}
+            onLogin={(options) =>
+              handleLogin({
+                type: options.detail.provider,
+                anchor: options.detail.anchor
+              })
+            }
+            onClose={() => {
+              setOpen(false);
+            }}
+          >
+            <UnlockButtonSDK
+              label='In Memory Provider'
+              onClick={() =>
+                handleLogin({
+                  type: ExtendedProviders.inMemoryProvider
+                })
+              }
+            />
+          </UnlockPanelSDK>
         </div>
       </nav>
     </header>

src/components/Loader/Loader.tsx

@@ -0,0 +1,14 @@
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const Loader = () => {
+  return (
+    <div className='flex justify-center items-center h-screen'>
+      <FontAwesomeIcon
+        icon={faSpinner}
+        spin
+        className='text-4xl text-blue-500'
+      />
+    </div>
+  );
+};

src/components/Loader/index.tsx

@@ -0,0 +1 @@
+export * from './Loader';

src/components/OutputContainer/OutputContainer.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { PropsWithChildren } from 'react';
-import { Loader, WithClassnameType } from 'lib';
+import { Loader } from 'components';
+import { WithClassnameType } from 'types';
 
 interface OutputContainerPropsType
   extends PropsWithChildren,

src/components/TransactionsTable/TransactionsTable.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import {
+  ITransactionsTableRow,
+  ServerTransactionType,
+  TransactionsTableController,
+  TransactionsTableSDK,
+  useGetAccount,
+  useGetNetworkConfig
+} from 'lib';
+
+interface TransactionsTablePropsType {
+  transactions?: ServerTransactionType[];
+}
+
+export const TransactionsTable = ({
+  transactions = []
+}: TransactionsTablePropsType) => {
+  const { address } = useGetAccount();
+  const { network } = useGetNetworkConfig();
+  const [processedTransaction, setProcessedTransactions] = useState<
+    ITransactionsTableRow[]
+  >([]);
+
+  useEffect(() => {
+    processTransactions();
+  }, []);
+
+  const processTransactions = async () => {
+    const transactionsData =
+      await TransactionsTableController.processTransactions({
+        address,
+        egldLabel: network.egldLabel,
+        explorerAddress: network.explorerAddress,
+        transactions
+      });
+
+    setProcessedTransactions(
+      transactionsData as unknown as ITransactionsTableRow[]
+    );
+  };
+
+  return <TransactionsTableSDK transactions={processedTransaction} />;
+};

src/components/TransactionsTable/index.ts

@@ -0,0 +1 @@
+export * from './TransactionsTable';

src/components/index.ts

@@ -3,7 +3,8 @@ export * from './Card';
 export * from './ContractAddress';
 export * from './Label';
 export * from './Layout';
+export * from './Loader';
 export * from './MissingNativeAuthError';
 export * from './MxLink';
 export * from './OutputContainer';
-export * from './TransactionsTracker';
+export * from './TransactionsTable';