Merge pull request #51 from code4rena-dev/icons-and-ecosystems

Icons and Ecosystems
code4rena-dev · Feb 20, 2024 · c390baf · c390baf
2 parents 26f0863 + 7c482da
commit c390baf
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {

diff --git a/src/lib/ContestTile/CompactTemplate.tsx b/src/lib/ContestTile/CompactTemplate.tsx
@@ -62,13 +62,8 @@ const IsContest = ({title, isDarkTile = true, contestData, sponsorUrl, sponsorIm
   const [contestTimelineObject, setContestTimelineObject] = useState<ContestSchedule | undefined>();
   const [hasBotRace, setHasBotRace] = useState(contestData ? !!contestData.botFindingsRepo : false);
   let ecosystemLogoName: string = "";
-  const evmTypes = new Set([
-    "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync"
-  ]);
   if (ecosystem && (ecosystem === "Polkadot")) {
     ecosystemLogoName = 'logo-polkadot'
-  } else if (evmTypes.has(ecosystem ?? "")) {
-    ecosystemLogoName = 'logo-ethereum';
   }
 
   const updateContestTileStatus = useCallback(() => {
@@ -193,13 +188,8 @@ const IsBounty = ({title, isDarkTile = true, bountyData, sponsorUrl, sponsorImag
 }) => {
   const { amount, bountyUrl, ecosystem, languages } = bountyData;
   let ecosystemLogoName: string = "";
-  const evmTypes = new Set([
-    "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync"
-  ]);
   if (ecosystem && (ecosystem === "Polkadot")) {
     ecosystemLogoName = 'logo-polkadot'
-  } else if (evmTypes.has(ecosystem ?? "")) {
-    ecosystemLogoName = 'logo-ethereum';
   }
 
   return (

diff --git a/src/lib/ContestTile/DefaultTemplate.tsx b/src/lib/ContestTile/DefaultTemplate.tsx
@@ -253,13 +253,8 @@ function IsContest({
 }) {
   const { contestUrl, amount, findingsRepo, startDate, endDate, ecosystem, languages } = contestData;
   let ecosystemLogoName: string = "";
-  const evmTypes = new Set([
-    "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync"
-  ]);
   if (ecosystem && (ecosystem === "Polkadot")) {
     ecosystemLogoName = 'logo-polkadot'
-  } else if (evmTypes.has(ecosystem ?? "")) {
-    ecosystemLogoName = 'logo-ethereum';
   }
 
   return (
@@ -408,13 +403,8 @@ function IsBounty({
   const { bountyUrl, amount, startDate, ecosystem, languages } = bountyData;
   const endDate = "2999-01-01T00:00:00Z"
   let ecosystemLogoName: string = "";
-  const evmTypes = new Set([
-    "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync"
-  ]);
   if (ecosystem && (ecosystem === "Polkadot")) {
     ecosystemLogoName = 'logo-polkadot'
-  } else if (evmTypes.has(ecosystem ?? "")) {
-    ecosystemLogoName = 'logo-ethereum';
   }
 
   return (

diff --git a/src/lib/Icon/iconList.tsx b/src/lib/Icon/iconList.tsx
@@ -73,8 +73,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
             <g>
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M10.5363 5.2636C10.8878 5.61508 10.8878 6.18492 10.5363 6.5364L6.1727 10.9L10.5363 15.2636C10.8878 15.6151 10.8878 16.1849 10.5363 16.5364C10.1848 16.8879 9.61498 16.8879 9.26351 16.5364L4.26351 11.5364C3.91204 11.1849 3.91204 10.6151 4.26351 10.2636L9.26351 5.2636C9.61498 4.91213 10.1848 4.91213 10.5363 5.2636ZM17.5363 5.2636C17.8878 5.61508 17.8878 6.18492 17.5363 6.5364L13.1727 10.9L17.5363 15.2636C17.8878 15.6151 17.8878 16.1849 17.5363 16.5364C17.1848 16.8879 16.615 16.8879 16.2635 16.5364L11.2635 11.5364C10.912 11.1849 10.912 10.6151 11.2635 10.2636L16.2635 5.2636C16.615 4.91213 17.1848 4.91213 17.5363 5.2636Z" />
             </g>
-        </svg>
-    ,
+        </svg>,
     "chevrons-right": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g>
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M4.2635 5.2636C4.61498 4.91213 5.18483 4.91213 5.5363 5.2636L10.5363 10.2636C10.8878 10.6151 10.8878 11.1849 10.5363 11.5364L5.5363 16.5364C5.18483 16.8879 4.61498 16.8879 4.2635 16.5364C3.91203 16.1849 3.91203 15.6151 4.2635 15.2636L8.62711 10.9L4.2635 6.5364C3.91203 6.18492 3.91203 5.61508 4.2635 5.2636ZM11.2635 5.2636C11.615 4.91213 12.1848 4.91213 12.5363 5.2636L17.5363 10.2636C17.8878 10.6151 17.8878 11.1849 17.5363 11.5364L12.5363 16.5364C12.1848 16.8879 11.615 16.8879 11.2635 16.5364C10.912 16.1849 10.912 15.6151 11.2635 15.2636L15.6271 10.9L11.2635 6.5364C10.912 6.18492 10.912 5.61508 11.2635 5.2636Z" />
@@ -87,6 +86,10 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </g>
             </g>
         </svg>,
+    "copy": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M10.4125 9.73757C10.1778 9.73757 9.98749 9.92785 9.98749 10.1626V16.5751C9.98749 16.8098 10.1778 17.0001 10.4125 17.0001H16.825C17.0597 17.0001 17.25 16.8098 17.25 16.5751V10.1626C17.25 9.92785 17.0597 9.73757 16.825 9.73757H10.4125ZM7.98749 10.1626C7.98749 8.82328 9.0732 7.73757 10.4125 7.73757H16.825C18.1643 7.73757 19.25 8.82328 19.25 10.1626V16.5751C19.25 17.9144 18.1643 19.0001 16.825 19.0001H10.4125C9.0732 19.0001 7.98749 17.9144 7.98749 16.5751V10.1626Z" />
+            <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M5.425 4.75C5.31228 4.75 5.20418 4.79478 5.12448 4.87448C5.04478 4.95418 5 5.06228 5 5.175V11.5875C5 11.7002 5.04478 11.8083 5.12448 11.888C5.20418 11.9677 5.31228 12.0125 5.425 12.0125H6.1375C6.68978 12.0125 7.1375 12.4602 7.1375 13.0125C7.1375 13.5648 6.68978 14.0125 6.1375 14.0125H5.425C4.78185 14.0125 4.16504 13.757 3.71027 13.3022C3.25549 12.8475 3 12.2306 3 11.5875V5.175C3 4.53185 3.25549 3.91504 3.71027 3.46027C4.16504 3.00549 4.78185 2.75 5.425 2.75H11.8375C12.4806 2.75 13.0975 3.00549 13.5522 3.46027C14.007 3.91504 14.2625 4.53185 14.2625 5.175V5.8875C14.2625 6.43978 13.8148 6.8875 13.2625 6.8875C12.7102 6.8875 12.2625 6.43978 12.2625 5.8875V5.175C12.2625 5.06228 12.2177 4.95418 12.138 4.87448C12.0583 4.79478 11.9502 4.75 11.8375 4.75H5.425Z" />
+        </svg>,
     "download": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g>
                 <g>
@@ -118,6 +121,9 @@ export const icons = (size: string, color: string, className?: string): Record<s
             <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M3.66192 10.5896C6.60814 17.1368 15.3919 17.1368 18.3381 10.5896C18.5647 10.086 19.1567 9.86144 19.6604 10.0881C20.164 10.3147 20.3886 10.9067 20.1619 11.4104C16.5081 19.5299 5.49186 19.5299 1.83808 11.4104C1.61144 10.9067 1.836 10.3147 2.33964 10.0881C2.84328 9.86144 3.43528 10.086 3.66192 10.5896Z" />
             <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M11 9.25C10.0335 9.25 9.25 10.0335 9.25 11C9.25 11.9665 10.0335 12.75 11 12.75C11.9665 12.75 12.75 11.9665 12.75 11C12.75 10.0335 11.9665 9.25 11 9.25ZM7.25 11C7.25 8.92889 8.92889 7.25 11 7.25C13.0711 7.25 14.75 8.92889 14.75 11C14.75 13.0711 13.0711 14.75 11 14.75C8.92889 14.75 7.25 13.0711 7.25 11Z" />
         </svg>,
+    "facebook": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill={color} d="M13 4H11.0909C10.247 4 9.43773 4.36875 8.84102 5.02513C8.24432 5.6815 7.90909 6.57174 7.90909 7.5V9.6H6V12.4H7.90909V18H10.4545V12.4H12.3636L13 9.6H10.4545V7.5C10.4545 7.31435 10.5216 7.1363 10.6409 7.00503C10.7603 6.87375 10.9221 6.8 11.0909 6.8H13V4Z" />
+    </svg>,    
     "findings": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g>
                 <g>
@@ -197,6 +203,9 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </g>
             </g>
         </svg>,
+    "linkedin": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M9 8.90503H11.827V10.346H11.858C12.289 9.56903 13.562 8.78003 15.136 8.78003C18.157 8.78003 19 10.384 19 13.355V18.905H16V13.902C16 12.572 15.469 11.405 14.227 11.405C12.719 11.405 12 12.426 12 14.102V18.905H9V8.90503ZM4 18.905H7V8.90503H4V18.905ZM7.375 5.40503C7.375 6.44103 6.536 7.28003 5.5 7.28003C4.464 7.28003 3.625 6.44103 3.625 5.40503C3.625 4.36903 4.464 3.53003 5.5 3.53003C6.536 3.53003 7.375 4.36903 7.375 5.40503Z" />
+        </svg>,    
     "lock": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g>
                 <g>
@@ -209,6 +218,9 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M5.52951 4.8C5.336 4.8 5.15041 4.87687 5.01358 5.0137C4.87675 5.15054 4.79988 5.33612 4.79988 5.52963V16.937C4.79988 17.1305 4.87675 17.3161 5.01358 17.453C5.15041 17.5898 5.336 17.6667 5.52951 17.6667H8.78877C9.28582 17.6667 9.68877 18.0696 9.68877 18.5667C9.68877 19.0637 9.28582 19.4667 8.78877 19.4667H5.52951C4.85861 19.4667 4.21519 19.2002 3.74079 18.7258C3.26639 18.2514 2.99988 17.6079 2.99988 16.937V5.52963C2.99988 4.85873 3.26639 4.21531 3.74079 3.74091C4.21519 3.26651 4.85861 3 5.52951 3H8.78877C9.28582 3 9.68877 3.40294 9.68877 3.9C9.68877 4.39706 9.28582 4.8 8.78877 4.8H5.52951ZM13.856 6.52288C14.2075 6.17141 14.7773 6.17141 15.1288 6.52288L19.1938 10.5879C19.362 10.7514 19.4666 10.9801 19.4666 11.2333C19.4666 11.3844 19.4293 11.5268 19.3635 11.6519C19.3576 11.6631 19.3514 11.6743 19.345 11.6853C19.3253 11.7192 19.3033 11.752 19.2788 11.7836C19.2742 11.7896 19.2695 11.7955 19.2647 11.8014C19.2435 11.8273 19.221 11.852 19.1972 11.8754L15.1288 15.9438C14.7773 16.2953 14.2075 16.2953 13.856 15.9438C13.5045 15.5924 13.5045 15.0225 13.856 14.671L16.3937 12.1333H8.78879C8.29174 12.1333 7.88879 11.7304 7.88879 11.2333C7.88879 10.7363 8.29174 10.3333 8.78879 10.3333H16.3937L13.856 7.79567C13.5045 7.4442 13.5045 6.87435 13.856 6.52288Z" />
             </g>
         </svg>,
+    "logo-blast": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M2 6.44506L5.01477 4H18.0492L20 5.56145L19.0246 8.84172L16.1761 10.3789L16.165 10.4153L18.0936 11.9646L17.0628 15.4385L14.1921 17L3.18595 17L6.13424 6.86871L8.10713 8.47859L6.33375 14.5065H14.931L15.9101 11.2021H9.76969L10.3682 9.20484H16.5086L17.3177 6.44506H2Z" />
+        </svg>,    
     "logo-ethereum": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M11 3C11.3355 3 11.6474 3.17523 11.826 3.46396L15.8504 9.97223C15.9544 10.1405 16.0055 10.3353 15.9995 10.5309C16.0055 10.7245 15.9559 10.9207 15.8481 11.0934L11.8237 17.5397C11.6448 17.8263 11.334 18 11 18C10.666 18 10.3552 17.8263 10.1763 17.5397L6.15189 11.0934C6.04407 10.9207 5.99448 10.7245 6.00049 10.5309C5.99448 10.3353 6.04557 10.1405 6.14964 9.97223L10.174 3.46396C10.3526 3.17523 10.6645 3 11 3ZM13.6647 10.1648L11 5.8553L8.33525 10.1648L11 11.9876L13.6647 10.1648Z"/>
     </svg>,
@@ -220,6 +232,9 @@ export const icons = (size: string, color: string, className?: string): Record<s
         <path fill={color} d="M7.79735 15.9519C8.50008 15.5462 8.50461 14.2384 7.80746 13.031C7.11031 11.8235 5.97548 11.1736 5.27274 11.5793C4.57001 11.9851 4.56549 13.2928 5.26264 14.5003C5.95979 15.7077 7.09462 16.3577 7.79735 15.9519Z" />
         <path fill={color} d="M17.3786 10.4211C18.0809 10.0156 18.085 8.70806 17.3879 7.5006C16.6907 6.29313 15.5563 5.64298 14.854 6.04844C14.1518 6.4539 14.1476 7.76144 14.8448 8.9689C15.5419 10.1764 16.6764 10.8265 17.3786 10.4211Z"/>
     </svg>,
+    "logo-polygon": <svg className={className} width={size} height={size} viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M9.6022 13.4282C9.81597 13.2968 9.94801 13.0531 9.94801 12.7916V3.94773L9.99845 3.9171L12.7748 2.21367L15.6027 3.94773V7.41713L12.7748 9.15119L10.9123 8.00914V10.3366L12.4289 11.2668C12.6427 11.3969 12.908 11.3969 13.1206 11.2668L13.1218 11.268L17.1541 8.7939C17.3679 8.66247 17.5 8.41873 17.5 8.15717V3.20893C17.5 2.94735 17.3679 2.70364 17.1541 2.57221L13.1218 0.0980892C12.908 -0.033334 12.6427 -0.0320572 12.4301 0.0980892L8.39776 2.57221C8.18406 2.70364 8.05195 2.94735 8.05195 3.20893V12.0515L5.22402 13.7855L2.39609 12.0515V8.58212L5.22402 6.84805L7.08892 7.99255V5.66518L5.56983 4.73245C5.46535 4.66865 5.34533 4.6342 5.22402 4.6342C5.10271 4.6342 4.98268 4.66865 4.87821 4.73245L0.845839 7.20657C0.632093 7.338 0.5 7.58174 0.5 7.8433V12.7916C0.5 13.0531 0.632093 13.2968 0.845839 13.4282L4.87821 15.9024C5.09191 16.0325 5.35612 16.0325 5.56983 15.9024L9.6022 13.4282Z" />
+        </svg>,    
     "menu": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g id="menu">
                 <g id="Vector">
@@ -316,6 +331,9 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M14.0759 4.80283C13.8048 4.79227 13.5319 4.81126 13.2621 4.86042C12.516 4.99635 11.8292 5.3564 11.293 5.8926C10.7568 6.4288 10.3967 7.11568 10.2608 7.8617C10.1249 8.60772 10.2195 9.37745 10.5321 10.0683C10.6866 10.4096 10.6135 10.8109 10.3486 11.0757L5.01595 16.4084C4.87772 16.5466 4.80006 16.7341 4.80006 16.9296C4.80006 17.1251 4.87772 17.3125 5.01595 17.4508C5.15418 17.589 5.34166 17.6667 5.53714 17.6667C5.73263 17.6667 5.92011 17.589 6.05834 17.4508L11.391 12.1181C11.6559 11.8533 12.0571 11.7801 12.3984 11.9346C13.0893 12.2472 13.859 12.3419 14.605 12.2059C15.351 12.07 16.0379 11.71 16.5741 11.1738C17.1103 10.6376 17.4704 9.95068 17.6063 9.20466C17.6555 8.93486 17.6745 8.66196 17.6639 8.39081L15.8755 10.1792C15.563 10.4855 15.1429 10.657 14.7053 10.657C14.2677 10.657 13.8476 10.4855 13.5351 10.1792L13.5286 10.1729L12.2875 8.93169C11.9812 8.6192 11.8097 8.19903 11.8097 7.76145C11.8097 7.32387 11.9813 6.90374 12.2876 6.59124L12.2939 6.58481L14.0759 4.80283ZM12.9394 3.08958C14.0454 2.88806 15.1865 3.0284 16.2108 3.49187C16.4799 3.61368 16.6722 3.85984 16.7251 4.1505C16.7781 4.44116 16.685 4.73931 16.4761 4.94822L13.6629 7.76145L14.7053 8.80385L17.5185 5.99062C17.7274 5.7817 18.0256 5.68863 18.3162 5.74159C18.6069 5.79455 18.853 5.98679 18.9749 6.25597C19.4383 7.28018 19.5787 8.42132 19.3771 9.52731C19.1756 10.6333 18.6418 11.6516 17.8469 12.4465C17.052 13.2415 16.0337 13.7753 14.9277 13.9768C14.0317 14.14 13.1126 14.0789 12.2513 13.8034L7.33113 18.7236C6.85534 19.1994 6.21002 19.4667 5.53714 19.4667C4.86427 19.4667 4.21895 19.1994 3.74316 18.7236C3.26736 18.2478 3.00006 17.6025 3.00006 16.9296C3.00006 16.2567 3.26736 15.6114 3.74316 15.1356L8.66333 10.2154C8.3878 9.35414 8.32669 8.43506 8.48994 7.53905C8.69146 6.43306 9.22525 5.41474 10.0202 4.61981C10.8151 3.82488 11.8334 3.29109 12.9394 3.08958Z" />
             </g>
         </svg>,
+    "twitter": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill={color} d="M19.5 4.00785C18.76 4.53487 17.9407 4.93795 17.0736 5.20158C16.6083 4.66129 15.9898 4.27834 15.3018 4.10454C14.6138 3.93073 13.8896 3.97445 13.2271 4.22978C12.5645 4.48511 11.9956 4.93974 11.5973 5.53217C11.199 6.1246 10.9905 6.82626 11 7.54224V8.32246C9.64204 8.35801 8.29644 8.05392 7.08305 7.43726C5.86967 6.8206 4.82615 5.91052 4.04545 4.78806C4.04545 4.78806 0.954545 11.81 7.90909 14.9309C6.31768 16.0216 4.42189 16.5685 2.5 16.4913C9.45455 20.3924 17.9545 16.4913 17.9545 7.51883C17.9538 7.3015 17.9331 7.08471 17.8927 6.87125C18.6814 6.08595 19.2379 5.09447 19.5 4.00785Z" />
+        </svg>,    
     "user": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g>
                 <g>

diff --git a/src/lib/Tag/Tag.scss b/src/lib/Tag/Tag.scss
@@ -9,7 +9,7 @@
     letter-spacing: 0.5px;
     display: flex;
     flex-direction: row;
-    gap: $spacing__xs;
+    gap: $spacing__s;
     align-items: center;
     color: $color__white;
     border-radius: 2.25rem;
@@ -31,6 +31,7 @@
 
     .icon {
         padding-left: 0.5rem;
+        margin-right: -0.25rem;
 
         svg {
             display: block;

diff --git a/src/lib/Tag/Tag.stories.tsx b/src/lib/Tag/Tag.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Tag } from "./Tag";
+import { Icon } from "../Icon";
 import { Meta, StoryObj } from "@storybook/react";
 import { TagSize, TagVariant } from "./Tag.types";
 
@@ -10,6 +11,15 @@ const meta: Meta<typeof Tag> = {
   argTypes: {
     variant: { control: "select" },
     size: { control: "select" },
+    iconLeft: { 
+      control: "select",
+      options: ["None", "Image Url", "Icon"],
+      mapping: {
+        "None": undefined,
+        "Image Url": '/icons/wolfbot.svg',
+        "Icon": <Icon name="lock" size="medium" color="white" />
+      },
+    }
   },
 };
 export default meta;
@@ -25,8 +35,8 @@ SampleComponent.parameters = {
 SampleComponent.args = {
   variant: TagVariant.DEFAULT,
   label: "Private",
-  iconLeft: "/icons/lock.svg",
   size: TagSize.NARROW,
   className: "",
   id: "",
+  iconLeft: undefined
 };
diff --git a/src/lib/Tag/Tag.tsx b/src/lib/Tag/Tag.tsx
@@ -24,7 +24,7 @@ import "./Tag.scss";
 export const Tag: React.FC<TagProps> = ({
   variant = TagVariant.DEFAULT,
   size = TagSize.NARROW,
-  iconLeft = "",
+  iconLeft = undefined,
   label,
   className = "",
   id = "",