Real-Time Crypto Dashboard on Arkiv

1node -e "console.log('0x' + require('crypto').randomBytes(32).toString('hex'))"

1# backend/.env
2PRIVATE_KEY=0xYOUR_PRIVATE_KEY_HERE

1arkiv-dashboard/
2  backend/
3    .env
4    index.js
5  frontend/
6    index.html
7    charts.js
8    script.js
9    style.css
10  node_modules/
11  package-lock.json
12  package.json

1import { createWalletClient, http } from '@arkiv-network/sdk';
2import { mendoza } from '@arkiv-network/sdk/chains';
3import { privateKeyToAccount } from '@arkiv-network/sdk/accounts';
4import { ExpirationTime, jsonToPayload } from '@arkiv-network/sdk/utils';
5import axios from 'axios';
6
7const privateKey = process.env.PRIVATE_KEY;
8if (!privateKey) {
9  throw new Error('PRIVATE_KEY is not set in the .env file.');
10}
11
12const account = privateKeyToAccount(privateKey);
13
14const client = createWalletClient({
15  chain: mendoza,
16  transport: http(),
17  account,
18});
19
20console.log("Backend service connected as: " + client.account.address);

1node --env-file backend/.env backend/index.js

1const params = new URLSearchParams({
2  vs_currency: 'usd',
3  ids: 'bitcoin,ethereum,golem',
4  sparkline: 'false',
5});
6
7const COINGECKO_URL = "https://api.coingecko.com/api/v3/coins/markets?" + params;
8
9async function fetchCryptoData() {
10  try {
11      const response = await axios.get(COINGECKO_URL);
12      console.log('Successfully fetched data from CoinGecko.');
13      return response.data;
14  } catch (error) {
15      console.error('Error fetching data from CoinGecko:', error.message);
16      return []; // Return an empty array on failure.
17  }
18}

1async function uploadDataToArkiv(cryptoData) {
2  if (cryptoData.length === 0) {
3      console.log("No crypto data to upload.");
4      return;
5  }
6
7  try {
8      // Create payload objects for all tokens
9      const createPayloads = cryptoData.map(tokenData => {
10          const {
11              id,
12              current_price,
13              market_cap,
14              price_change_percentage_24h
15          } = tokenData;
16          return {
17              payload: jsonToPayload({
18                  price: current_price,
19                  marketCap: market_cap,
20                  change24h: price_change_percentage_24h,
21                  timestamp: Date.now(),
22              }),
23              contentType: 'application/json',
24              attributes: [
25                  { key: 'token', value: id }, // 'bitcoin', 'ethereum', or 'golem'
26              ],
27              expiresIn: ExpirationTime.fromHours(3), // Data expires after 3 hours.
28          };
29      });
30
31      const result = await client.mutateEntities({
32          creates: createPayloads
33      });
34
35      // Log success for each created entity
36      result.createdEntities.forEach((entityKey, index) => {
37          const tokenId = cryptoData[index].id;
38          console.log(`Created entity for ${tokenId}. Key: ${entityKey}`);
39      });
40
41  } catch (error) {
42      console.error('Failed to create entities:', error.message);
43  }
44}

1async function runUpdateCycle() {
2  console.log('\n--- Starting new update cycle ---');
3  const cryptoData = await fetchCryptoData();
4
5  if (cryptoData.length > 0) {
6    await uploadDataToArkiv(cryptoData);
7  }
8}
9
10runUpdateCycle();
11setInterval(runUpdateCycle, 60000);

1node --env-file backend/.env backend/index.js

1body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; color: #333; padding: 20px; margin: 0; }
2h1 { text-align: center; color: #1a202c; margin-bottom: 30px; }
3h2 { text-align: center; font-size: 1.1rem; color: #4a5568; margin-bottom: 15px; }
4.main-container { max-width: 1400px; margin: auto; }
5.price-container { display: flex; justify-content: space-around; flex-wrap: wrap; margin-bottom: 30px; gap: 15px; }
6.price-box { background-color: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); min-width: 250px; text-align: center; transition: transform 0.2s; }
7.price-box:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
8.price-box .token-name { font-size: 1.3rem; font-weight: bold; color: #2d3748; text-transform: uppercase; }
9.price-box .current-price { font-size: 2.2rem; margin: 12px 0; font-weight: 600; color: #1a202c; }
10.price-change { font-size: 1rem; font-weight: 500; }
11.price-change.positive { color: #2f855a; }
12.price-change.negative { color: #c53030; }
13.market-cap-chart { background-color: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 25px; height: 400px; }
14.charts-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 25px; margin-bottom: 25px; }
15.chart-box { background-color: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
16.explorer-link { display: inline-block; margin-top: 12px; padding: 8px 16px; background-color: #4299e1; color: white; text-decoration: none; border-radius: 6px; font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s; }
17.explorer-link:hover { background-color: #3182ce; }
18@media (max-width: 768px) { .charts-container { grid-template-columns: 1fr; } .price-container { flex-direction: column; align-items: center; } }

1const USER_ADDRESS = '0xYourAddressHere';
2
3if (!USER_ADDRESS || USER_ADDRESS === '0xYourAddressHere') {
4  alert('Please set your USER_ADDRESS in script.js to your wallet address!');
5  throw new Error('USER_ADDRESS not configured');
6}
7
8import { createPublicClient, http } from 'https://esm.sh/@arkiv-network/sdk@0.4.4?target=es2022&bundle-deps';
9import { eq } from 'https://esm.sh/@arkiv-network/sdk@0.4.4/query?target=es2022&bundle-deps';
10import { mendoza } from 'https://esm.sh/@arkiv-network/sdk@0.4.4/chains?target=es2022&bundle-deps';
11import { initializeCharts, updateChart, updateMarketCapChart, updatePriceBoxes, getCharts } from './charts.js';
12
13const client = createPublicClient({
14  chain: mendoza,
15  transport: http(),
16});
17
18console.log('Arkiv client initialized for address:', USER_ADDRESS);

1async function fetchTokenDataFromArkiv(tokenId) {
2  const query = client.buildQuery();
3  const result = await query
4    .where(eq('token', tokenId))
5    .ownedBy(USER_ADDRESS)
6    .withPayload(true)
7    .fetch();
8
9  return result.entities
10    .map((entity) => ({ ...entity.toJson(), entityKey: entity.key }))
11    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
12}

1async function updateUI() {
2  try {
3    const [btcData, ethData, glmData] = await Promise.all([
4      fetchTokenDataFromArkiv('bitcoin'),
5      fetchTokenDataFromArkiv('ethereum'),
6      fetchTokenDataFromArkiv('golem'),
7    ]);
8
9    if (btcData.length > 0 || ethData.length > 0 || glmData.length > 0) {
10      updatePriceBoxes(btcData, ethData, glmData);
11      updateMarketCapChart(btcData, ethData, glmData);
12
13      const { btcPriceChart, ethPriceChart, glmPriceChart } = getCharts();
14      if (btcData.length > 0) {
15        updateChart(btcPriceChart, btcData, 'price');
16      }
17      if (ethData.length > 0) {
18        updateChart(ethPriceChart, ethData, 'price');
19      }
20      if (glmData.length > 0) {
21        updateChart(glmPriceChart, glmData, 'price');
22      }
23
24      console.log('UI updated successfully');
25    }
26  } catch (error) {
27    console.error('Error updating UI:', error);
28  }
29}
30
31window.addEventListener('DOMContentLoaded', () => {
32  initializeCharts();
33  updateUI();
34  setInterval(updateUI, 15000);
35});

1node --env-file .env index.js

1npx serve