Staging

.github/workflows/deploy-mainnet-prod.yml

@@ -0,0 +1,12 @@
+name: Deploy app to Mainnet (Production)
+on:
+  push:
+    branches: [main]
+jobs:
+  deploy-mainnet:
+    uses: wpdas/alem/.github/workflows/deploy.yml@main
+    with:
+      signer-account-address: potlock.near
+      signer-public-key: ed25519:89GJgK9CXwaGXD4Rv3BKybqwGifDa8Cdap1M5zc3w4BY
+    secrets:
+      SIGNER_PRIVATE_KEY: ${{ secrets.SIGNER_PRIVATE_KEY }}

README.md

@@ -1,25 +1,31 @@
-## PotLock - Using Além [WIP]
+## PotLock - BOS App
 
-PotLock application refactoring using Além.
+PotLock application. Project built using [Além](https://alem.dev/).
 
-[Access the staging app here.](https://app.potlock.org/staging.potlock.near/widget/IndexLoader)
+You can access Potlock using one of the environments below:
 
-### How to use
+- [Production](https://app.potlock.org/)
+- [Staging](https://app.potlock.org/staging.potlock.near/widget/IndexLoader)
 
-Create the `.env` file with the following content:
+### Getting Started
+
+1. Install packagesCreate the `.env` file with the following content:
 
 ```sh
 NODE_ENV=development
 ```
 
-Install dependencies
+2. Install packagesInstall dependencies
 
 ```sh
 yarn install
 ```
 
-Run the app
+3. Start development
 
 ```sh
 yarn start
+
+# This command below won't open a new browser tab
+# yarn start -no-open
 ```

package.json

@@ -11,7 +11,7 @@
     "deploy:testnet": "npm run build; alem deploy --network testnet"
   },
   "dependencies": {
-    "alem": "1.0.0-beta.29"
+    "alem": "1.0.0-beta.35"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

src/SDK/lists.js

@@ -21,6 +21,11 @@ const ListsSDK = {
       list_id: listId || potlockRegistryListId,
     });
   },
+  asyncGetRegistrations: (listId) => {
+    return Near.asyncView(_listContractId, "get_registrations_for_list", {
+      list_id: listId || potlockRegistryListId,
+    });
+  },
   getRegistration: (listId, registrantId) => {
     const registrations = Near.view(_listContractId, "get_registrations_for_registrant", {
       registrant_id: registrantId,

src/assets/svgs/CheckIcon.tsx

@@ -0,0 +1,10 @@
+const CheckIcon = (props: any) => (
+  <svg {...props} viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.8002 10.9L1.6002 6.69999L0.200195 8.09999L5.8002 13.7L17.8002 1.69999L16.4002 0.299988L5.8002 10.9Z"
+      fill="#151A23"
+    />
+  </svg>
+);
+
+export default CheckIcon;

src/assets/svgs/ReferrerIcon.tsx

@@ -0,0 +1,14 @@
+const ReferrerIcon = (props: any) => (
+  <svg {...props} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.375 9.5625C14.6925 7.455 16.875 5.4825 16.875 3.7875C16.875 2.4 15.7875 1.3125 14.4 1.3125C13.62 1.3125 12.8625 1.68 12.375 2.25C11.88 1.68 11.13 1.3125 10.35 1.3125C8.9625 1.3125 7.875 2.4 7.875 3.7875C7.875 5.4825 10.0575 7.455 12.375 9.5625ZM10.35 2.8125C10.68 2.8125 11.0175 2.97 11.235 3.225L12.375 4.5675L13.515 3.225C13.7325 2.97 14.07 2.8125 14.4 2.8125C14.955 2.8125 15.375 3.2325 15.375 3.7875C15.375 4.6275 13.845 6.165 12.375 7.53C10.905 6.165 9.375 4.62 9.375 3.7875C9.375 3.2325 9.795 2.8125 10.35 2.8125Z"
+      fill="#7B7B7B"
+    />
+    <path
+      d="M14.625 11.8125H13.125C13.125 10.9125 12.5625 10.1025 11.7225 9.7875L7.1025 8.0625H1.125V16.3125H5.625V15.2325L10.875 16.6875L16.875 14.8125V14.0625C16.875 12.8175 15.87 11.8125 14.625 11.8125ZM2.625 14.8125V9.5625H4.125V14.8125H2.625ZM10.8525 15.12L5.625 13.6725V9.5625H6.8325L11.1975 11.19C11.4525 11.2875 11.625 11.535 11.625 11.8125C11.625 11.8125 10.1325 11.775 9.9 11.7L8.115 11.1075L7.6425 12.5325L9.4275 13.125C9.81 13.2525 10.2075 13.32 10.6125 13.32H14.625C14.9175 13.32 15.18 13.4925 15.3 13.74L10.8525 15.12Z"
+      fill="#7B7B7B"
+    />
+  </svg>
+);
+
+export default ReferrerIcon;

src/components/Banner/styles.ts

@@ -19,6 +19,7 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
   .text {
     font-size: 22px;
     font-weight: 500;

src/components/Hero/Hero.tsx

@@ -17,10 +17,10 @@ const Hero = ({ projectsData }: { projectsData: any }) => {
   const [donateTo, setDonateTo] = useState("");
 
   const getRandomProject = () => {
-    const allProjects = projectsData.allProjects;
-    if (allProjects) {
-      const randomIndex = Math.floor(Math.random() * allProjects.length);
-      return allProjects[randomIndex]?.registrant_id;
+    const approvedProjects = projectsData.approvedProjects;
+    if (approvedProjects) {
+      const randomIndex = Math.floor(Math.random() * approvedProjects.length);
+      return approvedProjects[randomIndex]?.registrant_id;
     }
   };
 

src/components/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
+import { useMemo } from "alem";
 import { Container } from "./styles";
-import { useMemo } from "react";
 
 type Props = {
   onPageChange: (page: number) => void;
@@ -112,6 +112,7 @@ const Pagination = (props: Props) => {
 
           return (
             <li
+              key={pageNumber}
               className={`pagination-item ${pageNumber === currentPage ? "selected" : ""}`}
               onClick={() => onPageChange(pageNumber)}
             >

src/components/mob.near/ProfileImage.tsx

@@ -16,40 +16,26 @@ type Props = {
   thumbnail?: boolean;
   tooltip?: boolean;
   fast?: boolean;
+  fallbackUrl?: string;
 };
 
-const ProfileImage = ({
-  profile: _profile,
-  accountId: _accountId,
-  style: _style,
-  imageClassName: _imageClassName,
-  image: _image,
-  title: _title,
-  name: _name,
-  className: _className,
-  imageStyle: _imageStyle,
-  imageWrapperStyle: _imageWrapperStyle,
-  thumbnail: _thumbnail,
-  tooltip: _tooltip,
-  fast: _fast,
-}: Props) => {
+const ProfileImage = (profileImgProps: Props) => {
   // * taken from mob.near/widget/ProfileImage with minor tweaks for expanded composability *
-
-  // const {
-  //   profile: _profile,
-  //   accountId: _accountId,
-  //   style: _style,
-  //   imageClassName: _imageClassName,
-  //   image: _image,
-  //   title: _title,
-  //   name: _name,
-  //   className: _className,
-  //   imageStyle: _imageStyle,
-  //   imageWrapperStyle: _imageWrapperStyle,
-  //   thumbnail: _thumbnail,
-  //   tooltip: _tooltip,
-  //   fast: _fast,
-  // } = props;
+  const {
+    profile: _profile,
+    accountId: _accountId,
+    style: _style,
+    imageClassName: _imageClassName,
+    image: _image,
+    title: _title,
+    name: _name,
+    className: _className,
+    imageStyle: _imageStyle,
+    imageWrapperStyle: _imageWrapperStyle,
+    thumbnail: _thumbnail,
+    tooltip: _tooltip,
+    fast: _fast,
+  } = profileImgProps;
 
   const accountId = _accountId ?? context.accountId;
   const className = _className ?? "profile-image d-inline-block";
@@ -74,7 +60,7 @@ const ProfileImage = ({
       accountId,
     });
   }
-  const fallbackUrl = "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm";
+  const fallbackUrl = props.fallbackUrl;
 
   const imageProps = {
     image,

src/constants.ts

@@ -2,7 +2,7 @@ import { Big, getAlemEnvironment } from "alem";
 import styled from "styled-components";
 
 const constants = {
-  nadabotContractId: getAlemEnvironment() === "staging" ? "v1.staging.nadabot.near" : "v1.nadabot.near",
+  NADABOT_CONTRACT_ID: getAlemEnvironment() === "staging" ? "v1.staging.nadabot.near" : "v1.nadabot.near",
   ownerId: "potlock.near",
   PROJECT_STATUSES: ["Pending", "Approved", "Rejected", "Graylisted", "Blacklisted"],
   DONATION_CONTRACT_ID: "donate.potlock.near",

src/modals/ModalDonation/Banners/VerifyInfo.tsx

@@ -0,0 +1,22 @@
+import { VerifyInfoWrapper } from "./styles";
+
+const VerifyInfo = () => (
+  <VerifyInfoWrapper>
+    <div className="icon">
+      <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M0.75 15.125H17.25L9 0.875L0.75 15.125ZM9.75 12.875H8.25V11.375H9.75V12.875ZM9.75 9.875H8.25V6.875H9.75V9.875Z"
+          fill="#ECC113"
+        />
+      </svg>
+    </div>
+    <div className="text">
+      Your contribution won't be matched unless verified as human before the matching round ends.
+    </div>
+    <a href="https://app.nada.bot/" target="_blank">
+      Verify you’re human
+    </a>
+  </VerifyInfoWrapper>
+);
+
+export default VerifyInfo;

src/modals/ModalDonation/Banners/styles.ts

@@ -57,3 +57,43 @@ export const NadabotBanner = styled.div`
     }
   }
 `;
+
+export const VerifyInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 1rem;
+  border-radius: 6px;
+  border: 1px solid #ecc113;
+  background: #fbf9c6;
+  box-shadow: 0px 2px 1px 1px rgba(255, 255, 255, 0.8) inset, 0px -2px 4px 0px rgba(15, 15, 15, 0.15) inset;
+  font-size: 14px;
+  color: #3f2209;
+  margin-top: 1.5rem;
+  .icon {
+    width: 17px;
+    display: flex;
+    height: fit-content;
+    svg {
+      width: 100%;
+    }
+  }
+  .text {
+    flex: 1;
+    line-height: 150%;
+  }
+  a {
+    font-weight: 500;
+    color: #dd3345;
+    :hover {
+      text-decoration: none;
+    }
+  }
+  @media only screen and (max-width: 480px) {
+    flex-wrap: wrap;
+    a {
+      width: 100%;
+      text-align: center;
+    }
+  }
+`;

src/modals/ModalDonation/ConfirmDirect/ConfirmDirect.tsx

@@ -10,6 +10,7 @@ import Button from "@app/components/Button";
 import NearIcon from "@app/assets/svgs/near-icon";
 import BreakdownSummary from "@app/components/Cart/BreakdownSummary/BreakdownSummary";
 import TextArea from "@app/components/Inputs/TextArea/TextArea";
+import hrefWithParams from "@app/utils/hrefWithParams";
 
 const ConfirmDirect = ({
   selectedDenomination,
@@ -298,7 +299,7 @@ const ConfirmDirect = ({
 
           <div className="label">Remove {protocolFeeBasisPoints / 100 || "-"}% protocol fee</div>
           <a
-            href={`https://near.social/mob.near/widget/ProfilePage?accountId=${protocolFeeRecipientAccount}`}
+            href={hrefWithParams(`?tab=profile&accountId=${protocolFeeRecipientAccount}`)}
             className="address"
             target="_blank"
           >
@@ -318,11 +319,7 @@ const ConfirmDirect = ({
             />
 
             <div className="label"> Remove {chefFeeBasisPoints / 100 || "-"}% chef fee</div>
-            <a
-              href={`https://near.social/mob.near/widget/ProfilePage?accountId=${potDetail?.chef}`}
-              className="address"
-              target="_blank"
-            >
+            <a href={hrefWithParams(`?tab=profile&accountId=${potDetail?.chef}`)} className="address" target="_blank">
               <ProfileImg accountId={potDetail?.chef} />
 
               {potDetail?.chef}

src/modals/ModalDonation/ConfirmPot/ConfirmPot.tsx

@@ -7,6 +7,7 @@ import nearToUsd from "@app/utils/nearToUsd";
 import _address from "@app/utils/_address";
 import BreakdownSummary from "@app/components/Cart/BreakdownSummary/BreakdownSummary";
 import Button from "@app/components/Button";
+import hrefWithParams from "@app/utils/hrefWithParams";
 import {
   Amout,
   ButtonWrapper,
@@ -31,7 +32,6 @@ const ConfirmPot = ({
   openDonationSuccessModal,
   selectedProjects,
   donationType,
-  hrefWithParams,
   toggleAmount,
 }: any) => {
   const ProfileImg = ({ accountId, profile }: any) => (
@@ -67,7 +67,7 @@ const ConfirmPot = ({
           for (const donation of alldonations) {
             const { project_id, donated_at_ms, donated_at } = donation;
             if (projectIds.includes(project_id) && (donated_at_ms || donated_at) > afterTs) {
-              donations[project_id] = donation;
+              donations[project_id] = { ...donation, potId };
             }
           }
           if (Object.keys(donations).length === projectIds.length) {
@@ -235,7 +235,7 @@ const ConfirmPot = ({
 
             <div className="label">Remove {protocolFeeBasisPoints / 100 || "-"}% protocol fee</div>
             <a
-              href={`https://near.social/mob.near/widget/ProfilePage?accountId=${protocolFeeRecipientAccount}`}
+              href={hrefWithParams(`?tab=profile&accountId=${protocolFeeRecipientAccount}`)}
               className="address"
               target="_blank"
             >
@@ -255,11 +255,7 @@ const ConfirmPot = ({
               />
 
               <div className="label"> Remove {chefFeeBasisPoints / 100 || "-"}% chef fee</div>
-              <a
-                href={`https://near.social/mob.near/widget/ProfilePage?accountId=${potDetail?.chef}`}
-                className="address"
-                target="_blank"
-              >
+              <a href={hrefWithParams(`?tab=profile&accountId=${potDetail?.chef}`)} className="address" target="_blank">
                 <ProfileImg accountId={potDetail?.chef} />
 
                 {potDetail?.chef}