Merge pull request #170 from argoapp-live/dev

Merging for release V2.1

package.json

@@ -74,6 +74,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-spinners": "^0.9.0",
+    "react-tooltip": "^4.2.21",
     "rxjs": "^6.6.2",
     "socket.io-client": "^4.1.1",
     "source-map-explorer": "^2.5.0",

src/components/Dashboard/routes/Overview/Overview.tsx

@@ -130,6 +130,14 @@ const Overview = () => {
                     projectName={repo?.name}
                     domains={repo.domains?.length ? repo.domains : []}
                     subdomains={repo.subdomains?.length ? repo.subdomains : []}
+                    hnsDomains={
+                      repo.handshakeDomains?.length ? repo.handshakeDomains : []
+                    }
+                    hnsSubdomains={
+                      repo.handshakeSubdomains?.length
+                        ? repo.handshakeSubdomains
+                        : []
+                    }
                     latestDeployment={
                       repo?.latestDeployment?.sitePreview
                         ? repo?.latestDeployment?.sitePreview
@@ -148,6 +156,8 @@ const Overview = () => {
                 projectName={null}
                 domains={null}
                 subdomains={null}
+                hnsDomains={null}
+                hnsSubdomains={null}
                 latestDeployment={null}
                 githubUrl={null}
                 updateTime={null}
@@ -161,6 +171,8 @@ const Overview = () => {
               projectName={null}
               domains={null}
               subdomains={null}
+              hnsDomains={null}
+              hnsSubdomains={null}
               latestDeployment={null}
               githubUrl={null}
               updateTime={null}

src/components/Dashboard/routes/Overview/components/ProjectItem/ProjectItem.tsx

@@ -10,7 +10,6 @@ import {
   IActionModel,
   IDomain,
   IStateModel,
-  ISubdomain,
 } from "../../../../../../model/hooks.model";
 import { ActionContext, StateContext } from "../../../../../../hooks";
 
@@ -20,6 +19,8 @@ const ProjectItem: React.FC<IProjectItemProps> = ({
   latestDeployment,
   domains,
   subdomains,
+  hnsDomains,
+  hnsSubdomains,
   githubUrl,
   updateTime,
   repo,
@@ -36,7 +37,17 @@ const ProjectItem: React.FC<IProjectItemProps> = ({
   }
 
   const isDomainOrSubPresent =
-    (domains && domains.length > 0) || (subdomains && subdomains.length > 0);
+    (domains && domains.length > 0) ||
+    (subdomains && subdomains.length > 0) ||
+    (hnsDomains && hnsDomains.length > 0) ||
+    (hnsSubdomains && hnsSubdomains.length > 0);
+
+  const domainsAttached = [
+    ...(domains || []),
+    ...(subdomains || []),
+    ...(hnsDomains || []),
+    ...(hnsSubdomains || []),
+  ];
 
   return (
     <div className="project-item" key={index}>
@@ -52,15 +63,19 @@ const ProjectItem: React.FC<IProjectItemProps> = ({
             >
               {projectName}
             </h3>
-            {latestDeployment && (
+            {(latestDeployment || isDomainOrSubPresent) && (
               <button
                 type="button"
                 className="project-item-visit-button"
                 onClick={(e) =>
                   window.open(
                     `${
-                      domains && domains.length > 0
-                        ? `https://${domains[0].name}`
+                      domainsAttached.length > 0
+                        ? `${
+                            domainsAttached[0].type.indexOf("handshake") !== -1
+                              ? "http"
+                              : "https"
+                          }://${domainsAttached[0].name}`
                         : latestDeployment
                     }`,
                     "_blank",
@@ -88,13 +103,15 @@ const ProjectItem: React.FC<IProjectItemProps> = ({
                       {d.name}
                     </a>
                     {(i !== a.length - 1 ||
-                      (subdomains && subdomains.length > 0)) && (
+                      (subdomains && subdomains.length > 0) ||
+                      (hnsDomains && hnsDomains.length > 0) ||
+                      (hnsSubdomains && hnsSubdomains.length > 0)) && (
                       <span className="comma-sep">,</span>
                     )}
                   </>
                 ))}
               {subdomains &&
-                subdomains.map((s: ISubdomain, i: number, a: ISubdomain[]) => (
+                subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                   <>
                     <a
                       href={`https://${s.name}`}
@@ -105,7 +122,44 @@ const ProjectItem: React.FC<IProjectItemProps> = ({
                     >
                       {s.name}
                     </a>
-                    {i !== a.length - 1 && <span className="comma-sep">", "</span>}
+                    {(i !== a.length - 1 ||
+                      (hnsDomains && hnsDomains.length > 0) ||
+                      (hnsSubdomains && hnsSubdomains.length > 0)) && (
+                      <span className="comma-sep">,</span>
+                    )}
+                  </>
+                ))}
+              {hnsDomains &&
+                hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
+                  <>
+                    <a
+                      href={`http://${s.name}`}
+                      className="project-item-live-value"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      key={i}
+                    >
+                      {s.name}
+                    </a>
+                    {(i !== a.length - 1 ||
+                      (hnsSubdomains && hnsSubdomains.length > 0)) && (
+                      <span className="comma-sep">,</span>
+                    )}
+                  </>
+                ))}
+              {hnsSubdomains &&
+                hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
+                  <>
+                    <a
+                      href={`http://${s.name}`}
+                      className="project-item-live-value"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      key={i}
+                    >
+                      {s.name}
+                    </a>
+                    {i !== a.length - 1 && <span className="comma-sep">,</span>}
                   </>
                 ))}
             </div>

src/components/Dashboard/routes/Overview/components/ProjectItem/model.ts

@@ -1,11 +1,13 @@
-import { IDomain, IProject, ISubdomain } from "../../../../../../model/hooks.model";
+import { IDomain, IProject } from "../../../../../../model/hooks.model";
 
 export default interface IProjectItemProps {
   type: string;
   projectName: string | null;
   latestDeployment: string | null;
   domains: IDomain[] | null;
-  subdomains: ISubdomain[] | null;
+  subdomains: IDomain[] | null;
+  hnsDomains: IDomain[] | null;
+  hnsSubdomains: IDomain[] | null;
   githubUrl: string | null;
   updateTime: string | null;
   repo: IProject | null;

src/components/Dashboard/routes/Wallet/Wallet.scss

@@ -36,10 +36,16 @@
         .wallet-subtitle {
           font-size: 1.2rem;
           font-weight: 400;
-          margin-bottom: 1rem;
+          margin-bottom: 0.2rem;
           color: var(--grey4Color);
         }
 
+        .wallet-info {
+          font-size: 0.9rem;
+          margin-bottom: 1.2rem;
+          color: #da621e;
+        }
+
         .primary-button {
           @include primaryButton(
             white,

src/components/Dashboard/routes/Wallet/Wallet.tsx

@@ -8,6 +8,8 @@ import { IActionModel, IStateModel } from "../../../../model/hooks.model";
 import BounceLoader from "react-spinners/BounceLoader";
 import { IPaymentModel } from "../../../../model/payment.model";
 import moment from "moment";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const Wallet = () => {
   const history = useHistory();
@@ -124,6 +126,16 @@ const Wallet = () => {
       setRemovalLoader(false);
     }
   };
+  const showProtocolPrice = (protocol: string) => {
+    switch (protocol) {
+      case "arweave":
+        return "AR";
+      case "skynet":
+        return "SIA";
+
+      default:
+    }
+  };
 
   return (
     <div className="Wallet">
@@ -138,6 +150,14 @@ const Wallet = () => {
                 <div className="wallet-subtitle">
                   Enable your wallet for <b>{selectedOrg?.profile.name}</b>
                 </div>
+                <div className="wallet-info">
+                  <FontAwesomeIcon
+                    icon={faInfoCircle}
+                    style={{ marginRight: 7 }}
+                  ></FontAwesomeIcon>
+                  We currently support Matic Mumbai Testnet. Please add Matic Mumbai
+                  chain in your metamask.
+                </div>
                 {!wallet ? (
                   <button
                     type="button"
@@ -198,7 +218,7 @@ const Wallet = () => {
                   <div>
                     <div className="wallet-body-title">Wallet Details</div>
                     <div className="wallet-note">
-                      Note: Only onwer of this wallet can increase allowance
+                      Note: Only owner of this wallet can increase allowance
                     </div>
                   </div>
                   <div className="button-container">
@@ -221,7 +241,7 @@ const Wallet = () => {
                           disabled={walletLoading}
                           onClick={() => history.push("/wallet/recharge")}
                         >
-                          Increase Allowance
+                          Set Allowance
                         </button>
                       </>
                     )}
@@ -312,7 +332,8 @@ const Wallet = () => {
                         <div className="td">
                           <div className="user-container">
                             <div className="user-text">
-                              {payment?.providerFee} AR
+                              {payment?.providerFee}{" "}
+                              {showProtocolPrice(payment?.protocol)}
                             </div>
                           </div>
                         </div>