From 3ee7293a841947a2a81eb667a45a9ac144524662 Mon Sep 17 00:00:00 2001
From: Andrea Franz <andrea@gravityblast.com>
Date: Mon, 22 Jun 2020 13:53:51 +0200
Subject: [PATCH] add debug messages in the UI

---
 config/contracts.js     | 11 ++++++-----
 src/actions/debug.ts    | 12 ++++++++++++
 src/components/Home.tsx | 10 ++++++++++
 src/reducers/debug.ts   | 29 +++++++++++++++++++++++++++++
 src/styles/Debug.scss   | 27 +++++++++++++++++++++++++++
 5 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 src/actions/debug.ts
 create mode 100644 src/reducers/debug.ts
 create mode 100644 src/styles/Debug.scss

diff --git a/config/contracts.js b/config/contracts.js
index 9272556..24a73af 100644
--- a/config/contracts.js
+++ b/config/contracts.js
@@ -33,20 +33,21 @@ module.exports = {
       TestToken: {
         args: ["TEST", 18],
       },
-      ERC20BucketFactory: {
+      TestNFT: {
         params: [],
       },
-      ERC20Bucket: {
+      ERC20BucketFactory: {
         params: [],
-        proxyFor: "Bucket",
-        deploy: false,
       },
       NFTBucketFactory: {
         params: [],
       },
+      ERC20Bucket: {
+        params: [],
+        deploy: false,
+      },
       NFTBucket: {
         params: [],
-        proxyFor: "Bucket",
         deploy: false,
       },
     }
diff --git a/src/actions/debug.ts b/src/actions/debug.ts
new file mode 100644
index 0000000..820048f
--- /dev/null
+++ b/src/actions/debug.ts
@@ -0,0 +1,12 @@
+export const DEBUG_WRITTEN = "DEBUG_WRITTEN";
+export interface DebugWrittenAction {
+  type: typeof DEBUG_WRITTEN
+  text: string
+}
+
+export type DebugActions = DebugWrittenAction;
+
+export const debug = (text: string): DebugWrittenAction => ({
+  type: DEBUG_WRITTEN,
+  text,
+});
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index ef1f17a..c053dbc 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -2,10 +2,20 @@ import React from 'react';
 import {
   useDispatch,
 } from 'react-redux';
+import {
+  deployERC20,
+  deployNFT,
+} from '../actions/newContract';
 
 export default function() {
   const dispatch = useDispatch();
+  const deployERC20Handler = () => dispatch(deployERC20());
+  const deployNFTHandler = () => dispatch(deployNFT());
 
   return <>
+    <p>
+      <button onClick={deployERC20Handler}>deploy ERC20!</button>
+        <button onClick={deployNFTHandler}>deploy NFT!</button>
+    </p>
   </>;
 }
diff --git a/src/reducers/debug.ts b/src/reducers/debug.ts
new file mode 100644
index 0000000..25c67d0
--- /dev/null
+++ b/src/reducers/debug.ts
@@ -0,0 +1,29 @@
+import {
+  DebugActions,
+  DEBUG_WRITTEN,
+} from '../actions/debug';
+
+export interface DebugState {
+  lines: Array<string>
+}
+
+const initialState: DebugState = {
+  lines: [],
+};
+
+export const debugReducer = (state: DebugState = initialState, action: DebugActions): DebugState => {
+  switch (action.type) {
+    case DEBUG_WRITTEN: {
+      return {
+        ...state,
+        lines: [
+          ...state.lines,
+          action.text,
+        ]
+      }
+    }
+
+    default:
+      return state;
+  }
+}
diff --git a/src/styles/Debug.scss b/src/styles/Debug.scss
new file mode 100644
index 0000000..266a45f
--- /dev/null
+++ b/src/styles/Debug.scss
@@ -0,0 +1,27 @@
+.debug {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 0.7rem;
+  overflow-wrap: break-word;
+  position: relative;
+  padding-top: 20px;
+
+  .btn {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.1);
+  }
+
+  ul {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    background: #fff;
+    padding: 12px;
+
+    li {
+      margin-bottom: 8px;
+    }
+  }
+}