Block's transactions table

Issue #191
Convex-Dev · Oct 13, 2021 · 8fc63b8 · 8fc63b8
1 parent 6612975
commit 8fc63b8
Showing 1 changed file with 197 additions and 10 deletions.
diff --git a/src/main/clojure/convex_web/site/explorer.cljs b/src/main/clojure/convex_web/site/explorer.cljs
@@ -357,7 +357,8 @@
                              (format/date-time-from-millis)
                              (format/date-time-to-string))]
              [gui/Tooltip
-              {:title timestamp}
+              {:title timestamp
+               :size "small"}
               [:span (format/time-ago timestamp)]])]
 
           ;; -- 4. Type
@@ -372,14 +373,15 @@
 
                              ""))}
            [gui/Tooltip
-            (case transaction-type
-              :convex-web.transaction.type/transfer
-              "Direct transfer of Convex Coins from the Signer's Account to a destination Account"
-
-              :convex-web.transaction.type/invoke
-              "Execution of code by Signer Account"
-
-              "")
+            {:size "small"
+             :title (case transaction-type
+                      :convex-web.transaction.type/transfer
+                      "Direct transfer of Convex Coins from the Signer's Account to a destination Account"
+
+                      :convex-web.transaction.type/invoke
+                      "Execution of code by Signer Account"
+
+                      "")}
             [:span.text-xs.uppercase
              transaction-type]]]
 
@@ -454,6 +456,191 @@
 
 ;; ---
 
