write smartcontract

contracts/TaskContract.sol

@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.8.0 <0.9.0;
+
+contract TaskContract {
+  event AddTask(address recipient, uint taskId);
+  event DeleteTask(uint taskId, bool isDeleted);
+
+  struct Task {
+    uint id;
+    string taskText;
+    bool isDeleted;
+  }
+
+  Task[] private tasks;
+  mapping (uint=>address) taskToOwner;
+
+  function addTask(string memory taskText,bool isDeleted) external {
+    uint taskId = tasks.length;
+    tasks.push(Task(taskId, taskText, isDeleted));
+    taskToOwner[taskId] = msg.sender;
+    emit AddTask(msg.sender, taskId);
+  }
+
+// Get tasks that are mine and not deleted
+  function getMyTasks() external view returns(Task[] memory){
+    Task[] memory temporary = new Task[](tasks.length);
+    uint counter = 0;
+    for (uint i = 0; i < tasks.length; i++){
+      if (taskToOwner[i] == msg.sender && tasks[i].isDeleted == false) {
+        temporary[counter] = tasks[i];
+        counter++;
+      }
+    }
+    Task[] memory result = new Task[](counter);
+    for (uint i = 0; i < counter; i++) {
+      result[i] = temporary[i];
+    }
+    return result;
+  }
+
+  function deleteTask(uint taskId, bool isDeleted) external {
+    if(taskToOwner[taskId] == msg.sender) {
+      tasks[taskId].isDeleted = isDeleted;
+      emit DeleteTask(taskId, isDeleted);
+    }
+  }
+}

migrations/TaskContract.js

@@ -0,0 +1,5 @@
+const TaskContract = artificts.require("TaskContract");
+
+module.exports = function(deployer) {
+    deployer.deploy(TaskContract);
+}

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +35,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.js

@@ -1,25 +1,43 @@
-import logo from './logo.svg';
-import './App.css';
+import WrongNetworkMessage from './components/WrongNetworkMessage'
+import ConnectWalletButton from './components/ConnectWalletButton'
+import TodoList from './components/TodoList'
+
+/* 
+const tasks = [
+  { id: 0, taskText: 'clean', isDeleted: false }, 
+  { id: 1, taskText: 'food', isDeleted: false }, 
+  { id: 2, taskText: 'water', isDeleted: true }
+]
+*/
+
+const App = () => {
+
+  // Calls Metamask to connect wallet on clicking Connect Wallet button
+  const connectWallet = async () => {
+
+  }
+
+  // Just gets all the tasks from the contract
+  const getAllTasks = async () => {
+
+  }
+
+  // Add tasks from front-end onto the blockchain
+  const addTask = async e => {
+
+  }
+
+  // Remove tasks from front-end by filtering it out on our "back-end" / blockchain smart contract
+  const deleteTask = key => async () => {
+
+  }
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className='bg-[#97b5fe] h-screen w-screen flex justify-center py-6'>
+      {!'is user not logged in?' ? <ConnectWalletButton /> :
+        'is this the correct network?' ? <TodoList /> : <WrongNetworkMessage />}
     </div>
-  );
+  )
 }
 
-export default App;
+export default App;

src/components/ConnectWalletButton.js

@@ -0,0 +1,9 @@
+const ConnectWalletButton = () =>
+  <button
+    className='h-[5rem] text-2xl font-bold py-3 px-12 bg-[#f1c232] rounded-lg mb-10 hover:scale-105 transition duration-500 ease-in-out'
+  // Add an onClick functionality
+  >
+    Connect Wallet
+  </button>
+
+export default ConnectWalletButton

src/components/Navbar.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { HiMenuAlt4 } from 'react-icons/hi'
+import { BiSearch } from 'react-icons/bi'
+import { IoIosNotificationsOutline } from 'react-icons/io'
+
+const Navbar = () => {
+  return (
+    <div className='w-[full] flex px-2 py-8 justify-between'>
+      <HiMenuAlt4 className='text-[#93aff9] text-3xl cursor-pointer' />
+      <div className='flex-1 flex place-content-end gap-[30px]'>
+        <BiSearch className='text-[#93aff9] text-3xl cursor-pointer' />
+        <IoIosNotificationsOutline className='text-[#93aff9] text-3xl cursor-pointer' />
+      </div>
+    </div>
+  )
+}
+
+export default Navbar

src/components/Task.js

@@ -0,0 +1,17 @@
+import { BsFillTrashFill } from 'react-icons/bs'
+
+const Task = () => {
+  return (
+    <div className='flex items-center text-white'>
+      <div className=' bg-[#031956] text-[#b6c7db] flex w-[70%] rounded-[15px] mb-[10px] flex-1'>
+        <div className='flex items-center justify-between w-full p-[20px] text-xl'>
+        </div>
+      </div>
+      <BsFillTrashFill
+        className='text-2xl cursor-pointer ml-10'
+      />
+    </div>
+  )
+}
+
+export default Task

src/components/TodoList.js

@@ -0,0 +1,26 @@
+import Navbar from './Navbar'
+import { IoMdAddCircle } from 'react-icons/io'
+
+const TodoList = () => <div className='w-[70%] bg-[#354ea3] py-4 px-9 rounded-[30px] overflow-y-scroll'>
+  <Navbar />
+  <h2 className='text-4xl bolder text-white pb-8'>
+    What&apos;s up, Anas!
+  </h2>
+  <div className='py-3 text-[#7d99e9]'>TODAY&apos;S TASKS</div>
+  <form className='flex items-center justify-center'>
+    <input
+      className='rounded-[10px] w-full p-[10px] border-none outline-none bg-[#031956] text-white mb-[10px]'
+      placeholder='Add a task for today...'
+      // take input from the form here
+    />
+    <IoMdAddCircle
+      // Add an onClick method
+      className='text-[#ea0aff] text-[50px] cursor-pointer ml-[20px] mb-[10px]'
+    />
+  </form>
+  <ul>
+    {/* Loop through all tasks here using the Task component */}
+  </ul>
+</div>
+
+export default TodoList

src/components/WrongNetworkMessage.js

@@ -0,0 +1,9 @@
+const WrongNetworkMessage = () => <div className='flex flex-col justify-center items-center mb-20 font-bold text-2xl gap-y-3'>
+  {/* Prompt to change network to Rinkeby */}
+  <div>----------------------------------------</div>
+  <div>Please connect to the Rinkeby Testnet</div>
+  <div>and reload the page</div>
+  <div>----------------------------------------</div>
+</div>
+
+export default WrongNetworkMessage

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}