feat: add GA + fix some bugs

next.config.js

@@ -10,6 +10,7 @@ const nextConfig = {
 		NEXT_PUBLIC_CHAIN_ID: 11115,
 		NEXT_PUBLIC_TITLE: 'Astra Explorer Testnet',
 		NEXT_PUBLIC_SENTRY_DSN: 'https://[email protected]/473',
+		NEXT_PUBLIC_GA_MEASUREMENT_ID: 'G-XNDN41NMWF',
 
 		NEXT_PUBLIC_BLOCK_INTERVAL: '5000',
 		NEXT_PUBLIC_TRANSACTION_INTERVAL: '5000',

package.json

@@ -15,7 +15,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"@astradefi/address-converter": "^0.4.1",
-		"@astraprotocol/astra-ui": "file:../../Github/astra-ui",
+		"@astraprotocol/astra-ui": "^1.0.20",
 		"@cosmjs/crypto": "^0.29.0",
 		"@cosmjs/encoding": "^0.29.0",
 		"@reduxjs/toolkit": "^1.8.5",
@@ -34,6 +34,7 @@
 		"next": "12.3.1",
 		"next-intl": "^2.7.5",
 		"next-seo": "^5.14.1",
+		"nextjs-google-analytics": "^2.2.1",
 		"numeral": "^2.0.6",
 		"prismjs": "^1.29.0",
 		"qs": "^6.11.0",

pages/_app.tsx

@@ -4,8 +4,10 @@ import PageLoader from 'components/Loader/PageLoader'
 import dayjs from 'dayjs'
 import { NextIntlProvider } from 'next-intl'
 import { NextSeo } from 'next-seo'
+import type { NextWebVitalsMetric } from 'next/app'
 import { AppProps } from 'next/app'
 import Head from 'next/head'
+import { event, GoogleAnalytics } from 'nextjs-google-analytics'
 import { Provider } from 'react-redux'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
@@ -18,6 +20,16 @@ import '../styles.css'
 
 dayjs.locale('en')
 
+export function reportWebVitals(metric: NextWebVitalsMetric) {
+	const { id, name, label, value } = metric
+	event(name, {
+		category: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
+		value: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
+		label: id, // id unique to current page load
+		nonInteraction: true // avoids affecting bounce rate.
+	})
+}
+
 const App = ({ Component, pageProps }: AppProps) => {
 	const _detectFetcher = (rest: any[]) => {
 		const path = rest[0] as string
@@ -76,7 +88,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 									cardType: 'summary_large_image'
 								}}
 							/>
-
+							<GoogleAnalytics trackPageViews />
 							<PageLoader />
 							<ToastContainer toastClassName="dark--mode" />
 							<Component {...pageProps} />

views/accounts/tabs/AddressCoinBalanceTab/AddressBalanceHistory.tsx

@@ -17,7 +17,9 @@ interface Props {
 }
 
 const AddressBalanceHistory = ({ data, addressBalance, astraSummary }: Props) => {
-	const deltaNumber = BigNumber(data.delta).div(BigNumber(data.value)).toNumber()
+	const deltaNumber = BigNumber(data.delta)
+		.div(BigNumber(data.value).minus(BigNumber(data.delta)))
+		.toNumber()
 	const deltaNumberHandled = Math.abs(deltaNumber * 100) < CONFIG.APPROXIMATE_ZERO ? 0 : deltaNumber * 100
 
 	const deltaNumberFormat = deltaNumberHandled ? numeral(deltaNumberHandled).format('0,0.00') : '0.00'

views/tokens/tabs/TokenHolderTab/TokenHolder.tsx

@@ -47,7 +47,7 @@ export default function TokenHolder({ index, account, tokenData }: Props) {
 					'padding-left-lg text-center money money-2xs contrast-color-70 block-ver-center col-2'
 				)}
 			>
-				{numeral(percentage).format('0,0.00')}%
+				{numeral(percentage).format('0,0.0000')}%
 			</div>
 		</div>
 	)

yarn.lock

@@ -20,8 +20,10 @@
     link-module-alias "^1.2.0"
     shx "^0.3.4"
 
-"@astraprotocol/astra-ui@file:../../Github/astra-ui":
+"@astraprotocol/astra-ui@^1.0.20":
   version "1.0.20"
+  resolved "https://npm.pkg.github.com/download/@astraprotocol/astra-ui/1.0.20/8da9581a7fdacd4391abd80b4a09e2cc78df6d7c#8da9581a7fdacd4391abd80b4a09e2cc78df6d7c"
+  integrity sha512-fC6j6D5XRGkzTwaD4AcNouJvQHGTBBtZ5lDqsyRdHZfKikyIzuOBC+zTBSGPesct0f/hWsH5LJXtQUhsX8KpUQ==
   dependencies:
     "@types/numeral" "^2.0.2"
     "@types/react-copy-to-clipboard" "^5.0.4"
@@ -4618,7 +4620,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -6222,6 +6224,13 @@ [email protected]:
     "@next/swc-win32-ia32-msvc" "12.3.1"
     "@next/swc-win32-x64-msvc" "12.3.1"
 
+nextjs-google-analytics@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/nextjs-google-analytics/-/nextjs-google-analytics-2.2.1.tgz#ebad0414aec2dca9879281cd446b02340347c6f8"
+  integrity sha512-b5a7V+iWdrrcB2kQxcW9KYHYwtJJoY50a4E+b68TUba3YqTmwufs0u2HfPNxd1MauPmkxTBSx2IyaSUdgxLJ7Q==
+  optionalDependencies:
+    fsevents "^2.3.2"
+
 node-abi@^3.3.0:
   version "3.28.0"
   resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.28.0.tgz#b0df8b317e1c4f2f323756c5fc8ffccc5bca4718"