Sdk-dapp-core migration

package.json

@@ -9,10 +9,12 @@
     "@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.12",
+    "@multiversx/sdk-dapp-core-ui": "0.0.0-alpha.2",
+    "@multiversx/sdk-dapp-utils": "1.0.5",
     "axios": "1.7.4",
     "classnames": "2.3.2",
+    "immer": "^10.1.1",
     "moment": "2.29.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -24,9 +26,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 +51,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 +69,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,87 +1,25 @@
 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 { 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,
-        walletAddress: 'https://localhost:3002'
-      }}
-      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>
             {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/Card/Card.tsx

@@ -1,6 +1,6 @@
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { WithClassnameType } from 'types';
 
 interface CardType extends PropsWithChildren, WithClassnameType {

src/components/ContractAddress/ContractAddress.tsx

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

src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,5 @@
+import { CopyButtonSDK, CopyButtonSDKPropsType } from 'lib';
+
+export const CopyButton = (props: Partial<CopyButtonSDKPropsType>) => {
+  return <CopyButtonSDK {...props} />;
+};

src/components/CopyButton/index.ts

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

src/components/ExplorerLink/ExplorerLink.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+import {
+  ExplorerLinkSDK,
+  ExplorerLinkSDKPropsType,
+  useGetNetworkConfig
+} from 'lib';
+import { WithClassnameType } from 'types';
+
+export const ExplorerLink = ({
+  children,
+  page,
+  ...rest
+}: ExplorerLinkPropsType) => {
+  const { network } = useGetNetworkConfig();
+
+  return (
+    <ExplorerLinkSDK link={`${network.explorerAddress}${page}`} {...rest}>
+      {children ? <div slot='content'>{children}</div> : null}
+    </ExplorerLinkSDK>
+  );
+};
+
+export interface ExplorerLinkPropsType
+  extends Partial<ExplorerLinkSDKPropsType>,
+    PropsWithChildren,
+    WithClassnameType {
+  page: string;
+}

src/components/ExplorerLink/index.ts

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

src/components/FormatAmount/FormatAmount.tsx

@@ -0,0 +1,39 @@
+import {
+  DECIMALS,
+  DIGITS,
+  FormatAmountController,
+  FormatAmountSDK,
+  useGetNetworkConfig
+} from 'lib';
+import { WithClassnameType } from 'types';
+
+interface FormatAmountPropsType extends WithClassnameType {
+  egldLabel?: string;
+  value: string;
+}
+
+export const FormatAmount = (props: FormatAmountPropsType) => {
+  const {
+    network: { egldLabel }
+  } = useGetNetworkConfig();
+
+  const { isValid, valueDecimal, valueInteger, label } =
+    FormatAmountController.getData({
+      digits: DIGITS,
+      decimals: DECIMALS,
+      egldLabel,
+      ...props,
+      input: props.value
+    });
+
+  return (
+    <FormatAmountSDK
+      class={props.className}
+      dataTestId={props['data-testid']}
+      isValid={isValid}
+      label={label}
+      valueDecimal={valueDecimal}
+      valueInteger={valueInteger}
+    />
+  );
+};

src/components/FormatAmount/index.ts

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

src/components/Layout/Header/Header.tsx

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

src/components/Layout/Layout.tsx

@@ -7,9 +7,11 @@ export const Layout = ({ children }: PropsWithChildren) => {
   return (
     <div className='flex min-h-screen flex-col bg-slate-200'>
       <Header />
-      <main className='flex flex-grow items-stretch justify-center p-6'>
-        <AuthRedirectWrapper>{children}</AuthRedirectWrapper>
-      </main>
+      <AuthRedirectWrapper>
+        <main className='flex flex-grow items-stretch justify-center p-6'>
+          {children}
+        </main>
+      </AuthRedirectWrapper>
       <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,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 import { WithClassnameType } from 'types';
 

src/components/OutputContainer/OutputContainer.tsx

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

src/components/OutputContainer/components/PingPongOutput.tsx

@@ -1,5 +1,5 @@
 import { ContractAddress, Label } from 'components';
-import { SignedTransactionType } from 'types';
+import { SignedTransactionType } from 'lib';
 import { TransactionsOutput } from './TransactionsOutput';
 
 type PingPongOutputType = {

src/components/OutputContainer/components/TransactionOutput.tsx

@@ -1,22 +1,24 @@
-import { Label } from 'components';
+import { ExplorerLink, FormatAmount, Label } from 'components';
 import {
   ACCOUNTS_ENDPOINT,
-  ExplorerLink,
-  FormatAmount,
+  SignedTransactionType,
   TRANSACTIONS_ENDPOINT,
   useGetNetworkConfig
 } from 'lib';
-import { SignedTransactionType } from 'types';
+import { DataTestIdsEnum } from 'localConstants';
 
 export const TransactionOutput = ({
   transaction
 }: {
   transaction: SignedTransactionType;
 }) => {
-  const { network } = useGetNetworkConfig();
+  const {
+    network: { egldLabel }
+  } = useGetNetworkConfig();
   const decodedData = transaction.data
     ? Buffer.from(transaction.data, 'base64').toString('ascii')
     : 'N/A';
+
   return (
     <div className='flex flex-col'>
       <p>
@@ -42,9 +44,8 @@ export const TransactionOutput = ({
         <Label>Amount: </Label>
         <FormatAmount
           value={transaction.value}
-          showLabel={transaction.value !== '0'}
-          egldLabel={network.egldLabel}
-          data-testid='balance'
+          egldLabel={egldLabel}
+          data-testid={DataTestIdsEnum.balance}
         />
       </p>
       <p>