Repository: thenewboston-developers/Website
Pull request #2052 (2021-09-16 17:03:31)

Task to Bounties
closes: #2045


jamessspanggg: Seems like linter is failing
YashovardhanSingh: working on it
YashovardhanSingh: Pls, describe completely the upcoming tasks, so that there is no misinterpretation.

Patch:
diff --git a/src/components/ContributorTasks/Styles.ts b/src/components/ContributorBounties/Styles.ts
similarity index 97%
rename from src/components/ContributorTasks/Styles.ts
rename to src/components/ContributorBounties/Styles.ts
index 08bd843..f4906bc 100644
--- a/src/components/ContributorTasks/Styles.ts
+++ b/src/components/ContributorBounties/Styles.ts
@@ -23,7 +23,7 @@ const commonTable = css`
     text-align: right;
   }
 
-  // Recent Task (name of task)
+  // Recent Bounty (name of bounty)
   &:nth-child(1) {
     max-width: 140px;
     min-width: 140px;
diff --git a/src/components/ContributorBounties/index.tsx b/src/components/ContributorBounties/index.tsx
new file mode 100644
index 0000000..40a1b6e
--- /dev/null
+++ b/src/components/ContributorBounties/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import format from 'date-fns/format';
+
+import {SFC} from 'types/generic';
+import {Bounty} from 'types/github';
+import * as S from './Styles';
+
+export interface ContributorBountiesProps {
+  bounties: Bounty[];
+}
+
+const ContributorBounties: SFC<ContributorBountiesProps> = ({className, bounties}) => {
+  const renderRows = () => {
+    return bounties.map(({amount_paid, completed_date, issue_id, repository, title}: Bounty, index) => (
+      <tr key={index} data-testid="ContributorBounties__row">
+        <S.Td data-testid="ContributorBounties__bounty-title" title={title}>
+          <S.IssueLink
+            href={`https://github.com/thenewboston-developers/${repository}/issues/${issue_id}`}
+            iconSize={12}
+            iconTotalSize={12}
+          >
+            {title}
+          </S.IssueLink>
+        </S.Td>
+        <S.Td data-testid="ContributorBounties__repository" title={repository}>
+          {repository}
+        </S.Td>
+        <S.Td data-testid="ContributorBounties__date-completed">{format(completed_date, 'L/d/yy')}</S.Td>
+        <S.TdAmount data-testid="ContributorBounties__amount">
+          + {parseInt(amount_paid, 10).toLocaleString()}
+        </S.TdAmount>
+      </tr>
+    ));
+  };
+
+  return (
+    <S.Container className={className} data-testid="ContributorBounties">
+      <S.Table>
+        <thead>
+          <tr>
+            <S.Th>Recent Bounty</S.Th>
+            <S.Th>Repository</S.Th>
+            <S.Th>Completed</S.Th>
+            <S.Th>Amount</S.Th>
+          </tr>
+        </thead>
+        <tbody>{renderRows()}</tbody>
+      </S.Table>
+    </S.Container>
+  );
+};
+
+export default ContributorBounties;
diff --git a/src/components/ContributorTasks/index.tsx b/src/components/ContributorTasks/index.tsx
deleted file mode 100644
index 10872a7..0000000
--- a/src/components/ContributorTasks/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import format from 'date-fns/format';
-
-import {SFC} from 'types/generic';
-import {Task} from 'types/github';
-import * as S from './Styles';
-
-export interface ContributorTasksProps {
-  tasks: Task[];
-}
-
-const ContributorTasks: SFC<ContributorTasksProps> = ({className, tasks}) => {
-  const renderRows = () => {
-    return tasks.map(({amount_paid, completed_date, issue_id, repository, title}: Task, index) => (
-      <tr key={index} data-testid="ContributorTasks__row">
-        <S.Td data-testid="ContributorTasks__task-title" title={title}>
-          <S.IssueLink
-            href={`https://github.com/thenewboston-developers/${repository}/issues/${issue_id}`}
-            iconSize={12}
-            iconTotalSize={12}
-          >
-            {title}
-          </S.IssueLink>
-        </S.Td>
-        <S.Td data-testid="ContributorTasks__repository" title={repository}>
-          {repository}
-        </S.Td>
-        <S.Td data-testid="ContributorTasks__date-completed">{format(completed_date, 'L/d/yy')}</S.Td>
-        <S.TdAmount data-testid="ContributorTasks__amount">+ {parseInt(amount_paid, 10).toLocaleString()}</S.TdAmount>
-      </tr>
-    ));
-  };
-
-  return (
-    <S.Container className={className} data-testid="ContributorTasks">
-      <S.Table>
-        <thead>
-          <tr>
-            <S.Th>Recent Task</S.Th>
-            <S.Th>Repository</S.Th>
-            <S.Th>Completed</S.Th>
-            <S.Th>Amount</S.Th>
-          </tr>
-        </thead>
-        <tbody>{renderRows()}</tbody>
-      </S.Table>
-    </S.Container>
-  );
-};
-
-export default ContributorTasks;
diff --git a/src/components/index.ts b/src/components/index.ts
index 77897c9..8add843 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,7 +4,7 @@ import Avatar from './Avatar';
 import BreadcrumbMenu from './BreadcrumbMenu';
 import {CodeSnippet, RequestResponseSnippet, SnippetLang} from './CodeSnippet';
 import Container from './Container';