+(defn BlockTransactionsTable [block]
+  [:div
+   [:table.text-left.table-auto
+    [:thead
+     (let [th-style "text-xs uppercase text-gray-600 sticky top-0 bg-white cursor-default"
+           th-div-style "py-2 mr-8"]
+       [:tr
+
+        ;; -- 1. TR#
+        [:th
+         {:class th-style}
+         [:div.flex.space-x-1
+          {:class th-div-style}
+          [:span "TR#"]
+          [gui/InfoTooltip glossary/transaction-index]]]
+
+        ;; -- 2. Signer
+        [:th
+         {:class th-style}
+         [:div.flex.space-x-1
+          {:class th-div-style}
+          [:span "Account"]
+          [gui/InfoTooltip "Address of the Account that digitally signed the transaction. This Signature has been verified by all Peers in Consensus."]]]
+
+        ;; -- 3. Timestamp
+        [:th
+         {:class th-style}
+         [:div.flex.space-x-1
+          {:class th-div-style}
+          [:span "Time"]
+          [gui/InfoTooltip "UTC Timestamp of the block containing the transaction"]]]
+
+        ;; -- 4. Type
+        [:th
+         {:class th-style}
+         [:div.flex.space-x-1
+          {:class th-div-style}
+          [:span "Type"]
+          [gui/InfoTooltip
+           "Transfer: Direct transfer of Convex Coins from the Signer's
+            Account to a destination Account; Invoke: Execution of code by
+            Signer Account"]]]
+
+        ;; -- 5. Sequence Number
+        [:th
+         {:class th-style}
+         [:div.flex.space-x-1
+          {:class th-div-style}
+          [:span "Sequence Number"]
+          [gui/InfoTooltip glossary/sequence-number]]]
+
+        ;; -- Status
+        [:th
+         {:class th-style}
+         [:div.flex.space-x-1
+          {:class th-div-style}
+          [:span "Status"]
+          [gui/InfoTooltip
+           glossary/transaction-status]]]
+
+        ;; -- 7. Result
+        [:th
+         {:class th-style}
+         [:div.flex.space-x-1
+          {:class th-div-style}
+          [:span "Result"]
+          [gui/InfoTooltip
+           "Transfer: Amount and destination Address; Invoke: Convex Lisp
+            code executed on the CVM for the transaction."]]]])]
+
+    [:tbody
+     (for [m (flatten-transactions [block])]
+       (let [block-index (get m :convex-web.block/index)
+
+             {transaction-index :convex-web.transaction/index
+              transaction-type :convex-web.transaction/type
+              transaction-sequence :convex-web.transaction/sequence
+              transaction-result :convex-web.transaction/result} (get m :convex-web.signed-data/value)
+
+             td-class ["p-1 whitespace-no-wrap text-xs"]]
+         ^{:key [block-index transaction-index]}
+         [:tr.cursor-default
+
+          ;; -- 1. TR#
+          [:td {:class (cons "text-right" td-class)}
+           [:span.text-xs.mr-8
+            transaction-index]]
+
+          ;; -- 2. Account
+          [:td {:class td-class}
+           (let [address (get m :convex-web.signed-data/address)]
+             [:div.flex.items-center.space-x-1
+              [gui/AIdenticon {:value address :size gui/identicon-size-small}]
+
+              [:a.flex-1.truncate
+               {:class gui/hyperlink-hover-class
+                :href (rfe/href :route-name/testnet.account {:address address})}
+               [gui/Tooltip
+                {:title (format/descriptive-address address)
+                 :size "small"}
+                [:span.font-mono.text-xs (format/prefix-# address)]]]])]
+
+          ;; -- 3. Timestamp
+          [:td {:class td-class}
+           (let [timestamp (-> (get m :convex-web.block/timestamp)
+                             (format/date-time-from-millis)
+                             (format/date-time-to-string))]
+             [gui/Tooltip
+              {:title timestamp
+               :size "small"}
+              [:span (format/time-ago timestamp)]])]
+
+          ;; -- 4. Type
+          [:td
+           {:class
+            (conj td-class (case transaction-type
+                             :convex-web.transaction.type/transfer
+                             "text-indigo-500"
+
+                             :convex-web.transaction.type/invoke
+                             "text-pink-500"
+
+                             ""))}
+           [gui/Tooltip
+            {:size "small"
+             :title (case transaction-type
+                      :convex-web.transaction.type/transfer
+                      "Direct transfer of Convex Coins from the Signer's Account to a destination Account"
+
+                      :convex-web.transaction.type/invoke
+                      "Execution of code by Signer Account"
+
+                      "")}
+            [:span.text-xs.uppercase
+             transaction-type]]]
+
+          ;; -- 5. Sequence Number
+          [:td
+           {:class (conj td-class "text-right")}
+           [:span.text-xs.uppercase.mr-8
+            transaction-sequence]]
+
+          ;; -- 6. Status
+          [:td
+           {:class td-class}
+           (if (get transaction-result :convex-web.result/error-code)
+             [:span.text-xs.text-red-500 "ERROR"]
+             [:span.text-xs "OK"])]
+
+          ;; -- 7. Value
+          [:td
+           {:class td-class}
+           (case (get-in m [:convex-web.signed-data/value :convex-web.transaction/type])
+             :convex-web.transaction.type/invoke
+             [gui/SecondaryButton
+              {:on-click #(stack/push :page.id/transaction {:state m
+                                                            :modal? true})}
+              [gui/ButtonText
+               {:padding gui/button-child-small-padding
+                :text-size "text-xs"
+                :text-transform "normal-case"}
+               "View details"]]
+
+             :convex-web.transaction.type/transfer
+             [:span.inline-flex.items-center
+              [:span.mr-1 "Transferred"]
+
+              [:span.font-bold.text-indigo-500.mr-1
+               (format/format-number
+                 (get-in m [:convex-web.signed-data/value :convex-web.transaction/amount]))]
+
+              [:span.mr-1 " to "]
+
+              (let [address (get-in m [:convex-web.signed-data/value :convex-web.transaction/target])]
+                [:div.flex.items-center.w-40
+                 [gui/AIdenticon {:value address :size gui/identicon-size-small}]
+
+                 [:a.flex-1.truncate
+                  {:class gui/hyperlink-hover-class
+                   :href (rfe/href :route-name/testnet.account {:address address})}
+                  [gui/Tooltip
+                   {:title (format/descriptive-address address)
+                    :size "small"}
+                   [:span.font-mono.text-xs (format/prefix-# address)]]]])])]]))]]])
+
 (defn Block [{:convex-web.block/keys [index] :as block}]
   [:div.flex.flex-col.space-y-8
 
@@ -465,7 +652,7 @@
    ;; -- Transactions
    [:div.flex.flex-col.space-y-2
     [gui/Caption "Transactions"]
-    [TransactionsTable (vector block)]]])
+    [BlockTransactionsTable block]]])
 
 (defn BlockPage [_ {:keys [ajax/status ajax/error convex-web/block]} _]
   (case status