feat(bos-components): add charts and statistics

apps/app/src/data/bos-components.ts

@@ -9,6 +9,7 @@ type NetworkComponents = {
   latestTransactions: string;
   transactionOverview: string;
   sponsoredText: string;
+  charts: string;
 };
 
 const ComponentUrl = {
@@ -20,6 +21,7 @@ const ComponentUrl = {
   latestTransactions: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Transactions.Latest`,
   transactionOverview: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Transactions.Overview`,
   sponsoredText: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Shared.SponsoredText`,
+  charts: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Charts`,
 };
 
 export const componentsByNetworkId: Record<

apps/app/src/pages/charts/addresses.tsx

@@ -0,0 +1,12 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const AddressesChart = () => {
+  const components = useBosComponents();
+
+  return (
+    <VmComponent src={components?.charts} props={{ chart: 'addresses' }} />
+  );
+};
+
+export default AddressesChart;

apps/app/src/pages/charts/blocks.tsx

@@ -0,0 +1,10 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const BlocksChart = () => {
+  const components = useBosComponents();
+
+  return <VmComponent src={components?.charts} props={{ chart: 'blocks' }} />;
+};
+
+export default BlocksChart;

apps/app/src/pages/charts/index.tsx

@@ -0,0 +1,10 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const Charts = () => {
+  const components = useBosComponents();
+
+  return <VmComponent src={components?.charts} />;
+};
+
+export default Charts;

apps/app/src/pages/charts/market-cap.tsx

@@ -0,0 +1,12 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const MarketCapChart = () => {
+  const components = useBosComponents();
+
+  return (
+    <VmComponent src={components?.charts} props={{ chart: 'market-cap' }} />
+  );
+};
+
+export default MarketCapChart;

apps/app/src/pages/charts/near-price.tsx

@@ -0,0 +1,12 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const NearPriceChart = () => {
+  const components = useBosComponents();
+
+  return (
+    <VmComponent src={components?.charts} props={{ chart: 'near-price' }} />
+  );
+};
+
+export default NearPriceChart;

apps/app/src/pages/charts/near-supply.tsx

@@ -0,0 +1,12 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const NearSupplyChart = () => {
+  const components = useBosComponents();
+
+  return (
+    <VmComponent src={components?.charts} props={{ chart: 'near-supply' }} />
+  );
+};
+
+export default NearSupplyChart;

apps/app/src/pages/charts/txn-fee.tsx

@@ -0,0 +1,10 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const TxnFeeChart = () => {
+  const components = useBosComponents();
+
+  return <VmComponent src={components?.charts} props={{ chart: 'txn-fee' }} />;
+};
+
+export default TxnFeeChart;

apps/app/src/pages/charts/txn-volume.tsx

@@ -0,0 +1,12 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const TxnVolumeChart = () => {
+  const components = useBosComponents();
+
+  return (
+    <VmComponent src={components?.charts} props={{ chart: 'txn-volume' }} />
+  );
+};
+
+export default TxnVolumeChart;

apps/app/src/pages/charts/txns.tsx

@@ -0,0 +1,10 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const TxnsChart = () => {
+  const components = useBosComponents();
+
+  return <VmComponent src={components?.charts} props={{ chart: 'txns' }} />;
+};
+
+export default TxnsChart;