Add BestRateBadge

This component can be used with the PaymentOptionCard as the
renderRight prop.

This is apart of the new fiat buy UI design.

Author: samholmes

src/components/icons/BestRateBadge.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import { type LayoutChangeEvent, StyleSheet, View } from 'react-native'
+import Svg, { Polygon } from 'react-native-svg'
+
+import { lstrings } from '../../locales/strings'
+import { styled } from '../hoc/styled'
+import { useTheme } from '../services/ThemeContext'
+import { EdgeText } from '../themed/EdgeText'
+
+// TODO: Render a badge icon
+export const BestRateBadge = () => {
+  const theme = useTheme()
+
+  const [dimensions, setDimensions] = React.useState({ width: 70, height: 100 })
+  const { width, height } = dimensions
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout
+    setDimensions({ width, height })
+  }
+
+  // Compute a 5-point star sized around the text box
+  const { svgWidth, svgHeight, points } = React.useMemo(() => {
+    const padding = theme.rem(0.75)
+    const svgWidth = width + padding * 2
+    const svgHeight = height + padding * 2
+
+    const centerX = svgWidth / 2
+    const centerY = svgHeight / 2
+    const outerRadius = Math.max(width, height) / 2 + padding * 0.9
+    const innerRadius = outerRadius * 0.75
+
+    const numPoints = 14
+    const totalVertices = numPoints * 2 // outer+inner alternating
+    const startAngle = -Math.PI / 2 // Point up
+
+    const pts: Array<{ x: number; y: number }> = []
+    for (let i = 0; i < totalVertices; i++) {
+      const isOuter = i % 2 === 0
+      const radius = isOuter ? outerRadius : innerRadius
+      const angle = startAngle + (i * Math.PI) / numPoints
+      const x = centerX + radius * Math.cos(angle)
+      const y = centerY + radius * Math.sin(angle)
+      pts.push({ x, y })
+    }
+
+    const points = pts.map(p => `${p.x},${p.y}`).join(' ')
+    return { svgWidth, svgHeight, points }
+  }, [height, theme, width])
+
+  return (
+    <BestRateBadgeContainer onLayout={handleLayout}>
+      <Svg
+        width={svgWidth}
+        height={svgHeight}
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+        style={[
+          StyleSheet.absoluteFillObject,
+          { top: -theme.rem(0.75), left: -theme.rem(0.75) }
+        ]}
+      >
+        <Polygon
+          points={points}
+          fill="none"
+          stroke={theme.iconTappable}
+          strokeWidth={2}
+        />
+      </Svg>
+      <BestRateText>{lstrings.string_best_rate_badge_text}</BestRateText>
+    </BestRateBadgeContainer>
+  )
+}
+
+const BestRateBadgeContainer = styled(View)(theme => ({
+  alignItems: 'center',
+  justifyContent: 'center'
+}))
+
+const BestRateText = styled(EdgeText)(theme => ({
+  fontSize: theme.rem(0.5),
+  fontWeight: 'bold',
+  color: theme.primaryText,
+  textAlign: 'center',
+  letterSpacing: 0,
+  zIndex: 1
+}))

src/locales/en_US.ts

@@ -1385,6 +1385,7 @@ const strings = {
   string_warning: 'Warning', // Generic string. Same with wc_smartcontract_warning_title
   string_report_error: 'Report Error',
   string_report_sent: 'Report sent.',
+  string_best_rate_badge_text: 'Best\nRate',
 
   step: 'Step',
   scan_as_in_scan_barcode: 'Scan',

src/locales/strings/enUS.json

@@ -1090,7 +1090,8 @@
   "string_warning": "Warning",
   "string_report_error": "Report Error",
   "string_report_sent": "Report sent.",
-  "step": "Step",
+  "string_best_rate_badge_text": "Best\nRate",
+  "step_prefix_s": "Step %s:",
   "scan_as_in_scan_barcode": "Scan",
   "enter_as_in_enter_address_with_keyboard": "Enter",
   "delete_account_title": "Delete Account",