add debug messages in the UI

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,
       },
     }

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,
+});

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>
   </>;
 }

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;
+  }
+}

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;
+    }
+  }
+}