-import ContributorTasks from './ContributorTasks';
+import ContributorBounties from './ContributorBounties';
 import CopyableAccountNumber from './CopyableAccountNumber';
 import DataTable from './DataTable';
 import Divider from './Divider';
@@ -60,7 +60,7 @@ export {
   CalloutType,
   CodeSnippet,
   Container,
-  ContributorTasks,
+  ContributorBounties,
   CopyableAccountNumber,
   DashboardLayout,
   DataTable,
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index a3c226b..f6fc21c 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -8,6 +8,7 @@ import Analytics from './Analytics';
 import ArchitectureDeepDive from './DeveloperPortal/containers/LivingWhitepaper/containers/ArchitectureDeepDive';
 import Assets from './Assets';
 import BankApi from './Api/BankApi';
+import Bounties from './Bounties';
 import ConfirmationValidatorApi from './Api/ConfirmationValidatorApi';
 import CreateAccount from './CreateAccount';
 import DeploymentGuide from './DeploymentGuide';
@@ -32,7 +33,6 @@ import SignIn from './SignIn';
 import SignOut from './SignOut';
 import Social from './Social';
 import StyleGuide from './StyleGuide';
-import Tasks from './Tasks';
 import Teams from './Teams';
 import TermsOfUse from './TermsOfUse';
 import Wallet from './Wallet';
@@ -106,8 +106,8 @@ const App: FC = () => {
           <Redirect exact from="/openings" to="/openings/All" />
           <Route exact path="/openings/:category/:openingId?" render={() => <Openings />} />
           <Route exact path="/social" component={Social} />
-          <Redirect exact from="/tasks" to="/tasks/All" />
-          <Route exact path="/tasks/:repository" component={Tasks} />
+          <Redirect exact from="/bounties" to="/bounties/All" />
+          <Route exact path="/bounties/:repository" component={Bounties} />
           <Redirect exact path="/teams" to="/teams/All/Members" />
           <Route exact path="/teams/:team/:tab?/:resource?" component={Teams} />
           <Route path="/wallet/:chapter?" component={Wallet} />
diff --git a/src/containers/Tasks/Tasks.scss b/src/containers/Bounties/Bounties.scss
similarity index 96%
rename from src/containers/Tasks/Tasks.scss
rename to src/containers/Bounties/Bounties.scss
index 6bc152e..931d4db 100644
--- a/src/containers/Tasks/Tasks.scss
+++ b/src/containers/Bounties/Bounties.scss
@@ -1,4 +1,4 @@
-.Tasks {
+.Bounties {
   display: grid;
   grid-template-columns: 240px auto;
   height: 100%;
@@ -26,7 +26,7 @@
     margin-top: 64px;
   }
 
-  &__task-list {
+  &__bounty-list {
     display: flex;
     flex-direction: column;
     grid-column: 2 / span 1;
@@ -67,7 +67,7 @@
       display: none;
     }
 
-    &__task-list {
+    &__bounty-list {
       grid-column: 1 / span 1;
       grid-row: 2 / span 1;
     }
diff --git a/src/containers/Tasks/TasksTask/TasksTask.scss b/src/containers/Bounties/BountiesBounty/BountiesBounty.scss
similarity index 98%
rename from src/containers/Tasks/TasksTask/TasksTask.scss
rename to src/containers/Bounties/BountiesBounty/BountiesBounty.scss
index 51f0506..34b6e86 100644
--- a/src/containers/Tasks/TasksTask/TasksTask.scss
+++ b/src/containers/Bounties/BountiesBounty/BountiesBounty.scss
@@ -1,6 +1,6 @@
 @import 'src/styles/mixins';
 
-.TasksTask {
+.BountiesBounty {
   border-bottom: 1px solid var(--color-sail-gray-100);
   display: flex;
   margin: 0 24px;
diff --git a/src/containers/Tasks/TasksTask/index.tsx b/src/containers/Bounties/BountiesBounty/index.tsx
similarity index 64%
rename from src/containers/Tasks/TasksTask/index.tsx
rename to src/containers/Bounties/BountiesBounty/index.tsx
index 05b4a7c..a8b406d 100644
--- a/src/containers/Tasks/TasksTask/index.tsx
+++ b/src/containers/Bounties/BountiesBounty/index.tsx
@@ -4,7 +4,7 @@ import {A, Label, TotalAmount} from 'components';
 import {AMOUNT_COLOR} from 'constants/github';
 import {Assignee, GitHubLabel, GitHubUser} from 'types/github';
 
-import './TasksTask.scss';
+import './BountiesBounty.scss';
 
 interface ComponentProps {
   amount: number;
@@ -18,7 +18,7 @@ interface ComponentProps {
   title: string;
 }
 
-const TasksTask: FC<ComponentProps> = ({
+const BountiesBounty: FC<ComponentProps> = ({
   amount,
   assignees,
   creator,
@@ -33,14 +33,14 @@ const TasksTask: FC<ComponentProps> = ({
 
   const renderAssignees = () => {
     return assignedUsers.map(({avatar_url, login}) => (
-      <img alt={login} className="TasksTask__assignee" key={login} src={avatar_url} />
+      <img alt={login} className="BountiesBounty__assignee" key={login} src={avatar_url} />
     ));
   };
 
   const renderCreatorLink = () => {
     const url = `https://github.com/${creator.login}`;
     return (
-      <A className="TasksTask__issue-details-link" href={url}>
+      <A className="BountiesBounty__issue-details-link" href={url}>
         {creator.login}
       </A>
     );
@@ -49,7 +49,7 @@ const TasksTask: FC<ComponentProps> = ({
   const renderIssueLink = () => {
     const url = `https://github.com/thenewboston-developers/${repositoryName}/issues/${number}`;
     return (
-      <A className="TasksTask__issue-details-link" href={url}>
+      <A className="BountiesBounty__issue-details-link" href={url}>
         {`#${number}`}
       </A>
     );
@@ -58,42 +58,42 @@ const TasksTask: FC<ComponentProps> = ({
   const renderLabels = () => {
     return githubLabels
       .filter(({color}) => color.toLowerCase() !== AMOUNT_COLOR)
-      .map(({color, name}) => <Label className="TasksTask__Label" color={color} key={name} name={name} />);
+      .map(({color, name}) => <Label className="BountiesBounty__Label" color={color} key={name} name={name} />);
   };
 
   const renderRepositoryLink = () => {
     const url = `https://github.com/thenewboston-developers/${repositoryName}`;
     return (
-      <A className="TasksTask__issue-details-link" href={url}>
+      <A className="BountiesBounty__issue-details-link" href={url}>
         {repositoryName}
       </A>
     );
   };
 
   return (
-    <div className="TasksTask">
-      <div className="TasksTask__left">
-        <A className="TasksTask__title" href={htmlUrl}>
+    <div className="BountiesBounty">
+      <div className="BountiesBounty__left">
+        <A className="BountiesBounty__title" href={htmlUrl}>
           {title}
         </A>
-        <div className="TasksTask__issue-details">
+        <div className="BountiesBounty__issue-details">
           {renderRepositoryLink()} &middot; {renderIssueLink()} &middot; Opened {createdAt} by {renderCreatorLink()}
         </div>
         {renderLabels()}
       </div>
-      <div className="TasksTask__middle">
+      <div className="BountiesBounty__middle">
         {!!assignedUsers.length && (
           <>
-            <div className="TasksTask__assignees-title">Assignees</div>
+            <div className="BountiesBounty__assignees-title">Assignees</div>
             {renderAssignees()}
           </>
         )}
       </div>
-      <div className="TasksTask__right">
-        <TotalAmount amount={amount} className="TasksTask__TotalAmount" title="Reward" />
+      <div className="BountiesBounty__right">
+        <TotalAmount amount={amount} className="BountiesBounty__TotalAmount" title="Reward" />
       </div>
     </div>
   );
 };
 
-export default TasksTask;
+export default BountiesBounty;
diff --git a/src/containers/Tasks/index.tsx b/src/containers/Bounties/index.tsx
similarity index 85%
rename from src/containers/Tasks/index.tsx
rename to src/containers/Bounties/index.tsx
index 44b06cd..61d845b 100644
--- a/src/containers/Tasks/index.tsx
+++ b/src/containers/Bounties/index.tsx
@@ -19,13 +19,13 @@ import {fetchGithubIssues} from 'utils/github';
 import {GenericVoidFunction} from 'types/generic';
 import {Issue, Repository, RepositoryUrlParams} from 'types/github';
 import {REPOSITORY_FILTERS} from 'constants/github';
-import {SortBy} from 'types/tasks';
+import {SortBy} from 'types/bounties';
 import {sortByDateKey, sortByNumberKey} from 'utils/sort';
 
-import TasksTask from './TasksTask';
-import './Tasks.scss';
+import BountiesBounty from './BountiesBounty';
+import './Bounties.scss';
 
-const Tasks: FC = () => {
+const Bounties: FC = () => {
   const history = useHistory();
   const {repository} = useParams<RepositoryUrlParams>();
   const [dropdownOptions] = useState<string[]>([SortBy.none, SortBy.created, SortBy.reward]);
@@ -100,28 +100,28 @@ const Tasks: FC = () => {
   };
 
   const handleNavOptionClick = (option: Repository) => (): void => {
-    history.push(`/tasks/${option}`);
+    history.push(`/bounties/${option}`);
   };
 
   const renderFilters = () => (
     <>
       <FlatNavLinks handleOptionClick={handleNavOptionClick} options={REPOSITORY_FILTERS} selectedOption={repository} />
       <LabelFilter
-        className="Tasks__LabelFilter"
+        className="Bounties__LabelFilter"
         handleLabelClick={handleLabelClick}
         selectedLabelNames={selectedLabelNames}
       />
     </>
   );
 
-  const renderTasks = (): ReactNode => {
+  const renderBounties = (): ReactNode => {
     const filteredIssues = getFilteredIssues();
     if (error || !filteredIssues.length) return <EmptyPage />;
     return filteredIssues.map(
       ({amount, assignees, created_at, html_url, labels, number, repositoryName, title, user}) => {
         const createdStr = formatDistanceToNow(parseISO(created_at), {includeSeconds: true});
         return (
-          <TasksTask
+          <BountiesBounty
             amount={amount}
             assignees={assignees}
             createdAt={`${createdStr} ago`}
@@ -140,20 +140,20 @@ const Tasks: FC = () => {
 
   return (
     <>
-      <PageTitle ogDescription={`${repositoryFilter} Tasks`} title={`${repositoryFilter} Tasks`} />
-      <Container className="Tasks">
+      <PageTitle ogDescription={`${repositoryFilter} Bounties`} title={`${repositoryFilter} Bounties`} />
+      <Container className="Bounties">
         <BreadcrumbMenu
-          className="Tasks__BreadcrumbMenu"
+          className="Bounties__BreadcrumbMenu"
           menuItems={renderFilters()}
           pageName={repository}
-          sectionName="Tasks"
+          sectionName="Bounties"
         />
-        <div className="Tasks__left-menu">{renderFilters()}</div>
-        <div className="Tasks__task-list">
-          <div className="Tasks__sortby-container">
+        <div className="Bounties__left-menu">{renderFilters()}</div>
+        <div className="Bounties__bounty-list">
+          <div className="Bounties__sortby-container">
             {sortByOption !== SortBy.none && (
               <Icon
-                className="Tasks__sortby-icon"
+                className="Bounties__sortby-icon"
                 icon={sortByOrder === 'asc' ? IconType.sortAscending : IconType.sortDescending}
                 onClick={handleSorting}
               />
@@ -165,11 +165,11 @@ const Tasks: FC = () => {
             />
           </div>
           {loading ? (
-            <div className="Tasks__loader-container">
+            <div className="Bounties__loader-container">
               <Loader />
             </div>
           ) : (
-            renderTasks()
+            renderBounties()
           )}
         </div>
       </Container>
@@ -177,4 +177,4 @@ const Tasks: FC = () => {
   );
 };
 
-export default Tasks;
+export default Bounties;
diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx
index 392f376..833b26d 100644
--- a/src/containers/Footer/index.tsx
+++ b/src/containers/Footer/index.tsx
@@ -18,8 +18,8 @@ const navLists = [
     header: 'Get Started',
     links: [
       {
-        title: 'Tasks',
-        url: '/tasks',
+        title: 'Bounties',
+        url: '/bounties',
       },
       {
         title: 'Projects',
diff --git a/src/containers/Home/GetStarted/index.tsx b/src/containers/Home/GetStarted/index.tsx
index c66bd9b..2b1c215 100644
--- a/src/containers/Home/GetStarted/index.tsx
+++ b/src/containers/Home/GetStarted/index.tsx
@@ -36,10 +36,10 @@ const getStartedDetails = [
     to: '/developer/projects',
   },
   {
-    description: 'Work on bug fixes, graphics, and other small tasks to earn coins.',
+    description: 'Work on bug fixes, graphics, and other small bounties to earn coins.',
     icon: <img alt="Complete Bounties" className="GetStarted__icon" src={CompleteBountiesIcon} />,
     title: 'Complete Bounties',
-    to: '/tasks/All',
+    to: '/bounties/All',
   },
   {
     description: 'Apply to be part of the core team.',
diff --git a/src/containers/Home/HomeHero/index.tsx b/src/containers/Home/HomeHero/index.tsx
index d6c64b1..36c2f43 100644
--- a/src/containers/Home/HomeHero/index.tsx
+++ b/src/containers/Home/HomeHero/index.tsx
@@ -42,7 +42,7 @@ const HomeHero: FC = () => {
               <Link className="HomeHero__buttons--learn-more" tabIndex={-1} to="/developer/whitepaper">
                 <Button>Learn More</Button>
               </Link>
-              <Link className="HomeHero__buttons--earn-coins" tabIndex={-1} to="/tasks/All">
+              <Link className="HomeHero__buttons--earn-coins" tabIndex={-1} to="/bounties/All">
                 <Button>Earn Coins</Button>
               </Link>
             </div>
diff --git a/src/containers/Home/HomeValues/index.tsx b/src/containers/Home/HomeValues/index.tsx
index 91ea16b..ee4353a 100644
--- a/src/containers/Home/HomeValues/index.tsx
+++ b/src/containers/Home/HomeValues/index.tsx
@@ -44,7 +44,7 @@ const HomeValues: FC = () => {
             <Link className="HomeValues__main-buttons--create" tabIndex={-1} to="/developer/projects">
               <Button>Create Projects</Button>
             </Link>
-            <Link className="HomeValues__main-buttons--earn" tabIndex={-1} to="/tasks/All">
+            <Link className="HomeValues__main-buttons--earn" tabIndex={-1} to="/bounties/All">
               <Button>Complete Bounties</Button>
             </Link>
           </div>
diff --git a/src/containers/Profile/TasksCompleted/TasksCompleted.scss b/src/containers/Profile/BountiesCompleted/BountiesCompleted.scss
similarity index 91%
rename from src/containers/Profile/TasksCompleted/TasksCompleted.scss
rename to src/containers/Profile/BountiesCompleted/BountiesCompleted.scss
index f82805d..29d85af 100644
--- a/src/containers/Profile/TasksCompleted/TasksCompleted.scss
+++ b/src/containers/Profile/BountiesCompleted/BountiesCompleted.scss
@@ -1,12 +1,12 @@
-.TasksCompleted {
+.BountiesCompleted {
   padding: 10px;
 
-  &__ContributorTasks {
+  &__ContributorBounties {
     border-left: none;
     flex: 1;
     padding: 0 10px 0 10px;
 
-    // Recent Task (name of task)
+    // Recent Bounty (name of bounty)
     td:nth-child(1),
     th:nth-child(1) {
       max-width: 300px;
@@ -36,7 +36,7 @@
     }
 
     @media (max-width: 1366px) {
-      // Recent Task (name of task)
+      // Recent Bounty (name of bounty)
       td:nth-child(1),
       th:nth-child(1) {
         max-width: 250px;
@@ -45,7 +45,7 @@
     }
 
     @media (max-width: 1280px) {
-      // Recent Task (name of task)
+      // Recent Bounty (name of bounty)
       td:nth-child(1),
       th:nth-child(1) {
         max-width: 200px;
@@ -54,7 +54,7 @@
     }
 
     @media (max-width: 1024px) {
-      // Recent Task (name of task)
+      // Recent Bounty (name of bounty)
       td:nth-child(1),
       th:nth-child(1) {
         max-width: 150px;
@@ -119,7 +119,7 @@
     margin-bottom: 40px;
   }
 
-  &__tasks {
+  &__bounties {
     display: flex;
     justify-content: space-between;
 
@@ -150,7 +150,7 @@
     line-height: 1;
   }
 
-  &__TotalTasks {
+  &__TotalBounties {
     align-items: flex-start;
     display: flex;
     flex-basis: 100px;
@@ -176,7 +176,7 @@
   }
 
   @media (max-width: 480px) {
-    &__tasks {
+    &__bounties {
       flex-direction: column;
     }
   }
diff --git a/src/containers/Profile/BountiesCompleted/index.tsx b/src/containers/Profile/BountiesCompleted/index.tsx
new file mode 100644
index 0000000..74070bd
--- /dev/null
+++ b/src/containers/Profile/BountiesCompleted/index.tsx
@@ -0,0 +1,64 @@
+import React, {FC} from 'react';
+import clsx from 'clsx';
+
+import {ContributorBounties, EmptyPage, TotalAmount} from 'components';
+import {useWindowDimensions} from 'hooks';
+import {Bounty} from 'types/github';
+import {getBounties} from 'utils/data';
+
+import './BountiesCompleted.scss';
+
+interface ComponentProps {
+  github_username: string;
+}
+
+const BountiesCompleted: FC<ComponentProps> = ({github_username}) => {
+  const {width} = useWindowDimensions();
+
+  const getCompletedBounties = () => {
+    const bounties = getBounties();
+    return bounties[github_username];
+  };
+
+  const getTotalEarnings = (bounties: Bounty[]) => {
+    const amounts = bounties.map(({amount_paid}: Bounty) => parseInt(amount_paid, 10));
+    return amounts.reduce((a, b) => a + b, 0);
+  };
+
+  const completedBounties = getCompletedBounties();
+  const totalEarnings = completedBounties ? getTotalEarnings(completedBounties) : 0;
+  const totalBounties = completedBounties ? completedBounties.length : 0;
+
+  const renderMobileBounties = () => {
+    return (
+      <>
+        <div className="BountiesCompleted__totals">
+          <TotalAmount amount={totalBounties} className="BountiesCompleted__TotalBounties" title="Total Bounties" />
+          <TotalAmount amount={totalEarnings} className="BountiesCompleted__TotalEarnings" title="Total Earnings" />
+        </div>
+        <ContributorBounties className="BountiesCompleted__ContributorBounties" bounties={completedBounties} />
+      </>
+    );
+  };
+
+  const renderBounties = () => {
+    return (
+      <>
+        <ContributorBounties className="BountiesCompleted__ContributorBounties" bounties={completedBounties} />
+        <TotalAmount amount={totalEarnings} className="TotalEarnings" title="Total Earnings" />
+      </>
+    );
+  };
+
+  return (
+    <div className="BountiesCompleted">
+      <h2 className="BountiesCompleted__title">Bounties Completed</h2>
+      <div className={clsx('BountiesCompleted__bounties', {'BountiesCompleted__bounties--empty': totalBounties <= 0})}>
+        {totalBounties > 0 && (width > 480 ? renderBounties() : renderMobileBounties())}
+        {totalBounties <= 0 && <EmptyPage className="BountiesCompleted__empty-page" />}
+      </div>
+    </div>
+  );
+};
+
+export default BountiesCompleted;
diff --git a/src/containers/Profile/TasksCompleted/index.tsx b/src/containers/Profile/TasksCompleted/index.tsx
deleted file mode 100644
index c1c5854..0000000
--- a/src/containers/Profile/TasksCompleted/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, {FC} from 'react';
-import clsx from 'clsx';
-
-import {ContributorTasks, EmptyPage, TotalAmount} from 'components';
-import {useWindowDimensions} from 'hooks';
-import {Task} from 'types/github';
-import {getTasks} from 'utils/data';
-
-import './TasksCompleted.scss';
-
-interface ComponentProps {
-  github_username: string;
-}
-
-const TasksCompleted: FC<ComponentProps> = ({github_username}) => {
-  const {width} = useWindowDimensions();
-
-  const getCompletedTasks = () => {
-    const tasks = getTasks();
-    return tasks[github_username];
-  };
-
-  const getTotalEarnings = (tasks: Task[]) => {
-    const amounts = tasks.map(({amount_paid}: Task) => parseInt(amount_paid, 10));
-    return amounts.reduce((a, b) => a + b, 0);
-  };
-
-  const completedTasks = getCompletedTasks();
-  const totalEarnings = completedTasks ? getTotalEarnings(completedTasks) : 0;
-  const totalTasks = completedTasks ? completedTasks.length : 0;
-
-  const renderMobileTasks = () => {
-    return (
-      <>
-        <div className="TasksCompleted__totals">
-          <TotalAmount amount={totalTasks} className="TasksCompleted__TotalTasks" title="Total Tasks" />
-          <TotalAmount amount={totalEarnings} className="TasksCompleted__TotalEarnings" title="Total Earnings" />
-        </div>
-        <ContributorTasks className="TasksCompleted__ContributorTasks" tasks={completedTasks} />
-      </>
-    );
-  };
-
-  const renderTasks = () => {
-    return (
-      <>
-        <ContributorTasks className="TasksCompleted__ContributorTasks" tasks={completedTasks} />
-        <TotalAmount amount={totalEarnings} className="TotalEarnings" title="Total Earnings" />
-      </>
-    );
-  };
-
-  return (
-    <div className="TasksCompleted">
-      <h2 className="TasksCompleted__title">Tasks Completed</h2>
-      <div className={clsx('TasksCompleted__tasks', {'TasksCompleted__tasks--empty': totalTasks <= 0})}>
-        {totalTasks > 0 && (width > 480 ? renderTasks() : renderMobileTasks())}
-        {totalTasks <= 0 && <EmptyPage className="TasksCompleted__empty-page" />}
-      </div>
-    </div>
-  );
-};
-
-export default TasksCompleted;
diff --git a/src/containers/Profile/index.tsx b/src/containers/Profile/index.tsx
index 561ded7..afe86b6 100644
--- a/src/containers/Profile/index.tsx
+++ b/src/containers/Profile/index.tsx
@@ -6,8 +6,8 @@ import {Loader} from 'components';
 import {getUser} from 'dispatchers/users/user';
 import {selectUsers} from 'selectors/state';
 import {AppDispatch} from 'types/store';
+import BountiesCompleted from './BountiesCompleted';
 import ProfileInfo from './ProfileInfo';
-import TasksCompleted from './TasksCompleted';
 
 import './Profile.scss';
 
@@ -49,7 +49,7 @@ const Profile: FC = () => {
     if (!user) return null;
     return (
       <div className="Profile__right-section">
-        <TasksCompleted github_username={user.github_username} />
+        <BountiesCompleted github_username={user.github_username} />
       </div>
     );
   };
diff --git a/src/containers/TopNav/TopNavDesktopItems/index.tsx b/src/containers/TopNav/TopNavDesktopItems/index.tsx
index 41d89ec..1a573b7 100644
--- a/src/containers/TopNav/TopNavDesktopItems/index.tsx
+++ b/src/containers/TopNav/TopNavDesktopItems/index.tsx
@@ -59,11 +59,11 @@ const communityPopoverItems: TopNavPopoverItemType[] = [
 
 const getStartedPopoverItems: TopNavPopoverItemType[] = [
   {
-    description: 'Pick up tasks within GitHub and earn coins',
+    description: 'Pick up bounties within GitHub and earn coins',
     iconSize: 28,
     iconType: IconType.github,
-    title: 'Tasks',
-    to: '/tasks',
+    title: 'Bounties',
+    to: '/bounties',
   },
   {
     description: 'Propose ideas you want built',
diff --git a/src/containers/TopNav/TopNavMobileMenu/index.tsx b/src/containers/TopNav/TopNavMobileMenu/index.tsx
index 0892008..46f4131 100644
--- a/src/containers/TopNav/TopNavMobileMenu/index.tsx
+++ b/src/containers/TopNav/TopNavMobileMenu/index.tsx
@@ -54,7 +54,7 @@ const TopNavMobileMenu: FC<ComponentProps> = ({closeMenu, menuOpen, smallDevice,
               'getStarted',
               'Get Started',
               <>
-                {renderMobileLink('Tasks', '/tasks')}
+                {renderMobileLink('Bounties', '/bounties')}
                 {renderMobileLink('Projects', '/developer/projects')}
               </>,
             )}
diff --git a/src/data/tasks.json b/src/data/bounties.json
similarity index 100%
rename from src/data/tasks.json
rename to src/data/bounties.json
diff --git a/src/types/tasks.ts b/src/types/bounties.ts
similarity index 100%
rename from src/types/tasks.ts
rename to src/types/bounties.ts
diff --git a/src/types/github.ts b/src/types/github.ts
index 15cb05c..7969e6e 100644
--- a/src/types/github.ts
+++ b/src/types/github.ts
@@ -27,11 +27,11 @@ export interface Contributor {
   github_username: string;
 }
 
-export interface ContributorWithTasks {
+export interface ContributorWithBounties {
   account_number: string;
   github_avatar_url: string;
   github_username: string;
-  tasks: Task[];
+  Bounties: Bounty[];
 }
 
 export interface GitHubLabel {
@@ -207,7 +207,7 @@ export type FetchGithubReleasesParams = {
   per_page?: number;
 };
 
-interface BaseTask {
+interface BaseBounty {
   amount_paid: string;
   completed_by: string;
   issue_id: string;
@@ -216,15 +216,15 @@ interface BaseTask {
   title: string;
 }
 
-export interface RawTask extends BaseTask {
+export interface RawBounty extends BaseBounty {
   completed_date: string;
 }
 
-export interface Task extends BaseTask {
+export interface Bounty extends BaseBounty {
   completed_date: Date;
 }
 
-export type TaskDict = Dict<Task[]>;
+export type BountyDict = Dict<Bounty[]>;
 
 export type Milestone = {
   description: string;
diff --git a/src/utils/data.ts b/src/utils/data.ts
index f7d7c8b..72fdcf4 100644
--- a/src/utils/data.ts
+++ b/src/utils/data.ts
@@ -1,22 +1,22 @@
 import parse from 'date-fns/parse';
-import {RawTask, Task, TaskDict} from 'types/github';
+import {Bounty, BountyDict, RawBounty} from 'types/github';
 import {Opening} from 'types/openings';
 
+import bounties from 'data/bounties.json';
 import openings from 'data/openings.json';
-import tasks from 'data/tasks.json';
 
 export const getOpenings = (): Opening[] => {
   return openings as Opening[];
 };
 
-export const getTasks = (): TaskDict => {
+export const getBounties = (): BountyDict => {
   const results: any = {};
 
-  Object.entries(tasks).forEach(([githubUsername, taskList]) => {
-    results[githubUsername] = (taskList as RawTask[]).map(
-      (task: RawTask): Task => ({
-        ...task,
-        completed_date: parse(task.completed_date, 'L/d/yy', new Date()),
+  Object.entries(bounties).forEach(([githubUsername, bountyList]) => {
+    results[githubUsername] = (bountyList as RawBounty[]).map(
+      (bounty: RawBounty): Bounty => ({
+        ...bounty,
+        completed_date: parse(bounty.completed_date, 'L/d/yy', new Date()),
       }),
     );
   });


Test patch:
diff --git a/src/components/ContributorBounties/ContributorBounties.test.tsx b/src/components/ContributorBounties/ContributorBounties.test.tsx
new file mode 100644
index 0000000..4ee0c32
--- /dev/null
+++ b/src/components/ContributorBounties/ContributorBounties.test.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import {ClassName} from 'types/generic';
+import ContributorBounties, {ContributorBountiesProps} from '.';
+
+const props: ContributorBountiesProps & ClassName = {
+  bounties: [
+    {
+      amount_paid: '2800',
+      completed_by: 'contributor 1',
+      completed_date: new Date('2021/02/20'),
+      issue_id: '111',
+      pr_id: '222',
+      repository: 'Kotlin-SDK',
+      title: 'Software engineer',
+    },
+    {
+      amount_paid: '2800',
+      completed_by: 'contributor 2',
+      completed_date: new Date('2021/02/24'),
+      issue_id: '333',
+      pr_id: '444',
+      repository: 'Website',
+      title: 'Front End Developer',
+    },
+  ],
+  className: 'test',
+};
+
+const testIdBounty = 'ContributorBounties';
+const testIdRow = 'ContributorBounties__row';
+const testIdTitle = 'ContributorBounties__bounty-title';
+const testIdLink = 'A';
+const testIdRepo = 'ContributorBounties__repository';
+const testIdDate = 'ContributorBounties__date-completed';
+const testIdAmount = 'ContributorBounties__amount';
+
+describe('ContributorBounties', () => {
+  it('renders without crashing', () => {
+    render(<ContributorBounties {...props} />);
+
+    expect(screen.getByTestId(testIdBounty)).toBeTruthy();
+  });
+
+  it('renders all bounties', () => {
+    render(<ContributorBounties {...props} />);
+    const bounties = screen.getAllByTestId(testIdRow);
+
+    expect(bounties.length).toBe(2);
+  });
+
+  it('renders with passed in className', () => {
+    render(<ContributorBounties {...props} />);
+    const bountyComp = screen.getByTestId(testIdBounty);
+
+    expect(bountyComp).toHaveClass('test');
+  });
+
+  it('renders rows with title', () => {
+    render(<ContributorBounties {...props} />);
+    const bounties = screen.getAllByTestId(testIdTitle);
+
+    expect(bounties[0]).toHaveTextContent('Software engineer');
+    expect(bounties[1]).toHaveTextContent('Front End Developer');
+  });
+
+  it('renders rows with valid github issue link', () => {
+    render(<ContributorBounties {...props} />);
+    const bounties = screen.getAllByTestId(testIdLink);
+
+    const validHref = bounties.every((bounty, i) => {
+      const propBounty = props.bounties[i];
+      const href = `https://github.com/thenewboston-developers/${propBounty.repository}/issues/${propBounty.issue_id}`;
+
+      return bounty.getAttribute('href') === href;
+    });
+
+    expect(validHref).toBeTruthy();
+  });
+
+  it('renders rows with valid github repository repository', () => {
+    render(<ContributorBounties {...props} />);
+    const bounties = screen.getAllByTestId(testIdRepo);
+
+    expect(bounties[0]).toHaveTextContent('Kotlin-SDK');
+    expect(bounties[1]).toHaveTextContent('Website');
+  });
+
+  it('renders rows with date completed', () => {
+    render(<ContributorBounties {...props} />);
+    const bounties = screen.getAllByTestId(testIdDate);
+
+    expect(bounties[0]).toHaveTextContent('2/20/21');
+    expect(bounties[1]).toHaveTextContent('2/24/21');
+  });
+
+  it('renders rows with valid amount', () => {
+    render(<ContributorBounties {...props} />);
+    const bounties = screen.getAllByTestId(testIdAmount);
+
+    expect(bounties[0]).toHaveTextContent('+ 2,800');
+    expect(bounties[1]).toHaveTextContent('+ 2,800');
+  });
+});
diff --git a/src/components/ContributorTasks/ContributorTasks.test.tsx b/src/components/ContributorTasks/ContributorTasks.test.tsx
deleted file mode 100644
index a8821f4..0000000
--- a/src/components/ContributorTasks/ContributorTasks.test.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import {ClassName} from 'types/generic';
-import ContributorTasks, {ContributorTasksProps} from '.';
-
-const props: ContributorTasksProps & ClassName = {
-  className: 'test',
-  tasks: [
-    {
-      amount_paid: '2800',
-      completed_by: 'contributor 1',
-      completed_date: new Date('2021/02/20'),
-      issue_id: '111',
-      pr_id: '222',
-      repository: 'Kotlin-SDK',
-      title: 'Software engineer',
-    },
-    {
-      amount_paid: '2800',
-      completed_by: 'contributor 2',
-      completed_date: new Date('2021/02/24'),
-      issue_id: '333',
-      pr_id: '444',
-      repository: 'Website',
-      title: 'Front End Developer',
-    },
-  ],
-};
-
-const testIdTask = 'ContributorTasks';
-const testIdRow = 'ContributorTasks__row';
-const testIdTitle = 'ContributorTasks__task-title';
-const testIdLink = 'A';
-const testIdRepo = 'ContributorTasks__repository';
-const testIdDate = 'ContributorTasks__date-completed';
-const testIdAmount = 'ContributorTasks__amount';
-
-describe('ContributorTasks', () => {
-  it('renders without crashing', () => {
-    render(<ContributorTasks {...props} />);
-
-    expect(screen.getByTestId(testIdTask)).toBeTruthy();
-  });
-
-  it('renders all tasks', () => {
-    render(<ContributorTasks {...props} />);
-    const tasks = screen.getAllByTestId(testIdRow);
-
-    expect(tasks.length).toBe(2);
-  });
-
-  it('renders with passed in className', () => {
-    render(<ContributorTasks {...props} />);
-    const taskComp = screen.getByTestId(testIdTask);
-
-    expect(taskComp).toHaveClass('test');
-  });
-
-  it('renders rows with title', () => {
-    render(<ContributorTasks {...props} />);
-    const tasks = screen.getAllByTestId(testIdTitle);
-
-    expect(tasks[0]).toHaveTextContent('Software engineer');
-    expect(tasks[1]).toHaveTextContent('Front End Developer');
-  });
-
-  it('renders rows with valid github issue link', () => {
-    render(<ContributorTasks {...props} />);
-    const tasks = screen.getAllByTestId(testIdLink);
-
-    const validHref = tasks.every((task, i) => {
-      const propTask = props.tasks[i];
-      const href = `https://github.com/thenewboston-developers/${propTask.repository}/issues/${propTask.issue_id}`;
-
-      return task.getAttribute('href') === href;
-    });
-
-    expect(validHref).toBeTruthy();
-  });
-
-  it('renders rows with valid github repository repository', () => {
-    render(<ContributorTasks {...props} />);
-    const tasks = screen.getAllByTestId(testIdRepo);
-
-    expect(tasks[0]).toHaveTextContent('Kotlin-SDK');
-    expect(tasks[1]).toHaveTextContent('Website');
-  });
-
-  it('renders rows with date completed', () => {
-    render(<ContributorTasks {...props} />);
-    const tasks = screen.getAllByTestId(testIdDate);
-
-    expect(tasks[0]).toHaveTextContent('2/20/21');
-    expect(tasks[1]).toHaveTextContent('2/24/21');
-  });
-
-  it('renders rows with valid amount', () => {
-    render(<ContributorTasks {...props} />);
-    const tasks = screen.getAllByTestId(testIdAmount);
-
-    expect(tasks[0]).toHaveTextContent('+ 2,800');
-    expect(tasks[1]).toHaveTextContent('+ 2,800');
-  });
-});