fix(deploy-web): bugfixes/rebrand fixes (#189)

deploy-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akash-console",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Web UI to deploy on the Akash Network and view statistic about network usage.",
   "author": "Akash Network",
   "private": true,

deploy-web/src/components/deployments/DeploymentDetail.tsx

@@ -82,7 +82,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
       }
     }
   });
-  const isDeploymentNotFound = deploymentError && (deploymentError as any).response?.data?.message?.includes("Deployment not found");
+  const isDeploymentNotFound = (deploymentError && (deploymentError as any).response?.data?.message?.includes("Deployment not found")) || !address;
   const hasLeases = leases && leases.length > 0;
   const { isLocalCertMatching, localCert, isCreatingCert, createCertificate } = useCertificate();
   const { data: providers, isFetching: isLoadingProviders, refetch: getProviders } = useProviderList();
@@ -155,9 +155,9 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
       {isDeploymentNotFound && (
         <div className="mt-8 text-center">
           <Title className="mb-2">404</Title>
-          <Title subTitle className="text-xl !font-normal">
+          <p>
             This deployment does not exist or it was created using another wallet.
-          </Title>
+          </p>
           <div className="pt-4">
             <Link href={UrlService.home()} className={cn(buttonVariants({ variant: "default" }), "inline-flex items-center space-x-2")}>
               <ArrowLeft className="text-sm" />

deploy-web/src/components/deployments/GranteeDepositMenuItem.tsx

@@ -16,18 +16,17 @@ export const GranteeDepositMenuItem: React.FunctionComponent<Props> = ({ grant }
   const denomData = useDenomData(grant.authorization.spend_limit.denom);
 
   return (
-    <div className="text-sm">
-      <Address address={grant.granter} />
-      &nbsp;|&nbsp;
+    <div className="text-xs">
+      <Address address={grant.granter} disableTooltip />
+      &nbsp;<small className="text-muted-foreground">|</small>&nbsp;
       <AKTAmount uakt={coinToUDenom(grant.authorization.spend_limit)} />
       &nbsp;
       {denomData?.label}
       &nbsp;
-      <small>
+      <small className="text-muted-foreground">
         (Exp:&nbsp;
-        <FormattedDate value={new Date(grant.expiration)} />
+        <FormattedDate value={new Date(grant.expiration)} />)
       </small>
-      )
     </div>
   );
 };

deploy-web/src/components/get-started/GetStartedStepper.tsx

@@ -162,7 +162,7 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
           </p>
 
           <p className="text-muted-foreground">For the sake of getting started, we will deploy a simple Next.js app that you can find in the deploy page.</p>
-          <div className="my-4 flex flex-wrap items-center space-x-4">
+          <div className="my-4 flex flex-col flex-wrap items-start space-y-4 sm:flex-row sm:items-center sm:space-x-4 sm:space-y-0">
             <Button variant="default" onClick={handleNext}>
               Next
             </Button>
@@ -171,7 +171,7 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
               <ExternalLink href="https://docs.docker.com/get-started/" text="Learn how" />
             </div>
 
-            <Link href={UrlService.templates()} className={cn("py-4", buttonVariants({ variant: "text" }))}>
+            <Link href={UrlService.templates()} className={cn("py-4", buttonVariants({ variant: "secondary" }))}>
               Explore Marketplace
             </Link>
           </div>

deploy-web/src/components/layout/Layout.tsx

@@ -115,8 +115,8 @@ const LayoutApp: React.FunctionComponent<Props> = ({ children, isLoading, isUsin
 
               <div
                 className={cn("ease ml-0 h-full flex-grow transition-[margin-left] duration-300", {
-                  ["sm:ml-[240px]"]: isNavOpen,
-                  ["sm:ml-[57px]"]: !isNavOpen
+                  ["md:ml-[240px]"]: isNavOpen,
+                  ["md:ml-[57px]"]: !isNavOpen
                 })}
               >
                 {isLoading !== undefined && <LinearLoadingSkeleton isLoading={isLoading} />}

deploy-web/src/components/new-deployment/BidRow.tsx

@@ -133,7 +133,7 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
       {gpuModels.length > 0 && (
         <TableCell align="center">
           <div className="space-x">
-            {gpuModels.map((gpu) => (
+            {gpuModels.map(gpu => (
               <Badge key={`${gpu.vendor}-${gpu.model}`} className={cn("px-1 py-0 text-xs")} variant="default">
                 {gpu.vendor}-{gpu.model}
               </Badge>
@@ -198,7 +198,7 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
           )}
 
           {isSendingManifest && isCurrentBid && (
-            <div className="flex items-center justify-center">
+            <div className="flex items-center justify-center whitespace-nowrap">
               <Badge variant="success">Deploying! 🚀</Badge>
             </div>
           )}

deploy-web/src/components/new-deployment/CreateLease.tsx

@@ -89,53 +89,31 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Filter bids by search
+  // Filter bids
   useEffect(() => {
-    let fBids: string[] = [];
     if ((search || isFilteringFavorites || isFilteringAudited) && providers) {
-      bids?.forEach(bid => {
-        let isAdded = false;
-
-        // Filter for search
-        if (search) {
-          const provider = providers.find(p => p.owner === bid.provider);
-          // Filter by attribute value
-          provider?.attributes.forEach(att => {
-            if (att.value?.toLowerCase().includes(search.toLowerCase())) {
-              fBids.push(bid.id);
-              isAdded = true;
-            }
-          });
-
-          if (!isAdded && provider?.hostUri.includes(search)) {
-            fBids.push(bid.id);
-          }
-        }
+      let filteredBids = [...(bids || [])];
 
-        // Filter for favorites
-        if (!isAdded && !search && isFilteringFavorites) {
-          const provider = favoriteProviders.find(p => p === bid.provider);
+      if (search) {
+        filteredBids = filteredBids.filter(bid => {
+          const provider = providers?.find(p => p.owner === bid.provider);
+          return provider?.attributes.some(att => att.value?.toLowerCase().includes(search.toLowerCase())) || provider?.hostUri.includes(search);
+        });
+      }
 
-          if (provider) {
-            fBids.push(bid.id);
-            isAdded = true;
-          }
-        }
+      if (isFilteringFavorites) {
+        filteredBids = filteredBids.filter(bid => favoriteProviders.some(y => y === bid.provider));
+      }
 
-        // Filter for audited
-        if (!isAdded && !search && isFilteringAudited) {
-          const provider = providers.filter(x => x.isAudited).find(p => p.owner === bid.provider);
+      if (isFilteringAudited) {
+        filteredBids = filteredBids.filter(bid => !!providers.filter(x => x.isAudited).find(p => p.owner === bid.provider));
+      }
 
-          if (provider) {
-            fBids.push(bid.id);
-          }
-        }
-      });
+      setFilteredBids(filteredBids.map(bid => bid.id));
     } else {
-      fBids = bids?.map(b => b.id) || [];
+      setFilteredBids(bids?.map(bid => bid.id) || []);
     }
 
-    setFilteredBids(fBids);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search, bids, providers, isFilteringFavorites, isFilteringAudited, favoriteProviders]);
 

deploy-web/src/components/new-deployment/ManifestEdit.tsx

@@ -214,14 +214,11 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
 
   return (
     <>
-      <CustomNextSeo
-        title="Create Deployment - Manifest Edit"
-        url={`${domainName}${UrlService.newDeployment({ step: RouteStepKeys.editDeployment })}`}
-      />
+      <CustomNextSeo title="Create Deployment - Manifest Edit" url={`${domainName}${UrlService.newDeployment({ step: RouteStepKeys.editDeployment })}`} />
 
       <div className="mb-2 pt-4">
         <div className="mb-2 flex flex-col items-end justify-between md:flex-row">
-          <div className="flex-grow">
+          <div className="w-full flex-grow">
             <InputWithIcon value={deploymentName} onChange={ev => setDeploymentName(ev.target.value)} label="Name your deployment (optional)" />
           </div>
 
@@ -237,10 +234,10 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
                 </p>
               }
             >
-              <InfoCircle className="mx-4 text-sm text-muted-foreground" />
+              <InfoCircle className="mr-4 text-sm text-muted-foreground md:ml-4" />
             </CustomTooltip>
 
-            <div>
+            <div className="flex-grow">
               <Button
                 variant="default"
                 disabled={isCreatingDeployment || !!parsingError || !editedManifest}
@@ -261,16 +258,23 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
             </div>
           </div>
         </div>
+      </div>
 
-        <Button variant={selectedSdlEditMode === "builder" ? "default" : "outline"} onClick={() => onModeChange("builder")} size="sm" className="rounded-e-none">
+      <div className="mb-2 flex items-center">
+        <Button
+          variant={selectedSdlEditMode === "builder" ? "default" : "outline"}
+          onClick={() => onModeChange("builder")}
+          size="sm"
+          className="flex-grow rounded-e-none sm:flex-grow-0"
+        >
           Builder
         </Button>
         <Button
           variant={selectedSdlEditMode === "yaml" ? "default" : "outline"}
           color={selectedSdlEditMode === "yaml" ? "secondary" : "primary"}
           onClick={() => onModeChange("yaml")}
           size="sm"
-          className="rounded-s-none"
+          className="flex-grow rounded-s-none sm:flex-grow-0"
         >
           YAML
         </Button>

deploy-web/src/components/providers/ProviderDetail.tsx

@@ -166,8 +166,8 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
             <div className="mt-4">
               <p className="mb-4">General Info</p>
 
-              <Card className="mb-4 grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
-                <CardContent>
+              <Card className="mb-4">
+                <CardContent className="mb-4 grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
                   <div>
                     <LabelValue label="Host" value={provider.host} />
                     <LabelValue label="Website" value={provider.website} />
@@ -191,25 +191,25 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
               <ProviderSpecs provider={provider} />
 
               <p className="mb-4 mt-4">Features</p>
-              <Card className="mb-4 grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
-                <CardContent>
+              <Card className="mb-4">
+                <CardContent className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
                   <div>
                     <LabelValue label="Akash version" value={provider.akashVersion || "Unknown"} />
-                    <LabelValue label="IP Leases" value={provider.featEndpointIp && <Check className="ml-2 text-primary" />} />
-                    <LabelValue label="Chia" value={provider.workloadSupportChia && <Check className="ml-2 text-primary" />} />
+                    <LabelValue label="IP Leases" value={provider.featEndpointIp && <Check className="ml-0 text-primary sm:ml-2" />} />
+                    <LabelValue label="Chia" value={provider.workloadSupportChia && <Check className="ml-0 text-primary sm:ml-2" />} />
                   </div>
                   <div>
                     <LabelValue label="Kube version" value={provider.kube ? `${provider.kube?.major}.${provider.kube?.minor}` : "Unkown"} />
-                    <LabelValue label="Custom domain" value={provider.featEndpointCustomDomain && <Check className="ml-2 text-primary" />} />
+                    <LabelValue label="Custom domain" value={provider.featEndpointCustomDomain && <Check className="ml-0 text-primary sm:ml-2" />} />
                     <LabelValue label="Chia capabilities" value={provider.workloadSupportChiaCapabilities} />
                   </div>
                 </CardContent>
               </Card>
 
               <p className="mb-4">Stats</p>
 
-              <Card className="mb-4 p-4">
-                <CardContent>
+              <Card className="mb-4">
+                <CardContent className="p-4">
                   <LabelValue label="Deployments" value={provider.deploymentCount} />
                   <LabelValue label="Leases" value={provider.leaseCount} />
                   <LabelValue label="Orders" value={provider.orderCount || "0"} />
@@ -219,8 +219,8 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
             </div>
 
             <p className="mb-4">Raw attributes</p>
-            <Card className="p-4">
-              <CardContent>
+            <Card>
+              <CardContent className="p-4">
                 {provider.attributes.map(x => (
                   <LabelValue key={x.key} label={x.key} value={x.value} />
                 ))}

deploy-web/src/components/providers/ProviderList.tsx

@@ -232,7 +232,7 @@ export const ProviderList: React.FunctionComponent<Props> = ({}) => {
                 </div>
               </div>
 
-              <div className="flex items-center md:ml-8">
+              <div className="my-2 flex items-center md:ml-8 md:my-0">
                 <div>
                   <CheckboxWithLabel checked={isFilteringActive} onCheckedChange={onIsFilteringActiveClick} label="Active" />
                 </div>
@@ -245,7 +245,7 @@ export const ProviderList: React.FunctionComponent<Props> = ({}) => {
               </div>
             </div>
 
-            <div className="my-2 flex flex-col items-center md:flex-row md:space-x-2">
+            <div className="my-2 flex flex-col items-center space-y-2 md:flex-row md:space-x-2 md:space-y-0">
               <InputWithIcon
                 label="Search Providers"
                 value={search}
@@ -261,7 +261,7 @@ export const ProviderList: React.FunctionComponent<Props> = ({}) => {
                 }
               />
 
-              <div className="min-w-[200px]">
+              <div className="w-full min-w-[200px] md:w-auto">
                 <Label>Sort by</Label>
                 <Select value={sort} onValueChange={handleSortChange}>
                   <SelectTrigger>
@@ -282,8 +282,8 @@ export const ProviderList: React.FunctionComponent<Props> = ({}) => {
 
             <ProviderTable providers={currentPageProviders} sortOption={sort} />
 
-            {search && currentPageProviders.length === 0 && (
-              <div className="p-4">
+            {currentPageProviders.length === 0 && (
+              <div className="p-4 text-center">
                 <p>No provider found.</p>
               </div>
             )}

deploy-web/src/components/sdl/EnvFormModal.tsx

@@ -9,7 +9,7 @@ import { FormInput } from "../ui/input";
 import { Bin } from "iconoir-react";
 import { Button } from "../ui/button";
 import { Switch } from "../ui/switch";
-import { CustomTooltip } from "../shared/CustomTooltip";
+import { CustomNoDivTooltip, CustomTooltip } from "../shared/CustomTooltip";
 import { FormPaper } from "./FormPaper";
 
 type Props = {
@@ -139,7 +139,7 @@ export const EnvFormModal: React.FunctionComponent<Props> = ({ control, serviceI
                     control={control}
                     name={`services.${serviceIndex}.env.${envIndex}.isSecret`}
                     render={({ field }) => (
-                      <CustomTooltip
+                      <CustomNoDivTooltip
                         title={
                           <>
                             <p>
@@ -151,8 +151,8 @@ export const EnvFormModal: React.FunctionComponent<Props> = ({ control, serviceI
                           </>
                         }
                       >
-                        <Switch checked={field.value || false} onCheckedChange={field.onChange} />
-                      </CustomTooltip>
+                        <Switch checked={!!field.value} onCheckedChange={field.onChange} />
+                      </CustomNoDivTooltip>
                     )}
                   />
                 )}

deploy-web/src/components/settings/CertificateDisplay.tsx

@@ -44,9 +44,9 @@ export function CertificateDisplay() {
               {selectedCertificate ? (
                 <span>
                   Current certificate:{" "}
-                  <div className="inline-flex items-center text-xs font-bold text-primary">
+                  <span className="inline-flex items-center text-xs font-bold text-primary">
                     {selectedCertificate.serial} <Check color="secondary" className="ml-2" />
-                  </div>
+                  </span>
                 </span>
               ) : (
                 "No local certificate."