Enhance/modal-v2

apps/potlock/widget/Cart/BreakdownSummary.jsx

@@ -5,6 +5,9 @@ const {
   recipientId,
   potRferralFeeBasisPoints,
   ftIcon,
+  bypassChefFee,
+  chef,
+  chefFeeBasisPoints,
 } = props;
 const { basisPointsToPercent } = VM.require("potlock.near/widget/utils") || {
   basisPointsToPercent: () => 0,
@@ -30,25 +33,23 @@ const CHEVRON_UP_URL =
   IPFS_BASE_URL + "bafkreibdm7w6zox4znipjqlmxr66wsjjpqq4dguswo7evvrmzlnss3c3vi";
 
 const SvgIcon = styled.svg`
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 `;
 
 const BreakdownSummary = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  cursor: pointer;
   .breakdown-details {
     display: flex;
     flex-direction: column;
     width: 100%;
     margin-top: 8px;
     gap: 12px;
-    border-radius: 8px;
     border: 1px #dbdbdb solid;
-    background: #fafafa;
+    border-radius: 8px;
     transition: all 300ms ease-in-out;
     &.hidden {
       visibility: hidden;
@@ -62,16 +63,15 @@ const BreakdownSummary = styled.div`
 const Header = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
   width: 100%;
 `;
 
 const BreakdownTitle = styled.div`
   color: #2e2e2e;
   font-size: 14px;
-  line-height: 16px;
-  font-weight: 600;
+  font-weight: 500;
   word-wrap: break-word;
 `;
 
@@ -113,16 +113,15 @@ const BreakdownItem = styled.div`
 const BreakdownItemLeft = styled.div`
   color: #7b7b7b;
   font-size: 14px;
-  line-height: 20px;
   font-weight: 400;
   word-wrap: break-word;
 `;
 
 const BreakdownItemRight = styled.div`
   display: flex;
   flex-direction: row;
-  // justify-content: flex-end;
   align-items: center;
+  font-weight: 500;
   gap: 8px;
 `;
 
@@ -135,43 +134,47 @@ const BreakdownAmount = styled.div`
 `;
 
 const Icon = styled.img`
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
 `;
 
 const NearIcon = (props) => (
-  <SvgIcon
-    {...props}
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    id="near-logo"
-  >
-    <rect width="24" height="24" rx="12" fill="#CECECE" />
-    <path
-      d="M15.616 6.61333L13.1121 10.3333C12.939 10.5867 13.2719 10.8933 13.5117 10.68L15.9756 8.53333C16.0422 8.48 16.1354 8.52 16.1354 8.61333V15.32C16.1354 15.4133 16.0155 15.4533 15.9623 15.3867L8.50388 6.45333C8.26415 6.16 7.91787 6 7.53163 6H7.26526C6.5727 6 6 6.57333 6 7.28V16.72C6 17.4267 6.5727 18 7.27858 18C7.71809 18 8.13097 17.7733 8.3707 17.3867L10.8746 13.6667C11.0477 13.4133 10.7148 13.1067 10.475 13.32L8.0111 15.4533C7.94451 15.5067 7.85128 15.4667 7.85128 15.3733V8.68C7.85128 8.58667 7.97114 8.54667 8.02442 8.61333L15.4828 17.5467C15.7225 17.84 16.0821 18 16.4551 18H16.7214C17.4273 18 18 17.4267 18 16.72V7.28C18 6.57333 17.4273 6 16.7214 6C16.2686 6 15.8557 6.22667 15.616 6.61333Z"
-      fill="black"
-    />
+  <SvgIcon {...props} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_454_78)">
+      <circle cx="8" cy="8" r="7.25" stroke="#292929" stroke-width="1.5" />
+      <path
+        d="M11.1477 4C10.851 4 10.5763 4.15333 10.421 4.406L8.74866 6.88867C8.72453 6.92441 8.71422 6.96772 8.71967 7.01051C8.72511 7.05329 8.74594 7.09264 8.77826 7.1212C8.81057 7.14976 8.85218 7.1656 8.89531 7.16574C8.93844 7.16589 8.98015 7.15034 9.01266 7.122L10.6587 5.69467C10.6683 5.68598 10.6802 5.68028 10.6931 5.67828C10.7059 5.67628 10.719 5.67806 10.7308 5.6834C10.7426 5.68875 10.7526 5.69742 10.7596 5.70836C10.7665 5.7193 10.7702 5.73203 10.77 5.745V10.215C10.77 10.2287 10.7658 10.2421 10.7579 10.2534C10.7501 10.2646 10.7389 10.2732 10.726 10.2778C10.7131 10.2825 10.6991 10.2831 10.6858 10.2795C10.6726 10.2758 10.6608 10.2682 10.652 10.2577L5.67667 4.30167C5.59667 4.20709 5.49701 4.1311 5.38463 4.079C5.27226 4.0269 5.14987 3.99994 5.026 4H4.85233C4.62628 4 4.40949 4.0898 4.24964 4.24964C4.0898 4.40949 4 4.62628 4 4.85233V11.1477C4 11.3333 4.06061 11.5139 4.17263 11.6619C4.28465 11.81 4.44194 11.9174 4.6206 11.9679C4.79926 12.0184 4.98952 12.0091 5.16245 11.9416C5.33538 11.874 5.48152 11.7519 5.57867 11.5937L7.251 9.111C7.27513 9.07525 7.28544 9.03194 7.27999 8.98916C7.27455 8.94637 7.25372 8.90703 7.22141 8.87846C7.18909 8.8499 7.14748 8.83407 7.10435 8.83392C7.06122 8.83377 7.01951 8.84932 6.987 8.87766L5.341 10.3053C5.33134 10.3139 5.31939 10.3195 5.3066 10.3215C5.29381 10.3234 5.28074 10.3216 5.26898 10.3162C5.25721 10.3108 5.24726 10.3021 5.24034 10.2912C5.23342 10.2803 5.22983 10.2676 5.23 10.2547V5.784C5.22997 5.77027 5.23418 5.75687 5.24206 5.74563C5.24993 5.73438 5.26109 5.72584 5.274 5.72117C5.28691 5.71651 5.30094 5.71594 5.31419 5.71955C5.32743 5.72315 5.33924 5.73076 5.348 5.74133L10.3227 11.698C10.4847 11.8893 10.7227 11.9997 10.9733 12H11.147C11.373 12.0001 11.5898 11.9104 11.7498 11.7507C11.9097 11.591 11.9997 11.3744 12 11.1483V4.85233C11.9999 4.62631 11.9101 4.40956 11.7503 4.24974C11.5904 4.08992 11.3737 4.00009 11.1477 4Z"
+        fill="#292929"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_454_78">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
   </SvgIcon>
 );
 
 State.init({
-  showBreakdown: false,
+  showBreakdown: true,
 });
 
 if (!donationContractConfig) return "";
 
 const {
-  protocol_fee_basis_points: protocolFeeBasisPoints,
+  protocol_fee_basis_points,
   referral_fee_basis_points,
   protocol_fee_recipient_account: protocolFeeRecipientAccount,
 } = donationContractConfig;
 
-const referralFeeBasisPoints = potRferralFeeBasisPoints || referralFeeBasisPoints;
+const protocolFeeBasisPoints = props.protocolFeeBasisPoints ?? protocol_fee_basis_points;
+const referralFeeBasisPoints = potRferralFeeBasisPoints || props.referralFeeBasisPoints;
 
 const TOTAL_BASIS_POINTS = 10_000;
 let projectAllocationBasisPoints =
-  TOTAL_BASIS_POINTS - (bypassProtocolFee ? 0 : protocolFeeBasisPoints);
+  TOTAL_BASIS_POINTS -
+  (bypassProtocolFee || !protocolFeeBasisPoints ? 0 : protocolFeeBasisPoints) -
+  (bypassChefFee || !chefFeeBasisPoints ? 0 : chefFeeBasisPoints);
 if (referrerId) {
   projectAllocationBasisPoints -= referralFeeBasisPoints;
 }
@@ -182,78 +185,69 @@ const protocolFeePercent = basisPointsToPercent(protocolFeeBasisPoints);
 const protocolFeeAmount = (parseFloat(totalAmount) * protocolFeeBasisPoints) / TOTAL_BASIS_POINTS;
 const referrerFeePercent = basisPointsToPercent(referralFeeBasisPoints);
 const referrerFeeAmount = (parseFloat(totalAmount) * referralFeeBasisPoints) / TOTAL_BASIS_POINTS;
-
-const nearIconUrl = SUPPORTED_FTS.NEAR.iconUrl;
+const chefFeePercent = basisPointsToPercent(chefFeeBasisPoints);
+const chefFeeAmount = (parseFloat(totalAmount) * chefFeeBasisPoints) / TOTAL_BASIS_POINTS;
+
+const fees = [
+  {
+    label: "Protocol fee",
+    percentage: protocolFeePercent,
+    amount: protocolFeeAmount,
+    show: !bypassProtocolFee,
+  },
+  {
+    label: "Referrer fee",
+    percentage: referrerFeePercent,
+    amount: referrerFeeAmount,
+    show: referrerId,
+  },
+  {
+    label: "Chef fee",
+    percentage: chefFeePercent,
+    amount: chefFeeAmount,
+    show: !bypassChefFee && chefFeeBasisPoints,
+  },
+  {
+    label: "On-Chain Storage",
+    percentage: "",
+    amount: "<0.01",
+    show: true,
+  },
+  {
+    label: "Project allocation",
+    percentage: projectAllocationPercent,
+    amount: projectAllocationAmount,
+    show: true,
+  },
+];
 
 return (
   <BreakdownSummary
     style={props.containerStyle || {}}
-    onClick={() => State.update({ showBreakdown: !state.showBreakdown })}
+    // onClick={() => State.update({ showBreakdown: !state.showBreakdown })}
   >
     <Header style={props.headerStyle || {}}>
-      <BreakdownTitle style={{ fontSize: "14px", lineHeight: "16px" }}>
-        {state.showBreakdown ? "Hide" : "Show"} breakdown
-      </BreakdownTitle>
-      <ChevronIcon
-        style={{
-          rotate: state.showBreakdown ? "0deg" : "180deg",
-        }}
-        viewBox="0 0 12 8"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 0.295013L0 6.29501L1.41 7.70501L6 3.12501L10.59 7.70501L12 6.29501L6 0.295013Z"
-          fill="#7B7B7B"
-        />
-      </ChevronIcon>
+      <BreakdownTitle> Breakdown</BreakdownTitle>
     </Header>
     <div
       className={`breakdown-details ${!state.showBreakdown ? "hidden" : ""}`}
       active={state.showBreakdown}
     >
-      {!bypassProtocolFee && (
-        <BreakdownItem>
-          <BreakdownItemLeft>
-            Protocol fee ({protocolFeePercent}% to {protocolFeeRecipientAccount})
-          </BreakdownItemLeft>
-          <BreakdownItemRight>
-            <BreakdownAmount>
-              {protocolFeeAmount ? protocolFeeAmount.toFixed(2) : "-"}
-            </BreakdownAmount>
-            {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}{" "}
-          </BreakdownItemRight>
-        </BreakdownItem>
-      )}
-      {referrerId && (
-        <BreakdownItem>
-          <BreakdownItemLeft>
-            Referrer fee ({referrerFeePercent}% to {referrerId})
-          </BreakdownItemLeft>
-          <BreakdownItemRight>
-            <BreakdownAmount>
-              {referrerFeeAmount ? referrerFeeAmount.toFixed(2) : "-"}
-            </BreakdownAmount>
-            {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}
-          </BreakdownItemRight>
-        </BreakdownItem>
-      )}
-      <BreakdownItem>
-        <BreakdownItemLeft>On-Chain Storage</BreakdownItemLeft>
-        <BreakdownItemRight>
-          <BreakdownAmount>{"<0.01"}</BreakdownAmount>
-          {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}
-        </BreakdownItemRight>
-      </BreakdownItem>
-      <BreakdownItem>
-        <BreakdownItemLeft>
-          Project allocation (~{projectAllocationPercent}% to {recipientId || "project"})
-        </BreakdownItemLeft>
-        <BreakdownItemRight>
-          <BreakdownAmount>~{projectAllocationAmount.toFixed(2)}</BreakdownAmount>
-          {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}
-        </BreakdownItemRight>
-      </BreakdownItem>
+      {fees.map(({ show, amount, label, percentage }) => {
+        return show ? (
+          <BreakdownItem key={label}>
+            <BreakdownItemLeft>
+              {label} {percentage ? `(${percentage}%)` : ""}{" "}
+            </BreakdownItemLeft>
+            <BreakdownItemRight>
+              <BreakdownAmount>{typeof amount === "string" ? amount : amount}</BreakdownAmount>
+              {ftIcon ? <Icon src={ftIcon} alt="ft-icon" /> : <NearIcon />}
+            </BreakdownItemRight>
+          </BreakdownItem>
+        ) : (
+          ""
+        );
+      })}
     </div>
   </BreakdownSummary>
 );

apps/potlock/widget/Cart/Modal.jsx

@@ -22,7 +22,8 @@ const ModalOverlay = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(4px);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -38,10 +39,11 @@ const ModalOverlay = styled.div`
 
 const ModalContainer = styled.div`
   width: 383px;
+  border-radius: 12px;
+  box-shadow: 0px 0px 0px 1px rgba(41, 41, 41, 0.1), 0px 8px 12px -4px rgba(41, 41, 41, 0.1),
+    0px 20px 32px -10px rgba(41, 41, 41, 0.1), 0px 32px 44px -16px rgba(41, 41, 41, 0.1);
   padding: 24px 0px;
   background: white;
-  border-radius: 10px;
-  box-shadow: 20px 20px 32px -4px rgba(93, 93, 93, 0.06);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

apps/potlock/widget/Components/Banner.jsx

@@ -52,7 +52,7 @@ const Container = styled.div`
   bottom: 0;
   left: 0;
   position: fixed;
-  z-index: 1000;
+  z-index: 999;
   background: #7fc41e;
   color: white;
   display: flex;

apps/potlock/widget/Components/Modal.jsx

@@ -15,14 +15,16 @@ const ModalOverlay = styled.div`
 `;
 
 const ModalContent = styled.div`
-  border-radius: 6px;
   width: 100%;
   max-width: 600px;
   padding: 24px 24px 18px 24px;
   background: white;
-  border: 1px rgba(41, 41, 41, 0.4) solid;
   display: flex;
   flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0px 0px 0px 1px rgba(41, 41, 41, 0.1), 0px 8px 12px -4px rgba(41, 41, 41, 0.1),
+    0px 20px 32px -10px rgba(41, 41, 41, 0.1), 0px 32px 44px -16px rgba(41, 41, 41, 0.1);
 `;
 
 const overlayStyle = props.overlayStyle || {};

apps/potlock/widget/Inputs/Dropdown.jsx

@@ -78,7 +78,7 @@ return (
   <>
     {openFilter && <Screen onClick={() => setOpenFilter(false)} />}
     <div style={{ position: "relative" }} onClick={() => setOpenFilter(!openFilter)}>
-      <FilterButton>
+      <FilterButton style={props.buttonStyle || {}}>
         {sortVal || title}
         <FilterIcon>
           <svg
@@ -96,7 +96,7 @@ return (
         </FilterIcon>
       </FilterButton>
       {openFilter && (
-        <FilterMenu onClick={(e) => e.stopPropagation()}>
+        <FilterMenu onClick={(e) => e.stopPropagation()} style={props.menuStyle || {}}>
           {sortList.map((option) => (
             <FilterItem
               key={option.val}

apps/potlock/widget/Inputs/Select.jsx

@@ -143,9 +143,7 @@ return (
             aria-label={value.value}
             placeholder={<Placeholder>{placeholder}</Placeholder>}
           />
-          {/* {props.iconRight ? (
-            <Select.Icon>{props.iconRight}</Select.Icon>
-          ) : ( */}
+
           <Select.Icon>
             <svg
               width="12"
@@ -155,15 +153,11 @@ return (
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M1 1.5L6 6.5L11 1.5"
-                stroke="currentColor"
-                stroke-width="1.66667"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                d="M10.59 0.295044L6 4.87504L1.41 0.295044L0 1.70504L6 7.70504L12 1.70504L10.59 0.295044Z"
+                fill="#7B7B7B"
               />
             </svg>
           </Select.Icon>
-          {/* )} */}
         </Input>
       </Select.Trigger>
 

apps/potlock/widget/Inputs/Text.jsx

@@ -90,8 +90,6 @@ return (
   <Container>
     {label && <Label>{label}</Label>}
     <InputContainer>
-      {/* {props.prefixText && <InputPrefix>{props.prefixText}</InputPrefix>} */}
-      {/* {props.prefixElement && props.prefixElement} */}
       {props.preInputChildren && props.preInputChildren}
       <Input
         type="text"