diff --git a/mobile/src/components/icons/HezTokenLogo.tsx b/mobile/src/components/icons/HezTokenLogo.tsx index dde00a7c..cb7dee6f 100644 --- a/mobile/src/components/icons/HezTokenLogo.tsx +++ b/mobile/src/components/icons/HezTokenLogo.tsx @@ -1,19 +1,89 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import Svg, { Circle, Path, Defs, LinearGradient, Stop, G, Text as SvgText, Polygon } from 'react-native-svg'; +import { KurdistanColors } from '../../theme/colors'; interface HezTokenLogoProps { size?: number; - color?: string; } -const HezTokenLogo: React.FC = ({ size = 56, color = '#008F43' }) => { +/** + * HEZ Token Logo - Matches the official hez_token_512.png design + * Three colored rings (Red, Yellow, Green) + * Two mountains (green and red) with sun rising behind + * "HEZ" text at bottom + */ +const HezTokenLogo: React.FC = ({ size = 56 }) => { return ( - - + + + + + + + + {/* Outer Red Ring */} + + + {/* Middle Yellow Ring */} + + + {/* Inner Green Ring */} + + + {/* White Background Circle */} + + + {/* Sun behind mountains */} + + + {/* Sun Rays */} + + {[...Array(12)].map((_, i) => { + const angle = ((i * 30) - 90) * (Math.PI / 180); + const x1 = 50 + 14 * Math.cos(angle); + const y1 = 48 + 14 * Math.sin(angle); + const x2 = 50 + 20 * Math.cos(angle); + const y2 = 48 + 20 * Math.sin(angle); + // Only show rays above horizon (top half) + if (y2 < 55) { + return ( + + ); + } + return null; + })} + + + {/* Green Mountain (left, larger) */} + + + {/* Red Mountain (right, smaller, in front) */} + + + {/* HEZ Text */} + + HEZ + ); }; diff --git a/mobile/src/components/icons/PezTokenLogo.tsx b/mobile/src/components/icons/PezTokenLogo.tsx index c730626a..86d0d2eb 100644 --- a/mobile/src/components/icons/PezTokenLogo.tsx +++ b/mobile/src/components/icons/PezTokenLogo.tsx @@ -1,19 +1,121 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import Svg, { Circle, Path, Defs, LinearGradient, Stop, G, Ellipse } from 'react-native-svg'; +import { KurdistanColors } from '../../theme/colors'; interface PezTokenLogoProps { size?: number; - color?: string; } -const PezTokenLogo: React.FC = ({ size = 56, color = '#E91E8C' }) => { +/** + * PEZ Token Logo - Matches the official pez_token_512.png design + * 6 ovals around (alternating red and green) + * Central sun with rays + * Stylized Pezkuwi (mountain goat) head silhouette + */ +const PezTokenLogo: React.FC = ({ size = 56 }) => { + // Generate 6 ovals positioned around the center + const ovals = [ + { cx: 50, cy: 15, color: KurdistanColors.kesk }, // Top - green + { cx: 80, cy: 30, color: KurdistanColors.sor }, // Top right - red + { cx: 80, cy: 70, color: KurdistanColors.kesk }, // Bottom right - green + { cx: 50, cy: 85, color: KurdistanColors.sor }, // Bottom - red + { cx: 20, cy: 70, color: KurdistanColors.kesk }, // Bottom left - green + { cx: 20, cy: 30, color: KurdistanColors.sor }, // Top left - red + ]; + return ( - + + + + + + + + + + + + + + {/* White background */} + + + {/* 6 Ovals around */} + {ovals.map((oval, i) => ( + + ))} + + {/* Sun rays behind ram */} + + {[...Array(16)].map((_, i) => { + const angle = (i * 22.5) * (Math.PI / 180); + const x1 = 50 + 18 * Math.cos(angle); + const y1 = 50 + 18 * Math.sin(angle); + const x2 = 50 + 28 * Math.cos(angle); + const y2 = 50 + 28 * Math.sin(angle); + return ( + + ); + })} + + + {/* Central circle for ram */} + + + {/* Stylized Ram/Goat head silhouette */} + {/* Ram face */} + + + {/* Ram horns - left */} + + {/* Ram horns - right */} + + + {/* Ram ears - left */} + + + {/* Ram ears - right */} + + + {/* Ram eyes - left */} + + + {/* Ram eyes - right */} + + + {/* Ram nose */} + + + {/* Ram nostrils */} + + ); };