show DAI balance

GriffGreen · Mar 13, 2020 · dccda6b · dccda6b
1 parent f21be9d
commit dccda6b
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 17,500 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = { "extends": "standard" };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,51 +1,53 @@
 {
-  "name": "tech-dapp",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@oqton/redux-black-box": "^1.1.3",
-    "@tokenfoundry/react-metamask": "^0.4.0",
-    "bulma": "^0.7.5",
-    "bulma-checkradio": "^1.1.1",
-    "bulma-switch": "^2.0.0",
-    "eslint-loader": "^2.2.1",
-    "eslint-plugin-react": "^7.14.3",
-    "eth-sig-util": "1.4.2",
-    "node-sass": "^4.12.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-redux": "^7.1.0",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1",
-    "redux": "^4.0.4",
-    "redux-localstorage-simple": "^2.1.6",
-    "styled-components": "^4.3.2",
-    "truffle-contract": "^4.0.28",
-    "web3": "^1.2.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint:fix": "eslint src/**/*.js --fix"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "ipfs-http-client": "^33.1.1"
-  }
+    "name": "tech-dapp",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@oqton/redux-black-box": "^1.1.3",
+        "@tokenfoundry/react-metamask": "^0.4.0",
+        "bulma": "^0.7.5",
+        "bulma-checkradio": "^1.1.1",
+        "bulma-switch": "^2.0.0",
+        "cryptocurrency-icons": "^0.16.1",
+        "erc20-contract-js": "^1.3.1",
+        "eslint-loader": "^2.2.1",
+        "eslint-plugin-react": "^7.14.3",
+        "eth-sig-util": "1.4.2",
+        "node-sass": "^4.12.0",
+        "react": "^16.8.6",
+        "react-dom": "^16.8.6",
+        "react-redux": "^7.1.0",
+        "react-router-dom": "^5.0.1",
+        "react-scripts": "3.0.1",
+        "redux": "^4.0.4",
+        "redux-localstorage-simple": "^2.1.6",
+        "styled-components": "^4.3.2",
+        "truffle-contract": "^4.0.28",
+        "web3": "^1.2.1"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "lint:fix": "eslint src/**/*.js --fix"
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "ipfs-http-client": "^33.1.1"
+    }
 }
diff --git a/src/components/MetaMaskButton.js b/src/components/MetaMaskButton.js
@@ -8,9 +8,9 @@ const MetaMaskButton = ({ onWeb3Ready }) => {
         MetaMaskContext,
     );
 
