+
+ );
+};
diff --git a/src/app/components/HeroComponent/index.ts b/src/app/components/HeroComponent/index.ts
new file mode 100644
index 0000000..1cb59ac
--- /dev/null
+++ b/src/app/components/HeroComponent/index.ts
@@ -0,0 +1 @@
+export * from './HeroComponent';
diff --git a/src/app/components/HowToConnectComponent/HowToConnectComponent.tsx b/src/app/components/HowToConnectComponent/HowToConnectComponent.tsx
new file mode 100644
index 0000000..342fc22
--- /dev/null
+++ b/src/app/components/HowToConnectComponent/HowToConnectComponent.tsx
@@ -0,0 +1,104 @@
+import { getDetectedBrowser } from '@/helpers/getDetectedBrowser';
+import {
+ BrowserEnum,
+ CHROME_METAMASK_EXTENSION_LINK,
+ FIREFOX_METAMASK_ADDON_LINK,
+ GET_LEDGER,
+ GET_XPORTAL,
+ WALLET_ADDRESS
+} from '@/localConstants';
+import ledgerIcon from '@/assets/img/ledger-icon.svg';
+import metamaskIcon from '@/assets/img/metamask-icon.svg';
+import passkeyIcon from '@/assets/img/passkey-icon.svg';
+import webWalletIcon from '@/assets/img/web-wallet-icon.svg';
+import xPortalIcon from '@/assets/img/xportal-icon.svg';
+
+import { ConnectCard, ExtensionConnect } from './components';
+
+// prettier-ignore
+const styles = {
+ howToConnectContainer: 'how-to-connect-container flex flex-col items-center w-full justify-center gap-16 lg:gap-20 px-2 lg:px-6 pb-2 lg:pb-6 pt-20 lg:pt-32 bg-primary rounded-4xl transition-all duration-200 ease-out',
+ howToConnectHeader: 'how-to-connect-header flex flex-col gap-4 items-center justify-center',
+ howToConnectTitle: 'how-to-connect-title text-primary text-center text-4xl xxs:text-5xl xs:text-6xl font-medium leading-[1] tracking-[-1.92px] transition-all duration-200 ease-out',
+ howToConnectDescription: 'how-to-connect-description text-secondary text-xl leading-[1.5] tracking-[-0.21px] transition-all duration-200 ease-out',
+ howToConnectContent: 'how-to-connect-content flex flex-col gap-6 items-center justify-center w-full',
+ howToConnectContentCards: 'how-to-connect-content-cards grid grid-cols-1 items-stretch justify-center lg:grid-cols-3 gap-2 lg:gap-6'
+} satisfies Record
+
+
+
+
+
+ dApp Template
+ ++ The sdk-dapp starter project for any dApp built on the MultiversX + blockchain. +
+
+
+
+
+
+ See Documentation
+
+
+
+
+ {themeOptions.map((themeOption) => {
+ const Icon = themeOption.icon;
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {themeOption.identifier === activeTheme?.identifier && (
+ <>
+
+
+
+ {themeOption.label}
+
+
+ )}
+
+
+ );
+};
diff --git a/src/app/components/HowToConnectComponent/components/ConnectCard/ConnectCard.tsx b/src/app/components/HowToConnectComponent/components/ConnectCard/ConnectCard.tsx
new file mode 100644
index 0000000..31003df
--- /dev/null
+++ b/src/app/components/HowToConnectComponent/components/ConnectCard/ConnectCard.tsx
@@ -0,0 +1,51 @@
+import { faArrowRightLong } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+// prettier-ignore
+const styles = {
+ connectCardContainer: 'connect-card-container bg-secondary p-8 lg:p-10 flex flex-col gap-10 rounded-2xl lg:rounded-3xl transition-all duration-200 ease-out',
+ connectCardText: 'connect-card-text flex flex-col gap-4 flex-1',
+ connectCardTitle: 'connect-card-title text-3xl text-primary font-medium tracking-[-0.96px] leading-[1] transition-all duration-200 ease-out',
+ connectCardDescription: 'connect-card-description text-secondary text-xl tracking-[-0.21px] leading-[1.5] transition-all duration-200 ease-out',
+ connectCardLink: 'connect-card-link text-accent hover:opacity-75 text-lg font-semibold transition-all duration-200 ease-out',
+ connectCardLinkTitle: 'connect-card-link-title p-3'
+} satisfies Record
+
+
+ How can you connect
+ ++ Choose your path, you must. +
+
+
+
+ {connectCards.map((card, index) => (
+
+
+
+ );
+};
diff --git a/src/app/components/HowToConnectComponent/components/ExtensionConnect/components/BrowserFrame.tsx b/src/app/components/HowToConnectComponent/components/ExtensionConnect/components/BrowserFrame.tsx
new file mode 100644
index 0000000..98a8302
--- /dev/null
+++ b/src/app/components/HowToConnectComponent/components/ExtensionConnect/components/BrowserFrame.tsx
@@ -0,0 +1,44 @@
+import xLogo from '@/assets/img/x.svg';
+
+// prettier-ignore
+const styles = {
+browserFrameContainer: 'browser-frame-container w-full flex flex-col',
+browserFrameTopBar: 'browser-frame-top-bar w-full h-[32px] bg-primary rounded-t-2xl pl-4 py-1 pr-2.5 flex items-center justify-between transition-all duration-200 ease-out',
+browserFrameTopBarLeft: 'browser-frame-top-bar-left flex gap-2',
+browserFrameTopBarLeftDot: 'browser-frame-top-bar-left-dot w-2 h-2 rounded-full bg-icon transition-all duration-200 ease-out',
+browserFrameTopBarRight: 'browser-frame-top-bar-right flex gap-2 items-center',
+browserFrameTopBarRightDots: 'browser-frame-top-bar-right-dots flex flex-col gap-0.5',
+browserFrameTopBarRightDot: 'browser-frame-top-bar-right-dot w-0.75 h-0.75 rounded-full bg-icon transition-all duration-200 ease-out',
+browserFrameScreenBg: 'browser-frame-screen-bg w-full h-[330px] bg-primary rounded-b-2xl px-2 pb-2 transition-all duration-200 ease-out',
+browserFrameScreen: 'browser-frame-screen bg-secondary w-full h-full rounded-2xl transition-all duration-200 ease-out'
+} satisfies Record
+ {icon}
+
+
+
+
+
+
+ + MultiversX Wallet Extension +
+ ++ The MultiversX DeFi Wallet can be installed on Firefox, Chrome, + Brave, and other chromium-based browsers. This extension is free and + secure. +
+
+
+ Get Extension
+
+
+
+ {browserLogos.map(({ icon: Icon }, index) => (
+
+
+ 
+
+
+
+ );
+};
diff --git a/src/app/components/HowToConnectComponent/components/ExtensionConnect/components/index.ts b/src/app/components/HowToConnectComponent/components/ExtensionConnect/components/index.ts
new file mode 100644
index 0000000..452314d
--- /dev/null
+++ b/src/app/components/HowToConnectComponent/components/ExtensionConnect/components/index.ts
@@ -0,0 +1 @@
+export * from './BrowserFrame';
diff --git a/src/app/components/HowToConnectComponent/components/ExtensionConnect/index.ts b/src/app/components/HowToConnectComponent/components/ExtensionConnect/index.ts
new file mode 100644
index 0000000..10d1c1a
--- /dev/null
+++ b/src/app/components/HowToConnectComponent/components/ExtensionConnect/index.ts
@@ -0,0 +1 @@
+export * from './ExtensionConnect';
diff --git a/src/app/components/HowToConnectComponent/components/index.ts b/src/app/components/HowToConnectComponent/components/index.ts
new file mode 100644
index 0000000..843d249
--- /dev/null
+++ b/src/app/components/HowToConnectComponent/components/index.ts
@@ -0,0 +1,2 @@
+export * from './ConnectCard';
+export * from './ExtensionConnect';
diff --git a/src/app/components/HowToConnectComponent/index.ts b/src/app/components/HowToConnectComponent/index.ts
new file mode 100644
index 0000000..a4b25e4
--- /dev/null
+++ b/src/app/components/HowToConnectComponent/index.ts
@@ -0,0 +1 @@
+export * from './HowToConnectComponent';
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
new file mode 100644
index 0000000..10bfcc1
--- /dev/null
+++ b/src/app/components/index.ts
@@ -0,0 +1,2 @@
+export * from './HeroComponent';
+export * from './HowToConnectComponent';
diff --git a/src/app/dashboard/components/DashboardHeader/DashboardHeader.tsx b/src/app/dashboard/components/DashboardHeader/DashboardHeader.tsx
new file mode 100644
index 0000000..37981c3
--- /dev/null
+++ b/src/app/dashboard/components/DashboardHeader/DashboardHeader.tsx
@@ -0,0 +1,34 @@
+import {
+ REACT_LINK,
+ SDK_DAPP_PACKAGE_LINK,
+ TYPESCRIPT_LINK
+} from '@/localConstants';
+
+import { LinkComponent } from './components';
+
+// prettier-ignore
+const styles = {
+ dashboardHeaderContainer: 'dashboard-header-container flex flex-col p-8 lg:p-10 justify-center items-center gap-6 self-stretch',
+ dashboardHeaderTitle: 'dashboard-header-title text-primary transition-all duration-200 ease-out text-center text-3xl xs:text-5xl lg:text-6xl font-medium',
+ dashboardHeaderDescription: 'dashboard-header-description text-secondary transition-all duration-200 ease-out text-center text-base xs:text-lg lg:text-xl font-medium'
+} satisfies Record
+
+
+
+ {[...Array(3)].map((_, index) => (
+
+ ))}
+
+
+
+
+
+ {[...Array(3)].map((_, index) => (
+
+ ))}
+
+
+
+
+
+
+);
diff --git a/src/app/dashboard/components/DashboardHeader/components/LinkComponent/LinkComponent.tsx b/src/app/dashboard/components/DashboardHeader/components/LinkComponent/LinkComponent.tsx
new file mode 100644
index 0000000..60081d6
--- /dev/null
+++ b/src/app/dashboard/components/DashboardHeader/components/LinkComponent/LinkComponent.tsx
@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+
+// prettier-ignore
+const styles = {
+ linkAddress: 'link-address underline hover:text-primary transition-all duration-200 ease-out'
+} satisfies RecordWelcome to dApp Template
+
+
+ The MultiversX dApp Template, built using
+ React.js
+ and
+ Typescript .
+ It's a basic implementation of
+
+ @multiversx/sdk-dapp
+
+
+ , providing the basics for MultiversX authentication and TX signing.
+
+
+
+
+ );
+};
diff --git a/src/app/dashboard/components/LeftPanel/components/Account/Account.tsx b/src/app/dashboard/components/LeftPanel/components/Account/Account.tsx
new file mode 100644
index 0000000..a401b1a
--- /dev/null
+++ b/src/app/dashboard/components/LeftPanel/components/Account/Account.tsx
@@ -0,0 +1,169 @@
+import {
+ faChevronUp,
+ faLayerGroup,
+ faWallet
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import { ReactNode, useState } from 'react';
+import xLogo from '@/assets/img/x-logo.svg';
+
+import { Label } from '@/components';
+import {
+ DECIMALS,
+ DIGITS,
+ FormatAmountController,
+ MvxFormatAmount,
+ MvxTrim,
+ useGetAccountInfo,
+ useGetNetworkConfig
+} from '@/lib';
+
+import { Username } from './components';
+import { useGetUserHerotag } from './hooks/useGetUserHerotag';
+
+// prettier-ignore
+const styles = {
+ connectedAccountContainer: 'connected-account flex flex-col gap-4',
+ connectedAccountHeader: 'connected-account-header flex justify-between items-center',
+ connectedAccountHeaderTitle: 'connected-account-header-title text-base transition-all duration-200 ease-out text-secondary',
+ connectedAccountHeaderIcon: 'connected-account-header-icon text-primary transition-transform duration-200 ease-out',
+ connectedAccountHeaderIconRotated: 'rotate-180',
+ connectedAccountDetails: 'connected-account-details flex flex-col',
+ connectedAccountDetailsHidden: 'hidden',
+ connectedAccountInfo: 'connected-account-info flex h-14 gap-2 items-center',
+ connectedAccountInfoIcon: 'connected-account-info-icon min-w-10 min-h-10 max-h-10 max-w-10 flex items-center justify-center text-tertiary border border-secondary rounded-lg overflow-hidden p-1.5 transition-all duration-200 ease-out',
+ connectedAccountInfoText: 'connected-account-info-text truncate flex flex-col',
+ connectedAccountInfoTextValue: 'connected-account-info-text-value text-primary transition-all duration-200 ease-out text-base',
+ connectedAccountDetailsIcon: 'connected-account-details-icon w-6 h-6',
+ connectedAccountDetailsHerotag: 'connected-account-details-herotag rounded-full',
+ connectedAccountDetailsXLogo: 'connected-account-details-xlogo fill-primary transition-all duration-200 ease-out',
+ connectedAccountDetailsTrimAddress: 'w-max'
+} satisfies Record
+
+
+
+
+
+
+
+
+
+
+ {isLoggedIn && (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/src/app/dashboard/components/LeftPanel/components/Account/components/Username.tsx b/src/app/dashboard/components/LeftPanel/components/Account/components/Username.tsx
new file mode 100644
index 0000000..f5055c4
--- /dev/null
+++ b/src/app/dashboard/components/LeftPanel/components/Account/components/Username.tsx
@@ -0,0 +1,30 @@
+import { AccountType, trimUsernameDomain } from '@/lib';
+import { DataTestIdsEnum } from '@/localConstants';
+import { ProfileType } from '@/types';
+
+import { useGetUserHerotag } from '../hooks/useGetUserHerotag';
+
+// prettier-ignore
+const styles = {
+ usernameContainer: 'username-container flex gap-0.5',
+ herotag: 'herotag text-accent transition-all duration-200 ease-out'
+} satisfies Record
+
+
+ + Connected account details +
+ +
+ {accountDetails.map((accountDetail, index) => (
+
+
+
+ ))}
+
+ {accountDetail.icon}
+
+
+ + + + {accountDetail.value} + +
++ {herotag ? '@' : ''} + + + {herotag ? trimUsernameDomain(herotag) : 'N/A'} + +
+ ); +}; diff --git a/src/app/dashboard/widgets/Account/components/index.ts b/src/app/dashboard/components/LeftPanel/components/Account/components/index.ts similarity index 100% rename from src/app/dashboard/widgets/Account/components/index.ts rename to src/app/dashboard/components/LeftPanel/components/Account/components/index.ts diff --git a/src/app/dashboard/components/LeftPanel/components/Account/hooks/useGetUserHerotag.tsx b/src/app/dashboard/components/LeftPanel/components/Account/hooks/useGetUserHerotag.tsx new file mode 100644 index 0000000..1e9a4be --- /dev/null +++ b/src/app/dashboard/components/LeftPanel/components/Account/hooks/useGetUserHerotag.tsx @@ -0,0 +1,39 @@ +import axios from 'axios'; +import { useEffect, useState } from 'react'; + +import { ID_API_URL, USERS_API_URL } from '@/config/config.mainnet'; + +export const useGetUserHerotag = (address: string) => { + const [profileUrl, setProfileUrl] = useState(''); + const [herotag, setHerotag] = useState(''); + + const getUserProfileData = async (address?: string) => { + if (!address) { + return; + } + + try { + const { data } = await axios.get(`${USERS_API_URL}${address}`, { + baseURL: ID_API_URL + }); + + return data; + } catch (err) { + console.error('Unable to fetch profile url'); + } + }; + + useEffect(() => { + if (!address) return; + + const fetchUserProfileUrl = async () => { + const data = await getUserProfileData(address); + setProfileUrl(data?.profile?.url); + setHerotag(data?.herotag); + }; + + fetchUserProfileUrl(); + }, [address]); + + return [herotag, profileUrl]; +}; diff --git a/src/app/dashboard/widgets/Account/index.ts b/src/app/dashboard/components/LeftPanel/components/Account/index.ts similarity index 100% rename from src/app/dashboard/widgets/Account/index.ts rename to src/app/dashboard/components/LeftPanel/components/Account/index.ts diff --git a/src/app/dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx b/src/app/dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx new file mode 100644 index 0000000..bd207c1 --- /dev/null +++ b/src/app/dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx @@ -0,0 +1,149 @@ +import { + faChevronUp, + faFilter, + faFingerprint, + faPenNib, + faRectangleList, + faTableTennisPaddleBall, + IconDefinition +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; +import { FunctionComponent, SVGProps, useState } from 'react'; + +import { ItemsIdentifiersEnum } from '@/app/dashboard/dashboard.types'; +import abiIcon from '@/assets/img/ping-pong-abi.svg'; +import backendIcon from '@/assets/img/ping-pong-backend.svg'; +import batchIcon from '@/assets/img/batch-tx.svg'; + +// prettier-ignore +const styles = { + sideMenuContainer: 'side-menu-container flex flex-col gap-4', + sideMenuHeader: 'side-menu-header flex items-center justify-between', + sideMenuHeaderTitle: 'side-menu-header-title text-base transition-all duration-200 ease-out text-secondary', + sideMenuHeaderIcon: 'side-menu-header-icon text-primary transition-transform duration-200 ease-out', + sideMenuHeaderIconRotated: 'rotate-180', + sideMenuItems: 'side-menu-items flex flex-col transition-all duration-200 ease-out', + sideMenuItemsHidden: 'hidden', + sideMenuItem: 'side-menu-item flex items-center gap-2 p-2 cursor-pointer text-tertiary hover:text-primary hover:bg-primary hover:font-bold transition-all duration-200 ease-out fill-tertiary hover:fill-primary hover:rounded-lg', + sideMenuItemActive: 'side-menu-item-active text-primary bg-primary fill-primary rounded-lg font-bold transition-all duration-200 ease-out', + sideMenuItemTitle: 'side-menu-item-title transition-all duration-200 ease-out text-sm' +} satisfies Record
+
+ );
+};
diff --git a/src/app/dashboard/components/LeftPanel/components/SideMenu/index.ts b/src/app/dashboard/components/LeftPanel/components/SideMenu/index.ts
new file mode 100644
index 0000000..6b65bcf
--- /dev/null
+++ b/src/app/dashboard/components/LeftPanel/components/SideMenu/index.ts
@@ -0,0 +1 @@
+export * from './SideMenu';
diff --git a/src/app/dashboard/components/LeftPanel/components/index.ts b/src/app/dashboard/components/LeftPanel/components/index.ts
new file mode 100644
index 0000000..3ba9126
--- /dev/null
+++ b/src/app/dashboard/components/LeftPanel/components/index.ts
@@ -0,0 +1,2 @@
+export * from './Account';
+export * from './SideMenu';
diff --git a/src/app/dashboard/components/LeftPanel/index.ts b/src/app/dashboard/components/LeftPanel/index.ts
new file mode 100644
index 0000000..aedb0f9
--- /dev/null
+++ b/src/app/dashboard/components/LeftPanel/index.ts
@@ -0,0 +1 @@
+export * from './LeftPanel';
diff --git a/src/app/dashboard/components/Widget.tsx b/src/app/dashboard/components/Widget/Widget.tsx
similarity index 85%
rename from src/app/dashboard/components/Widget.tsx
rename to src/app/dashboard/components/Widget/Widget.tsx
index ee2d6cb..8f0d3c7 100644
--- a/src/app/dashboard/components/Widget.tsx
+++ b/src/app/dashboard/components/Widget/Widget.tsx
@@ -1,7 +1,7 @@
'use client';
import { Card } from '@/components';
import { WidgetType } from '@/types/widget.types';
-import { TransactionsPropsType } from '../widgets/Transactions/types';
+import { TransactionsPropsType } from '../../widgets/Transactions/types';
export const Widget = ({
title,
diff --git a/src/app/dashboard/components/Widget/index.ts b/src/app/dashboard/components/Widget/index.ts
new file mode 100644
index 0000000..b42adc8
--- /dev/null
+++ b/src/app/dashboard/components/Widget/index.ts
@@ -0,0 +1 @@
+export * from './Widget';
diff --git a/src/app/dashboard/components/index.ts b/src/app/dashboard/components/index.ts
index b42adc8..ca9c467 100644
--- a/src/app/dashboard/components/index.ts
+++ b/src/app/dashboard/components/index.ts
@@ -1 +1,3 @@
+export * from './DashboardHeader';
+export * from './LeftPanel';
export * from './Widget';
diff --git a/src/app/dashboard/dashboard.types.ts b/src/app/dashboard/dashboard.types.ts
new file mode 100644
index 0000000..c7abf2e
--- /dev/null
+++ b/src/app/dashboard/dashboard.types.ts
@@ -0,0 +1,10 @@
+export enum ItemsIdentifiersEnum {
+ pingPongRaw = 'ping-pong-raw',
+ pingPongAbi = 'ping-pong-abi',
+ pingPongService = 'ping-pong-service',
+ signMessage = 'sign-message',
+ nativeAuth = 'native-auth',
+ batchTransactions = 'batch-transactions',
+ transactionsAll = 'transactions-all',
+ transactionsPingPong = 'transactions-ping-pong'
+}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index a0c316b..8d29544 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,33 +1,40 @@
+'use client';
+import classNames from 'classnames';
+import { useState } from 'react';
+
import { contractAddress } from '@/config';
+import { WidgetType } from '@/types/widget.types';
+
+import { DashboardHeader, LeftPanel, Widget } from './components';
import {
- Account,
- PingPongAbi,
- SignMessage,
- NativeAuth,
BatchTransactions,
+ NativeAuth,
+ PingPongAbi,
PingPongRaw,
PingPongService,
+ SignMessage,
Transactions
} from './widgets';
-import { AuthRedirectWrapper } from '@/wrappers';
-import { Widget } from './components';
-import { WidgetType } from '@/types/widget.types';
+import { ItemsIdentifiersEnum } from './dashboard.types';
-const WIDGETS: WidgetType[] = [
- {
- title: 'Account',
- widget: Account,
- description: 'Connected account details',
- reference: 'https://docs.multiversx.com/sdk-and-tools/sdk-dapp/#account'
- },
+// prettier-ignore
+const styles = {
+ dashboardContainer: 'dashboard-container flex w-screen min-h-screen relative border-t border-b border-secondary transition-all duration-200 ease-out',
+ mobilePanelContainer: 'mobile-panel-container fixed bottom-0 left-0 right-0 z-50 max-h-full overflow-y-auto lg:static lg:max-h-none lg:overflow-visible',
+ desktopPanelContainer: 'desktop-panel-container lg:flex',
+ dashboardContent: 'dashboard-content flex flex-col gap-6 justify-center items-center flex-1 w-full overflow-auto border-l border-secondary p-4 lg:p-6 transition-all duration-200 ease-out',
+ dashboardContentMobilePanelOpen: 'dashboard-content-mobile-panel-open opacity-20 lg:opacity-100 pointer-events-none',
+ dashboardWidgets: 'dashboard-widgets flex flex-col gap-6 w-full max-w-320'
+} satisfies Record
+
+
+ Library
+ +
+ {menuItems.map((item) => (
+
+ handleMenuItemClick(item.id)}
+ className={classNames(styles.sideMenuItem, {
+ [styles.sideMenuItemActive]: item.id === activeItem
+ })}
+ >
+ {item.icon && setItemIcon(item.icon)}
+
+
+ ))}
+ {item.title}
+
- {WIDGETS.map((element) => (
-
-
- );
-};
diff --git a/src/app/dashboard/widgets/Account/components/Username.tsx b/src/app/dashboard/widgets/Account/components/Username.tsx
deleted file mode 100644
index 736955b..0000000
--- a/src/app/dashboard/widgets/Account/components/Username.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { trimUsernameDomain, type AccountType } from '@/lib';
-import { Label } from '@/components/Label';
-import { ProfileType } from '@/types';
-
-export const Username = (props: {
- account: AccountType | ProfileType | null;
-}) => {
- const { account } = props;
-
- if (!account) {
- return null;
- }
-
- return (
- ;
+
+interface BatchTransactionsButtonsType {
+ dataTestId: string;
+ onClickFunction: () => Promise;
+ icon: IconDefinition;
+ label: string;
+}
export const BatchTransactions = () => {
const { address, nonce } = useGetAccount();
@@ -57,38 +76,51 @@ export const BatchTransactions = () => {
});
};
- return (
-
+
);
}
diff --git a/src/app/dashboard/widgets/Account/Account.tsx b/src/app/dashboard/widgets/Account/Account.tsx
deleted file mode 100644
index 3e8e7b8..0000000
--- a/src/app/dashboard/widgets/Account/Account.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-import { OutputContainer, Label } from '@/components';
-import {
- useGetAccountInfo,
- useGetNetworkConfig,
- MvxFormatAmount,
- FormatAmountController,
- DIGITS,
- DECIMALS
-} from '@/lib';
-import { Username } from './components';
-
-export const Account = () => {
- const { address, account } = useGetAccountInfo();
- const { network } = useGetNetworkConfig();
-
- const { isValid, valueDecimal, valueInteger, label } =
- FormatAmountController.getData({
- digits: DIGITS,
- decimals: DECIMALS,
- egldLabel: network.egldLabel,
- input: account.balance
- });
-
- return (
-
+
+
+
+
-
+
+ {dashboardWidgets.map((element) => (
+
-
- - - {address} -
- -- - {account.shard} -
- -
-
-
- - - {account.username ? trimUsernameDomain(account.username) : 'N/A'} - -
- ); -}; diff --git a/src/app/dashboard/widgets/BatchTransactions/BatchTransactions.tsx b/src/app/dashboard/widgets/BatchTransactions/BatchTransactions.tsx index 106110a..41b85d7 100644 --- a/src/app/dashboard/widgets/BatchTransactions/BatchTransactions.tsx +++ b/src/app/dashboard/widgets/BatchTransactions/BatchTransactions.tsx @@ -1,20 +1,39 @@ 'use client'; import { faArrowsRotate, - faPaperPlane + faPaperPlane, + IconDefinition } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, OutputContainer, TransactionsOutput } from '@/components'; +import { MvxButton } from '@multiversx/sdk-dapp-ui/react'; + +import { OutputContainer, TransactionsOutput } from '@/components'; import { useGetAccount, useGetNetworkConfig, useGetPendingTransactions } from '@/lib'; + import { sendBatchTransactions, signAndAutoSendBatchTransactions, swapAndLockTokens } from './helpers'; +import { ItemsIdentifiersEnum } from '../../dashboard.types'; + +// prettier-ignore +const styles = { + batchTx: 'batch-tx flex flex-col gap-6', + buttonsContainer: 'buttons-container flex flex-col md:flex-row gap-2 items-start', + batchTxButton: 'batch-tx-button text-sm font-normal' +} satisfies Record
-
+
+
);
};
diff --git a/src/app/dashboard/widgets/NativeAuth/NativeAuth.tsx b/src/app/dashboard/widgets/NativeAuth/NativeAuth.tsx
index 883eefa..714d49e 100644
--- a/src/app/dashboard/widgets/NativeAuth/NativeAuth.tsx
+++ b/src/app/dashboard/widgets/NativeAuth/NativeAuth.tsx
@@ -1,36 +1,51 @@
-'use client';
import { useEffect } from 'react';
-import { MissingNativeAuthError } from '@/components/MissingNativeAuthError';
-import { Label } from '@/components/Label';
-import { OutputContainer } from '@/components/OutputContainer';
+import { Label, MissingNativeAuthError, OutputContainer } from '@/components';
import {
- useGetLoginInfo,
- useGetNetworkConfig,
- MvxFormatAmount,
- FormatAmountController,
+ // ACCOUNTS_ENDPOINT,
+ DECIMALS,
DIGITS,
- DECIMALS
+ FormatAmountController,
+ // MvxDataWithExplorerLink,
+ MvxFormatAmount,
+ useGetAccount,
+ useGetLoginInfo,
+ useGetNetworkConfig
} from '@/lib';
+
import { useGetProfile } from './hooks';
-import { Username } from '../Account/components';
+import { ItemsIdentifiersEnum } from '../../dashboard.types';
+import { Username } from '../../components/LeftPanel/components/Account/components';
+
+// prettier-ignore
+const styles = {
+ nativeAuthContainer: 'native-auth-container flex flex-col gap-8',
+ nativeAuthAddressContainer: 'native-auth-address-container flex flex-col gap-2',
+ nativeAuthAddress: 'native-auth-address flex justify-between w-full',
+ nativeAuthDetails: 'native-auth-details flex gap-8 w-full',
+ nativeAuthDetailContainer: 'native-auth-detail-container flex flex-col gap-2 sm:w-1/3',
+ nativeAuthAmount: 'native-auth-amount flex gap-1',
+ nativeAuthMissingProfile: 'native-auth-missing-profile flex items-center gap-1'
+} satisfies Record;
export const NativeAuth = () => {
+ const { network } = useGetNetworkConfig();
const { tokenLogin, isLoggedIn } = useGetLoginInfo();
+ const account = useGetAccount();
const { isLoading, profile, getProfile } = useGetProfile();
- const { network } = useGetNetworkConfig();
const { isValid, valueDecimal, valueInteger, label } =
FormatAmountController.getData({
digits: DIGITS,
decimals: DECIMALS,
egldLabel: network.egldLabel,
- input: profile?.balance ?? '0'
+ input: account.balance
});
useEffect(() => {
// On page refresh, tokenInfo is null which implies that we do not have access to loginInfo data
if (isLoggedIn && tokenLogin?.nativeAuthToken) {
+ // native auth network call example
getProfile();
}
}, [isLoggedIn]);
@@ -42,7 +57,7 @@ export const NativeAuth = () => {
if (!profile && !isLoading) {
return (
-
-
-
-
-
+ const batchTransactionsButtons: BatchTransactionsButtonsType[] = [
+ {
+ dataTestId: 'sign-auto-send',
+ onClickFunction: executeSignAndAutoSendBatchTransactions,
+ icon: faPaperPlane,
+ label: 'Sign & send batch'
+ },
+ {
+ dataTestId: 'send-transactions',
+ onClickFunction: executeBatchTransactions,
+ icon: faPaperPlane,
+ label: 'Sign batch & controlled sending'
+ },
+ {
+ dataTestId: 'swap-lock',
+ onClickFunction: executeSwapAndLockTokens,
+ icon: faArrowsRotate,
+ label: 'Swap & Lock'
+ }
+ ];
+ return (
+
+ {batchTransactionsButtons.map((button) => (
+
+
+ ))}
+
+
@@ -50,26 +65,56 @@ export const NativeAuth = () => {
}
return (
-
-
Unable to load profile
- {profile?.address ?? 'N/A'} -
- -- {profile?.shard ?? 'N/A'} -
- -
-
- (0);
-
- const setSecondsRemaining = async () => {
- const secondsRemaining = await getTimeToPong();
- const { canPing, timeRemaining } = setTimeRemaining(secondsRemaining);
-
- setHasPing(canPing);
- if (timeRemaining && timeRemaining >= 0) {
- setSecondsLeft(timeRemaining);
- }
- };
-
- const onSendPingTransaction = async () => {
- await sendPingTransaction(pingAmount);
- };
-
- const onSendPongTransaction = async () => {
- await sendPongTransaction();
- };
-
- const timeRemaining = moment()
- .startOf('day')
- .seconds(secondsLeft ?? 0)
- .format('mm:ss');
-
- const pongAllowed = secondsLeft === 0;
-
- useEffect(() => {
- getCountdownSeconds({ secondsLeft, setSecondsLeft });
- }, [hasPing]);
-
- useEffect(() => {
- setSecondsRemaining();
- }, [hasPendingTransactions]);
-
return (
- ;
export const SignMessage = () => {
const [message, setMessage] = useState('');
@@ -52,56 +69,92 @@ export const SignMessage = () => {
setState('pending');
};
+ const handlePasteClick = async () => {
+ const message = await navigator.clipboard.readText();
+
+ setMessage(message);
+ };
+
return (
-
+
);
};
diff --git a/src/app/dashboard/widgets/PingPongAbi/PingPongAbi.tsx b/src/app/dashboard/widgets/PingPongAbi/PingPongAbi.tsx
index 861a952..662d260 100644
--- a/src/app/dashboard/widgets/PingPongAbi/PingPongAbi.tsx
+++ b/src/app/dashboard/widgets/PingPongAbi/PingPongAbi.tsx
@@ -1,113 +1,22 @@
-'use client';
-import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import moment from 'moment';
-import { useEffect, useState } from 'react';
-import {
- Button,
- ContractAddress,
- Label,
- OutputContainer,
- PingPongOutput
-} from '@/components';
-import { getCountdownSeconds, setTimeRemaining } from '@/helpers';
import { useSendPingPongTransaction } from '@/hooks';
-import { useGetPendingTransactions } from '@/lib';
+
import { useGetPingAmount, useGetTimeToPong } from './hooks';
+import { PingPongComponent } from '@/components';
+import { ItemsIdentifiersEnum } from '../../dashboard.types';
export const PingPongAbi = () => {
- const transactions = useGetPendingTransactions();
- const hasPendingTransactions = transactions.length > 0;
-
const getTimeToPong = useGetTimeToPong();
const { sendPingTransactionFromAbi, sendPongTransactionFromAbi } =
useSendPingPongTransaction();
const pingAmount = useGetPingAmount();
- const [hasPing, setHasPing] = useState(true);
- const [secondsLeft, setSecondsLeft] = useState(0);
-
- const setSecondsRemaining = async () => {
- const secondsRemaining = await getTimeToPong();
- const { canPing, timeRemaining } = setTimeRemaining(secondsRemaining);
-
- setHasPing(canPing);
- if (timeRemaining && timeRemaining >= 0) {
- setSecondsLeft(timeRemaining);
- }
- };
-
- const onSendPingTransaction = async () => {
- await sendPingTransactionFromAbi(pingAmount);
- };
-
- const onSendPongTransaction = async () => {
- await sendPongTransactionFromAbi();
- };
-
- const timeRemaining = moment()
- .startOf('day')
- .seconds(secondsLeft ?? 0)
- .format('mm:ss');
-
- const pongAllowed = secondsLeft === 0;
-
- useEffect(() => {
- getCountdownSeconds({ secondsLeft, setSecondsLeft });
- }, [hasPing]);
-
- useEffect(() => {
- setSecondsRemaining();
- }, [hasPendingTransactions]);
-
return (
-
+
+
+
+ {/*
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {profile?.shard ?? 'N/A'}
+
+
+
+
+
+
+
+
-
- {!hasPendingTransactions && (
- <>
-
-
+
-
-
-
-
-
-
-
- - - {timeRemaining} until able - to pong -
- )} - - )} - -
-
- {!hasPendingTransactions && (
- <>
-
-
+
-
-
-
-
-
-
-
- - - {timeRemaining} until able - to pong -
- )} - - )} -
-
- {!hasPendingTransactions && (
- <>
-
-
+
-
-
-
-
-
-
-
- - - {timeRemaining} until able - to pong -
- )} - - )} -
-
+
+
+
+
+ {!['success', 'error'].includes(state) && (
+