/** * Component: FTOverview * Author: Nearblocks Pte Ltd * License: Business Source License 1.1 * Description: Fungible Token Overview on Near Protocol. * @interface Props * @param {string} id - The token identifier passed as a string * @param {Function} [t] - A function for internationalization (i18n) provided by the next-translate package. * @param {string} [network] - The network data to show, either mainnet or testnet */ /* INCLUDE COMPONENT: "includes/Common/Links.jsx" */ /* INCLUDE: "includes/libs.jsx" */ function urlHostName(url) { try { const domain = new URL(url); return domain?.hostname ?? null; } catch (e) { return null; } } function holderPercentage(supply, quantity) { return Math.min(Big(quantity).div(Big(supply)).mul(Big(100)).toFixed(2), 100); } function isAction(type) { const actions = [ 'DEPLOY_CONTRACT', 'TRANSFER', 'STAKE', 'ADD_KEY', 'DELETE_KEY', 'DELETE_ACCOUNT', ]; return actions.includes(type.toUpperCase()); } function localFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 0, maximumFractionDigits: 5, }); return formattedNumber; } function formatWithCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } /* END_INCLUDE: "includes/libs.jsx" */ const Links = (props) => { const { meta } = props; const twitter = urlHostName(meta?.twitter); const facebook = urlHostName(meta?.facebook); const telegram = urlHostName(meta?.telegram); return ( <div className="flex space-x-4"> {meta?.twitter && ( <Tooltip.Provider> <Tooltip.Root> <Tooltip.Trigger asChild> <a href={ !twitter ? `https://twitter.com/${meta.twitter}` : meta.twitter } target="_blank" rel="noopener noreferrer nofollow" className="flex" > <img width="16" height="16" className="w-4 h-4" src="/images/twitter_icon.svg" alt="Twitter" /> </a> </Tooltip.Trigger> <Tooltip.Content className="h-auto max-w-xs bg-black bg-opacity-90 z-10 text-white text-xs p-2" sideOffset={8} place="bottom" > Twitter </Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> )} {meta?.facebook && ( <Tooltip.Provider> <Tooltip.Root> <Tooltip.Trigger asChild> <a href={ !facebook ? `https://facebook.com/${meta.facebook}` : meta.facebook } target="_blank" rel="noopener noreferrer nofollow" className="flex" > <img width="16" height="16" className="w-4 h-4" src="/images/facebook_icon.svg" alt="Facebook" /> </a> </Tooltip.Trigger> <Tooltip.Content className="h-auto max-w-xs bg-black bg-opacity-90 z-10 text-white text-xs p-2" sideOffset={8} place="bottom" > Facebook </Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> )} {meta?.telegram && ( <Tooltip.Provider> <Tooltip.Root> <Tooltip.Trigger asChild> <a href={ !telegram ? `https://t.me/${meta.telegram}` : meta.telegram } target="_blank" rel="noopener noreferrer nofollow" className="flex" > <img width="16" height="16" className="w-4 h-4" src="/images/telegram_icon.svg" alt="Telegram" /> </a> </Tooltip.Trigger> <Tooltip.Content className="h-auto max-w-xs bg-black bg-opacity-90 z-10 text-white text-xs p-2" sideOffset={8} place="bottom" > Telegram </Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> )} {meta?.coingecko_id && ( <Tooltip.Provider> <Tooltip.Root> <Tooltip.Trigger asChild> <a href={`https://www.coingecko.com/en/coins/${meta.coingecko_id}`} target="_blank" rel="noopener noreferrer nofollow" className="flex" > <img width="16" height="16" className="w-4 h-4" src="/images/coingecko_icon.svg" alt="coingecko" /> </a> </Tooltip.Trigger> <Tooltip.Content className="h-auto max-w-xs bg-black bg-opacity-90 z-10 text-white text-xs p-2" sideOffset={8} place="bottom" > CoinGecko </Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> )} </div> ); };/* END_INCLUDE COMPONENT: "includes/Common/Links.jsx" */ /* INCLUDE COMPONENT: "includes/Common/Skeleton.jsx" */ /** * @interface Props * @param {string} [className] - The CSS class name(s) for styling purposes. */ const Skeleton = (props) => { return ( <div className={`bg-gray-200 rounded shadow-sm animate-pulse ${props.className}`} ></div> ); };/* END_INCLUDE COMPONENT: "includes/Common/Skeleton.jsx" */ /* INCLUDE: "includes/formats.jsx" */ function dollarFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2, }); return formattedNumber; } function dollarNonCentFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 0, maximumFractionDigits: 0, }); return formattedNumber; } function weight(number) { const suffixes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; let suffixIndex = 0; while (number >= 1000 && suffixIndex < suffixes.length - 1) { number /= 1000; suffixIndex++; } return number.toFixed(2) + ' ' + suffixes[suffixIndex]; } function convertToUTC(timestamp, hour) { const date = new Date(timestamp); // Get UTC date components const utcYear = date.getUTCFullYear(); const utcMonth = ('0' + (date.getUTCMonth() + 1)).slice(-2); // Adding 1 because months are zero-based const utcDay = ('0' + date.getUTCDate()).slice(-2); const utcHours = ('0' + date.getUTCHours()).slice(-2); const utcMinutes = ('0' + date.getUTCMinutes()).slice(-2); const utcSeconds = ('0' + date.getUTCSeconds()).slice(-2); // Array of month abbreviations const monthAbbreviations = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ]; const monthIndex = Number(utcMonth) - 1; // Format the date as required (Jul-25-2022 16:25:37) let formattedDate = monthAbbreviations[monthIndex] + '-' + utcDay + '-' + utcYear + ' ' + utcHours + ':' + utcMinutes + ':' + utcSeconds; if (hour) { // Convert hours to 12-hour format let hour12 = parseInt(utcHours); const ampm = hour12 >= 12 ? 'PM' : 'AM'; hour12 = hour12 % 12 || 12; // Add AM/PM to the formatted date (Jul-25-2022 4:25:37 PM) formattedDate = monthAbbreviations[monthIndex] + '-' + utcDay + '-' + utcYear + ' ' + hour12 + ':' + utcMinutes + ':' + utcSeconds + ' ' + ampm; } return formattedDate; } function getTimeAgoString(timestamp) { 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.ceil(intervals.year) + ' year ago'; } else if (intervals.year > 1) { return Math.ceil(intervals.year) + ' years ago'; } else if (intervals.month > 1) { return Math.ceil(intervals.month) + ' months ago'; } else if (intervals.day > 1) { return Math.ceil(intervals.day) + ' days ago'; } else if (intervals.hour > 1) { return Math.ceil(intervals.hour) + ' hours ago'; } else if (intervals.minute > 1) { return Math.ceil(intervals.minute) + ' minutes ago'; } else { return 'a few seconds ago'; } } function formatWithCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } function formatTimestampToString(timestamp) { 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; } function convertToMetricPrefix(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++; } // Check if the number is close to an integer value if (Math.abs(number) >= 10) { number = Math.round(number); // Round the number to the nearest whole number return number + ' ' + prefixes[count]; } return ( Number(Math.floor(number * 100) / 100).toFixed(2) + ' ' + prefixes[count] ); } function formatNumber(value) { const suffixes = ['', 'K', 'M', 'B', 'T']; let suffixIndex = 0; while (value >= 10000 && suffixIndex < suffixes.length - 1) { value /= 1000; suffixIndex++; } const formattedValue = value.toFixed(1).replace(/\.0+$/, ''); return `${formattedValue} ${suffixes[suffixIndex]}`; } function gasFee(gas, price) { const near = yoctoToNear(Big(gas).mul(Big(price)).toString(), true); return `${near} Ⓝ`; } function currency(number) { 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]; } function formatDate(dateString) { 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; } function formatCustomDate(inputDate) { 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; } function shortenHex(address) { return `${address && address.substr(0, 6)}...${address.substr(-4)}`; } function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } function shortenToken(token) { return truncateString(token, 14, ''); } function shortenTokenSymbol(token) { return truncateString(token, 5, ''); } function gasPercentage(gasUsed, gasAttached) { if (!gasAttached) return 'N/A'; const formattedNumber = (Big(gasUsed).div(Big(gasAttached)) * 100).toFixed(2); return `${formattedNumber}%`; } function serialNumber(index, page, perPage) { return index + 1 + (page - 1) * perPage; } function capitalizeWords(str) { const words = str.split('_'); const capitalizedWords = words.map( (word) => word.charAt(0).toUpperCase() + word.slice(1), ); const result = capitalizedWords.join(' '); return result; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function dollarNonCentFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 0, maximumFractionDigits: 0, }); return formattedNumber; } function weight(number) { const suffixes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; let suffixIndex = 0; while (number >= 1000 && suffixIndex < suffixes.length - 1) { number /= 1000; suffixIndex++; } return number.toFixed(2) + ' ' + suffixes[suffixIndex]; } function convertToUTC(timestamp, hour) { const date = new Date(timestamp); // Get UTC date components const utcYear = date.getUTCFullYear(); const utcMonth = ('0' + (date.getUTCMonth() + 1)).slice(-2); // Adding 1 because months are zero-based const utcDay = ('0' + date.getUTCDate()).slice(-2); const utcHours = ('0' + date.getUTCHours()).slice(-2); const utcMinutes = ('0' + date.getUTCMinutes()).slice(-2); const utcSeconds = ('0' + date.getUTCSeconds()).slice(-2); // Array of month abbreviations const monthAbbreviations = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ]; const monthIndex = Number(utcMonth) - 1; // Format the date as required (Jul-25-2022 16:25:37) let formattedDate = monthAbbreviations[monthIndex] + '-' + utcDay + '-' + utcYear + ' ' + utcHours + ':' + utcMinutes + ':' + utcSeconds; if (hour) { // Convert hours to 12-hour format let hour12 = parseInt(utcHours); const ampm = hour12 >= 12 ? 'PM' : 'AM'; hour12 = hour12 % 12 || 12; // Add AM/PM to the formatted date (Jul-25-2022 4:25:37 PM) formattedDate = monthAbbreviations[monthIndex] + '-' + utcDay + '-' + utcYear + ' ' + hour12 + ':' + utcMinutes + ':' + utcSeconds + ' ' + ampm; } return formattedDate; } function getTimeAgoString(timestamp) { 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.ceil(intervals.year) + ' year ago'; } else if (intervals.year > 1) { return Math.ceil(intervals.year) + ' years ago'; } else if (intervals.month > 1) { return Math.ceil(intervals.month) + ' months ago'; } else if (intervals.day > 1) { return Math.ceil(intervals.day) + ' days ago'; } else if (intervals.hour > 1) { return Math.ceil(intervals.hour) + ' hours ago'; } else if (intervals.minute > 1) { return Math.ceil(intervals.minute) + ' minutes ago'; } else { return 'a few seconds ago'; } } function formatWithCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } function formatTimestampToString(timestamp) { 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; } function convertToMetricPrefix(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++; } // Check if the number is close to an integer value if (Math.abs(number) >= 10) { number = Math.round(number); // Round the number to the nearest whole number return number + ' ' + prefixes[count]; } return ( Number(Math.floor(number * 100) / 100).toFixed(2) + ' ' + prefixes[count] ); } function formatNumber(value) { const suffixes = ['', 'K', 'M', 'B', 'T']; let suffixIndex = 0; while (value >= 10000 && suffixIndex < suffixes.length - 1) { value /= 1000; suffixIndex++; } const formattedValue = value.toFixed(1).replace(/\.0+$/, ''); return `${formattedValue} ${suffixes[suffixIndex]}`; } function gasFee(gas, price) { const near = yoctoToNear(Big(gas).mul(Big(price)).toString(), true); return `${near} Ⓝ`; } function currency(number) { 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]; } function formatDate(dateString) { 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; } function formatCustomDate(inputDate) { 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; } function shortenHex(address) { return `${address && address.substr(0, 6)}...${address.substr(-4)}`; } function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } function shortenToken(token) { return truncateString(token, 14, ''); } function shortenTokenSymbol(token) { return truncateString(token, 5, ''); } function gasPercentage(gasUsed, gasAttached) { if (!gasAttached) return 'N/A'; const formattedNumber = (Big(gasUsed).div(Big(gasAttached)) * 100).toFixed(2); return `${formattedNumber}%`; } function serialNumber(index, page, perPage) { return index + 1 + (page - 1) * perPage; } function capitalizeWords(str) { const words = str.split('_'); const capitalizedWords = words.map( (word) => word.charAt(0).toUpperCase() + word.slice(1), ); const result = capitalizedWords.join(' '); return result; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function localFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 0, maximumFractionDigits: 5, }); return formattedNumber; } function dollarFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2, }); return formattedNumber; } function dollarNonCentFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 0, maximumFractionDigits: 0, }); return formattedNumber; } function weight(number) { const suffixes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; let suffixIndex = 0; while (number >= 1000 && suffixIndex < suffixes.length - 1) { number /= 1000; suffixIndex++; } return number.toFixed(2) + ' ' + suffixes[suffixIndex]; } function convertToUTC(timestamp, hour) { const date = new Date(timestamp); // Get UTC date components const utcYear = date.getUTCFullYear(); const utcMonth = ('0' + (date.getUTCMonth() + 1)).slice(-2); // Adding 1 because months are zero-based const utcDay = ('0' + date.getUTCDate()).slice(-2); const utcHours = ('0' + date.getUTCHours()).slice(-2); const utcMinutes = ('0' + date.getUTCMinutes()).slice(-2); const utcSeconds = ('0' + date.getUTCSeconds()).slice(-2); // Array of month abbreviations const monthAbbreviations = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ]; const monthIndex = Number(utcMonth) - 1; // Format the date as required (Jul-25-2022 16:25:37) let formattedDate = monthAbbreviations[monthIndex] + '-' + utcDay + '-' + utcYear + ' ' + utcHours + ':' + utcMinutes + ':' + utcSeconds; if (hour) { // Convert hours to 12-hour format let hour12 = parseInt(utcHours); const ampm = hour12 >= 12 ? 'PM' : 'AM'; hour12 = hour12 % 12 || 12; // Add AM/PM to the formatted date (Jul-25-2022 4:25:37 PM) formattedDate = monthAbbreviations[monthIndex] + '-' + utcDay + '-' + utcYear + ' ' + hour12 + ':' + utcMinutes + ':' + utcSeconds + ' ' + ampm; } return formattedDate; } function getTimeAgoString(timestamp) { 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.ceil(intervals.year) + ' year ago'; } else if (intervals.year > 1) { return Math.ceil(intervals.year) + ' years ago'; } else if (intervals.month > 1) { return Math.ceil(intervals.month) + ' months ago'; } else if (intervals.day > 1) { return Math.ceil(intervals.day) + ' days ago'; } else if (intervals.hour > 1) { return Math.ceil(intervals.hour) + ' hours ago'; } else if (intervals.minute > 1) { return Math.ceil(intervals.minute) + ' minutes ago'; } else { return 'a few seconds ago'; } } function formatWithCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } function formatTimestampToString(timestamp) { 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; } function convertToMetricPrefix(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++; } // Check if the number is close to an integer value if (Math.abs(number) >= 10) { number = Math.round(number); // Round the number to the nearest whole number return number + ' ' + prefixes[count]; } return ( Number(Math.floor(number * 100) / 100).toFixed(2) + ' ' + prefixes[count] ); } function formatNumber(value) { const suffixes = ['', 'K', 'M', 'B', 'T']; let suffixIndex = 0; while (value >= 10000 && suffixIndex < suffixes.length - 1) { value /= 1000; suffixIndex++; } const formattedValue = value.toFixed(1).replace(/\.0+$/, ''); return `${formattedValue} ${suffixes[suffixIndex]}`; } function gasFee(gas, price) { const near = yoctoToNear(Big(gas).mul(Big(price)).toString(), true); return `${near} Ⓝ`; } function currency(number) { 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]; } function formatDate(dateString) { 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; } function formatCustomDate(inputDate) { 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; } function shortenHex(address) { return `${address && address.substr(0, 6)}...${address.substr(-4)}`; } function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } function shortenToken(token) { return truncateString(token, 14, ''); } function shortenTokenSymbol(token) { return truncateString(token, 5, ''); } function gasPercentage(gasUsed, gasAttached) { if (!gasAttached) return 'N/A'; const formattedNumber = (Big(gasUsed).div(Big(gasAttached)) * 100).toFixed(2); return `${formattedNumber}%`; } function serialNumber(index, page, perPage) { return index + 1 + (page - 1) * perPage; } function capitalizeWords(str) { const words = str.split('_'); const capitalizedWords = words.map( (word) => word.charAt(0).toUpperCase() + word.slice(1), ); const result = capitalizedWords.join(' '); return result; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } function truncateString(str, maxLength, suffix) { if (str.length <= maxLength) { return str; } return str.substring(0, maxLength) + suffix; } function yoctoToNear(yocto, format) { const YOCTO_PER_NEAR = Big(10).pow(24).toString(); const near = Big(yocto).div(YOCTO_PER_NEAR).toString(); return format ? localFormat(near) : near; } /* END_INCLUDE: "includes/formats.jsx" */ /* INCLUDE COMPONENT: "includes/icons/Question.jsx" */ /** * @interface Props * @param {string} [className] - The CSS class name(s) for styling purposes. */ const Question = (props) => { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={16} height={16} {...props} > <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 011-1 1.5 1.5 0 10-1.471-1.794l-1.962-.393A3.501 3.501 0 1113 13.355z" /> </svg> ); };/* END_INCLUDE COMPONENT: "includes/icons/Question.jsx" */ /* INCLUDE COMPONENT: "includes/icons/TokenImage.jsx" */ /** * @interface Props * @param {string} [src] - The URL string pointing to the image source. * @param {string} [alt] - The alternate text description for the image. * @param {string} [className] - The CSS class name(s) for styling purposes. * @param {string} [appUrl] - The URL of the application. */ const TokenImage = ({ appUrl, src, alt, className, onLoad, onSetSrc, }) => { const placeholder = `${appUrl}images/tokenplaceholder.svg`; const handleLoad = () => { if (onLoad) { onLoad(); } }; const handleError = () => { if (onSetSrc) { onSetSrc(placeholder); } if (onLoad) { onLoad(); } }; return ( <img src={src || placeholder} alt={alt} className={className} onLoad={handleLoad} onError={handleError} /> ); };/* END_INCLUDE COMPONENT: "includes/icons/TokenImage.jsx" */ /* INCLUDE: "includes/libs.jsx" */ function getConfig(network) { switch (network) { case 'mainnet': return { ownerId: 'nearblocks.near', nodeUrl: 'https://rpc.mainnet.near.org', backendUrl: 'https://api3.nearblocks.io/v1/', rpcUrl: 'https://archival-rpc.testnet.near.org', appUrl: 'https://nearblocks.io/', }; case 'testnet': return { ownerId: 'nearblocks.testnet', nodeUrl: 'https://rpc.testnet.near.org', backendUrl: 'https://api3-testnet.nearblocks.io/v1/', rpcUrl: 'https://archival-rpc.testnet.near.org', appUrl: 'https://testnet.nearblocks.io/', }; default: return {}; } } function debounce( delay, func, ) { let timer; let active = true; const debounced = (arg) => { if (active) { clearTimeout(timer); timer = setTimeout(() => { active && func(arg); timer = undefined; }, delay); } else { func(arg); } }; debounced.isPending = () => { return timer !== undefined; }; debounced.cancel = () => { active = false; }; debounced.flush = (arg) => func(arg); return debounced; } function timeAgo(unixTimestamp) { const currentTimestamp = Math.floor(Date.now() / 1000); const secondsAgo = currentTimestamp - unixTimestamp; if (secondsAgo < 5) { return 'Just now'; } else if (secondsAgo < 60) { return `${secondsAgo} seconds ago`; } else if (secondsAgo < 3600) { const minutesAgo = Math.floor(secondsAgo / 60); return `${minutesAgo} minute${minutesAgo > 1 ? 's' : ''} ago`; } else if (secondsAgo < 86400) { const hoursAgo = Math.floor(secondsAgo / 3600); return `${hoursAgo} hour${hoursAgo > 1 ? 's' : ''} ago`; } else { const daysAgo = Math.floor(secondsAgo / 86400); return `${daysAgo} day${daysAgo > 1 ? 's' : ''} ago`; } } function shortenAddress(address) { const string = String(address); if (string.length <= 20) return string; return `${string.substr(0, 10)}...${string.substr(-7)}`; } function urlHostName(url) { try { const domain = new URL(url); return domain?.hostname ?? null; } catch (e) { return null; } } function holderPercentage(supply, quantity) { return Math.min(Big(quantity).div(Big(supply)).mul(Big(100)).toFixed(2), 100); } function isAction(type) { const actions = [ 'DEPLOY_CONTRACT', 'TRANSFER', 'STAKE', 'ADD_KEY', 'DELETE_KEY', 'DELETE_ACCOUNT', ]; return actions.includes(type.toUpperCase()); } function localFormat(number) { const formattedNumber = Number(number).toLocaleString('en', { minimumFractionDigits: 0, maximumFractionDigits: 5, }); return formattedNumber; } function formatWithCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } /* END_INCLUDE: "includes/libs.jsx" */ function MainComponent({ network, id, t }) { const tabs = [ t ? t('token:fts.ft.transfers') : 'Transfers', t ? t('token:fts.ft.holders') : 'Holders', 'Info', 'FAQ', 'Comments', ]; const [isLoading, setIsLoading] = useState(false); const [txnLoading, setTxnLoading] = useState(false); const [holderLoading, setHolderLoading] = useState(false); const [stats, setStats] = useState({} ); const [token, setToken] = useState({} ); const [transfers, setTransfers] = useState(0); const [holders, setHolders] = useState(0); const [pageTab, setPageTab] = useState('Transfers'); const [showMarketCap, setShowMarketCap] = useState(false); const config = getConfig(network); useEffect(() => { function fetchFTData() { setIsLoading(true); asyncFetch(`${config.backendUrl}fts/${id}`) .then( (data ) => { const resp = data?.body?.contracts?.[0]; if (data.status === 200) { setToken(resp); } setIsLoading(false); }, ) .catch(() => {}); } function fetchTxnsCount() { setTxnLoading(true); asyncFetch(`${config.backendUrl}fts/${id}/txns/count`) .then( (data ) => { const resp = data?.body?.txns?.[0]; if (data.status === 200) { setTransfers(resp.count); } setTxnLoading(false); }, ) .catch(() => {}); } function fetchStatsData() { asyncFetch(`${config?.backendUrl}stats`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, }) .then((res) => { const data = res.body; if (res.status === 200) { setStats(data.stats[0]); } }) .catch(() => {}) .finally(() => {}); } function fetchHoldersCount() { setHolderLoading(true); asyncFetch(`${config.backendUrl}fts/${id}/holders/count`) .then( (data ) => { const resp = data?.body?.holders?.[0]; if (data.status === 200) { setHolders(resp.count); } setHolderLoading(false); }, ) .catch(() => {}); } fetchStatsData(); fetchFTData(); fetchTxnsCount(); fetchHoldersCount(); }, [config.backendUrl, id]); const onTab = (index) => { setPageTab(tabs[index]); }; const onToggle = () => setShowMarketCap((o) => !o); return ( <> <div className="flex items-center justify-between flex-wrap pt-4"> {isLoading ? ( <div className="w-80 max-w-xs px-3 py-5"> <Skeleton className="h-7" /> </div> ) : ( <h1 className="break-all space-x-2 text-xl text-gray-700 leading-8 px-2"> <span className="inline-flex align-middle h-7 w-7"> <TokenImage src={token.icon} alt={token.name} className="w-7 h-7" /> </span> <span className="inline-flex align-middle ">Token: </span> <span className="inline-flex align-middle font-semibold"> {token.name} </span> </h1> )} { <Widget src={`${config.ownerId}/widget/bos-components.components.Shared.SponsoredBox`} /> } </div> <div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-2 md:mb-2"> <div className="w-full"> <div className="h-full bg-white soft-shadow rounded-lg overflow-hidden"> <h2 className="border-b p-3 text-gray-600 text-sm font-semibold"> Overview </h2> <div className="px-3 divide-y text-sm text-gray-600"> <div className="flex divide-x my-2"> <div className="flex-col flex-1 flex-wrap py-1"> <div className="w-full text-gray-400 text-xs uppercase mb-1 text-[80%]"> Price </div> {isLoading ? ( <div className="w-20"> <Skeleton className="h-4" /> </div> ) : token?.price !== null && token?.price !== undefined ? ( <div className="w-full break-words flex flex-wrap text-sm"> ${dollarFormat(token?.price)} {stats?.near_price && ( <div className="text-gray-400 mx-1 text-sm flex flex-row items-center"> @ {localFormat(token?.price / stats?.near_price)} Ⓝ </div> )} {token?.change_24 !== null && token?.change_24 !== undefined ? ( token?.change_24 > 0 ? ( <div className="text-neargreen text-sm flex flex-row items-center"> {' '} (+{dollarFormat(token?.change_24)}%) </div> ) : ( <div className="text-red-500 text-sm flex flex-row items-center"> {' '} ({dollarFormat(token?.change_24 || 0)}%) </div> ) ) : null} </div> ) : ( 'N/A' )} </div> <div className="flex-col flex-1 flex-wrap py-1 px-3"> <div className="w-full text-gray-400 text-xs uppercase mb-1 flex text-[80%]"> {showMarketCap ? 'CIRCULATING SUPPLY MARKET CAP' : 'FULLY DILUTED MARKET CAP'} <span> <Tooltip.Provider> <Tooltip.Root> <Tooltip.Trigger asChild> <Question className="w-4 h-4 fill-current ml-1" /> </Tooltip.Trigger> <Tooltip.Content className="h-auto max-w-xs bg-black bg-opacity-90 z-10 text-xs text-white px-3 py-2 break-words" align="start" side="bottom" > { 'Calculated by multiplying the tokens Total Supply on Near with the current market price per token.' } </Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> </span> </div> {isLoading ? ( <div className="w-20"> <Skeleton className="h-4" /> </div> ) : (token?.fully_diluted_market_cap !== null && token?.fully_diluted_market_cap !== undefined) || (token?.market_cap !== null && token?.market_cap !== undefined) ? ( <div className="w-full break-words flex flex-wrap text-sm"> {token?.fully_diluted_market_cap !== null && token?.fully_diluted_market_cap !== undefined && token?.market_cap !== null && token?.market_cap !== undefined ? ( <Tooltip.Provider> <Tooltip.Root> <Tooltip.Trigger asChild> <p className="px-1 py-1 text-xs cursor-pointer rounded bg-gray-100" onClick={onToggle} > $ {showMarketCap ? dollarNonCentFormat(token?.market_cap) : dollarNonCentFormat( token?.fully_diluted_market_cap, )} </p> </Tooltip.Trigger> <Tooltip.Content className="h-auto max-w-xs bg-black bg-opacity-90 z-10 text-xs text-white px-3 py-2 break-words" align="start" side="bottom" > {showMarketCap ? 'Click to switch back' : 'Click to switch'} </Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> ) : ( <p className="px-1 py-1 text-xs cursor-pointer rounded bg-gray-100"> $ {dollarNonCentFormat( token?.market_cap || token?.fully_diluted_market_cap || 0, )} </p> )} </div> ) : ( <div className="w-full break-words flex flex-wrap text-sm"> {token?.onchain_market_cap ? ( <p className="px-1 py-1 text-xs cursor-pointer rounded bg-gray-100"> ${dollarNonCentFormat(token?.onchain_market_cap)} </p> ) : ( 'N/A' )} </div> )} </div> </div> <div className="flex flex-wrap py-4"> <div className="w-full md:w-1/4 mb-2 md:mb-0 "> Max Total Supply: </div> {isLoading ? ( <div className="w-32"> <Skeleton className="h-4" /> </div> ) : ( <div className="w-full md:w-3/4 break-words"> {dollarNonCentFormat(token?.total_supply || 0)} </div> )} </div> <div className="flex flex-wrap py-4"> <div className="w-full md:w-1/4 mb-2 md:mb-0 "> Transfers: </div> {txnLoading ? ( <div className="w-32"> <Skeleton className="h-4" /> </div> ) : ( <div className="w-full md:w-3/4 break-words"> {localFormat(transfers)} </div> )} </div> <div className="flex flex-wrap py-4"> <div className="w-full md:w-1/4 mb-2 md:mb-0 ">Holders:</div> {holderLoading ? ( <div className="w-32"> <Skeleton className="h-4" /> </div> ) : ( <div className="w-full md:w-3/4 break-words"> {localFormat(holders)} </div> )} </div> </div> </div> </div> <div className="w-full"> <div className="h-full bg-white soft-shadow rounded-lg overflow-hidden"> <h2 className="border-b p-3 text-gray-600 text-sm font-semibold"> Profile Summary </h2> <div className="px-3 divide-y text-sm text-gray-600"> <div className="flex flex-wrap items-center justify-between py-4"> <div className="w-full md:w-1/4 mb-2 md:mb-0 ">Contract:</div> {isLoading ? ( <div className="w-full md:w-3/4 break-words"> <div className="w-32"> <Skeleton className="h-4" /> </div> </div> ) : ( <div className="w-full text-green-500 md:w-3/4 break-words"> <a href={`/address/${token?.contract}`}> <a className="text-green-500">{token?.contract}</a> </a> </div> )} </div> <div className="flex flex-wrap items-center justify-between py-4"> <div className="w-full md:w-1/4 mb-2 md:mb-0 ">Decimals:</div> <div className="w-full md:w-3/4 break-words"> {isLoading ? ( <div className="w-32"> <Skeleton className="h-4" /> </div> ) : ( token?.decimals )} </div> </div> <div className="flex flex-wrap items-center justify-between py-4"> <div className="w-full md:w-1/4 mb-2 md:mb-0 "> Official Site: </div> <div className="w-full md:w-3/4 text-green-500 break-words"> {isLoading ? ( <div className="w-32"> <Skeleton className="h-4" /> </div> ) : ( <a href={`${token?.website}`} target="_blank" rel="noopener noreferrer nofollow" > {token?.website} </a> )} </div> </div> <div className="flex flex-wrap items-center justify-between py-4"> <div className="w-full md:w-1/4 mb-2 md:mb-0 "> Social Profiles: </div> <div className="w-full md:w-3/4 break-words"> {isLoading ? ( <div className="w-32"> <Skeleton className="h-4" /> </div> ) : ( <Links meta={token} /> )} </div> </div> </div> </div> </div> </div> <div className="py-6"></div> <div className="block lg:flex lg:space-x-2 mb-4"> <div className="w-full"> <div className="bg-white soft-shadow rounded-lg pb-1"> <Tabs.Root defaultValue={pageTab}> <Tabs.List className="border-b flex"> {tabs && tabs.map((tab, index) => ( <Tabs.Trigger key={index} onClick={() => onTab(index)} className={`text-gray-600 text-sm font-semibold border-green-500 overflow-hidden inline-block cursor-pointer p-3 focus:outline-none hover:text-green-500 ${ pageTab === tab ? 'border-b-4 border-green-500 text-green-500' : '' }`} value={tab} > <h2>{tab}</h2> </Tabs.Trigger> ))} </Tabs.List> <Tabs.Content value={tabs[0]}> { <Widget src={`${config.ownerId}/widget/bos-components.components.FT.Transfers`} props={{ network: network, id: id, t: t, }} /> } </Tabs.Content> <Tabs.Content value={tabs[1]}> { <Widget src={`${config.ownerId}/widget/bos-components.components.FT.Holders`} props={{ network: network, id: id, token: token, }} /> } </Tabs.Content> <Tabs.Content clssName="border-t" value={tabs[2]}> { <Widget src={`${config.ownerId}/widget/bos-components.components.FT.Info`} props={{ network: network, id: id, token: token, }} /> } </Tabs.Content> <Tabs.Content value={tabs[3]}> { <Widget src={`${config.ownerId}/widget/bos-components.components.FT.FAQ`} props={{ network: network, id: id, token: token, }} /> } </Tabs.Content>{' '} <Tabs.Content value={tabs[4]}> <div className="px-4 sm:px-6 py-3"></div> </Tabs.Content> </Tabs.Root> </div> </div> </div> </div> </> ); } return MainComponent(props, context);