('.pushtx-details-area');
+
+ if (!messageArea || !detailsArea) {
+ throw new Error('Need message and details areas in HTML.');
+ }
+
+ messageArea.innerHTML = '';
+ detailsArea.innerHTML = '';
+
+ if (!window.location.hash) {
+ const path = window.location.origin + window.location.pathname;
+
+ const msg = `
+ Did you get here by accident?
+
+ This page is meant to be loaded together with transaction data using the
+ COLDCARD NFC Push TX feature. The complete URL should look something like this (but longer):
+
+
+ ${path}#t=AgAAAAMNCxXtp2GVYVhkRXHLMmdZFs4p3kbFK ⋯ ABf&c=uiSVRda-1tw
+ `;
+
+ messageArea.innerHTML = renderMessage('info', msg);
+ return;
+ }
+
+ messageArea.innerHTML = renderMessage('progress', 'Sending transaction, please wait...');
+
+ const [parseErr, parseResult] = await collect(parseFragment(window.location.hash));
+
+ if (parseErr) {
+ messageArea.innerHTML = renderMessage('error', parseErr.message);
+ return;
+ }
+
+ const { tx, network } = parseResult;
+
+ const txid = tx.getId();
+
+ const [pushErr, pushResult] = await collect(pushTx(tx, network));
+
+ // XXX - sometimes we get something like `{"code":-25,"message":"bad-txns-inputs-missingorspent"}`
+ // but the transaction is actually confirmed, so:
+ // - try to fetch the TX details by ID, even if pushing failed
+ // - if it's found, show a green message and say it's pending or confirmed
+ const [mempoolErr, mempoolTxData] = await collect(fetchTxData(txid, network));
+
+ if (pushResult || mempoolTxData) {
+ // push was successful and/or we got the TX details back
+ const msg = mempoolTxData?.status.confirmed
+ ? 'This transaction has already been confirmed.'
+ : 'The transaction has been sent and is waiting to be confirmed.';
+
+ const listHtml = BLOCK_EXPLORER_CONFIG[network]
+ .map(
+ ([name, url]) =>
+ `${name}`
+ )
+ .join('');
+
+ messageArea.innerHTML = renderMessage(
+ 'success',
+ `${msg} Transaction ID:
+
+ ${txid}
+
+ Verify on a block explorer:
+
+
+ `
+ );
+
+ if (mempoolTxData) {
+ detailsArea.innerHTML = renderTxDetails(mempoolTxData);
+ }
+
+ return;
+ }
+
+ if (pushErr && mempoolErr) {
+ // pushing failed and we also couldn't fetch the TX details
+ messageArea.innerHTML = renderMessage('error', pushErr.message);
+ } else if (mempoolErr) {
+ messageArea.innerHTML = renderMessage('error', mempoolErr.message);
+ return;
+ }
+}
+
+run();
+
+window.addEventListener('hashchange', run);
diff --git a/src/cc-implementation/src/style.css b/src/cc-implementation/src/style.css
new file mode 100644
index 0000000..989d0c0
--- /dev/null
+++ b/src/cc-implementation/src/style.css
@@ -0,0 +1,135 @@
+body {
+ background-color: #222428;
+ color: #E0E0E0;
+}
+
+.pushtx * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ color: inherit !important;
+}
+
+.pushtx ul {
+ list-style-position: inside;
+}
+
+.pushtx .monospace {
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.pushtx-spin {
+ animation: spin 1s linear infinite;
+}
+
+.pushtx-message {
+ display: flex;
+ gap: 1rem;
+ padding: 1rem;
+ border: 1px solid transparent;
+ border-radius: 0.25rem;
+ width: 100%;
+}
+
+.pushtx-message > :first-child {
+ flex-shrink: 0;
+}
+
+.pushtx-message > :last-child {
+ overflow: hidden;
+ overflow-wrap: break-word;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.pushtx-message--success {
+ color: #155724;
+ background-color: #2A2C2F;
+ border-color: #c3e6cb;
+}
+
+.pushtx-message--info {
+ color: #0c5460;
+ background-color: #2A2C2F;
+ border-color: #bee5eb;
+}
+
+.pushtx-message--progress {
+ color: #004085;
+ background-color: #2A2C2F;
+ border-color: #b8daff;
+}
+
+.pushtx-message--error {
+ color: #721c24;
+ background-color: #2A2C2F;
+ border-color: #f5c6cb;
+}
+
+.pushtx-message .txid {
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+ font-size: 0.875em;
+ font-weight: 700;
+}
+
+.pushtx-details {
+ display: flex;
+ flex-direction: column;
+ margin-block: 2rem;
+ padding: 0.5rem;
+ border-radius: 0.25rem;
+ overflow: hidden;
+ gap: 0.5rem;
+ border: 1px solid #e2e8f0;
+}
+
+.pushtx-details table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+.pushtx-details th {
+ text-align: left;
+}
+
+.pushtx-details :is(th, td) {
+ border-width: 0px;
+ padding-block: 0.125rem;
+}
+
+.pushtx-details :is(td:first-child, th:first-child) {
+ width: 75%;
+ max-width: 0px;
+}
+
+.pushtx-details :is(td:last-child, th:last-child) {
+ text-align: right;
+}
+
+.pushtx-details :is(.address, .value) {
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+.pushtx-details .address {
+ display: flex;
+ padding-right: 1em;
+}
+
+.pushtx-details .address :first-child {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.pushtx-details .fee {
+ text-align: right;
+}
diff --git a/src/cc-implementation/src/types.ts b/src/cc-implementation/src/types.ts
new file mode 100644
index 0000000..f5c4856
--- /dev/null
+++ b/src/cc-implementation/src/types.ts
@@ -0,0 +1,25 @@
+export type Network = 'BTC' | 'XTN' | 'XRT';
+
+interface MempoolConfirmedStatus {
+ confirmed: true;
+ block_height: number;
+}
+
+interface MempoolUnconfirmedStatus {
+ confirmed: false;
+}
+
+export interface MempoolTxData {
+ vin: {
+ prevout: {
+ scriptpubkey_address: string;
+ value: number;
+ };
+ }[];
+ vout: {
+ scriptpubkey_address: string;
+ value: number;
+ }[];
+ fee: number;
+ status: MempoolConfirmedStatus | MempoolUnconfirmedStatus;
+}
diff --git a/src/cc-implementation/src/vite-env.d.ts b/src/cc-implementation/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/cc-implementation/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/src/cc-implementation/tsconfig.json b/src/cc-implementation/tsconfig.json
new file mode 100644
index 0000000..9f27fb1
--- /dev/null
+++ b/src/cc-implementation/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2021",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2021", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": false,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/src/cc-implementation/vite.config.ts b/src/cc-implementation/vite.config.ts
new file mode 100644
index 0000000..5874bb2
--- /dev/null
+++ b/src/cc-implementation/vite.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig, type UserConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+
+const plugins = [
+ nodePolyfills({
+ // needed for bitcoinjs-lib
+ include: ['buffer'],
+ globals: {
+ Buffer: true,
+ },
+ }),
+];
+
+// single file config - builds a single HTML file with everything inlined
+const singleFileConfig: UserConfig = {
+ plugins: [...plugins, viteSingleFile()],
+ build: {
+ outDir: '../PushTX/wwwroot',
+ emptyOutDir: true
+ },
+};
+
+export default defineConfig(singleFileConfig);
+