+
+ {title}
+
+
+
+ {description &&
+);
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
new file mode 100644
index 0000000..ca0b060
--- /dev/null
+++ b/src/components/Card/index.ts
@@ -0,0 +1 @@
+export * from './Card';
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..a756136
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,42 @@
+import { faHeart } from '@fortawesome/free-solid-svg-icons';
+import moment from 'moment';
+
+import Fa from 'solid-fa';
+import { getState, networkSelector } from 'lib';
+import { version } from '../../../package.json';
+
+// prettier-ignore
+const styles = {
+ footer: 'footer mx-auto w-full max-w-prose py-4 text-center',
+ footerContainer: 'footer-container flex flex-col gap-2 font-medium items-center justify-center text-sm text-[#989898]',
+ footerDescription: 'footer-description flex items-center justify-center gap-1 text-sm text-neutral-500 gap-1',
+ footerDescriptionNetwork: 'footer-description-network capitalize',
+ footerHeartIcon: 'text-red-500'
+} satisfies Record
+ {title}
+
+
+
+ {description && {description}
} + {children} +
+
+
+
+
+
+ );
+ }}
+ >
+
+ {themeOptions.map((themeOption) => (
+
+
+
+ ))}
+
+ {themeOption.label}
+
+
+ {themeOption.identifier !== activeTheme()?.identifier && (
+
+ {dotColors.map((dotColor) => (
+
+ ))}
+
+);
diff --git a/src/components/Header/components/ThemeTooltip/components/ThemeTooltipDots/index.ts b/src/components/Header/components/ThemeTooltip/components/ThemeTooltipDots/index.ts
new file mode 100644
index 0000000..a0c78a4
--- /dev/null
+++ b/src/components/Header/components/ThemeTooltip/components/ThemeTooltipDots/index.ts
@@ -0,0 +1 @@
+export * from './ThemeTooltipDots';
diff --git a/src/components/Header/components/ThemeTooltip/components/index.ts b/src/components/Header/components/ThemeTooltip/components/index.ts
new file mode 100644
index 0000000..a0c78a4
--- /dev/null
+++ b/src/components/Header/components/ThemeTooltip/components/index.ts
@@ -0,0 +1 @@
+export * from './ThemeTooltipDots';
diff --git a/src/components/Header/components/ThemeTooltip/index.ts b/src/components/Header/components/ThemeTooltip/index.ts
new file mode 100644
index 0000000..3deaf1f
--- /dev/null
+++ b/src/components/Header/components/ThemeTooltip/index.ts
@@ -0,0 +1 @@
+export * from './ThemeTooltip';
diff --git a/src/components/Header/components/index.ts b/src/components/Header/components/index.ts
new file mode 100644
index 0000000..3deaf1f
--- /dev/null
+++ b/src/components/Header/components/index.ts
@@ -0,0 +1 @@
+export * from './ThemeTooltip';
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 0000000..266dec8
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
deleted file mode 100644
index fcd5618..0000000
--- a/src/components/Label.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { IPropsWithChildren } from 'types';
-
-export const Label = ({ children }: IPropsWithChildren) => {
- return ;
-};
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
new file mode 100644
index 0000000..4e8555d
--- /dev/null
+++ b/src/components/Label/Label.tsx
@@ -0,0 +1,10 @@
+import { IPropsWithChildren } from 'types';
+
+// prettier-ignore
+const styles = {
+ labelContainer: 'label-container text-secondary transition-all duration-200 ease-out text-sm font-normal'
+} satisfies Record
-
- {children}
-
-
-
- );
-};
+// prettier-ignore
+const styles = {
+ layoutContainer: 'layout-container flex min-h-screen flex-col bg-accent transition-all duration-200 ease-out',
+ mainContainer: 'main-container flex flex-grow items-stretch justify-center'
+} satisfies Record
+ {children}
+
+
+
+);
diff --git a/src/components/Layout/components/ConnectButton.tsx b/src/components/Layout/components/ConnectButton.tsx
deleted file mode 100644
index 2181e81..0000000
--- a/src/components/Layout/components/ConnectButton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useNavigate } from '@solidjs/router';
-import { Button } from 'components';
-import { UnlockPanelManager } from 'lib';
-import { RouteNamesEnum } from 'localConstants';
-
-export const ConnectButton = () => {
- const navigate = useNavigate();
- const unlockPanelManager = UnlockPanelManager.init({
- loginHandler: () => {
- navigate(RouteNamesEnum.dashboard);
- }
- });
-
- const handleOpenUnlockPanel = () => {
- unlockPanelManager.openUnlockPanel();
- };
-
- return ;
-};
diff --git a/src/components/Layout/components/Footer.tsx b/src/components/Layout/components/Footer.tsx
deleted file mode 100644
index f791337..0000000
--- a/src/components/Layout/components/Footer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import HeartIcon from 'assets/img/heart.svg?component-solid';
-
-export const Footer = () => {
- return (
-
- );
-};
diff --git a/src/components/Layout/components/GitHubButton.tsx b/src/components/Layout/components/GitHubButton.tsx
deleted file mode 100644
index 869a7fc..0000000
--- a/src/components/Layout/components/GitHubButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { GITHUB_REPO_URL } from 'config';
-
-export const GitHubButton = () => {
- return (
-
-
-
- );
-};
diff --git a/src/components/Layout/components/Header.tsx b/src/components/Layout/components/Header.tsx
deleted file mode 100644
index 1b2af33..0000000
--- a/src/components/Layout/components/Header.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useNavigate } from '@solidjs/router';
-import MultiversXLogo from 'assets/img/multiversx-logo.svg?component-solid';
-import { Button } from 'components/Button';
-import { MxLink } from 'components/MxLink';
-import { environment } from 'config';
-import { getAccountProvider, getIsLoggedIn } from 'lib';
-import { RouteNamesEnum } from 'localConstants';
-import { ConnectButton } from './ConnectButton';
-import { GitHubButton } from './GitHubButton';
-import { NotificationsButton } from './NotificationsButton';
-
-export const Header = () => {
- const isLoggedIn = getIsLoggedIn();
- const navigate = useNavigate();
- const provider = getAccountProvider();
-
- const handleLogout = async () => {
- await provider.logout();
- navigate(RouteNamesEnum.home);
- };
-
- return (
-
-
);
};
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
new file mode 100644
index 0000000..d5ce981
--- /dev/null
+++ b/src/components/Loader/index.ts
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
new file mode 100644
index 0000000..9fb5ae1
--- /dev/null
+++ b/src/components/Logo/Logo.tsx
@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+
+// prettier-ignore
+const styles = {
+ logo: 'logo flex items-center justify-center gap-3',
+ logoIcon: 'logo-icon relative',
+ logoIconEmpty: 'logo-icon-empty w-4 h-4 bg-accent border-2 border-logo z-1 relative transition-all duration-200 ease-out',
+ logoIconFilled: 'logo-icon-filled w-4 h-4 bg-logo-primary absolute left-0.75 bottom-0.75 transition-all duration-200 ease-out',
+ logoText: 'logo-text text-xl lg:text-2xl font-medium flex text-primary transition-all duration-200 ease-out relative -top-0.5 leading-none',
+ logoTextHidden: 'logo-text-hidden hidden lg:!flex'
+} satisfies Record
+
+);
diff --git a/src/components/Logo/index.ts b/src/components/Logo/index.ts
new file mode 100644
index 0000000..d97c695
--- /dev/null
+++ b/src/components/Logo/index.ts
@@ -0,0 +1 @@
+export * from './Logo';
diff --git a/src/components/MissingNativeAuthError/MissingNativeAuthError.tsx b/src/components/MissingNativeAuthError/MissingNativeAuthError.tsx
new file mode 100644
index 0000000..520838f
--- /dev/null
+++ b/src/components/MissingNativeAuthError/MissingNativeAuthError.tsx
@@ -0,0 +1,22 @@
+import { OutputContainer } from '../OutputContainer';
+
+// prettier-ignore
+const styles = {
+ errorContainer: 'error-container flex items-center gap-1',
+ emphasizedText: 'emphasized-text text-red-500 font-bold',
+ nativeAuthText: 'native-auth-text font-bold italic leading-none text-primary transition-all duration-200 ease-out'
+} satisfies Record
+
+
+
+
+
+ dApp Template
+
+
+
+ + Information could + NOT + be displayed because + nativeAuth + is not active +
+
- {isLoading ?
- );
-};
+export const OutputContainer = ({
+ children,
+ isLoading = false,
+ class: className = 'p-4',
+ 'data-testid': dataTestId
+}: OutputContainerPropsType) => (
+
+ {isLoading ?
+);
diff --git a/src/components/OutputContainer/components/PingPongOutput.tsx b/src/components/OutputContainer/components/PingPongOutput.tsx
index 9f9471c..5e20a77 100644
--- a/src/components/OutputContainer/components/PingPongOutput.tsx
+++ b/src/components/OutputContainer/components/PingPongOutput.tsx
@@ -1,12 +1,27 @@
-import { ContractAddress } from 'components/ContractAddress';
-import { Label } from 'components/Label';
-import { SignedTransactionType } from 'lib';
+import { Label } from 'components';
+import { contractAddress } from 'config';
+import { useStore } from 'hooks';
+import {
+ ACCOUNTS_ENDPOINT,
+ getExplorerLink,
+ MvxDataWithExplorerLink,
+ networkSelector,
+ SignedTransactionType
+} from 'lib';
+
import { TransactionsOutput } from './TransactionsOutput';
+// prettier-ignore
+const styles = {
+ pingPongAddressContainer: 'ping-pong-address-container flex justify-between mb-4',
+ pingPongButtons: 'ping-pong-buttons flex gap-3',
+ timeRemaining: 'time-remaining text-red-600'
+} satisfies Record- {timeRemaining} until able to pong + {timeRemaining} until able + to pong
)} diff --git a/src/components/OutputContainer/components/TransactionOutput.tsx b/src/components/OutputContainer/components/TransactionOutput.tsx index 2596995..e7aa937 100644 --- a/src/components/OutputContainer/components/TransactionOutput.tsx +++ b/src/components/OutputContainer/components/TransactionOutput.tsx @@ -1,50 +1,90 @@ -import { Label } from 'components/Label'; -import { ExplorerLink, FormatAmount } from 'lib'; +import { Label } from 'components'; +import { useStore } from 'hooks'; import { ACCOUNTS_ENDPOINT, + DECIMALS, + DIGITS, + FormatAmount, + FormatAmountController, + getAccount, + getExplorerLink, getState, + MvxDataWithExplorerLink, networkSelector, SignedTransactionType, TRANSACTIONS_ENDPOINT } from 'lib'; +// prettier-ignore +const styles = { + transactionContainer: 'transaction-container flex flex-col', + transactionElementContainer: 'transaction-elem-container flex gap-2', + transactionElement: 'transaction-elem flex justify-between w-full', + buttons: 'buttons flex gap-3', + dataContainer: 'data-container whitespace-nowrap' +} satisfies Record
- ;
+
export const TransactionsOutput = ({
transactions
}: {
transactions: SignedTransactionType[];
}) => {
return (
-
+
+
diff --git a/src/components/OutputContainer/components/TransactionsOutput.tsx b/src/components/OutputContainer/components/TransactionsOutput.tsx
index ee397a1..d253a73 100644
--- a/src/components/OutputContainer/components/TransactionsOutput.tsx
+++ b/src/components/OutputContainer/components/TransactionsOutput.tsx
@@ -1,13 +1,19 @@
import { SignedTransactionType } from 'lib';
+
import { TransactionOutput } from './TransactionOutput';
+// prettier-ignore
+const styles = {
+ transactionsContainer: 'transactions-container flex flex-col gap-4'
+} satisfies Record
-
- {transaction.hash}
-
-
-
+
+
+
+
-
- {transaction.receiver}
-
-
+
+
@@ -55,7 +95,7 @@ export const TransactionOutput = ({ {transaction.gasLimit}
-+
{decodedData}
+
{transactions?.map((transaction) => {
return ;
+
+interface PingPongComponentPropsType {
+ id: ItemsIdentifiersEnum;
+ sendPingTransaction: (amount: any) => Promise;
+ sendPongTransaction: (transaction?: any) => Promise;
+ getTimeToPong: () => Promise;
+ pingAmount?: string;
+ getPingTransaction?: () => Promise;
+ getPongTransaction?: () => Promise;
+ tokenLogin?: TokenLoginType | null;
+}
+
+export const PingPongComponent = ({
+ id,
+ sendPingTransaction,
+ sendPongTransaction,
+ getTimeToPong,
+ pingAmount
+}: PingPongComponentPropsType) => {
+ const store = getStore();
+ const [transactions, setTransactions] = createSignal(
+ getPendingTransactions()
+ );
+ const unsubscribe = store.subscribe(() => {
+ setTransactions(getPendingTransactions());
+ });
+
+ onCleanup(() => unsubscribe());
+ const hasPendingTransactions = () => transactions().length > 0;
+
+ const [hasPing, setHasPing] = createSignal(true);
+ const [secondsLeft, setSecondsLeft] = createSignal(0);
+
+ const setSecondsRemaining = async () => {
+ const secondsRemaining = await getTimeToPong();
+ const { canPing, timeRemaining } = setTimeRemaining(secondsRemaining);
+
+ setHasPing(canPing);
+ if (timeRemaining !== undefined && 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;
+
+ createEffect(() => {
+ getCountdownSeconds({ secondsLeft: secondsLeft(), setSecondsLeft });
+ });
+
+ createEffect(() => {
+ hasPing();
+ hasPendingTransactions();
+ setSecondsRemaining();
+ });
+
+ return (
+ ;
+
+export const Tooltip = ({
+ position = 'top',
+ triggerOnClick = false,
+ class: className,
+ children,
+ trigger
+}: TooltipPropsType) => {
+ const [isTooltipVisible, setIsTooltipVisible] = createSignal(false);
+
+ const handleTriggerClick = (event: MouseEvent) => {
+ if (!triggerOnClick) {
+ return;
+ }
+
+ event.preventDefault();
+ setIsTooltipVisible(!isTooltipVisible());
+ };
+
+ const handleBlur = (event: FocusEvent) => {
+ if (
+ !(event.currentTarget as HTMLElement)?.contains(
+ event.relatedTarget as Node
+ )
+ ) {
+ setIsTooltipVisible(false);
+ }
+ };
+
+ const handleMouseEnter = (event: MouseEvent) => {
+ if (triggerOnClick) {
+ return;
+ }
+
+ event.preventDefault();
+ setIsTooltipVisible(true);
+ };
+
+ const handleMouseLeave = (event: MouseEvent) => {
+ if (triggerOnClick) {
+ return;
+ }
+
+ event.preventDefault();
+ setIsTooltipVisible(false);
+ };
+
+ return (
+ ,
IPropsWithClass {
- egldLabel?: string;
- value: string;
+ isValid: boolean;
+ valueInteger: string;
+ valueDecimal: string;
+ label?: string;
+ decimalClass?: string;
+ labelClass?: string;
+ showLabel?: boolean;
}
export const FormatAmount = (props: FormatAmountPropsType) => {
let elementRef: Partial | undefined;
- const formatData = createMemo(() =>
- FormatAmountController.getData({
- digits: DIGITS,
- decimals: DECIMALS,
- egldLabel: props.egldLabel,
- input: props.value
- })
- );
createEffect(() => {
- const data = formatData();
-
if (!elementRef) {
return;
}
-
- Object.assign(elementRef, props, data);
+ Object.assign(elementRef, props);
});
return
+ {children}
+
+ );
+};
diff --git a/src/lib/sdkDapp/components/MvxButton/index.ts b/src/lib/sdkDapp/components/MvxButton/index.ts
new file mode 100644
index 0000000..5156442
--- /dev/null
+++ b/src/lib/sdkDapp/components/MvxButton/index.ts
@@ -0,0 +1 @@
+export * from './MvxButton';
diff --git a/src/lib/sdkDapp/components/MvxDataWithExplorerLink/MvxDataWithExplorerLink.tsx b/src/lib/sdkDapp/components/MvxDataWithExplorerLink/MvxDataWithExplorerLink.tsx
new file mode 100644
index 0000000..e05a2d3
--- /dev/null
+++ b/src/lib/sdkDapp/components/MvxDataWithExplorerLink/MvxDataWithExplorerLink.tsx
@@ -0,0 +1,32 @@
+import { IPropsWithClass } from 'types';
+
+interface MvxDataWithExplorerLinkPropsType extends IPropsWithClass {
+ data: string;
+ explorerLink: string;
+ withTooltip?: boolean;
+ showExplorerButton?: boolean;
+ showCopyButton?: boolean;
+ 'data-testid'?: string;
+}
+
+export const MvxDataWithExplorerLink = ({
+ data,
+ explorerLink,
+ class: className,
+ 'data-testid': dataTestId,
+ withTooltip,
+ showExplorerButton,
+ showCopyButton
+}: MvxDataWithExplorerLinkPropsType) => {
+ return (
+ ;
+
+const dashboardWidgets: WidgetType[] = [
{
title: 'Ping & Pong (Manual)',
widget: PingPongRaw,
description:
'Smart Contract interactions using manually formulated transactions',
reference:
- 'https://docs.multiversx.com/sdk-and-tools/indices/es-index-transactions/',
- anchor: 'ping-pong-manual'
+ 'https://docs.multiversx.com/sdk-and-tools/indices/es-index-transactions/'
},
{
title: 'Sign message',
widget: SignMessage,
description: 'Message signing using the connected account',
- reference: 'https://docs.multiversx.com/sdk-and-tools/sdk-dapp/#account-1',
- anchor: 'sign-message'
+ reference: 'https://docs.multiversx.com/sdk-and-tools/sdk-dapp/#account-1'
},
{
title: 'Transactions (All)',
- widget: Transactions,
+ widget: () =>
+
+ );
+};
diff --git a/src/components/PingPongComponent/index.ts b/src/components/PingPongComponent/index.ts
new file mode 100644
index 0000000..7bf86b5
--- /dev/null
+++ b/src/components/PingPongComponent/index.ts
@@ -0,0 +1 @@
+export * from './PingPongComponent';
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..b40c80e
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+
+import { createSignal, JSX } from 'solid-js';
+
+import { IPropsWithClass, IPropsWithChildren } from 'types';
+
+interface TooltipPropsType extends IPropsWithChildren, IPropsWithClass {
+ trigger: (isTooltipVisible: boolean) => JSX.Element;
+ triggerOnClick?: boolean;
+ position?: 'top' | 'bottom';
+}
+
+// prettier-ignore
+const styles = {
+ tooltip: 'tooltip flex relative',
+ tooltipContentWrapper: 'tooltip-content-wrapper left-1/2 -translate-x-1/2 absolute z-10',
+ tooltipContentWrapperTop: 'bottom-full pb-3',
+ tooltipContentWrapperBottom: 'top-full pt-3',
+ tooltipContent: 'tooltip-content flex-row text-left text-xs gap-1 cursor-default bg-primary rounded-xl border border-secondary p-1 relative after:w-2 after:h-2 after:border after:border-secondary after:bg-primary after:absolute after:left-1/2 after:origin-center after:-translate-x-1/2 after:-rotate-45 transition-all duration-200 ease-out',
+ tooltipContentTop: 'after:-bottom-1 after:border-t-0 after:border-r-0',
+ tooltipContentBottom: 'after:-top-1 after:border-b-0 after:border-l-0',
+ tooltipTrigger: 'tooltip-trigger'
+} satisfies Record
+
+
+
+ {!hasPendingTransactions() && (
+ <>
+
+
+
+
+ + + {timeRemaining()} + + until able to pong +
+ )} + + )} + +
+ {isTooltipVisible() && (
+
+ );
+};
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
new file mode 100644
index 0000000..7594a8f
--- /dev/null
+++ b/src/components/Tooltip/index.ts
@@ -0,0 +1 @@
+export * from './Tooltip';
diff --git a/src/components/index.ts b/src/components/index.ts
index c294228..57840f8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,11 @@
export * from './OutputContainer';
export * from './Loader';
export * from './Layout';
-export * from './Button';
-export * from './MxLink';
export * from './Label';
export * from './Card';
+export * from './Header';
+export * from './Footer';
+export * from './Tooltip';
+export * from './Logo';
+export * from './MissingNativeAuthError';
+export * from './PingPongComponent';
diff --git a/src/config/config.mainnet.ts b/src/config/config.mainnet.ts
index b77743a..bcb05a9 100644
--- a/src/config/config.mainnet.ts
+++ b/src/config/config.mainnet.ts
@@ -3,5 +3,7 @@ export * from './sharedConfig';
export const contractAddress =
'erd1qqqqqqqqqqqqqpgqtmcuh307t6kky677ernjj9ulk64zq74w9l5qxyhdn7';
export const API_URL = 'https://template-api.multiversx.com';
+export const ID_API_URL = 'https://id-api.multiversx.com';
+export const USERS_API_URL = '/users/api/v1/users/';
export const sampleAuthenticatedDomains = [API_URL];
export const environment = 'mainnet';
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..4844dc3
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+
+declare module '*.svg' {
+ const content: (props: { class?: string }) => JSX.Element;
+ export default content;
+}
diff --git a/src/helpers/getDetectedBrowser.ts b/src/helpers/getDetectedBrowser.ts
new file mode 100644
index 0000000..527f0bd
--- /dev/null
+++ b/src/helpers/getDetectedBrowser.ts
@@ -0,0 +1,23 @@
+import { safeWindow } from '@multiversx/sdk-dapp';
+
+import { BrowserEnum } from 'localConstants/browser.enum';
+
+export const getDetectedBrowser = () => {
+ const nav = safeWindow?.navigator;
+ const userAgent = nav?.userAgent || '';
+
+ if (/Firefox/.test(userAgent)) {
+ return BrowserEnum.Firefox;
+ }
+
+ if (nav && typeof (nav as any).brave !== 'undefined') {
+ return BrowserEnum.Brave;
+ }
+ if (userAgent.toLowerCase().includes('brave')) {
+ return BrowserEnum.Brave;
+ }
+
+ if (/Chrome/.test(userAgent)) {
+ return BrowserEnum.Chrome;
+ }
+};
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index a8ce727..1b0c61f 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,3 +1,4 @@
export * from './withPageTitle';
export * from './useScrollToElement';
export * from './useStore';
+export * from './transactions';
diff --git a/src/hooks/transactions/useSendPingPongTransaction.ts b/src/hooks/transactions/useSendPingPongTransaction.ts
index 435b458..9c8317a 100644
--- a/src/hooks/transactions/useSendPingPongTransaction.ts
+++ b/src/hooks/transactions/useSendPingPongTransaction.ts
@@ -29,7 +29,7 @@ const PONG_TRANSACTION_INFO = {
export const useSendPingPongTransaction = () => {
const store = useStore();
const network = networkSelector(store());
- const { address } = getAccount(store());
+ const address = getAccount()?.address;
const getSmartContractFactory = async () => {
const response = await axios.get('src/contracts/ping-pong.abi.json');
diff --git a/src/initConfig.ts b/src/initConfig.ts
index ed9a8fe..d4e4508 100644
--- a/src/initConfig.ts
+++ b/src/initConfig.ts
@@ -1,5 +1,6 @@
import { EnvironmentsEnum, InitAppType } from 'lib';
import './styles/globals.css';
+import './styles/tailwind.css';
import { walletConnectV2ProjectId } from './config';
const DEFAULT_TOAST_LIEFTIME = 5000;
@@ -19,7 +20,8 @@ export const config: InitAppType = {
},
transactionTracking: {
successfulToastLifetime: DEFAULT_TOAST_LIEFTIME
- }
+ },
+ theme: 'mvx:dark-theme'
}
// Option 2: Add providers using the config `customProviders` array
diff --git a/src/lib/sdkDapp/components/FormatAmount/FormatAmount.tsx b/src/lib/sdkDapp/components/FormatAmount/FormatAmount.tsx
index cbd8363..a13c1e6 100644
--- a/src/lib/sdkDapp/components/FormatAmount/FormatAmount.tsx
+++ b/src/lib/sdkDapp/components/FormatAmount/FormatAmount.tsx
@@ -1,35 +1,27 @@
-import { createEffect, createMemo } from 'solid-js';
-import { FormatAmountController } from 'lib';
+import { createEffect } from 'solid-js';
import { FormatAmountSDKPropsType } from 'lib/sdkDappUI/sdkDappUI.types';
-import { DECIMALS, DIGITS } from 'lib/sdkDappUtils/sdkDappUtils.constants';
import { IPropsWithClass } from 'types';
interface FormatAmountPropsType
extends Partial
+
+ )}
+
+ {trigger(isTooltipVisible())}
+ event.stopPropagation()}
+ onBlur={handleBlur}
+ tabIndex={-1}
+ class={classNames(
+ styles.tooltipContent,
+ { [styles.tooltipContentTop]: position === 'top' },
+ { [styles.tooltipContentBottom]: position === 'bottom' }
+ )}
+ >
+ {children}
+
+
- {WIDGETS.map((element) => (
- ;
+
+export const DashboardHeader = () => (
+ ;
+
+interface LinkComponentPropsType extends IPropsWithChildren {
+ linkAddress: string;
+}
+
+export const LinkComponent = ({
+ linkAddress,
+ children
+}: LinkComponentPropsType) => (
+
+ {children}
+
+);
diff --git a/src/pages/Dashboard/components/DashboardHeader/components/LinkComponent/index.ts b/src/pages/Dashboard/components/DashboardHeader/components/LinkComponent/index.ts
new file mode 100644
index 0000000..3f165f5
--- /dev/null
+++ b/src/pages/Dashboard/components/DashboardHeader/components/LinkComponent/index.ts
@@ -0,0 +1 @@
+export * from './LinkComponent';
diff --git a/src/pages/Dashboard/components/DashboardHeader/components/index.ts b/src/pages/Dashboard/components/DashboardHeader/components/index.ts
new file mode 100644
index 0000000..3f165f5
--- /dev/null
+++ b/src/pages/Dashboard/components/DashboardHeader/components/index.ts
@@ -0,0 +1 @@
+export * from './LinkComponent';
diff --git a/src/pages/Dashboard/components/DashboardHeader/index.ts b/src/pages/Dashboard/components/DashboardHeader/index.ts
new file mode 100644
index 0000000..c4a59a5
--- /dev/null
+++ b/src/pages/Dashboard/components/DashboardHeader/index.ts
@@ -0,0 +1 @@
+export * from './DashboardHeader';
diff --git a/src/pages/Dashboard/components/LeftPanel/LeftPanel.tsx b/src/pages/Dashboard/components/LeftPanel/LeftPanel.tsx
new file mode 100644
index 0000000..cd4847f
--- /dev/null
+++ b/src/pages/Dashboard/components/LeftPanel/LeftPanel.tsx
@@ -0,0 +1,122 @@
+import {
+ faClose,
+ faPowerOff,
+ faWallet
+} from '@fortawesome/free-solid-svg-icons';
+import { useNavigate } from '@solidjs/router';
+import classNames from 'classnames';
+
+import Fa from 'solid-fa';
+import IconExpand from 'assets/img/expand-up-down.svg';
+import { Logo } from 'components';
+import {
+ ACCOUNTS_ENDPOINT,
+ getAccount,
+ getAccountProvider,
+ getIsLoggedIn,
+ MvxDataWithExplorerLink
+} from 'lib';
+import { RouteNamesEnum } from 'localConstants';
+
+import { Account, SideMenu } from './components';
+
+// prettier-ignore
+const styles = {
+ leftPanelContainer: 'left-panel-container flex flex-col w-screen lg:w-80 gap-8 lg:gap-0 py-4 p-6 sticky lg:h-screen top-0 bg-primary lg:bg-accent transition-all duration-200 ease-out overflow-y-scroll',
+ leftPanelContainerOpen: 'left-panel-container-open rounded-t-2xl lg:rounded-t-none p-6',
+ leftPanelMobileHeader: 'left-panel-mobile-header flex lg:hidden justify-between items-center pt-2 pb-1 transition-all duration-200 ease-out',
+ leftPanelMobileHeaderIconClose: 'left-panel-mobile-header-icon-close text-link transition-all duration-200 ease-out',
+ leftPanelMobileHeaderIconOpen: 'left-panel-mobile-header-icon-open fill-primary transition-all duration-200 ease-out',
+ leftPanel: 'left-panel flex flex-col gap-4 lg:!block',
+ leftPanelHidden: 'hidden',
+ leftPanelMobileAddressSection: 'left-panel-mobile-address-section lg:hidden bg-accent transition-all duration-200 ease-out h-8 flex items-center justify-between rounded-full border border-secondary px-6 py-4',
+ leftPanelMobileAddress: 'left-panel-mobile-address flex gap-2 items-center justify-start w-[calc(100%-50px)]',
+ leftPanelMobileAddressIcon: 'left-panel-mobile-address-icon text-accent transition-all duration-200 ease-out',
+ logoutButton: 'text-center text-link hover:text-primary transition-all duration-200 ease-out cursor-pointer',
+ leftPanelComponents: 'flex flex-col gap-4 bg-accent p-6 lg:p-0 rounded-2xl transition-all duration-200 ease-out',
+ leftPanelBar: 'w-full h-0.25 bg-neutral-700 opacity-40 transition-all duration-200 ease-out',
+ trimmedAddress: 'w-full text-primary'
+} satisfies Record;
+
+interface LeftPanelPropsType {
+ isOpen: boolean;
+ setIsOpen: (isOpen: boolean) => void;
+}
+
+export const LeftPanel = ({
+ isOpen = false,
+ setIsOpen
+}: LeftPanelPropsType) => {
+ const handleOpenPanel = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const address = getAccount()?.address;
+
+ const isLoggedIn = getIsLoggedIn();
+
+ const provider = getAccountProvider();
+ const navigate = useNavigate();
+
+ const handleLogout = async () => {
+ await provider.logout();
+ navigate(RouteNamesEnum.home);
+ };
+
+ return (
+ ;
+
+interface AccountDetailsType {
+ icon: JSX.Element | string;
+ label: string;
+ value: number | JSX.Element;
+}
+
+export const Account = () => {
+ const store = useStore();
+ const network = networkSelector(store());
+ const account = getAccount(store());
+ const address = getAccount()?.address;
+
+ const { isValid, valueDecimal, valueInteger, label } =
+ FormatAmountController.getData({
+ digits: DIGITS,
+ decimals: DECIMALS,
+ egldLabel: network.egldLabel,
+ input: account.balance
+ });
+
+ const [isCollapsed, setIsCollapsed] = createSignal(false);
+
+ const toggleCollapse = () => {
+ setIsCollapsed(!isCollapsed());
+ };
+
+ const [herotag, profileUrl] = getUserHerotag(address);
+ const XLogo = xLogo as unknown as Component<
+ JSX.SvgSVGAttributes
+ >;
+
+ const accountDetails: AccountDetailsType[] = [
+ {
+ icon: })
+ ) : (
+ herotag().slice(0, 3)
+ )
+ ) : (
+ ('@' as any)
+ ),
+ label: 'Herotag',
+ value: (;
+
+export const Username = (props: {
+ account?: AccountType | null;
+ address: string;
+}) => {
+ const { address } = props;
+
+ const [herotag] = getUserHerotag(address);
+
+ return (
+ ;
+
+interface SideMenuPropsType {
+ setIsOpen: (isOpen: boolean) => void;
+}
+interface MenuItemsType {
+ title: string;
+ icon?:
+ | string
+ | IconDefinition
+ | ((props: JSX.SvgSVGAttributes) => JSX.Element);
+ id: ItemsIdentifiersEnum;
+}
+
+const menuItems: MenuItemsType[] = [
+ {
+ title: 'Ping & Pong (Manual)',
+ icon: faTableTennisPaddleBall,
+ id: ItemsIdentifiersEnum.pingPongRaw
+ },
+ {
+ title: 'Sign message',
+ icon: faPenNib,
+ id: ItemsIdentifiersEnum.signMessage
+ },
+ {
+ title: 'Transactions (All)',
+ icon: faRectangleList,
+ id: ItemsIdentifiersEnum.transactionsAll
+ },
+ {
+ title: 'Transactions (Ping & Pong)',
+ icon: faFilter,
+ id: ItemsIdentifiersEnum.transactionsPingPong
+ }
+];
+
+export const SideMenu = ({ setIsOpen }: SideMenuPropsType) => {
+ const [isCollapsed, setIsCollapsed] = createSignal(false);
+ const [activeItem, setActiveItem] = createSignal(
+ ItemsIdentifiersEnum.pingPongRaw
+ );
+
+ const toggleCollapse = () => {
+ setIsCollapsed(!isCollapsed());
+ };
+
+ const handleMenuItemClick = (id: ItemsIdentifiersEnum) => {
+ setIsOpen(false);
+ const target = document.getElementById(id);
+ if (target) {
+ const y = target.getBoundingClientRect().top + window.scrollY - 250;
+ window.scrollTo({ top: y, behavior: 'smooth' });
+
+ setActiveItem(id);
+ }
+ };
+
+ const setItemIcon = (
+ icon:
+ | IconDefinition
+ | ((props: JSX.SvgSVGAttributes) => JSX.Element)
+ ) => {
+ if ('iconName' in icon) return
-
- );
-};
diff --git a/src/pages/Dashboard/widgets/Account/components/Username.tsx b/src/pages/Dashboard/widgets/Account/components/Username.tsx
deleted file mode 100644
index 865d4ba..0000000
--- a/src/pages/Dashboard/widgets/Account/components/Username.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Label } from 'components/Label';
-import { AccountType } from 'lib';
-
-export const Username = ({ account }: { account: AccountType | null }) => {
- if (!account) {
- return null;
- }
-
- return (
- (true);
- const [secondsLeft, setSecondsLeft] = createSignal(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;
-
- createEffect(() => {
- getCountdownSeconds({ secondsLeft: secondsLeft(), setSecondsLeft });
- });
-
- createEffect(() => {
- setSecondsRemaining();
- });
+ const pingAmount = useGetPingAmount();
return (
- (
`${network.apiAddress}/vm-values/query`,
{
diff --git a/src/pages/Dashboard/widgets/SignMessage/SignMessage.tsx b/src/pages/Dashboard/widgets/SignMessage/SignMessage.tsx
index d222957..d790248 100644
--- a/src/pages/Dashboard/widgets/SignMessage/SignMessage.tsx
+++ b/src/pages/Dashboard/widgets/SignMessage/SignMessage.tsx
@@ -1,23 +1,35 @@
-import {
- faFileSignature,
- faBroom,
- faArrowsRotate
-} from '@fortawesome/free-solid-svg-icons';
-import { Address, Message } from '@multiversx/sdk-core';
+import { faPaste } from '@fortawesome/free-solid-svg-icons';
+// import { MvxButton } from '@multiversx/sdk-dapp-ui/react';
+
import Fa from 'solid-fa';
import { createSignal } from 'solid-js';
-import { Button } from 'components/Button';
-import { OutputContainer } from 'components/OutputContainer/OutputContainer';
-import { getAccount, getAccountProvider } from 'lib';
+import { OutputContainer } from 'components';
+import { Address, getAccount, getAccountProvider, Message } from 'lib';
+import { ItemsIdentifiersEnum } from 'pages/Dashboard/dashboard.types';
+
import { SignFailure, SignSuccess } from './components';
+// prettier-ignore
+const styles = {
+ signMessageContainer: 'sign-message-container flex flex-col gap-6',
+ signMessage: 'sign-message flex flex-col gap-2',
+ signMessageLabel: 'sign-message-label text-secondary transition-all duration-200 ease-out text-sm font-normal',
+ signMessageText: 'sign-message-text text-secondary transition-all duration-200 ease-out resize-none w-full h-32 rounded-lg focus:outline-none',
+ signMessagePasteButtonContainer: 'sign-message-paste-button-container w-full flex justify-end',
+ signMessagePasteButton: 'sign-message-paste-button text-tertiary text-sm font-semibold flex items-center bg-btn-tertiary rounded-md cursor-pointer px-1 transition-all duration-200 ease-out',
+ signMessagePasteButtonText: 'sign-message-paste-button-text p-1',
+ signMessageButton: 'sign-message-button flex gap-2 items-start',
+ signButtonContent: 'sign-button-content text-sm font-normal'
+} satisfies Record;
+
export const SignMessage = () => {
const [message, setMessage] = createSignal('');
const [signedMessage, setSignedMessage] = createSignal(null);
const [state, setState] = createSignal<'pending' | 'success' | 'error'>(
'pending'
);
- const [signatrue, setSignatrue] = createSignal('');
+
+ const [signature, setSignatrue] = createSignal('');
const address = getAccount()?.address;
const provider = getAccountProvider();
@@ -27,6 +39,7 @@ export const SignMessage = () => {
address: new Address(address),
data: Buffer.from(message())
});
+
const signedMessageResult = await provider.signMessage(messageToSign);
if (!signedMessageResult?.signature) {
@@ -51,55 +64,91 @@ export const SignMessage = () => {
setState('pending');
};
+ const handlePasteClick = async () => {
+ const messageToSign = await navigator.clipboard.readText();
+
+ setMessage(messageToSign);
+ };
+
return (
-
+
);
};
diff --git a/src/pages/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/src/pages/Dashboard/components/DashboardHeader/DashboardHeader.tsx
new file mode 100644
index 0000000..ddea118
--- /dev/null
+++ b/src/pages/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
+
+
+
+
+ {dashboardWidgets.map((element) => (
+
+
+
+);
diff --git a/src/pages/Dashboard/components/DashboardHeader/components/LinkComponent/LinkComponent.tsx b/src/pages/Dashboard/components/DashboardHeader/components/LinkComponent/LinkComponent.tsx
new file mode 100644
index 0000000..cc78887
--- /dev/null
+++ b/src/pages/Dashboard/components/DashboardHeader/components/LinkComponent/LinkComponent.tsx
@@ -0,0 +1,24 @@
+import { IPropsWithChildren } from 'types';
+
+// prettier-ignore
+const styles = {
+ linkAddress: 'link-address underline hover:text-primary transition-all duration-200'
+} 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/pages/Dashboard/components/LeftPanel/components/Account/Account.tsx b/src/pages/Dashboard/components/LeftPanel/components/Account/Account.tsx
new file mode 100644
index 0000000..40cf0ed
--- /dev/null
+++ b/src/pages/Dashboard/components/LeftPanel/components/Account/Account.tsx
@@ -0,0 +1,167 @@
+import {
+ faChevronUp,
+ faLayerGroup,
+ faWallet
+} from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
+import { Fa } from 'solid-fa';
+
+import { Component, createSignal, JSX } from 'solid-js';
+import xLogo from 'assets/img/x-logo.svg';
+import { Label } from 'components';
+import { useStore } from 'hooks';
+import {
+ DECIMALS,
+ DIGITS,
+ FormatAmount,
+ FormatAmountController,
+ getAccount,
+ networkSelector,
+ MvxTrim
+} from 'lib';
+
+import { Username } from './components';
+import { getUserHerotag } from './hooks/getUserHerotag';
+
+// 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 w-8 h-8 transition-all duration-200 ease-out',
+ connectedAccountDetailsTrimAddress: 'w-max'
+} satisfies Record
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ {isLoggedIn && (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/src/pages/Dashboard/components/LeftPanel/components/Account/components/Username.tsx b/src/pages/Dashboard/components/LeftPanel/components/Account/components/Username.tsx
new file mode 100644
index 0000000..b69a56f
--- /dev/null
+++ b/src/pages/Dashboard/components/LeftPanel/components/Account/components/Username.tsx
@@ -0,0 +1,27 @@
+import { AccountType, trimUsernameDomain } from 'lib';
+import { getUserHerotag } from '../hooks';
+
+// 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) => (
+
+
+
+ ))}
+
+ {accountDetail.icon as any}
+
+
+ + + + {accountDetail.value as any} + +
++ {herotag() ? '@' : ''} + + + {herotag() ? trimUsernameDomain(herotag()) : 'N/A'} + +
+ ); +}; diff --git a/src/pages/Dashboard/widgets/Account/components/index.ts b/src/pages/Dashboard/components/LeftPanel/components/Account/components/index.ts similarity index 100% rename from src/pages/Dashboard/widgets/Account/components/index.ts rename to src/pages/Dashboard/components/LeftPanel/components/Account/components/index.ts diff --git a/src/pages/Dashboard/components/LeftPanel/components/Account/hooks/getUserHerotag.tsx b/src/pages/Dashboard/components/LeftPanel/components/Account/hooks/getUserHerotag.tsx new file mode 100644 index 0000000..033aaa5 --- /dev/null +++ b/src/pages/Dashboard/components/LeftPanel/components/Account/hooks/getUserHerotag.tsx @@ -0,0 +1,39 @@ +import axios from 'axios'; + +import { createEffect, createSignal } from 'solid-js'; +import { ID_API_URL, USERS_API_URL } from 'config/config.mainnet'; + +export const getUserHerotag = (address: string) => { + const [profileUrl, setProfileUrl] = createSignal(''); + const [herotag, setHerotag] = createSignal(''); + + const getUserProfileData = async (userAddress?: string) => { + if (!userAddress) { + return; + } + + try { + const { data } = await axios.get(`${USERS_API_URL}${userAddress}`, { + baseURL: ID_API_URL + }); + + return data; + } catch (err) { + console.error('Unable to fetch profile url'); + } + }; + + createEffect(() => { + if (!address) return; + + const fetchUserProfileUrl = async () => { + const data = await getUserProfileData(address); + setProfileUrl(data?.profile?.url); + setHerotag(data?.herotag); + }; + + fetchUserProfileUrl(); + }); + + return [herotag, profileUrl]; +}; diff --git a/src/pages/Dashboard/components/LeftPanel/components/Account/hooks/index.ts b/src/pages/Dashboard/components/LeftPanel/components/Account/hooks/index.ts new file mode 100644 index 0000000..dfc360b --- /dev/null +++ b/src/pages/Dashboard/components/LeftPanel/components/Account/hooks/index.ts @@ -0,0 +1 @@ +export * from './getUserHerotag'; diff --git a/src/pages/Dashboard/widgets/Account/index.ts b/src/pages/Dashboard/components/LeftPanel/components/Account/index.ts similarity index 100% rename from src/pages/Dashboard/widgets/Account/index.ts rename to src/pages/Dashboard/components/LeftPanel/components/Account/index.ts diff --git a/src/pages/Dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx b/src/pages/Dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx new file mode 100644 index 0000000..a7d1664 --- /dev/null +++ b/src/pages/Dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx @@ -0,0 +1,131 @@ +import { + faChevronUp, + faFilter, + faPenNib, + faRectangleList, + faTableTennisPaddleBall, + IconDefinition +} from '@fortawesome/free-solid-svg-icons'; +import classNames from 'classnames'; + +import Fa from 'solid-fa'; +import { createSignal, JSX } from 'solid-js'; +import { ItemsIdentifiersEnum } from 'pages/Dashboard/dashboard.types'; + +// 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/pages/Dashboard/components/LeftPanel/components/SideMenu/index.ts b/src/pages/Dashboard/components/LeftPanel/components/SideMenu/index.ts
new file mode 100644
index 0000000..6b65bcf
--- /dev/null
+++ b/src/pages/Dashboard/components/LeftPanel/components/SideMenu/index.ts
@@ -0,0 +1 @@
+export * from './SideMenu';
diff --git a/src/pages/Dashboard/components/LeftPanel/components/index.ts b/src/pages/Dashboard/components/LeftPanel/components/index.ts
new file mode 100644
index 0000000..3ba9126
--- /dev/null
+++ b/src/pages/Dashboard/components/LeftPanel/components/index.ts
@@ -0,0 +1,2 @@
+export * from './Account';
+export * from './SideMenu';
diff --git a/src/pages/Dashboard/components/LeftPanel/index.ts b/src/pages/Dashboard/components/LeftPanel/index.ts
new file mode 100644
index 0000000..aedb0f9
--- /dev/null
+++ b/src/pages/Dashboard/components/LeftPanel/index.ts
@@ -0,0 +1 @@
+export * from './LeftPanel';
diff --git a/src/pages/Dashboard/components/Widget.tsx b/src/pages/Dashboard/components/Widget/Widget.tsx
similarity index 89%
rename from src/pages/Dashboard/components/Widget.tsx
rename to src/pages/Dashboard/components/Widget/Widget.tsx
index 0bb1199..9b7a7a9 100644
--- a/src/pages/Dashboard/components/Widget.tsx
+++ b/src/pages/Dashboard/components/Widget/Widget.tsx
@@ -1,4 +1,4 @@
-import { Card } from 'components/Card';
+import { Card } from 'components';
import { WidgetType } from 'types/widget.types';
export const Widget = ({
diff --git a/src/pages/Dashboard/components/Widget/index.ts b/src/pages/Dashboard/components/Widget/index.ts
new file mode 100644
index 0000000..b42adc8
--- /dev/null
+++ b/src/pages/Dashboard/components/Widget/index.ts
@@ -0,0 +1 @@
+export * from './Widget';
diff --git a/src/pages/Dashboard/components/index.ts b/src/pages/Dashboard/components/index.ts
index b42adc8..83da9c3 100644
--- a/src/pages/Dashboard/components/index.ts
+++ b/src/pages/Dashboard/components/index.ts
@@ -1 +1,3 @@
export * from './Widget';
+export * from './DashboardHeader';
+export * from './LeftPanel';
diff --git a/src/pages/Dashboard/dashboard.types.ts b/src/pages/Dashboard/dashboard.types.ts
new file mode 100644
index 0000000..c7abf2e
--- /dev/null
+++ b/src/pages/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/pages/Dashboard/widgets/Account/Account.tsx b/src/pages/Dashboard/widgets/Account/Account.tsx
deleted file mode 100644
index 1a8dbba..0000000
--- a/src/pages/Dashboard/widgets/Account/Account.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createMemo, Show } from 'solid-js';
-import { Label } from 'components/Label';
-import { OutputContainer } from 'components/OutputContainer/OutputContainer';
-import { useStore } from 'hooks';
-import { getAccount, networkSelector } from 'lib';
-import { FormatAmount } from 'lib/sdkDapp/components/FormatAmount/FormatAmount';
-import { Username } from './components';
-
-export const Account = () => {
- const store = useStore();
- const network = createMemo(() => networkSelector(store()));
- const account = createMemo(() => getAccount(store()));
-
- return (
-
+
+
+ Library
+ + +
+ {menuItems.map((item) => (
+
+ handleMenuItemClick(item.id)}
+ class={classNames(styles.sideMenuItem, {
+ [styles.sideMenuItemActive]: item.id === activeItem()
+ })}
+ >
+ {item.icon && setItemIcon(item.icon as any)}
+
+
+ ))}
+ {item.title}
+
-
-
-
- - - {account().address} -
- -- {account().shard} -
- -
-
-
- - - {account.username ? account.username : 'N/A'} - -
- ); -}; diff --git a/src/pages/Dashboard/widgets/PingPongRaw/PingPongRaw.tsx b/src/pages/Dashboard/widgets/PingPongRaw/PingPongRaw.tsx index 43ff869..a72cc30 100644 --- a/src/pages/Dashboard/widgets/PingPongRaw/PingPongRaw.tsx +++ b/src/pages/Dashboard/widgets/PingPongRaw/PingPongRaw.tsx @@ -1,102 +1,25 @@ -import { faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons'; -import moment from 'moment'; -import Fa from 'solid-fa'; -import { createEffect, createSignal, onCleanup } from 'solid-js'; -import { Button } from 'components/Button'; -import { PingPongOutput } from 'components/OutputContainer/components'; -import { OutputContainer } from 'components/OutputContainer/OutputContainer'; -import { getCountdownSeconds, setTimeRemaining } from 'helpers'; -import { useSendPingPongTransaction } from 'hooks/transactions/useSendPingPongTransaction'; -import { getPendingTransactions, getStore } from 'lib'; -import { useGetTimeToPong, useGetPingAmount } from './hooks'; +import { PingPongComponent } from 'components'; +import { useSendPingPongTransaction } from 'hooks'; +import { ItemsIdentifiersEnum } from 'pages/Dashboard/dashboard.types'; + +import { useGetPingAmount, useGetTimeToPong } from './hooks'; // Raw transaction are being done by directly requesting to API instead of calling the smartcontract export const PingPongRaw = () => { const getTimeToPong = useGetTimeToPong(); - const store = getStore(); - const [transactions, setTransactions] = createSignal( - getPendingTransactions() - ); - const unsubscribe = store.subscribe(() => { - setTransactions(getPendingTransactions()); - }); - onCleanup(() => unsubscribe()); - - const hasPendingTransactions = transactions().length > 0; const { sendPingTransaction, sendPongTransaction } = useSendPingPongTransaction(); - const pingAmount = useGetPingAmount(); - - const [hasPing, setHasPing] = createSignal
-
-
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {!['success', 'error'].includes(state()) && (
+