{"id":184,"date":"2025-03-20T08:16:45","date_gmt":"2025-03-20T08:16:45","guid":{"rendered":"https:\/\/www.twentyone.ist\/?page_id=184"},"modified":"2025-07-24T08:08:26","modified_gmt":"2025-07-24T08:08:26","slug":"balance","status":"publish","type":"page","link":"https:\/\/www.twentyone.ist\/?page_id=184","title":{"rendered":"Balance"},"content":{"rendered":"<div id=\"blink-btc-wallet\">\n  <div id=\"blink-btc-balance\">Loading balance&#8230;<\/div>\n  <div id=\"blink-btc-transactions\">Loading transactions&#8230;<\/div>\n<\/div>\n\n<script>\nasync function fetchBlinkBTCWalletInfo() {\n  \/\/ Use the production endpoint\n  const apiEndpoint = 'https:\/\/api.blink.sv\/graphql';\n  const apiKey = 'blink_OEXpNxtsd1UMLxVH47N2IAZeqlyWPKtjCv4Prx0MC58ebfToa9XybFmZlJ2ZjVtR';\n  const walletId = '0515bb4d-9064-46ba-885a-306e3324c547';\n  \n  \/\/ Fetch balance\n  await fetchBalance();\n  \/\/ Fetch transactions\n  await fetchTransactions();\n  \n  async function fetchBalance() {\n    const balanceQuery = `\n      query Me {\n        me {\n          defaultAccount {\n            wallets {\n              id\n              walletCurrency\n              balance\n            }\n          }\n        }\n      }\n    `;\n    \n    try {\n      const response = await fetch(apiEndpoint, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application\/json',\n          'X-API-KEY': apiKey\n        },\n        body: JSON.stringify({ query: balanceQuery })\n      });\n      \n      const data = await response.json();\n      \n      if (data.errors) {\n        throw new Error(data.errors[0].message);\n      }\n      \n      const wallets = data.data.me.defaultAccount.wallets;\n      const btcWallet = wallets.find(wallet => wallet.id === walletId);\n      \n      if (btcWallet) {\n        \/\/ Format the BTC balance (in sats) to BTC with 8 decimal places\n        const balanceInBTC = (btcWallet.balance \/ 100000000).toFixed(8);\n        document.getElementById('blink-btc-balance').innerHTML = \n          `<div class=\"btc-balance-container\">\n            <h3>BTC Wallet Balance<\/h3>\n            <p class=\"balance-amount\">${balanceInBTC} BTC<\/p>\n            <p class=\"balance-sats\">(${btcWallet.balance} sats)<\/p>\n           <\/div>`;\n      } else {\n        document.getElementById('blink-btc-balance').textContent = 'BTC wallet not found';\n      }\n    } catch (error) {\n      console.error('Error fetching BTC balance:', error);\n      document.getElementById('blink-btc-balance').textContent = 'Error loading BTC balance';\n    }\n  }\n  \n  async function fetchTransactions() {\n    \/\/ Updated to fetch only 5 transactions\n    const transactionsQuery = `\n      query WalletTransactions {\n        me {\n          defaultAccount {\n            transactions(walletIds: [\"${walletId}\"], first: 5) {\n              edges {\n                node {\n                  id\n                  status\n                  direction\n                  memo\n                  settlementAmount\n                  settlementFee\n                  settlementCurrency\n                  createdAt\n                }\n              }\n            }\n          }\n        }\n      }\n    `;\n    \n    try {\n      const response = await fetch(apiEndpoint, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application\/json',\n          'X-API-KEY': apiKey\n        },\n        body: JSON.stringify({ query: transactionsQuery })\n      });\n      \n      const data = await response.json();\n      \n      if (data.errors) {\n        throw new Error(data.errors[0].message);\n      }\n      \n      const transactions = data.data.me.defaultAccount.transactions.edges;\n      \n      if (transactions.length > 0) {\n        let transactionsHTML = `\n          <div class=\"btc-transactions-container\">\n            <h3>Recent Transactions<\/h3>\n            <div class=\"transactions-table-wrapper\">\n              <table class=\"transactions-table\">\n                <thead>\n                  <tr>\n                    <th>Date<\/th>\n                    <th>Type<\/th>\n                    <th>Amount (BTC)<\/th>\n                    <th>Status<\/th>\n                    <th>Memo<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody>\n        `;\n        \n        transactions.forEach(tx => {\n          const transaction = tx.node;\n          \n          \/\/ Fix date formatting - parse the ISO string correctly\n          const txDate = new Date(transaction.createdAt);\n          const formattedDate = txDate.toLocaleString('en-US', {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: '2-digit',\n            minute: '2-digit'\n          });\n          \n          const amountInBTC = (transaction.settlementAmount \/ 100000000).toFixed(8);\n          const direction = transaction.direction.charAt(0) + transaction.direction.slice(1).toLowerCase();\n          const status = transaction.status.charAt(0) + transaction.status.slice(1).toLowerCase();\n          \n          \/\/ Add plus sign for incoming transactions\n          const displayAmount = transaction.direction === 'RECEIVE' ? \n            `+${amountInBTC}` : amountInBTC;\n          \n          \/\/ Color code based on direction\n          const amountClass = transaction.direction === 'RECEIVE' ? \n            'amount-positive' : 'amount-negative';\n          \n          transactionsHTML += `\n            <tr>\n              <td>${formattedDate}<\/td>\n              <td>${direction}<\/td>\n              <td class=\"${amountClass}\">${displayAmount}<\/td>\n              <td class=\"status-${status.toLowerCase()}\">${status}<\/td>\n              <td>${transaction.memo || '-'}<\/td>\n            <\/tr>\n          `;\n        });\n        \n        transactionsHTML += `\n                <\/tbody>\n              <\/table>\n            <\/div>\n          <\/div>\n        `;\n        \n        document.getElementById('blink-btc-transactions').innerHTML = transactionsHTML;\n      } else {\n        document.getElementById('blink-btc-transactions').innerHTML = `\n          <div class=\"btc-transactions-container\">\n            <h3>Recent Transactions<\/h3>\n            <p class=\"no-transactions\">No transactions found<\/p>\n          <\/div>\n        `;\n      }\n    } catch (error) {\n      console.error('Error fetching BTC transactions:', error);\n      document.getElementById('blink-btc-transactions').textContent = 'Error loading transactions';\n    }\n  }\n}\n\n\/\/ Add styling\nconst style = document.createElement('style');\nstyle.textContent = `\n  .btc-balance-container, .btc-transactions-container {\n    padding: 20px;\n    border-radius: 8px;\n    background-color: #f7f9fc;\n    border: 1px solid #e6e9ef;\n    margin-bottom: 20px;\n  }\n  \n  .btc-balance-container {\n    text-align: center;\n  }\n  \n  .balance-amount {\n    font-size: 24px;\n    font-weight: bold;\n    color: #0d6efd;\n    margin: 10px 0 5px;\n  }\n  \n  .balance-sats {\n    font-size: 14px;\n    color: #6c757d;\n    margin: 0;\n  }\n  \n  .transactions-table-wrapper {\n    overflow-x: auto;\n  }\n  \n  .transactions-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 14px;\n  }\n  \n  .transactions-table th, .transactions-table td {\n    padding: 10px;\n    text-align: left;\n    border-bottom: 1px solid #e6e9ef;\n  }\n  \n  .transactions-table th {\n    background-color: #f1f3f9;\n    font-weight: bold;\n  }\n  \n  .transactions-table tr:hover {\n    background-color: #f5f7fa;\n  }\n  \n  .amount-positive {\n    color: #28a745;\n    font-weight: bold;\n  }\n  \n  .amount-negative {\n    color: #dc3545;\n    font-weight: bold;\n  }\n  \n  .status-success {\n    color: #28a745;\n  }\n  \n  .status-pending {\n    color: #ffc107;\n  }\n  \n  .status-failed {\n    color: #dc3545;\n  }\n  \n  .no-transactions {\n    text-align: center;\n    color: #6c757d;\n    font-style: italic;\n  }\n  \n  h3 {\n    margin-top: 0;\n    color: #343a40;\n  }\n`;\ndocument.head.appendChild(style);\n\n\/\/ Execute the function when the page loads\ndocument.addEventListener('DOMContentLoaded', fetchBlinkBTCWalletInfo);\n<\/script><p class=\"wp-block-paragraph\"><\/p><p class=\"wp-block-paragraph\"><\/p><!-- WordPress Test Container -->\n<div style=\"width: 220px; border: 2px solid #007cba; padding: 15px; margin: 20px auto; background: #f8f9fa; border-radius: 8px;\">\n    <div style=\"text-align: center; font-weight: bold; color: #007cba; margin-bottom: 10px; font-size: 12px;\">WordPress Test Container (220px)<\/div>\n    \n    <!-- Blink Donation Button Container -->\n    <div id=\"blink-pay-button-container\"><\/div>\n    \n    <!-- Debug Info -->\n    <div id=\"debug-info\" style=\"background: #e9ecef; padding: 8px; margin-top: 10px; font-family: monospace; font-size: 11px; border-radius: 4px; border: 1px solid #dee2e6;\">Loading&#8230;<\/div>\n<\/div>\n\n<!-- Blink Pay Button script -->\n        <script src=\"https:\/\/blinkbitcoin.github.io\/donation-button.blink.sv\/js\/blink-pay-button.js\"><\/script>\n<script>\n  \/\/ Initialize widget when script is loaded\n  function initBlinkWidget() {\n    if (typeof BlinkPayButton !== 'undefined') {\n      BlinkPayButton.init({\n        username: 'pretyflaco',\n        containerId: 'blink-pay-button-container',\n        themeMode: 'light',\n        language: 'en',\n        defaultAmount: 1000,\n        supportedCurrencies: [\n                {\n                        \"code\": \"sats\",\n                        \"name\": \"sats\",\n                        \"isCrypto\": true\n                },\n                {\n                        \"code\": \"USD\",\n                        \"name\": \"USD\",\n                        \"isCrypto\": false\n                }\n        ],\n        debug: false\n      });\n    } else {\n      \/\/ Try again in 100ms if BlinkPayButton isn't loaded yet\n      setTimeout(initBlinkWidget, 100);\n    }\n  }\n  \n  \/\/ Initialize when DOM is ready or now if already loaded\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initBlinkWidget);\n  } else {\n    initBlinkWidget();\n  }\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Loading balance&#8230; Loading transactions&#8230; WordPress Test Container (220px) Loading&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-184","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=\/wp\/v2\/pages\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=184"}],"version-history":[{"count":47,"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=\/wp\/v2\/pages\/184\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=\/wp\/v2\/pages\/184\/revisions\/242"}],"wp:attachment":[{"href":"https:\/\/www.twentyone.ist\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}