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.

Sign up for GitHub

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

feat: update icon in wallet modal #186

Merged
merged 2 commits into from
Oct 7, 2024
Merged

feat: update icon in wallet modal #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d8faeb
fix: price tag
YohanTz Oct 7, 2024
1d228c0
feat: proper eth / strk logos in wallet popover
YohanTz Oct 7, 2024
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
6 changes: 3 additions & 3 deletions apps/arkmarket/src/components/wallet-account-balance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Ethereum, Starknet } from "@ark-market/ui/icons";
import { Ethereum2, Starknet2 } from "@ark-market/ui/icons";

import { ETH, STRK } from "~/constants/tokens";
import useBalance from "~/hooks/useBalance";
Expand Down Expand Up @@ -32,7 +32,7 @@ export default function WalletAccountBalance({
<>
<div className="flex h-16 items-center justify-between rounded-t-lg bg-card p-4">
<div className="flex items-center gap-2.5">
<Ethereum />
<Ethereum2 />
<span className="font-bold">ETH</span>
</div>
<div className="flex flex-col items-end gap-1">
Expand All @@ -44,7 +44,7 @@ export default function WalletAccountBalance({
</div>
<div className="mt-0.5 flex h-16 items-center justify-between rounded-b-lg bg-card p-4">
<div className="flex items-center gap-2.5">
<Starknet />
<Starknet2 />
<span className="font-bold">STRK</span>
</div>
<div className="flex flex-col items-end gap-1">
Expand Down
97 changes: 97 additions & 0 deletions packages/ui/src/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,38 @@ export const Ethereum =
</svg>
);

export const Ethereum2 = ({ className }: PropsWithClassName) => (
<svg
width="24"
height="24"
viewBox="0 0 32 32"
fill="none"
className={className}
>
<circle cx="16" cy="16" r="16" fill="white" />
<path
d="M15.9547 22.0532L9 17.9962L15.9539 27.6772L22.9135 17.9962L15.9523 22.0532H15.9547ZM16 5L9.08891 15.5L16 19.875L23 15.5037L16 5Z"
fill="#64698C"
/>
<path
d="M9 17.9961L15.9547 22.0532L15.9539 27.6771L9 17.9961Z"
fill="#8C93AF"
/>
<path
d="M16.0776 19.5857L9.12207 15.5249L15.9999 5L16.0776 19.5857Z"
fill="#8C94AF"
/>
<path
d="M16.0776 19.5856L9.12207 15.5248L16.0776 12.4375L16.0776 19.5856Z"
fill="#64688C"
/>
<path
d="M16.0006 19.875L22.9727 15.5248L16.0171 12.4375L16.0006 19.875Z"
fill="#474A73"
/>
</svg>
);

export const Filter =
process.env.NEXT_PUBLIC_THEME === "unframed"
? ({ className }: PropsWithClassName) => (
Expand Down Expand Up @@ -428,6 +460,71 @@ export const Starknet =
</svg>
);

export const Starknet2 = ({ className }: PropsWithClassName) => (
<svg
className={className}
width="24"
height="24"
viewBox="0 0 36 36"
fill="none"
>
<path
d="M17.9998 34.6245C8.81807 34.6245 1.375 27.1815 1.375 17.9998C1.375 8.81807 8.81807 1.375 17.9998 1.375C27.1814 1.375 34.625 8.81805 34.625 17.9998C34.625 27.1815 27.1814 34.6245 17.9998 34.6245Z"
fill="#163349"
stroke="#334155"
strokeWidth="1.25"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.1929 15.5032L11.6804 13.3385C11.7795 13.0321 12.0213 12.7937 12.3287 12.6997L14.4971 12.2343C14.7066 12.1703 14.7083 11.8747 14.5005 11.8073L12.3389 11.3197C12.0331 11.2206 11.7948 10.9788 11.7002 10.6713L11.2353 8.49972C11.1713 8.29077 10.8757 8.2885 10.8084 8.49689L10.3208 10.6611C10.2217 10.9669 9.97995 11.2053 9.67248 11.2999L7.71226 11.8322C7.50275 11.8967 7.50049 12.1918 7.70887 12.2591L9.66229 12.6793C9.96806 12.7784 10.2064 13.0208 10.301 13.3283L10.7659 15.4998C10.8299 15.7093 11.1255 15.7115 11.1929 15.5032Z"
fill="#FAFAFA"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.3237 13.5198C29.8182 12.9545 29.0292 12.6363 28.2622 12.5058C27.4891 12.3804 26.6785 12.3921 25.9152 12.5276C24.371 12.7889 22.968 13.4283 21.7444 14.2171C21.109 14.6043 20.5671 15.0523 20.0056 15.5085C19.7351 15.7392 19.4885 15.9849 19.2317 16.2271L18.5299 16.9254C17.7673 17.7225 17.0156 18.4485 16.2884 19.0503C15.5582 19.6493 14.8755 20.1043 14.2027 20.422C13.5304 20.7413 12.811 20.9291 11.8733 20.9592C10.9438 20.992 9.84417 20.8242 8.6679 20.5473C7.48531 20.2717 6.24348 19.8787 4.85576 19.5406C5.33997 20.8839 6.06913 22.071 7.00528 23.1562C7.95242 24.2225 9.13511 25.1944 10.6544 25.8335C12.1518 26.4869 14.0335 26.7214 15.793 26.3676C17.5571 26.028 19.1053 25.2117 20.3566 24.2676C21.6112 23.3138 22.6262 22.2274 23.4819 21.0979C23.7181 20.7859 23.843 20.6112 24.014 20.3673L24.4864 19.6675C24.8148 19.2346 25.1136 18.7417 25.4386 18.3128C26.0758 17.4145 26.7039 16.5173 27.4339 15.6907C27.8014 15.2714 28.1887 14.8704 28.6461 14.485C28.8742 14.2969 29.1207 14.1128 29.3936 13.9469C29.6707 13.7681 29.9633 13.6281 30.3237 13.5198Z"
fill="url(#paint0_linear_1117_72106)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.3244 13.5206C29.7812 12.1503 28.7717 10.9968 27.4166 10.1456C26.0698 9.30376 24.1991 8.87414 22.3454 9.24037C21.4296 9.41747 20.5424 9.75845 19.7639 10.2125C18.9888 10.6648 18.2943 11.2093 17.693 11.7933C17.3929 12.0864 17.1204 12.392 16.8498 12.6994L16.1482 13.5938L15.0647 15.0336C13.6834 16.886 12.1959 19.057 9.75482 19.7002C7.35839 20.3317 6.31902 19.7725 4.85641 19.5414C5.12384 20.2319 5.45512 20.9024 5.90421 21.4923C6.34494 22.0941 6.86551 22.6594 7.51273 23.1439C7.8398 23.3766 8.18512 23.6063 8.56864 23.8011C8.95041 23.9892 9.36213 24.1549 9.80159 24.2796C10.6757 24.5192 11.6598 24.6031 12.6127 24.4743C13.566 24.3471 14.4772 24.0449 15.2736 23.6437C16.076 23.2463 16.7749 22.7622 17.399 22.2514C18.6396 21.2211 19.6046 20.0828 20.4198 18.9321C20.8298 18.3568 21.2019 17.7706 21.5461 17.1843L21.9513 16.4862C22.0751 16.2822 22.2004 16.0769 22.3276 15.8857C22.8409 15.1175 23.343 14.5015 23.9528 14.0392C24.5542 13.5649 25.3916 13.2145 26.5106 13.1331C27.625 13.0507 28.9114 13.2029 30.3244 13.5206Z"
fill="#FAFAFA"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24 25C24 26.1043 24.8959 27 26.0005 27C27.1052 27 28 26.1043 28 25C28 23.8957 27.1052 23 26.0005 23C24.8959 23 24 23.8957 24 25Z"
fill="url(#paint1_linear_1117_72106)"
/>
<defs>
<linearGradient
id="paint0_linear_1117_72106"
x1="30.1874"
y1="13.039"
x2="-11.4333"
y2="34.6935"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC796B" />
<stop offset="1" stopColor="#D672EF" />
</linearGradient>
<linearGradient
id="paint1_linear_1117_72106"
x1="27.9986"
y1="23.597"
x2="20.7086"
y2="24.2805"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC796B" />
<stop offset="1" stopColor="#D672EF" />
</linearGradient>
</defs>
</svg>
);

export const Telegram =
process.env.NEXT_PUBLIC_THEME === "unframed"
? ({ className }: PropsWithClassName) => (
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/price-tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function PriceTag({
>
<Ethereum className="size-5" />
<p className={ellipsableStyles}>
{isNaN(parsedPrice) ? formatUnits(price, 18) : parsedPrice.toFixed(4)}
{isNaN(parsedPrice) ? formatUnits(price, 18) : parsedPrice.toFixed(5)}
<span className="text-muted-foreground"> ETH</span>
</p>
</div>
Expand Down
Loading