district0x/district-ui-web3-tx-log-core

⚠️ This code now resides at d0x monorepo

district-ui-web3-tx-log-core

Clojurescript re-mount module, that provides core logic for transaction log components. This module does not provide reagent UI component for a transaction log, only logic to build the component upon. This way many different reagent components can be build on top of this module.

This module automatically listens to district-ui-web3-tx events and based on that performs 2 things:

1. Builds up chronological list of transactions. Also stores it in localstorage, but only if district-ui-web3-tx uses localstorage as well.

2. Extends send-tx, so you can pass it key :tx-log with any data you want associate together with a transaction. Then these data can be displayed in transaction log UI component.

Installation

Add [district0x/district-ui-web3-tx-log-core "1.0.3"] into your project.clj Include [district.ui.web3-tx-log-core] in your CLJS file, where you use mount/start

API Overview

Warning: district0x modules are still in early stages, therefore API can change in a future.

• district.ui.web3-tx-log-core
• district.ui.web3-tx-log-core.subs
  • ::txs
  • ::tx-hashes
• district.ui.web3-tx-log-core.events
  • ::add-tx-hash
  • ::remove-tx-hash
• district.ui.web3-tx-log-core.queries
  • txs
  • tx-hashes
  • add-tx-hash
  • remove-tx-hash
  • assoc-tx-hashes

district.ui.web3-tx-log-core

This namespace contains web3-tx-log-core mount module.

This module does not have any configuration options.

  (ns my-district.core
    (:require [mount.core :as mount]
              [district.ui.web3-tx-log-core]))

  (-> (mount/with-args
        {:web3 {:url "https://mainnet.infura.io/"}})
    (mount/start))

Using send-tx extension

(ns my-district.events
    (:require [district.ui.web3-tx.events :as tx-events]))
(dispatch [::tx-events/send-tx {:instance MyContract
                                :fn :my-function
                                :args [1]
                                :tx-opts {:from my-account :gas 4500000}
                                ;; Any data can be passed to :tx-log, depending on what your tx-log component
                                ;; is displaying for each transaction
                                :tx-log {:name "Nice Transaction"}}])

district.ui.web3-tx-log-core.subs

re-frame subscriptions provided by this module:

::txs [filter-opts]

Returns list of transactions as stored by district-ui-web3-tx, ordered chronologically with newest being first. Optionally, you can pass filter opts same way as you'd pass to district-ui-web3-tx ::txs

(ns my-district.core
    (:require [mount.core :as mount]
              [district.ui.web3-tx-log-core :as subs]))

  (defn transaction-log []
    (let [txs (subscribe [::subs/txs])]
      (fn []
        [:div "Transaction Log: "]
        (for [{:keys [:transaction-hash :created-on :gas-used]} @txs]
          [:div
            {:key transaction-hash}
            transaction-hash " - " created-on " - " gas-used]))))

::tx-hashes

Returns only list of transaction hashes ordered chronologically with newest transactions being first.

district.ui.web3-tx-log-core.events

re-frame events provided by this module:

::add-tx-hash [tx-hash]

Adds transaction hash into transaction log list.

::remove-tx-hash [tx-hash]

Removes transaction hash from transaction log list.

district.ui.web3-tx-log-core.queries

DB queries provided by this module: You should use them in your events, instead of trying to get this module's data directly with get-in into re-frame db.

txs [db]

Works the same way as sub ::txs

tx-hashes [db]

Works the same way as sub ::tx-hashes

add-tx-hash [db tx-hash]

Adds transaction hash into transaction log list and returns new re-frame db.

remove-tx-hash [db tx-hash]

Removes transaction hash from transaction log list and returns new re-frame db.

assoc-tx-hashes [db tx-hashes]

Associates list of tx-hashes into this module's state.

Dependency on other district UI modules

• district-ui-web3-tx

Test

Browser

1. Build: npx shadow-cljs watch test-browser
2. Tests: http://d0x-vm:6502

CI (Headless Chrome, Karma)

1. Build: npx shadow-cljs compile test-ci
2. Tests:

CHROME_BIN=`which chromium-browser` npx karma start karma.conf.js --single-run

Build & release with deps.edn and tools.build

1. Build: clj -T:build jar
2. Release: clj -T:build deploy