Aaron

package.json

@@ -11,7 +11,7 @@
     "@fullcalendar/timegrid": "^4.3.0",
     "@web3-react/core": "^6.0.9",
     "apexcharts": "^3.12.0",
-    "axios": "^0.19.0",
+    "axios": "^0.19.2",
     "bootstrap": "^4.3.1",
     "clipboard": "^2.0.4",
     "crypto-icons": "^1.0.65",

src/app/RootRoutes.jsx

@@ -19,6 +19,7 @@ import taskManagerRoutes from "./views/app/task-manager/taskManagerRoutes";
 import ecommerceRoutes from "./views/app/ecommerce/ecommerceRoutes";
 import contactRoutes from "./views/app/contact/contactRoutes";
 import dappRoutes from "./views/dapp/dappRoutes";
+import canvasRoutes from "./views/canvas/canvasRoutes";
 
 const redirectRoute = [
   {
@@ -40,7 +41,8 @@ const routes = [
     path: "/",
     component: AuthGuard,
     routes: [
-        ...dappRoutes,
+      ...dappRoutes,
+      ...canvasRoutes,
       ...dashboardRoutes,
       ...uiKitsRoutes,
       ...formsRoutes,
@@ -58,7 +60,7 @@ const routes = [
       ...ecommerceRoutes,
       ...contactRoutes,
       ...redirectRoute,
-      ...errorRoute
+      ...errorRoute,
     ]
   }
 ];

src/app/views/canvas/Stake.jsx

@@ -0,0 +1,113 @@
+import React, { Component, Fragment } from "react";
+import { getStakedAmount } from "./utils/getStakedAmount";
+import { streaming } from "./utils/streaming";
+import StakingModal from "./StakingModal";
+import { redeem } from "./utils/redeem";
+
+class Stake extends Component {
+  constructor(props){
+    super(props)
+    this.state = {
+      stakeDai: [
+        {
+          leftIcon: "i-Money-2",
+          leftTitle: "120.00",
+          leftSubtitle: "staked",
+          rightIcon: "i-Financial",
+          rightTitle: "4.0210",
+          rightSubtitle: "Streaming"
+        }
+      ],
+      stake: 0,
+      rate: 0,
+      modal: false,
+    };
+
+    this.getStake = this.getStake.bind(this)
+    this.getStreaming = this.getStreaming.bind(this)
+    this.redeem = this.redeem.bind(this)
+  }
+
+  getStake = () => {
+    getStakedAmount()
+    .then(
+      res => this.setState({stake: res})
+    ).catch(
+      err => console.log("err:",err)
+    )
+  }
+
+  getStreaming = () => {
+    // streaming().then(
+    //   res => console.log("streaming():", res)
+    // )
+    streaming()
+    // .then(res => console.log("getStreaming response:",res))
+    .then(res => this.setState({rate: res.toFixed(2) + "/yr"})
+    ).catch(
+      err => console.log("err:",err)
+    )
+  }
+
+  redeem = () => {
+    redeem()
+  }
+
+  componentDidMount(){
+    this.getStake()
+
+    this.getStreaming()
+
+    console.log("state:",this.state)
+  }
+
+  render() {
+    let { stakeDai = [] } = this.state;
+    // this.getStreaming();
+
+    return (
+      <Fragment>
+
+        <div >
+          {stakeDai.map((card, index) => (
+            <div key={index} className="col-lg-6 col-md-6 col-sm-6" style={{display: "flex", height: "76px"}}>
+              <div className="card o-hidden" style={{display: "flex", flexDirection: "row"}}>
+
+                <button className="card-body text-center" style={{padding: "4px"}} onClick={(e)=>this.setState({modal: !this.state.modal})}>
+                  <i className={card.leftIcon}></i>
+                  <div >
+                    <p className="text-muted text-capitalize" style={{marginBottom: "0px"}}>
+                      {card.leftSubtitle}
+                    </p>
+                    <p className="lead text-primary text-capitalize">
+                      {this.state.stake && this.state.stake}
+                    </p>
+                  </div>
+                </button>
+
+                <button className="card-body text-center" style={{padding: "4px"}} onClick={(e)=>{this.redeem()}}>
+                  <i className={card.rightIcon}></i>
+                  <div >
+                    <p className="text-muted text-capitalize" style={{marginBottom: "0px"}}>
+                      {card.rightSubtitle}
+                    </p>
+                    <p className="lead text-primary text-capitalize">
+                      {this.state.rate && this.state.rate}
+                    </p>
+                  </div>
+                </button>
+
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {this.state.modal && <StakingModal/>}
+
+
+      </Fragment>
+    );
+  }
+}
+
+export default Stake;

src/app/views/canvas/StakingModal.jsx

@@ -0,0 +1,50 @@
+import React, { Component, Fragment } from "react";
+import { stake } from "./utils/stake";
+import { redeem } from "./utils/redeem";
+
+class StakeModal extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      dai: 0,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+
+  }
+
+  handleChange(e) {
+    this.setState({dai: e.target.value});
+  }
+
+  render() {
+
+    return (
+      <Fragment>
+
+        <div >
+
+            <div className="col-lg-6 col-md-6 col-sm-6" style={{display: "flex", height: "76px"}}>
+              <div className="card o-hidden" style={{display: "flex", flexDirection: "column"}}>
+                <label>How much Dai would you like to stake?
+                  <input onChange={this.handleChange}/>
+                </label>
+                <button className="card-body text-center" style={{padding: "4px"}} onClick={(e)=>stake(this.state.dai)}>
+                  Stake it!
+                </button>
+
+
+                <button className="card-body text-center" style={{padding: "4px"}} onClick={(e)=>redeem()}>
+                  Un-stake it!
+                </button>
+              </div>
+            </div>
+        </div>
+
+
+      </Fragment>
+    );
+  }
+}
+
+export default StakeModal;

src/app/views/canvas/abi/address.js

@@ -0,0 +1,3 @@
+const address = "0xf871EFEFB58aE7C72f646416B91115F379eFd5f5"
+
+export default address;

src/app/views/canvas/abi/simpleStakingABI.js

@@ -0,0 +1,132 @@
+let abi = [
+	{
+		"inputs": [],
+		"payable": false,
+		"stateMutability": "nonpayable",
+		"type": "constructor"
+	},
+	{
+		"payable": false,
+		"stateMutability": "nonpayable",
+		"type": "fallback"
+	},
+	{
+		"constant": true,
+		"inputs": [],
+		"name": "alfredDao",
+		"outputs": [
+			{
+				"internalType": "address",
+				"name": "",
+				"type": "address"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": true,
+		"inputs": [
+			{
+				"internalType": "address",
+				"name": "",
+				"type": "address"
+			}
+		],
+		"name": "balances",
+		"outputs": [
+			{
+				"internalType": "uint256",
+				"name": "",
+				"type": "uint256"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": true,
+		"inputs": [],
+		"name": "mcdContract",
+		"outputs": [
+			{
+				"internalType": "address",
+				"name": "",
+				"type": "address"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": true,
+		"inputs": [],
+		"name": "owner",
+		"outputs": [
+			{
+				"internalType": "address",
+				"name": "",
+				"type": "address"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": true,
+		"inputs": [],
+		"name": "rDaiContract",
+		"outputs": [
+			{
+				"internalType": "address",
+				"name": "",
+				"type": "address"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": false,
+		"inputs": [],
+		"name": "redeem",
+		"outputs": [
+			{
+				"internalType": "bool",
+				"name": "",
+				"type": "bool"
+			}
+		],
+		"payable": true,
+		"stateMutability": "payable",
+		"type": "function"
+	},
+	{
+		"constant": false,
+		"inputs": [
+			{
+				"internalType": "uint256",
+				"name": "amount",
+				"type": "uint256"
+			}
+		],
+		"name": "stake",
+		"outputs": [
+			{
+				"internalType": "bool",
+				"name": "",
+				"type": "bool"
+			}
+		],
+		"payable": true,
+		"stateMutability": "payable",
+		"type": "function"
+	},
+]
+
+export default abi;

src/app/views/canvas/canvasRoutes.js

@@ -0,0 +1,14 @@
+import { lazy } from "react";
+// import Stake from "./Stake";
+
+const Stake = lazy(() => import("./Stake"));
+
+const canvasRoutes = [
+
+    {
+        path: "/canvas/stake",
+        component: Stake
+    },
+];
+
+export default canvasRoutes;

src/app/views/canvas/utils/contractConnect.js

@@ -0,0 +1,17 @@
+import { ethers, Contract, Wallet } from 'ethers'
+import abi from '../abi/simpleStakingABI'
+import contractAddress from '../abi/address'
+
+let provider = new ethers.providers.Web3Provider(window.web3.currentProvider);
+// let provider = getDefaultProvider()
+console.log("provider", provider);
+
+// export let wallet = new Wallet(provider)
+
+export const signer = provider.getSigner();
+
+export const contract = new Contract(contractAddress, abi, signer)
+console.log("contract", contract);
+
+// export const contractWithSigner = contract.connect(provider)
+

src/app/views/canvas/utils/getStakedAmount.js

@@ -0,0 +1,10 @@
+import {contract} from './contractConnect'
+
+let address = window.ethereum.selectedAddress;
+
+export async function getStakedAmount(){
+    const tx = await contract.balances(address)
+    console.log("tx:",tx.toString())
+
+    return (Number(tx.toString())/10**18).toFixed(4);
+}