Sdk-dapp-core migration

package.json

@@ -10,7 +10,8 @@
     "@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.5",
+    "@multiversx/sdk-dapp-core": "0.0.0-alpha.11",
+    "@multiversx/sdk-dapp-utils": "1.0.2",
     "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",

src/App.tsx

@@ -1,89 +1,25 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-
-import {
-  AxiosInterceptorContext, // using this is optional
-  DappProvider,
-  Layout,
-  TransactionsToastList,
-  NotificationModal,
-  SignTransactionsModals
-  // uncomment this to use the custom transaction tracker
-  // TransactionsTracker
-} from 'components';
-
-import {
-  apiTimeout,
-  walletConnectV2ProjectId,
-  environment,
-  sampleAuthenticatedDomains
-} from 'config';
-import { RouteNamesEnum } from 'localConstants';
-import { PageNotFound, Unlock } from 'pages';
 import { routes } from 'routes';
 import { BatchTransactionsContextProvider } from 'wrappers';
+import { Layout } from './components';
 
-const AppContent = () => {
+export const App = () => {
   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>
+    <Router>
+      <BatchTransactionsContextProvider>
         <Layout>
-          <TransactionsToastList />
-          <NotificationModal />
-          <SignTransactionsModals />
           <Routes>
-            <Route path={RouteNamesEnum.unlock} element={<Unlock />} />
             {routes.map((route) => (
               <Route
-                path={route.path}
                 key={`route-key-'${route.path}`}
+                path={route.path}
                 element={<route.component />}
               />
             ))}
-            <Route path='*' element={<PageNotFound />} />
+            <Route path='*' element={<div>NOT FOUND</div>} />
           </Routes>
         </Layout>
-      </AxiosInterceptorContext.Listener>
-    </DappProvider>
-  );
-};
-
-export const App = () => {
-  return (
-    <AxiosInterceptorContext.Provider>
-      <AxiosInterceptorContext.Interceptor
-        authenticatedDomains={sampleAuthenticatedDomains}
-      >
-        <Router>
-          <BatchTransactionsContextProvider>
-            <AppContent />
-          </BatchTransactionsContextProvider>
-        </Router>
-      </AxiosInterceptorContext.Interceptor>
-    </AxiosInterceptorContext.Provider>
+      </BatchTransactionsContextProvider>
+    </Router>
   );
 };

src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren, MouseEvent } from 'react';
-import { WithClassnameType } from 'types';
+import { WithClassnamePropsType } from 'types';
 
