Sponsored:
diff --git a/apps/bos-components/src/components/Shared/Table.tsx b/apps/bos-components/src/components/Shared/Table.tsx
new file mode 100644
index 00000000..6a5c5c69
--- /dev/null
+++ b/apps/bos-components/src/components/Shared/Table.tsx
@@ -0,0 +1,114 @@
+import Skelton from '@/includes/Common/Skelton';
+import Paginator from '@/includes/Common/Paginator';
+/**
+ * @param {boolean} isLoading - Represents the loading state of the data.
+ * @param {Array} columns - An array of objects defining the columns for the table.
+ * @param {Array} data - An array of rows containing data for the table.
+ * @param {boolean} isPagination - Indicates if pagination is enabled for the table.
+ * @param {number} count - The total count of items in the dataset.
+ * @param {number} page - The current page number being displayed.
+ * @param {number} limit - The number of items per page.
+ * @param {number} pageLimit - The maximum number of pages to display in pagination.
+ * @param {function} setPage - A function used to set the current page of the table.
+ */
+interface column {
+ header: string;
+ key: string;
+ cell?: (row: any, rowIndex?: number) => React.ReactNode;
+}
+
+interface Props {
+ isLoading?: boolean;
+ columns: column[];
+ data: any[];
+ isPagination: boolean;
+ count: number;
+ page: number;
+ limit: number;
+ pageLimit: number;
+ setPage: (page: number) => void;
+}
+
+export default function (props: Props) {
+ if (props.isLoading) {
+ return (
+
+
+
+
+ {props.columns.map((column, index) => (
+
+ {column.header}
+
+ ))}
+
+
+
+ {[...Array(10)].map((_, index) => (
+
+ {props.columns.map((_, colIndex) => (
+
+
+ ))}
+
+ ))}
+
+
+
+ );
+ }
+ return (
+ <>
+
+
+
+
+ {props?.columns.map((column: column, index: number) => (
+
+ {column.header}
+
+ ))}
+
+
+
+ {props.data &&
+ props.data.map((row, rowIndex: number) => (
+
+ {props.columns.map((column: column, colIndex: number) => (
+
+ {column.cell ? column.cell(row) : row[column.key]}
+
+ ))}
+
+ ))}
+
+
+
+ {props.isPagination ? (
+
+ ) : null}
+
+ );
+}
diff --git a/apps/bos-components/src/components/Transactions/Latest.tsx b/apps/bos-components/src/components/Transactions/Latest.tsx
new file mode 100644
index 00000000..65820e70
--- /dev/null
+++ b/apps/bos-components/src/components/Transactions/Latest.tsx
@@ -0,0 +1,203 @@
+/**
+ * Component: LatestTransactions
+ * Author: Nearblocks Pte Ltd
+ * License: Business Source License 1.1
+ * Description: Latest Transactions on Near Protocol.
+ */
+
+import { getTimeAgoString, shortenHex } from '@/includes/formats';
+import {
+ getConfig,
+ nanoToMilli,
+ shortenAddress,
+ yoctoToNear,
+} from '@/includes/libs';
+import { TransactionInfo } from '@/includes/types';
+
+export default function () {
+ const [isLoading, setIsLoading] = useState(false);
+ const [txns, setTxns] = useState
([]);
+
+ const Loader = (props: { className?: string; wrapperClassName?: string }) => {
+ return (
+
+ );
+ };
+
+ const config = getConfig(context.networkId);
+
+ useEffect(() => {
+ function fetchLatestTxns() {
+ setIsLoading(true);
+ asyncFetch(`${config.backendUrl}txns/latest`, {
+ refreshInterval: 5000,
+ revalidateOnReconnect: true,
+ }).then(
+ (data: {
+ body: {
+ txns: TransactionInfo[];
+ };
+ }) => {
+ const resp = data?.body?.txns;
+ setTxns(resp);
+ },
+ );
+ setIsLoading(false);
+ }
+ fetchLatestTxns();
+ }, [config.backendUrl]);
+
+ return (
+ <>
+
+
+
+ {!txns && (
+
+ Error!
+
+ )}
+ {!isLoading && txns.length === 0 && (
+
+ No transactions found!
+
+ )}
+ {isLoading && (
+
+ {[...Array(10)].map((_, i) => (
+
+ ))}
+
+ {txns.map((txn) => {
+ return (
+
+
+
+ TX
+
+
+
+
+ {getTimeAgoString(
+ nanoToMilli(Number(txn.block_timestamp)),
+ )}
+
+
+
+
+
+
+
+
+
+ {yoctoToNear(
+ txn.actions_agg?.deposit || 0,
+ true,
+ )}{' '}
+ Ⓝ
+
+
+
+ Deposit value
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ )}
+ {txns && txns.length > 0 && (
+
+ )}
+
+ );
+}
diff --git a/apps/bos-components/src/components/Transactions/List.tsx b/apps/bos-components/src/components/Transactions/List.tsx
new file mode 100644
index 00000000..071f695f
--- /dev/null
+++ b/apps/bos-components/src/components/Transactions/List.tsx
@@ -0,0 +1,578 @@
+/**
+ * Component: Transactions
+ * Author: Nearblocks Pte Ltd
+ * License: Business Source License 1.1
+ * Description: Table of Transactions on Near Protocol.
+ * @interface Props
+ * @param {boolean} [fetchStyles] - Use Nearblock styles.
+ */
+
+interface Props {
+ fetchStyles?: boolean;
+}
+
+import {
+ localFormat,
+ getTimeAgoString,
+ formatTimestampToString,
+} from '@/includes/formats';
+import { txnMethod } from '@/includes/near';
+import {
+ getConfig,
+ nanoToMilli,
+ truncateString,
+ yoctoToNear,
+} from '@/includes/libs';
+import FaLongArrowAltRight from '@/includes/icons/FaLongArrowAltRight';
+import TxnStatus from '@/includes/Common/Status';
+import Filter from '@/includes/Common/Filter';
+import { TransactionInfo } from '@/includes/types';
+import SortIcon from '@/includes/icons/SortIcon';
+import Skelton from '@/includes/Common/Skelton';
+
+export default function (props: Props) {
+ const [css, setCss] = useState({});
+ const [isLoading, setIsLoading] = useState(false);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [totalCount, setTotalCount] = useState(1);
+ const [txns, setTxns] = useState([]);
+ const [showAge, setShowAge] = useState(true);
+ const [filters, setFilters] = useState<{ [key: string]: string }>(
+ {} as { [key: string]: string },
+ );
+ const [sorting, setSorting] = useState('desc');
+
+ const config = getConfig(context.networkId);
+
+ /**
+ * Fetches styles asynchronously from a nearblocks gateway.
+ */
+ function fetchStyles() {
+ asyncFetch('https://beta.nearblocks.io/common.css').then(
+ (res: { body: string }) => {
+ if (res?.body) {
+ setCss(res.body);
+ }
+ },
+ );
+ }
+
+ useEffect(() => {
+ if (props?.fetchStyles) fetchStyles();
+ }, [props?.fetchStyles]);
+
+ const Theme = styled.div`
+ ${css}
+ `;
+
+ const toggleShowAge = () => setShowAge((s) => !s);
+
+ useEffect(() => {
+ function fetchTotalTxns(qs?: string) {
+ setIsLoading(true);
+ const queryParams = qs ? '?' + qs : '';
+ asyncFetch(`${config?.backendUrl}txns/count${queryParams}`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ .then(
+ (data: {
+ body: {
+ txns: { count: number }[];
+ };
+ }) => {
+ const resp = data?.body?.txns?.[0];
+ setTotalCount(resp?.count);
+ },
+ )
+ .catch(() => {})
+ .finally(() => {
+ setIsLoading(false);
+ });
+ }
+
+ function fetchTxns(qs?: string, sqs?: string) {
+ const queryParams = qs ? qs + '&' : '';
+ asyncFetch(
+ `${config?.backendUrl}txns?${queryParams}order=${sqs}&page=${currentPage}&per_page=25`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ },
+ )
+ .then(
+ (data: {
+ body: {
+ txns: TransactionInfo[];
+ };
+ }) => {
+ const resp = data?.body?.txns;
+ setTxns(resp);
+ },
+ )
+ .catch(() => {});
+ }
+
+ fetchTotalTxns();
+ fetchTxns();
+
+ const QueryString = Object.keys(filters)
+ .map(
+ (key) =>
+ `${encodeURIComponent(key)}=${encodeURIComponent(filters[key])}`,
+ )
+ .join('&');
+
+ if (QueryString || sorting) {
+ fetchTotalTxns(QueryString);
+ fetchTxns(QueryString, sorting);
+ }
+ }, [config?.backendUrl, currentPage, filters, sorting]);
+
+ const setPage = (page: number) => {
+ setCurrentPage(page);
+ };
+
+ let filterValue: string;
+ const onInputChange = (event: React.ChangeEvent): void => {
+ filterValue = event.target.value;
+ // Do something with the value if needed
+ };
+
+ const onFilter = (
+ e: React.MouseEvent,
+ name: string,
+ ): void => {
+ e.preventDefault();
+
+ setFilters((prev) => ({ ...prev, [name]: filterValue }));
+ };
+
+ const onClear = (name: string) => {
+ const updatedFilters = { ...filters };
+
+ if (updatedFilters.hasOwnProperty(name)) {
+ delete updatedFilters[name];
+
+ setFilters(updatedFilters);
+ }
+ };
+
+ const onOrder = () => {
+ setSorting((state) => (state === 'asc' ? 'desc' : 'asc'));
+ };
+
+ const columns = [
+ {
+ header: '',
+ key: '',
+ cell: (row: TransactionInfo) => (
+
+
+ ),
+ },
+ {
+ header: (
+
+ TXN HASH
+
+ ),
+ key: 'transaction_hash',
+ cell: (row: TransactionInfo) => (
+
+
+
+
+
+
+
+ {truncateString(row.transaction_hash, 15, '...')}
+
+
+
+
+
+ {row.transaction_hash}
+
+
+
+
+ ),
+ },
+ {
+ header: (
+
+
+
+ METHOD
+
+
+
+
+
+
+ onFilter(e, 'method')}
+ className="flex items-center justify-center flex-1 rounded bg-green-500 h-7 text-white text-xs mr-2"
+ >
+
+ onClear('method')}
+ className="flex-1 rounded bg-gray-300 text-xs h-7"
+ >
+ Clear
+
+
+
+
+ ),
+ key: 'actions',
+ cell: (row: TransactionInfo) => (
+
+
+
+
+
+
+ {truncateString(txnMethod(row.actions), 18, '...')}
+
+
+
+
+ {txnMethod(row.actions)}
+
+
+
+
+ ),
+ },
+ {
+ header: (
+
+ DEPOSIT VALUE
+
+ ),
+ key: 'deposit',
+ cell: (row: TransactionInfo) => (
+
+ {yoctoToNear(row.actions_agg?.deposit || 0, true)} Ⓝ
+
+ ),
+ },
+ {
+ header: (
+
+ TXN FEE
+
+ ),
+ key: 'transaction_fee',
+ cell: (row: TransactionInfo) => (
+
+ {' '}
+ {yoctoToNear(row.outcomes_agg?.transaction_fee || 0, true)} Ⓝ
+
+ ),
+ },
+ {
+ header: (
+
+
+
+ FROM
+
+
+
+
+ onFilter(e, 'from')}
+ className="flex items-center justify-center flex-1 rounded bg-green-500 h-7 text-white text-xs mr-2"
+ >
+
+ onClear('from')}
+ className="flex-1 rounded bg-gray-300 text-xs h-7"
+ >
+ Clear
+
+
+
+
+ ),
+ key: 'signer_account_id',
+ cell: (row: TransactionInfo) => (
+
+
+
+
+
+
+
+ {truncateString(row.signer_account_id, 18, '...')}
+
+
+
+
+
+ {row.signer_account_id}
+
+
+
+
+ ),
+ },
+ {
+ header: '',
+ key: '',
+ cell: () => (
+
+
+ ),
+ },
+ {
+ header: (
+
+
+
+ To
+
+
+
+
+ onFilter(e, 'to')}
+ className="flex items-center justify-center flex-1 rounded bg-green-500 h-7 text-white text-xs mr-2"
+ >
+
+ onClear('to')}
+ className="flex-1 rounded bg-gray-300 text-xs h-7"
+ >
+ Clear
+
+
+
+
+ ),
+ key: 'receiver_account_id',
+ cell: (row: TransactionInfo) => (
+
+
+
+
+
+
+
+ {truncateString(row.receiver_account_id, 17, '...')}
+
+
+
+
+
+ {row.receiver_account_id}
+
+
+
+
+ ),
+ },
+ {
+ header: (
+
+ BLOCK HEIGHT
+
+ ),
+ key: 'block_height',
+ cell: (row: TransactionInfo) => (
+
+
+
+ {localFormat(row.block?.block_height)}
+
+
+
+ ),
+ },
+ {
+ header: (
+
+
+
+ {showAge ? 'AGE' : 'DATE TIME (UTC)'}
+
+
+
+
+
+
+ ),
+ key: 'block_timestamp',
+ cell: (row: TransactionInfo) => (
+
+
+
+
+
+ {!showAge
+ ? formatTimestampToString(
+ nanoToMilli(Number(row.block_timestamp || 0)),
+ )
+ : getTimeAgoString(
+ nanoToMilli(Number(row.block_timestamp || 0)),
+ )}
+
+
+
+ {showAge
+ ? formatTimestampToString(
+ nanoToMilli(Number(row.block_timestamp || 0)),
+ )
+ : getTimeAgoString(
+ nanoToMilli(Number(row.block_timestamp || 0)),
+ )}
+
+
+
+
+ ),
+ },
+ ];
+
+ return (
+
+
+
+
+
+ Latest Near Protocol transactions
+
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+
+
+
+ {`More than > ${totalCount} transactions found`}
+
+
+
+ )}
+ {
+ // @ts-ignore
+
+ }
+
+
+
+
+
+ );
+}
diff --git a/apps/bos-components/src/components/Transactions/Overview.tsx b/apps/bos-components/src/components/Transactions/Overview.tsx
new file mode 100644
index 00000000..a62128ec
--- /dev/null
+++ b/apps/bos-components/src/components/Transactions/Overview.tsx
@@ -0,0 +1,456 @@
+/**
+ * Component: Transaction Overview
+ * Author: Nearblocks Pte Ltd
+ * License: Business Source License 1.1
+ * Description: Providing a comprehensive overview of nearblocks transactions.
+ * @interface Props
+ * @param {boolean} [fetchStyles] - Use Nearblock styles.
+ */
+
+interface Props {
+ fetchStyles?: boolean;
+}
+
+import Skelton from '@/includes/Common/Skelton';
+import {
+ currency,
+ dollarFormat,
+ formatCustomDate,
+ localFormat,
+} from '@/includes/formats';
+import { getConfig } from '@/includes/libs';
+import { gasPrice } from '@/includes/near';
+import {
+ ChartConfigType,
+ StatusInfo,
+ ChartInfo,
+ ChartSeriesInfo,
+} from '@/includes/types';
+
+export default function (props: Props) {
+ const [isLoading, setIsLoading] = useState(false);
+ const [css, setCss] = useState({});
+ const [stats, setStats] = useState({} as StatusInfo);
+ const [charts, setCharts] = useState([]);
+ const [chartConfig, setChartConfig] = useState(
+ {} as ChartConfigType,
+ );
+
+ const config = getConfig(context.networkId);
+
+ /**
+ * Fetches styles asynchronously from a nearblocks gateway.
+ */
+ function fetchStyles() {
+ asyncFetch('https://beta.nearblocks.io/common.css').then(
+ (res: { body: string }) => {
+ if (res?.body) {
+ setCss(res.body);
+ }
+ },
+ );
+ }
+
+ const Theme = styled.div`
+ ${css}
+ `;
+
+ useEffect(() => {
+ function fetchStats() {
+ setIsLoading(true);
+ asyncFetch(`${config?.backendUrl}stats`)
+ .then(
+ (data: {
+ body: {
+ stats: StatusInfo[];
+ };
+ }) => {
+ const resp = data?.body?.stats?.[0];
+ setStats({
+ avg_block_time: resp.avg_block_time,
+ block: resp.block,
+ change_24: resp.change_24,
+ gas_price: resp.gas_price,
+ high_24h: resp.high_24h,
+ high_all: resp.high_all,
+ low_24h: resp.low_24h,
+ low_all: resp.low_all,
+ market_cap: resp.market_cap,
+ near_btc_price: resp.near_btc_price,
+ near_price: resp.near_price,
+ nodes: resp.nodes,
+ nodes_online: resp.nodes_online,
+ total_supply: resp.total_supply,
+ total_txns: resp.total_txns,
+ volume: resp.volume,
+ });
+ },
+ )
+ .catch(() => {})
+ .finally(() => {
+ setIsLoading(false);
+ });
+ }
+
+ fetchStats();
+ const interval = setInterval(() => {
+ fetchStats();
+ }, 15000);
+
+ return () => clearInterval(interval);
+ }, [config?.backendUrl]);
+
+ useEffect(() => {
+ if (props?.fetchStyles) {
+ fetchStyles();
+ }
+
+ function fetchChartData() {
+ asyncFetch(`${config.backendUrl}charts/latest`)
+ .then(
+ (data: {
+ body: {
+ charts: { date: string; near_price: string; txns: string }[];
+ };
+ }) => {
+ const resp = data?.body?.charts;
+ setCharts(resp);
+ },
+ )
+ .catch(() => {});
+ }
+
+ fetchChartData();
+ }, [props?.fetchStyles, config.backendUrl]);
+
+ const chartData = useMemo(() => {
+ try {
+ const series = charts?.map((stat) => ({
+ y: Number(stat.txns),
+ date: stat.date,
+ price: stat.near_price,
+ }));
+ series.sort(
+ (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+ );
+ const categories = series.map((stat) => formatCustomDate(stat.date));
+ return {
+ series,
+ categories,
+ };
+ } catch (error) {
+ return {
+ series: [],
+ categories: [],
+ };
+ }
+ }, [charts]);
+
+ useEffect(() => {
+ // Factory function to create the tooltip formatter
+
+ function fetchData() {
+ const fetchedData = {
+ chart: {
+ height: 110,
+ spacingTop: 10,
+ spacingBottom: 0,
+ spacingLeft: 0,
+ spacingRight: 10,
+ },
+ title: {
+ text: null,
+ },
+ xAxis: {
+ type: 'datetime',
+ lineWidth: 0,
+ tickLength: 0,
+ labels: {
+ step: 7,
+ },
+ categories: chartData.categories,
+ },
+ yAxis: {
+ gridLineWidth: 0,
+ title: {
+ text: null,
+ },
+ },
+ legend: {
+ enabled: false,
+ },
+ plotOptions: {
+ spline: {
+ lineWidth: 1,
+ states: {
+ hover: {
+ lineWidth: 1,
+ },
+ },
+ marker: {
+ radius: 0,
+ },
+ },
+ },
+ series: [
+ {
+ type: 'spline',
+ data: chartData.series,
+ color: '#80D1BF',
+ },
+ ] as [ChartSeriesInfo],
+ exporting: {
+ enabled: false,
+ },
+ credits: {
+ enabled: false,
+ },
+ };
+ setChartConfig(fetchedData);
+ }
+
+ fetchData();
+ }, [chartData]);
+
+ const iframeSrc = `
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ return (
+
+
+
+
+
+
+ Near Protocol Explorer
+
+
+
+ {
+
+
+
+
+
+
+
+
+ {context.networkId === 'mainnet' && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ TRANSACTIONS
+
+ {isLoading ? (
+
+ ) : (
+
+ {currency(Number(stats?.total_txns ?? 0))}
+
+ )}
+
+
+
+
+ {' '}
+ GAS PRICE
+
+ {isLoading ? (
+
+ ) : (
+
+ {gasPrice(Number(stats?.gas_price ?? 0))}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {' '}
+ NEAR TRANSACTION HISTORY IN 14 DAYS
+
+
+ {chartData ? (
+
+ ) : (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/bos-components/src/includes/Common/Filter.tsx b/apps/bos-components/src/includes/Common/Filter.tsx
new file mode 100644
index 00000000..43fd3c0e
--- /dev/null
+++ b/apps/bos-components/src/includes/Common/Filter.tsx
@@ -0,0 +1,19 @@
+interface Props {
+ className: string;
+}
+const Filter = (props: Props) => {
+ return (
+
+
+ );
+};
+
+export default Filter;
diff --git a/apps/bos-components/src/includes/Common/Paginator.tsx b/apps/bos-components/src/includes/Common/Paginator.tsx
new file mode 100644
index 00000000..13630708
--- /dev/null
+++ b/apps/bos-components/src/includes/Common/Paginator.tsx
@@ -0,0 +1,120 @@
+import FaChevronLeft from '@/includes/icons/FaChevronLeft';
+import FaChevronRight from '@/includes/icons/FaChevronRight';
+interface PaginatorProps {
+ loading?: boolean;
+ count: number;
+ page: number;
+ limit: number;
+ pageLimit: number;
+ setPage: (page: number) => void;
+}
+
+const Loader = (props: any) => {
+ return (
+
+ );
+};
+
+const Paginator = (props: PaginatorProps) => {
+ let pages: number;
+ if (props.count) {
+ pages = Math.ceil(props.count / props.limit);
+ } else {
+ pages = 1;
+ }
+ pages = pages > props.pageLimit ? props.pageLimit : pages;
+ const onPrev = () => {
+ if (props.page <= 1) return null;
+
+ const newPage = (props.page || 1) - 1;
+ props.setPage(newPage);
+ return;
+ };
+ const onNext = () => {
+ if (props.page >= pages) return null;
+
+ const newPage = (props.page || 1) + 1;
+ props.setPage(newPage);
+ return;
+ };
+ const onFirst = () => props.setPage(1);
+ const onLast = () => props.setPage(pages);
+
+ return (
+
+
+
+ {props.loading ? (
+
+ ) : (
+
+
+
+ First
+
+
+
+
+ Page {props.page} of {pages}
+
+ = pages || pages === 1}
+ onClick={onNext}
+ className={`relative inline-flex items-center ml-1 px-2 md:px-3 py-2 rounded-md font-medium ${
+ props.page >= pages
+ ? 'text-gray-500'
+ : 'text-green-400 hover:text-white hover:bg-green-400'
+ } bg-gray-100`}
+ >
+
+ = pages || pages === 1}
+ onClick={onLast}
+ className={`relative inline-flex items-center px-2 ml-1 md:px-3 py-2 text-xs font-medium rounded-md ${
+ props.page >= pages
+ ? 'text-gray-500'
+ : 'text-green-400 hover:text-white hover:bg-green-400'
+ } bg-gray-100 `}
+ >
+ Last
+
+
+
+ )}
+
+
+
+ {option.label} }
+
+
+ );
+};
+
+export default TxnStatus;
diff --git a/apps/bos-components/src/includes/formats.ts b/apps/bos-components/src/includes/formats.ts
index e2cdf314..f38e08c4 100644
--- a/apps/bos-components/src/includes/formats.ts
+++ b/apps/bos-components/src/includes/formats.ts
@@ -1,3 +1,5 @@
+import { yoctoToNear } from '@/includes/libs';
+
export function localFormat(number: number) {
const formattedNumber = Number(number).toLocaleString('en', {
minimumFractionDigits: 0,
@@ -88,3 +90,150 @@ export function convertToUTC(timestamp: number, hour: boolean) {
return formattedDate;
}
+
+export function getTimeAgoString(timestamp: number) {
+ const currentUTC = Date.now();
+ const date = new Date(timestamp);
+ const seconds = Math.floor((currentUTC - date.getTime()) / 1000);
+
+ const intervals = {
+ year: seconds / (60 * 60 * 24 * 365),
+ month: seconds / (60 * 60 * 24 * 30),
+ week: seconds / (60 * 60 * 24 * 7),
+ day: seconds / (60 * 60 * 24),
+ hour: seconds / (60 * 60),
+ minute: seconds / 60,
+ };
+
+ if (intervals.year > 1) {
+ return Math.floor(intervals.year) + ' years ago';
+ } else if (intervals.month > 1) {
+ return Math.floor(intervals.month) + ' months ago';
+ } else if (intervals.week > 1) {
+ return Math.floor(intervals.week) + ' weeks ago';
+ } else if (intervals.day > 1) {
+ return Math.floor(intervals.day) + ' days ago';
+ } else if (intervals.hour > 1) {
+ return Math.floor(intervals.hour) + ' hours ago';
+ } else if (intervals.minute > 1) {
+ return Math.floor(intervals.minute) + ' minutes ago';
+ } else {
+ return 'a few seconds ago';
+ }
+}
+
+export function formatWithCommas(number: string) {
+ return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+export function formatTimestampToString(timestamp: number) {
+ const date = new Date(timestamp);
+
+ // Format the date to 'YYYY-MM-DD HH:mm:ss' format
+ const formattedDate = date.toISOString().replace('T', ' ').split('.')[0];
+
+ return formattedDate;
+}
+
+export function convertToMetricPrefix(number: number) {
+ const prefixes = ['', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']; // Metric prefixes
+
+ let count = 0;
+ while (Math.abs(number) >= 1000 && count < prefixes.length - 1) {
+ number /= 1000;
+ count++;
+ }
+
+ return number.toFixed(2) + prefixes[count];
+}
+
+export function gasFee(gas: number, price: number) {
+ const near = yoctoToNear(Big(gas).mul(Big(price)).toString(), true);
+
+ return `${near} Ⓝ`;
+}
+
+export function currency(number: number): string {
+ let absNumber = Math.abs(number);
+
+ const suffixes = ['', 'K', 'M', 'B', 'T', 'Q'];
+ let suffixIndex = 0;
+
+ while (absNumber >= 1000 && suffixIndex < suffixes.length - 1) {
+ absNumber /= 1000;
+ suffixIndex++;
+ }
+
+ let shortNumber = parseFloat(absNumber.toFixed(2));
+
+ return (number < 0 ? '-' : '') + shortNumber + ' ' + suffixes[suffixIndex];
+}
+
+export function formatDate(dateString: string) {
+ const inputDate = new Date(dateString);
+
+ const days = [
+ 'Sunday',
+ 'Monday',
+ 'Tuesday',
+ 'Wednesday',
+ 'Thursday',
+ 'Friday',
+ 'Saturday',
+ ];
+ const months = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ ];
+
+ const dayOfWeek = days[inputDate.getDay()];
+ const month = months[inputDate.getMonth()];
+ const day = inputDate.getDate();
+ const year = inputDate.getFullYear();
+
+ const formattedDate = dayOfWeek + ', ' + month + ' ' + day + ', ' + year;
+ return formattedDate;
+}
+
+export function formatCustomDate(inputDate: string) {
+ var date = new Date(inputDate);
+
+ // Array of month names
+ var monthNames = [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ ];
+
+ // Get month and day
+ var month = monthNames[date.getMonth()];
+ var day = date.getDate();
+
+ // Create formatted date string in "MMM DD" format
+ var formattedDate = month + ' ' + (day < 10 ? '0' + day : day);
+
+ return formattedDate;
+}
+
+export function shortenHex(address: string) {
+ return `${address && address.substr(0, 6)}...${address.substr(-4)}`;
+}
diff --git a/apps/bos-components/src/includes/icons/ArrowUp.tsx b/apps/bos-components/src/includes/icons/ArrowUp.tsx
new file mode 100644
index 00000000..3756f5f3
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/ArrowUp.tsx
@@ -0,0 +1,19 @@
+interface Props {
+ className: string;
+}
+const ArrowUp = (props: Props) => {
+ return (
+
+
+ );
+};
+
+export default ArrowUp;
diff --git a/apps/bos-components/src/includes/icons/FaCheckCircle.tsx b/apps/bos-components/src/includes/icons/FaCheckCircle.tsx
new file mode 100644
index 00000000..2099af29
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/FaCheckCircle.tsx
@@ -0,0 +1,12 @@
+const FaCheckCircle = () => {
+ return (
+
+
+ );
+};
+
+export default FaCheckCircle;
diff --git a/apps/bos-components/src/includes/icons/FaChevronLeft.tsx b/apps/bos-components/src/includes/icons/FaChevronLeft.tsx
new file mode 100644
index 00000000..0f1d95e2
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/FaChevronLeft.tsx
@@ -0,0 +1,19 @@
+const FaChevronLeft = () => {
+ return (
+
+
+ );
+};
+
+export default FaChevronLeft;
diff --git a/apps/bos-components/src/includes/icons/FaChevronRight.tsx b/apps/bos-components/src/includes/icons/FaChevronRight.tsx
new file mode 100644
index 00000000..d36e4a65
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/FaChevronRight.tsx
@@ -0,0 +1,19 @@
+const FaChevronRight = () => {
+ return (
+
+
+ );
+};
+
+export default FaChevronRight;
diff --git a/apps/bos-components/src/includes/icons/FaHourglassStart.tsx b/apps/bos-components/src/includes/icons/FaHourglassStart.tsx
new file mode 100644
index 00000000..7a676bd8
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/FaHourglassStart.tsx
@@ -0,0 +1,12 @@
+const FaHourglassStart = () => {
+ return (
+
+
+ );
+};
+
+export default FaHourglassStart;
diff --git a/apps/bos-components/src/includes/icons/FaLongArrowAltRight.tsx b/apps/bos-components/src/includes/icons/FaLongArrowAltRight.tsx
new file mode 100644
index 00000000..90aa967c
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/FaLongArrowAltRight.tsx
@@ -0,0 +1,12 @@
+const FaLongArrowAltRight = () => {
+ return (
+
+
+ );
+};
+
+export default FaLongArrowAltRight;
diff --git a/apps/bos-components/src/includes/icons/FaTimesCircle.tsx b/apps/bos-components/src/includes/icons/FaTimesCircle.tsx
new file mode 100644
index 00000000..67d24b1d
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/FaTimesCircle.tsx
@@ -0,0 +1,12 @@
+const FaTimesCircle = () => {
+ return (
+
+
+ );
+};
+
+export default FaTimesCircle;
diff --git a/apps/bos-components/src/includes/icons/SortIcon.tsx b/apps/bos-components/src/includes/icons/SortIcon.tsx
new file mode 100644
index 00000000..e3bedb24
--- /dev/null
+++ b/apps/bos-components/src/includes/icons/SortIcon.tsx
@@ -0,0 +1,16 @@
+interface Props {
+ order: string;
+}
+import ArrowUp from '@/includes/icons/ArrowUp';
+
+const SortIcon = (props: Props) => {
+ return (
+ 
+ 
+ 
+ 
+