Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New chain logos for V3 #2

Closed
wants to merge 6 commits into from
Closed
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@hyperlane-xyz/widgets",
"description": "Common react components for Hyperlane projects",
"version": "1.5.7-beta1",
"version": "1.5.7-beta8",
"author": "J M Rossy",
"peerDependencies": {
"@hyperlane-xyz/sdk": "1.5.7-beta1",
Expand Down Expand Up @@ -75,7 +75,7 @@
"url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
},
"scripts": {
"build": "yarn build:svg && yarn build:cjs && yarn build:esm && yarn build:css",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which logo is breaking during the svgr step? I'll take a look

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the color ones - scroll, polygonzkevm, base

"build": " yarn build:cjs && yarn build:esm && yarn build:css",
"build:cjs": "tsc --project ./tsconfig.json",
"build:esm": "tsc --project ./tsconfig.esm.json",
"build:css": "tailwindcss -c ./tailwind.config.js -i ./src/styles.css -o ./dist/styles.css --minify",
Expand Down
2 changes: 1 addition & 1 deletion src/icons/ChainLogo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
[chainMetadata.optimism.chainId]: { black: OptimismBlack, color: OptimismColor },
[chainMetadata.optimismgoerli.chainId]: { black: OptimismBlack, color: OptimismColor },
[chainMetadata.polygon.chainId]: { black: PolygonBlack, color: PolygonColor },
[chainMetadata.polygonzkemvtestnet.chainId]: {
[chainMetadata.polygonzkevmtestnet.chainId]: {
black: PolygonZkevmBlack,
color: PolygonZkevmColor,
},
Expand Down
54 changes: 47 additions & 7 deletions src/logos/black/Polygonzkevm.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,56 @@
import * as React from 'react';
import { SVGProps } from 'react';

const SvgPolygonzkevm = (props: SVGProps<SVGSVGElement>) => (
const SvgPolygonZkevm = (props: SVGProps<SVGSVGElement>) => (
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width={341.333}
height={341.333}
viewBox="0 0 256 256"
width="256.000000pt"
height="256.000000pt"
viewBox="0 0 256.000000 256.000000"
preserveAspectRatio="xMidYMid meet"
{...props}
>
<path d="M116.2 2.6c-7.5 2.6-88.3 49.9-92.9 54.3-2.3 2.3-5.4 6.7-7 9.9l-2.8 5.7v111l2.7 5.6c1.6 3 4.8 7.5 7.2 9.9 4.8 4.8 83.5 51 92.1 54.1 6.2 2.3 17.8 2.4 23.9.4 2.5-.9 23.6-12.6 46.9-26.1 45.2-26 48.6-28.5 53.5-38.4l2.7-5.5v-111l-2.7-5.5c-5-10.1-8.7-12.8-54.5-39.2-23.5-13.5-44.6-25.1-46.8-25.7-5.6-1.5-17.2-1.3-22.3.5zm20.3 18.2c1.7.8 20.9 11.8 42.8 24.4 30 17.3 40.4 23.9 42.5 26.6 2.4 3.2 2.7 4.5 3 13.5.2 5.6-.1 11.7-.8 14.1-1.7 6.3-7 12.7-13.1 16.1l-5.4 3-78.5.5c-86.2.5-82.1.3-92.2 6.6l-3.9 2.5.3-26.5.3-26.4 3-3.7c2.2-2.8 13.7-9.9 44.5-27.7 22.8-13.1 43.1-24.3 45-24.8 4.1-1 8.3-.4 12.5 1.8zm88 157.8c-1.1 6.3-5.9 9.7-45.4 32.4-47.1 27.1-45.4 26.2-51.2 26.2-5.6 0-4 .9-54.9-28.5-25.8-14.9-36.3-21.6-38.5-24.2-3-3.6-3-3.8-3-15.8 0-10.1.3-12.9 2-16.2 2.5-5 8-10.5 13-13 3.8-1.9 7-2 82.5-2.5 83.7-.6 80.7-.4 90.5-5.8l5-2.7.3 23.5c.2 12.9 0 24.9-.3 26.6z" />
<path d="M77.5 61.4c-3.7 1.7-8 6.2-9.4 9.9-.6 1.6-1.1 9.8-1.1 18.3V105h18V78h18v27h18.1l-.3-16.9-.3-16.9-3.1-3.9c-5.1-6.4-8-7.3-23.4-7.3-9 .1-14.5.5-16.5 1.4zM150.5 61.4c-1.6.8-4.1 2.4-5.4 3.6-4.3 4.2-5.1 7.8-5.1 24.5v15.6l8.8-.3 8.7-.3.3-13.3.3-13.2H176v27h18V89.7c0-12.6-.4-15.9-1.9-19.2-2.1-4.6-5.4-7.9-9.4-9.4-4.2-1.6-28.5-1.3-32.2.3zM67 166.5c0 17.6.7 20.3 6.3 25.2 4.6 4.1 7.4 4.5 23.5 4.1 12.8-.3 13.1-.3 16.9-3.4 6.6-5.3 7.3-7.8 7.3-25.7V151h-18v27H85v-27H67v15.5zM140 166.5c0 17 .7 20.1 5.6 24.7 4.4 4.1 7.5 4.8 21.5 4.8 10.8 0 13.6-.3 16.7-1.9 8.6-4.4 10.2-8.7 10.2-28.1v-15h-18v27h-17.9l-.3-13.3-.3-13.2-8.7-.3-8.8-.3v15.6z" />
<g
transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M1162 2534 c-75 -26 -883 -499 -929 -543 -23 -23 -54 -67 -70 -99
l-28 -57 0 -555 0 -555 27 -56 c16 -30 48 -75 72 -99 48 -48 835 -510 921
-541 62 -23 178 -24 239 -4 25 9 236 126 469 261 452 260 486 285 535 384 l27
55 0 555 0 555 -27 55 c-50 101 -87 128 -545 392 -235 135 -446 251 -468 257
-56 15 -172 13 -223 -5z m203 -182 c17 -8 209 -118 428 -244 300 -173 404
-239 425 -266 24 -32 27 -45 30 -135 2 -56 -1 -117 -8 -141 -17 -63 -70 -127
-131 -161 l-54 -30 -785 -5 c-862 -5 -821 -3 -922 -66 l-39 -25 3 265 3 264
30 37 c22 28 137 99 445 277 228 131 431 243 450 248 41 10 83 4 125 -18z
m880 -1578 c-11 -63 -59 -97 -454 -324 -471 -271 -454 -262 -512 -262 -56 0
-40 -9 -549 285 -258 149 -363 216 -385 242 -30 36 -30 38 -30 158 0 101 3
129 20 162 25 50 80 105 130 130 38 19 70 20 825 25 837 6 807 4 905 58 l50
27 3 -235 c2 -129 0 -249 -3 -266z"
/>
<path
d="M775 1946 c-37 -17 -80 -62 -94 -99 -6 -16 -11 -98 -11 -183 l0 -154
90 0 90 0 0 135 0 135 90 0 90 0 0 -135 0 -135 91 0 90 0 -3 169 -3 169 -31
39 c-51 64 -80 73 -234 73 -90 -1 -145 -5 -165 -14z"
/>
<path
d="M1505 1946 c-16 -8 -41 -24 -54 -36 -43 -42 -51 -78 -51 -245 l0
-156 88 3 87 3 3 133 3 132 89 0 90 0 0 -135 0 -135 90 0 90 0 0 153 c0 126
-4 159 -19 192 -21 46 -54 79 -94 94 -42 16 -285 13 -322 -3z"
/>
<path
d="M670 895 c0 -176 7 -203 63 -252 46 -41 74 -45 235 -41 128 3 131 3
169 34 66 53 73 78 73 257 l0 157 -90 0 -90 0 0 -135 0 -135 -90 0 -90 0 0
135 0 135 -90 0 -90 0 0 -155z"
/>
<path
d="M1400 895 c0 -170 7 -201 56 -247 44 -41 75 -48 215 -48 108 0 136 3
167 19 86 44 102 87 102 281 l0 150 -90 0 -90 0 0 -135 0 -135 -90 0 -89 0 -3
133 -3 132 -87 3 -88 3 0 -156z"
/>
</g>
</svg>
);
export default SvgPolygonzkevm;
export default SvgPolygonZkevm;
21 changes: 14 additions & 7 deletions src/logos/color/Base.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,22 @@ import * as React from 'react';
import { SVGProps } from 'react';

const SvgBase = (props: SVGProps<SVGSVGElement>) => (
<svg width={1200} height={1200} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<g clipPath="url(#base_svg__a)">
<circle cx={600} cy={600} r={600} fill="#0052FF" />
<circle cx={600} cy={600} r={423} fill="#fff" />
<path fill="#0052FF" d="M177 565h637v70H177z" />
<svg
width="1200"
height="1200"
viewBox="0 0 1200 1200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clip-path="url(#clip0_1967_68)">
<circle cx="600" cy="600" r="600" fill="#0052FF" />
<circle cx="600" cy="600" r="423" fill="white" />
<rect x="177" y="565" width="637" height="70" fill="#0052FF" />
</g>
<defs>
<clipPath id="base_svg__a">
<path fill="#fff" d="M0 0h1200v1200H0z" />
<clipPath id="clip0_1967_68">
<rect width="1200" height="1200" fill="white" />
</clipPath>
</defs>
</svg>
Expand Down
29 changes: 18 additions & 11 deletions src/logos/color/Polygonzkevm.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
import * as React from 'react';
import { SVGProps } from 'react';

const SvgPolygonzkevm = (props: SVGProps<SVGSVGElement>) => (
<svg width={1300} height={1300} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<g clipPath="url(#polygonzkevm_svg__a)">
<circle cx={650} cy={650} r={650} fill="#7F3CE0" />
const SvgPolygonZkevm = (props: SVGProps<SVGSVGElement>) => (
<svg
width="1300"
height="1300"
viewBox="0 0 1300 1300"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clip-path="url(#clip0_1971_88)">
<circle cx="650" cy="650" r="650" fill="#7F3CE0" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M251 840V460l3.5-25 14.5-20 349-200 30-4.5 30.5 4.5L1025 415l17 20 4.5 25v380l-5.5 23.5-16 22L678.5 1085l-27.5 7.5-33-7.5-349-199.5-11-21-7-24.5Zm59-110.5 26.5-33 32-22.5H912l39.5-12 35.5-17v195l-336 192.5L310 840V729.5ZM493 717h-61.5v105l17.5 25.5 27.5 16H583l28-16 15.5-25.5V717H568v88.5h-75V717Zm238.5 0H671v105l15 25.5 29 16h107.5l31-16 11-25.5V717H806v88.5h-74.5V717ZM310 645V460l341-191 336 191v100.5l-31 31-44 23.5H368.5l-32 11.5L310 645Zm121.5-75H493v-88.5h75V570h58.5V467l-16-26-27.5-19H476.5l-27 19-18 26v103Zm239.5 0h60.5v-88.5H806V570h58.5V467L852 441l-29.5-19H715l-27.5 19-16.5 26v103Z"
fill="#fff"
fill-rule="evenodd"
clip-rule="evenodd"
d="M251 840V460L254.5 435L269 415L618 215L648 210.5L678.5 215L1025 415L1042 435L1046.5 460V840L1041 863.5L1025 885.5L678.5 1085L651 1092.5L618 1085L269 885.5L258 864.5L251 840ZM310 729.5L336.5 696.5L368.5 674H912L951.5 662L987 645V840L651 1032.5L310 840V729.5ZM493 717H431.5V822L449 847.5L476.5 863.5H583L611 847.5L626.5 822V717H568V805.5H493V717ZM731.5 717H671V822L686 847.5L715 863.5H822.5L853.5 847.5L864.5 822V717H806V805.5H731.5V717ZM310 645V460L651 269L987 460V560.5L956 591.5L912 615H368.5L336.5 626.5L310 645ZM431.5 570H493V481.5H568V570H626.5V467L610.5 441L583 422H476.5L449.5 441L431.5 467V570ZM671 570H731.5V481.5H806V570H864.5V467L852 441L822.5 422H715L687.5 441L671 467V570Z"
fill="white"
/>
</g>
<defs>
<clipPath id="polygonzkevm_svg__a">
<path fill="#fff" d="M0 0h1300v1300H0z" />
<clipPath id="clip0_1971_88">
<rect width="1300" height="1300" fill="white" />
</clipPath>
</defs>
</svg>
);
export default SvgPolygonzkevm;
export default SvgPolygonZkevm;
27 changes: 21 additions & 6 deletions src/logos/color/Scroll.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,40 @@ import * as React from 'react';
import { SVGProps } from 'react';

const SvgScroll = (props: SVGProps<SVGSVGElement>) => (
<svg width={1260} height={1260} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<svg
width="1260"
height="1260"
viewBox="0 0 1260 1260"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M1045.75 800.203v-561.99c-1.04-47.05-38.16-84.691-85.21-84.691H373.979c-126.513 2.092-228.456 105.602-228.456 232.638 0 42.868 11.502 79.463 29.276 111.876 14.638 26.661 38.163 51.755 61.166 71.098 6.273 5.228 3.136 3.137 23.002 15.683 27.707 16.729 59.074 25.094 59.074 25.094V946.06c.523 15.683 2.614 31.367 6.274 45.482 13.069 47.048 46.005 83.648 90.441 101.418 18.82 7.32 39.731 12.55 62.211 12.55l468.413 1.57c93.58 0 169.38-75.81 169.38-169.385 0-56.983-27.18-106.647-69.01-137.492Z"
d="M1045.75 800.203V238.213C1044.71 191.163 1007.59 153.522 960.54 153.522H373.979C247.466 155.614 145.523 259.124 145.523 386.16C145.523 429.028 157.025 465.623 174.799 498.036C189.437 524.697 212.962 549.791 235.965 569.134C242.238 574.362 239.101 572.271 258.967 584.817C286.674 601.546 318.041 609.911 318.041 609.911V946.06C318.564 961.743 320.655 977.427 324.315 991.542C337.384 1038.59 370.32 1075.19 414.756 1092.96C433.576 1100.28 454.487 1105.51 476.967 1105.51L945.38 1107.08C1038.96 1107.08 1114.76 1031.27 1114.76 937.695C1114.76 880.712 1087.58 831.048 1045.75 800.203Z"
fill="#FFEEDA"
/>
<path
d="M1056.73 940.309c-2.09 60.121-51.23 108.211-111.353 108.211l-322.557-1.04c25.617-29.8 41.3-68.485 41.3-110.308 0-66.393-39.731-111.875-39.731-111.875h320.988c61.683 0 111.353 50.187 111.353 111.875v3.137Z"
d="M1056.73 940.309C1054.64 1000.43 1005.5 1048.52 945.377 1048.52L622.82 1047.48C648.437 1017.68 664.12 978.995 664.12 937.172C664.12 870.779 624.389 825.297 624.389 825.297H945.377C1007.06 825.297 1056.73 875.484 1056.73 937.172V940.309Z"
fill="#EBC28E"
/>
<path
d="M265.763 520.516c-37.118-35.027-63.257-80.509-63.257-134.878v-5.751c3.137-92.009 78.94-166.244 170.95-169.381h586.561c15.16.523 27.707 11.501 27.707 27.185v496.12c13.596 2.613 19.866 4.182 32.936 8.887 9.93 3.659 24.57 12.024 24.57 12.024V237.691C1044.18 190.64 1007.07 153 960.017 153H373.456C246.942 155.091 145 258.602 145 385.638c0 73.712 33.458 136.969 88.873 181.405 3.659 3.137 7.319 6.796 17.252 6.796 17.251 0 29.275-13.592 28.753-28.753-.523-12.546-5.751-17.252-14.115-24.57Z"
d="M265.763 520.516C228.645 485.489 202.506 440.007 202.506 385.638V379.887C205.643 287.878 281.446 213.643 373.456 210.506H960.017C975.177 211.029 987.724 222.007 987.724 237.691V733.811C1001.32 736.424 1007.59 737.993 1020.66 742.698C1030.59 746.357 1045.23 754.722 1045.23 754.722V237.691C1044.18 190.64 1007.07 153 960.017 153H373.456C246.942 155.091 145 258.602 145 385.638C145 459.35 178.458 522.607 233.873 567.043C237.532 570.18 241.192 573.839 251.125 573.839C268.376 573.839 280.4 560.247 279.878 545.086C279.355 532.54 274.127 527.834 265.763 520.516Z"
fill="#190602"
/>
<path
d="M945.381 767.268H485.333c-30.844 0-55.938 25.616-55.938 56.46v65.871c1.046 30.321 27.185 56.983 57.506 56.983h33.981v-56.983h-33.981v-64.825h18.82c58.029 0 100.897 53.846 100.897 111.875 0 51.232-46.527 116.581-124.422 111.351-69.53-4.7-106.647-66.392-106.647-111.351V375.704c0-25.093-20.389-46.005-46.005-46.005h-46.005v57.506h33.981v549.444c-1.568 111.871 79.463 168.331 164.153 168.331l463.708 1.57c93.579 0 169.379-75.8 169.379-169.378 0-93.578-75.8-169.904-169.379-169.904Zm111.349 173.04c-2.09 60.122-51.23 108.212-111.349 108.212l-322.557-1.04c25.617-29.8 41.3-68.486 41.3-110.308 0-66.394-39.731-111.876-39.731-111.876h320.988c61.689 0 111.349 50.187 111.349 111.876v3.136ZM825.139 397.139H474.875v-56.983h350.264c14.115 0 25.093 11.501 25.093 25.094v6.796c0 14.115-11.501 25.093-25.093 25.093Z"
d="M945.381 767.268H485.333C454.489 767.268 429.395 792.884 429.395 823.728V889.599C430.441 919.92 456.58 946.582 486.901 946.582H520.882V889.599H486.901V824.774C486.901 824.774 495.266 824.774 505.721 824.774C563.75 824.774 606.618 878.62 606.618 936.649C606.618 987.881 560.091 1053.23 482.196 1048C412.666 1043.3 375.549 981.608 375.549 936.649V375.704C375.549 350.611 355.16 329.699 329.544 329.699H283.539V387.205H317.52V936.649C315.952 1048.52 396.983 1104.98 481.673 1104.98L945.381 1106.55C1038.96 1106.55 1114.76 1030.75 1114.76 937.172C1114.76 843.594 1038.96 767.268 945.381 767.268ZM1056.73 940.308C1054.64 1000.43 1005.5 1048.52 945.381 1048.52L622.824 1047.48C648.441 1017.68 664.124 978.994 664.124 937.172C664.124 870.778 624.393 825.296 624.393 825.296H945.381C1007.07 825.296 1056.73 875.483 1056.73 937.172V940.308Z"
fill="#190602"
/>
<path
d="M825.139 667.419H474.875v-56.983h350.264c14.115 0 25.093 11.501 25.093 25.093v6.796c0 13.593-11.501 25.094-25.093 25.094ZM885.785 532.54h-411.43v-56.983h411.43c14.115 0 25.093 11.501 25.093 25.093v6.796c.523 13.593-10.978 25.094-25.093 25.094Z"
d="M825.139 397.139H474.875V340.156H825.139C839.254 340.156 850.232 351.657 850.232 365.25V372.046C850.232 386.161 838.731 397.139 825.139 397.139Z"
fill="#190602"
/>
<path
d="M825.139 667.419H474.875V610.436H825.139C839.254 610.436 850.232 621.937 850.232 635.529V642.325C850.232 655.918 838.731 667.419 825.139 667.419Z"
fill="#190602"
/>
<path
d="M885.785 532.54H474.355V475.557H885.785C899.9 475.557 910.878 487.058 910.878 500.65V507.446C911.401 521.039 899.9 532.54 885.785 532.54Z"
fill="#190602"
/>
</svg>
Expand Down
Loading