+
+
+ {!props.id ? (
+
+ Near Account: @ {' '}
+ {props?.id && (
+
+ {' '}
+ {' ' + props.id}
+
+ )}
+ {
+
+ )}
+ {
+
+
+ Near Account: @ {' '}
+ {props?.id && (
+
+ {' '}
+ {' ' + props.id}
+
+ )}
+ {
+
+ )}
+ {
+
+ {
+
+
+
+
+
+
+
+
+
+
+
+ Overview
+ {tokenData?.name && ( +
+
+ )}
+
+ {tokenData.name}
+
+ {tokenData.website && (
+
+
+
+
+
+ {context.networkId === 'mainnet' && statsData?.near_price && (
+ Balance:
+ {loading ? (
+
+ {yoctoToNear(accountData?.amount || 0, true)} Ⓝ
+
+ )}
+
+
+ )}
+ Value
+ {loading ? (
+
+ $
+ {fiatValue(
+ yoctoToNear(accountData.amount || 0, false),
+ statsData.near_price,
+ )}{' '}
+
+ (@ ${dollarFormat(statsData.near_price)} / Ⓝ)
+
+
+ )}
+
+
+ Tokens:
+
+
+
+
+
+
+ + Account information +
+ +
+
+
+
+
+
+ Staked Balance:
+ {loading ? (
+
+
+ ) : (
+
+ {yoctoToNear(Number(accountData?.locked || 0), true)} Ⓝ
+
+ )}
+
+
+ Storage Used:
+ {loading ? (
+
+
+ ) : (
+
+ {weight(Number(accountData?.storage_usage) || 0)}
+
+ )}
+
+
+ {deploymentData?.receipt_predecessor_account_id && (
+
+ {loading ? (
+
+ {contract?.hash ? (
+
+
+ ) : (
+
+ {accountData?.deleted?.transaction_hash
+ ? 'Deleted At:'
+ : 'Created At:'}
+
+ )}
+ {loading ? (
+
+
+ ) : (
+
+ {accountData?.deleted?.transaction_hash
+ ? convertToUTC(
+ nanoToMilli(accountData.deleted.block_timestamp),
+ false,
+ )
+ : accountData?.created?.transaction_hash
+ ? convertToUTC(
+ nanoToMilli(accountData.created.block_timestamp),
+ false,
+ )
+ : accountData?.code_hash
+ ? 'Genesis'
+ : 'N/A'}
+
+ )}
+
+
+ ) : (
+
+ )}
+ Contract Locked:
+
+ {contract?.locked ? 'Yes' : 'No'}
+
+
+
+ )}
+ {tokenData?.name && (
+
+ Contract Creator:
+
+
+
+
+ )}
+
+ Token Tracker:
+
+
+
+
+
+
+ (@ ${localFormat(tokenData.price)})
+
+ )}
+
+
+
+
+
+ + {' '} + {props.id} +
+
+
+
+
+
+
+
+
+
+ Sponsored
+
+
+
+
+
+
+
+
+
+ Sponsored
+
+
+
+
+
+
+
+
+
+ Sponsored
+
+
+
+
+
+
+
+
+
+ Sponsored
+
+
+
+
+ );
+}
diff --git a/apps/bos-components/src/components/Shared/SponsoredText.tsx b/apps/bos-components/src/components/Shared/SponsoredText.tsx
new file mode 100644
index 000000000..dbc7342eb
--- /dev/null
+++ b/apps/bos-components/src/components/Shared/SponsoredText.tsx
@@ -0,0 +1,62 @@
+/**
+ * @param {boolean} fromHome - Indicates if the component is rendered from the home.
+ */
+
+interface Props {
+ fromHome?: boolean;
+}
+export default function (props: Props) {
+ interface Sponsored {
+ title: string;
+ description: string;
+ btnText: string;
+ url: string;
+ }
+ const [sponsored, setSponsored] = useState-
+
- {/*
*/}
+
-
+
-
+
+
+
-
+
-
+
+
+
-
+
-
+
+
+
+
+ ) : null;
+}
diff --git a/apps/bos-components/src/includes/Banners/Earn.tsx b/apps/bos-components/src/includes/Banners/Earn.tsx
new file mode 100644
index 000000000..b433db749
--- /dev/null
+++ b/apps/bos-components/src/includes/Banners/Earn.tsx
@@ -0,0 +1,35 @@
+/**
+ * @interface Props
+ * @param {string} appUrl - The URL of the application.
+ */
+
+interface Props {
+ appUrl?: string;
+}
+
+const Earn = (props: Props) => {
+ return (
+
+
+ + Sponsored: + {sponsored.title}{' '} + {sponsored.description} + + {sponsored.btnText} + +
+
+ Stader Labs
+ ++ High DeFi Yields ~21% on NearX with Stader | Multi-Layer Security | Zero + Rewards Loss | $1 Mn Bug Bounty +
+ + ); +}; + +export default Earn; diff --git a/apps/bos-components/src/includes/Banners/Store.tsx b/apps/bos-components/src/includes/Banners/Store.tsx new file mode 100644 index 000000000..04fe31fa1 --- /dev/null +++ b/apps/bos-components/src/includes/Banners/Store.tsx @@ -0,0 +1,55 @@ +/** + * @interface Props + * @param {string} appUrl - The URL of the application. + */ + +interface Props { + appUrl?: string; +} + +const sponsoredStore = [ + { + title: '1inch Wallet - Your self-custodial vault', + description: + 'Audited by top security firms. Hardware wallet connection. MEV protected. Easy to use, secure and self-custodial. Try the 1inch Wallet now!', + url: 'https://1inch.network/Nearblocks_StoreButton', + image: '/sponsored/1inch.svg', + }, +]; + +const Store = (props: Props) => { + return ( +
+ {sponsoredStore.map((sponsore, i) => (
+
+ );
+};
+
+export default Store;
diff --git a/apps/bos-components/src/includes/Banners/Trade.tsx b/apps/bos-components/src/includes/Banners/Trade.tsx
new file mode 100644
index 000000000..80643cb07
--- /dev/null
+++ b/apps/bos-components/src/includes/Banners/Trade.tsx
@@ -0,0 +1,54 @@
+/**
+ * @interface Props
+ * @param {string} appUrl - The URL of the application.
+ */
+
+interface Props {
+ appUrl?: string;
+}
+
+const sponsoredTrade = [
+ {
+ title: 'Ref Finance - #1 AMM on NEAR',
+ description:
+ 'Ref Finance is a community-led, multi-purpose DeFi platform built on the NEAR Protocol.',
+ url: 'https://ref.finance',
+ },
+];
+
+const Trade = (props: Props) => {
+ return (
+ 1 &&
+ sponsoredStore.length - 1 !== i &&
+ 'border-b'
+ }`}
+ >
+
+
+ 
+
+ ))}
+
+ {sponsore.title}
+ + +{sponsore.description}
+
+ {sponsoredTrade.map((sponsore, i) => (
+
+ );
+};
+
+export default Trade;
diff --git a/apps/bos-components/src/includes/Common/QrCode.tsx b/apps/bos-components/src/includes/Common/QrCode.tsx
new file mode 100644
index 000000000..ecc9f91ee
--- /dev/null
+++ b/apps/bos-components/src/includes/Common/QrCode.tsx
@@ -0,0 +1,55 @@
+/**
+ * @interface Props
+ * @param {string} [value] - The data value to be encoded as a QR code (e.g., a URL, text, etc.).
+ * @param {number} [width] - The width of the QR code component.
+ * @param {number} [height] - The height of the QR code component.
+ */
+interface Props {
+ value: string;
+ width: number;
+ height: number;
+}
+
+const QrCode = (props: Props) => {
+ const srcData = `
+
+
+
+
+
+
+
+
+ `;
+
+ return (
+ 1 &&
+ sponsoredTrade.length - 1 !== i &&
+ 'border-b'
+ }`}
+ >
+
+
+ 
+
+ ))}
+
+ {sponsore.title}
+ + +{sponsore.description}
+
+
+
+ );
+};
+export default QrCode;
diff --git a/apps/bos-components/src/includes/Common/Skelton.tsx b/apps/bos-components/src/includes/Common/Skelton.tsx
new file mode 100644
index 000000000..ba3ccf6d1
--- /dev/null
+++ b/apps/bos-components/src/includes/Common/Skelton.tsx
@@ -0,0 +1,9 @@
+const Skelton = (props: { className?: string }) => {
+ return (
+
+ );
+};
+
+export default Skelton;
diff --git a/apps/bos-components/src/includes/Common/TokenHoldings.tsx b/apps/bos-components/src/includes/Common/TokenHoldings.tsx
new file mode 100644
index 000000000..b30f9cdd1
--- /dev/null
+++ b/apps/bos-components/src/includes/Common/TokenHoldings.tsx
@@ -0,0 +1,215 @@
+/**
+ * @param {string} [id] - Optional identifier for the account, passed as a string.
+ * @param {boolean} [loading] - Flag indicating whether data is currently loading.
+ * @param {InventoryInfo} data - Information related to the inventory.
+ * @param {Object} ft - Object containing details about the tokens.
+ * @param {number} ft.amount - amount in USD of tokens.
+ * @param {Object[]} ft.tokens - Array containing individual token details.
+ * @param {number} ft.tokens[].amount - Amount of a specific token.
+ * @param {string} ft.tokens[].contract - Contract address of the token.
+ * @param {MetaInfo} ft.tokens[].ft_meta - Additional metadata related to the token.
+ * @param {number} ft.tokens[].rpcAmount - Amount in RPC.
+ * @param {number} ft.tokens[].amountUsd - Amount in USD.
+ * @param {number} ft.tokens[].amountUsd - Amount in USD.
+ * @param {string} appUrl - The URL of the application.
+ */
+
+import { truncateString } from '@/includes/libs';
+import ArrowDown from '@/includes/icons/ArrowDown';
+import { dollarFormat, localFormat } from '@/includes/formats';
+
+interface MetaInfo {
+ decimals: number;
+ icon: string;
+ name: string;
+ price: number;
+ reference: string;
+ symbol: string;
+}
+
+interface FtsInfo {
+ amount: number;
+ contract: string;
+ ft_meta: MetaInfo;
+}
+
+interface NftsInfo {
+ amount: number;
+ contract: string;
+ nft_meta: MetaInfo;
+ quantity: number;
+}
+
+interface InventoryInfo {
+ fts: FtsInfo[];
+ nfts: NftsInfo[];
+}
+
+interface Props {
+ id?: string;
+ loading?: boolean;
+ data: InventoryInfo;
+ ft: {
+ amount: number;
+ tokens: {
+ amount: number;
+ contract: string;
+ ft_meta: MetaInfo;
+ rpcAmount: number;
+ amountUsd: number;
+ }[];
+ };
+ appUrl?: string;
+}
+
+const TokenHoldings = (props: Props) => {
+ const Loading = (props: { className: string; wrapperClassName: string }) => {
+ return (
+
+ );
+ };
+
+ const nfts = props.data?.nfts || [];
+
+ if (props.loading) {
+ return
+ {props.ft?.tokens?.length > 0 && (
+ <>
+
+
+ Tokens{' '}
+
+ ({props.ft?.tokens?.length})
+
+
+
+ {props.ft?.tokens?.map((token, index) => (
+
+
+
+
+ )}
+ {nfts?.length > 0 && (
+ <>
+
+
+ {token.ft_meta?.price && (
+
+
+
+ 
+
+
+ {truncateString(token.ft_meta?.name, 15, '...')}{' '}
+ ({token.ft_meta?.symbol})
+
+
+ {localFormat(token?.rpcAmount)}
+
+
+
+ )}
+
+
+ ))}
+ ${dollarFormat(token.amountUsd)}
+
+ @{Big(token.ft_meta?.price).toString()}
+
+
+ NFT Tokens{' '}
+ ({nfts?.length})
+
+
+ {nfts.map((nft) => (
+
+
+
+
+ )}
+
+
+
+
+ ))}
+
+
+
+
+
+
+ {truncateString(nft.nft_meta?.name, 15, '...')}(
+ {nft.nft_meta?.symbol})
+
+
+ {localFormat(nft.quantity)}
+
+