-interface ButtonType extends WithClassnameType, PropsWithChildren {
+interface ButtonType extends WithClassnamePropsType, PropsWithChildren {
   onClick: (e: MouseEvent) => void;
   disabled?: boolean;
   dataTestId?: string;

src/components/Card/Card.tsx

@@ -1,9 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { WithClassnameType } from 'types';
+import { WithClassnamePropsType } from 'types';
 
-interface CardType extends PropsWithChildren, WithClassnameType {
+interface CardType extends PropsWithChildren, WithClassnamePropsType {
   title: string;
   description?: string;
   reference: string;

src/components/ContractAddress/ContractAddress.tsx

@@ -1,6 +1,7 @@
 import { Label } from 'components/Label';
-import { ACCOUNTS_ENDPOINT, ExplorerLink } from 'components/sdkDappComponents';
 import { contractAddress } from 'config';
+import { ExplorerLink } from '../ExplorerLink';
+import { ACCOUNTS_ENDPOINT } from 'localConstants';
 
 export const ContractAddress = () => {
   return (

src/components/ExplorerLink/ExplorerLink.tsx

@@ -0,0 +1,45 @@
+import { PropsWithChildren } from 'react';
+import {
+  faArrowUpRightFromSquare,
+  IconDefinition
+} from '@fortawesome/free-solid-svg-icons';
+import { getState, networkSelector } from 'lib/sdkDappCore';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { WithClassnamePropsType } from '../../types';
+
+export interface ExplorerLinkPropsType
+  extends WithClassnamePropsType,
+    PropsWithChildren {
+  page: string;
+  text?: any;
+  customExplorerIcon?: IconDefinition;
+  title?: string;
+  onClick?: () => void;
+}
+
+export const ExplorerLink = ({
+  page,
+  text,
+  className = 'dapp-explorer-link',
+  children,
+  customExplorerIcon,
+  ...rest
+}: ExplorerLinkPropsType) => {
+  const network = networkSelector(getState());
+
+  const defaultContent = text ?? (
+    <FontAwesomeIcon icon={customExplorerIcon ?? faArrowUpRightFromSquare} />
+  );
+
+  return (
+    <a
+      href={`${network.explorerAddress}${page}`}
+      target='_blank'
+      className={className}
+      rel='noreferrer'
+      {...rest}
+    >
+      {children ?? defaultContent}
+    </a>
+  );
+};

src/components/ExplorerLink/index.tsx

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

src/components/Layout/Header/Header.tsx

@@ -1,49 +1,25 @@
 import { Button } from 'components/Button';
 import { MxLink } from 'components/MxLink';
 import { environment } from 'config';
-import { logout } from 'helpers';
-import { useGetIsLoggedIn } from 'hooks';
 import { RouteNamesEnum } from 'localConstants';
 import MultiversXLogo from '../../../assets/img/multiversx-logo.svg?react';
-import { useMatch } from 'react-router-dom';
-
-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 { useMatch, useNavigate } from 'react-router-dom';
+import { getAccountProvider, getIsLoggedIn } from 'lib/sdkDappCore';
 
 export const Header = () => {
-  const isLoggedIn = useGetIsLoggedIn();
+  const isLoggedIn = getIsLoggedIn();
   const isUnlockRoute = Boolean(useMatch(RouteNamesEnum.unlock));
+  const navigate = useNavigate();
+  const provider = getAccountProvider();
 
   const ConnectButton = isUnlockRoute ? null : (
     <MxLink to={RouteNamesEnum.unlock}>Connect</MxLink>
   );
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
     sessionStorage.clear();
-    logout(
-      callbackUrl,
-      /*
-       * following are optional params. Feel free to remove them in your implementation
-       */
-      onRedirect,
-      shouldAttemptReLogin,
-      options
-    );
+    await provider.logout();
+    navigate(RouteNamesEnum.unlock);
   };
 
   return (

src/components/Layout/Layout.tsx

@@ -1,23 +1,13 @@
-import type { PropsWithChildren } from 'react';
-import { useLocation } from 'react-router-dom';
-import { AuthenticatedRoutesWrapper } from 'components/sdkDappComponents';
-import { RouteNamesEnum } from 'localConstants/routes';
-import { routes } from 'routes/routes';
+import { PropsWithChildren } from 'react';
 import { Footer } from './Footer';
 import { Header } from './Header';
 
 export const Layout = ({ children }: PropsWithChildren) => {
-  const { search } = useLocation();
   return (
     <div className='flex min-h-screen flex-col bg-slate-200'>
       <Header />
       <main className='flex flex-grow items-stretch justify-center p-6'>
-        <AuthenticatedRoutesWrapper
-          routes={routes}
-          unlockRoute={`${RouteNamesEnum.unlock}${search}`}
-        >
-          {children}
-        </AuthenticatedRoutesWrapper>
+        {children}
       </main>
       <Footer />
     </div>

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/MxLink/MxLink.tsx

@@ -1,8 +1,8 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
-import { WithClassnameType } from 'types';
+import { WithClassnamePropsType } from 'types';
 
-interface MxLinkPropsType extends PropsWithChildren, WithClassnameType {
+interface MxLinkPropsType extends PropsWithChildren, WithClassnamePropsType {
   to: string;
 }
 

src/components/OutputContainer/OutputContainer.tsx

@@ -1,11 +1,11 @@
 import type { PropsWithChildren } from 'react';
 import classNames from 'classnames';
-import { Loader } from 'components/sdkDappComponents';
-import { WithClassnameType } from 'types';
+import { Loader } from 'components/Loader';
+import { WithClassnamePropsType } from 'types';
 
 interface OutputContainerPropsType
   extends PropsWithChildren,
-    WithClassnameType {
+    WithClassnamePropsType {
   isLoading?: boolean;
 }
 

src/components/OutputContainer/components/TransactionOutput.tsx

@@ -1,19 +1,18 @@
-import {
-  TRANSACTIONS_ENDPOINT,
-  ACCOUNTS_ENDPOINT
-} from '@multiversx/sdk-dapp/apiCalls/endpoints';
-import { useGetNetworkConfig } from '@multiversx/sdk-dapp/hooks/useGetNetworkConfig';
-import { ExplorerLink } from '@multiversx/sdk-dapp/UI/ExplorerLink';
 import { Label } from 'components/Label';
-import { FormatAmount } from 'components/sdkDappComponents';
 import { SignedTransactionType } from 'types';
+import { ExplorerLink } from '../../ExplorerLink';
+import {
+  ACCOUNTS_ENDPOINT,
+  DataTestIdsEnum,
+  TRANSACTIONS_ENDPOINT
+} from 'localConstants';
+import { formatAmount } from 'lib/sdkDappUtils';
 
 export const TransactionOutput = ({
   transaction
 }: {
   transaction: SignedTransactionType;
 }) => {
-  const { network } = useGetNetworkConfig();
   const decodedData = transaction.data
     ? Buffer.from(transaction.data, 'base64').toString('ascii')
     : 'N/A';
@@ -40,12 +39,11 @@ export const TransactionOutput = ({
 
       <p>
         <Label>Amount: </Label>
-        <FormatAmount
-          value={transaction.value}
-          showLabel={transaction.value !== '0'}
-          egldLabel={network.egldLabel}
-          data-testid='balance'
-        />
+        <span data-testid={DataTestIdsEnum.balance}>
+          {formatAmount({
+            input: transaction.value
+          })}
+        </span>
       </p>
       <p>
         <Label>Gas price: </Label>