-    function handleButtonClick() {
-        alert(`Web3 (${web3.version}) is enabled`);
-    }
+    // function handleButtonClick() {
+    //     alert(`Web3 (${web3.version}) is enabled`);
+    // }
 
     if (error && error.message === "MetaMask not installed") {
         return (
@@ -52,9 +52,9 @@ const MetaMaskButton = ({ onWeb3Ready }) => {
         return <button type="button">className="button is-success" No Wallet 🦊</button>;
     } else {
         // `web3` and `account` loaded 🎉
-        onWeb3Ready(web3);
+        onWeb3Ready(web3, accounts[0]);
         return (
-            <button type="button" className="button is-success" onClick={handleButtonClick}>
+            <button type="button" className="button is-success">
                 <>{accounts[0]}</> 🦊
       </button>
         );
@@ -68,7 +68,7 @@ const mapStateToProps = state => {
 };
 const mapDispachToProps = dispatch => {
     return {
-        onWeb3Ready: (web3) => dispatch({ type: "WEB3_AVAILABLE", web3: web3 }),
+        onWeb3Ready: (web3, account) => dispatch({ type: "WEB3_AVAILABLE", web3, account }),
     };
 };
 

diff --git a/src/index.js b/src/index.js
@@ -10,10 +10,8 @@ import { createStore, applyMiddleware, compose } from "redux";
 import reducer from './store/techdapp';
 
 
-import { blackBoxMiddleware } from '@oqton/redux-black-box';
-
-// const store = createStore(techdappReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()), applyMiddleware(blackBoxMiddleware));
-
+// import { blackBoxMiddleware } from '@oqton/redux-black-box';
+import { createBlackBoxMiddleware } from '@oqton/redux-black-box';
 
 const composeEnhancers =
     typeof window === 'object' &&
@@ -23,9 +21,11 @@ const composeEnhancers =
         }) : compose;
 
 const enhancer = composeEnhancers(
-    applyMiddleware(blackBoxMiddleware, save({ states: ["agreedtandc"] })),
+    applyMiddleware(createBlackBoxMiddleware([['web3']]), save({ states: ["agreedtandc"] })),
 );
-const store = createStore(reducer, load(), enhancer);
+
+// const store = createStore(reducer, load(), enhancer);
+const store = createStore(reducer, enhancer);
 
 
 ReactDOM.render(

diff --git a/src/pages/contribute/components/TandC.js b/src/pages/contribute/components/TandC.js
@@ -1,6 +1,4 @@
 import React, { useContext } from "react";
-// import { Redirect } from "react-router-dom";
-import styled from "styled-components";
 import { connect } from "react-redux";
 import MetaMaskContext from "../../../components/MetaMask";
 import tandcData from "../../../assets/tandc.json";

diff --git a/src/pages/contribute/components/WalletView.js b/src/pages/contribute/components/WalletView.js
@@ -1,15 +1,49 @@
 import React, { useContext } from "react";
 import MetaMaskContext from "../../../components/MetaMask";
 import { connect } from "react-redux";
+import DAI from 'cryptocurrency-icons/svg/color/dai.svg';
 
-const Comp = ({ agreedtandc, web3available }) => {
+const coinLogos = [
+    { symbol: "DAI", src: DAI }
+];
+
+
+const Comp = ({ agreedtandc, account, balances, getBalancesFor }) => {
 
     const { web3, accounts, error, awaiting, openMetaMask } = useContext(
         MetaMaskContext,
     );
 
+    React.useEffect(() => {
+        if (accounts && accounts[0]) {
+            getBalancesFor(accounts[0]);
+        }
+    }, [accounts, getBalancesFor]);
+
+
+
+    const b = balances && balances[account] && balances[account].map((coin) => {
+        const logo = coinLogos.find((coinIcon) => { return coinIcon.symbol === coin.symbol });
+        return (<>
+            <div className="title level">
+                <div className="level-left">Available Balance</div>
+                <div className="level-right has-text-right">{coin.status || coin.balance} {coin.symbol} &nbsp;<span class="icon has-text-light"><img src={logo.src} alt={coin.symbol} /></span></div>
+            </div>
+        </>);
+    })
+
+    if (!account) {
+        return (
+            <>
+                <p class="title is-text-overflow">{`Wallet`}</p>
+                <p class="subtitle">Please connect your wallet to view your balances</p>
+            </>
+        )
+    }
+
+
     return (<>
-        <p class="title is-text-overflow">{`Wallet ${accounts && accounts.length > 0 ? accounts[0] : ""}`}</p>
+        <p class="title is-text-overflow">{`Wallet ${account || ""}`}</p>
         <p class="subtitle">
             Terms and conditions signed
      {agreedtandc !== true ? (
@@ -26,22 +60,27 @@ const Comp = ({ agreedtandc, web3available }) => {
                 )}
 
         </p>
+        <br/>
+        {b}
     </>
     );
 };
 
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ agreedtandc, account, balances }) => {
 
     return {
-        ...state.agreedtandc,
-        web3available: state.web3available
+        agreedtandc,
+        account,
+        balances,
     };
 };
 
 const mapDispachToProps = dispatch => {
     return {
         // onSetAgreed: () => dispatch({ type: "AGREE_TANDC" }),
+        getBalancesFor: (address) => dispatch({ type: "GET_BALANCES_FOR_ADDRESS", address }),
+
     };
 };
 

diff --git a/src/store/techdapp.js b/src/store/techdapp.js
@@ -1,15 +1,20 @@
 
 import { PromiseBlackBox } from '@oqton/redux-black-box';
+import ERC20Contract from 'erc20-contract-js';
 
-
-export const initialState = {
+const initialState = {
     agreedtandc: false,
-    web3available: false,
+    web3: null,
+    balances: {},
 };
 
+const coins = [
+    { symbol: "DAI", contractaddress: "0x6b175474e89094c44da98b954eedeac495271d0f" }
+]
+
 const reducer = (state = initialState, action) => {
     // const newState = { ...state };
-    console.log(`reducer ${action.type}`);
+    console.log(`reducer ${action.type}`, state);
     switch (action.type) {
         case "AGREE_TANDC":
             return {
@@ -24,12 +29,44 @@ const reducer = (state = initialState, action) => {
         case "WEB3_AVAILABLE":
             return {
                 ...state,
-                web3available: true,
-                // web3: action.web3
+                account: action.account,
+                // web3available: true,
+                web3: action.web3
             }
+        case "GET_BALANCES_FOR_ADDRESS":
+            if (!action.address || !state.web3) return state;
+            if (!state.balances[action.address]) {
+                state.balances[action.address] = coins.map((coin) => { return ({ symbol: coin.symbol, status: "??" }) })
+            }
+            return {
+                ...state,
+                BB_GET_BALANCES_FOR_ADDRESS: new PromiseBlackBox(
+                    () => getBalances(state.web3, action.address, coins)
+                        .then(res => ({ type: "GET_BALANCES_FOR_ADDRESS_SUCCESS", res: res, address: action.address }))
+                        .catch(e => ({ type: "GET_BALANCES_FOR_ADDRESS_FAIL", e }))
+                )
+            }
+        case "GET_BALANCES_FOR_ADDRESS_SUCCESS":
+            return {
+                ...state,
+                balances: Object.assign({}, state.balances, {
+                    [action.address]: action.res
+                })
+            }
+
+        case "GET_BALANCES_FOR_ADDRESS_FAIL":
+            state.balances[action.address] = state.balances[action.address].map((coin) => { coin.status = "error fetching"; return coin });
+            return state;
         default:
             return state;
     }
 }
 
+const getBalances = (web3, address, coins) => {
+    return Promise.all(coins.map((coin) => {
+        const erc20Contract = new ERC20Contract(web3, coin.contractaddress);
+        return erc20Contract.balanceOf(address).call().then((balance) => { return { ...coin, balance: web3.utils.fromWei(balance, "ether") } });
+    }))
+}
+
 export default reducer;
diff --git a/src/util/techcontroller.js b/src/util/techcontroller.js
@@ -7,4 +7,4 @@
 //     const techController = await TechController.deployed();
 //     const isWhiteListAdmin = await techController.isWhitelistAdmin(address);
 //     return isWhiteListAdmin;
-// }
+// }
diff --git a/yarn.lock b/yarn.lock
@@ -3076,16 +3076,16 @@ commander@^2.11.0, commander@^2.19.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
+commander@^2.15.0, commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@~2.20.3:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@~2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
@@ -3381,6 +3381,11 @@ crypto-js@^3.1.9-1:
   resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.1.9-1.tgz#fda19e761fc077e01ffbfdc6e9fdfc59e8806cd8"
   integrity sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg=
 
+cryptocurrency-icons@^0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/cryptocurrency-icons/-/cryptocurrency-icons-0.16.1.tgz#33ec0b828c666f773b53866b4b803b2a06c28efc"
+  integrity sha512-C6y+r56g0ZJzZ9kCbeKa/WXb/oz1elilsaSGjv86T93P0oZWr4v5pxnbtZrEnvHn63qbTxo/Pz3NvzLbKrnQVQ==
+
 css-blank-pseudo@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
@@ -4159,6 +4164,11 @@ entities@^1.1.1:
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
+erc20-contract-js@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/erc20-contract-js/-/erc20-contract-js-1.3.1.tgz#7052eca6a776cd0386c7351ad972ee608ec9c6c8"
+  integrity sha512-nc0PgGcIp96V8s5pLMwOpsNAIavRV4liR69OboLtR3eWvGFSH1EooYL6fg4FkhRyylyDsRgd+fpjmlGW4mTCfA==
+
 err-code@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"