@akta/algomd-rn 0.0.1-canary

package/src/components/NFTSearch.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback, useState } from 'react';
+import { View, Text } from 'react-native';
+import type { NFTListing } from '../types/algorand';
+import { formatCurrency } from '../utils/format';
+import { SearchSheet } from '../ui/SearchSheet';
+
+interface NFTSearchProps {
+  data: NFTListing[];
+  onSelect?: (listing: NFTListing) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function NFTSearch({
+  data,
+  onSelect,
+  placeholder = 'Search NFTs...',
+  className,
+}: NFTSearchProps) {
+  const [selected, setSelected] = useState<NFTListing | null>(null);
+
+  const handleSelect = useCallback(
+    (listing: NFTListing) => {
+      setSelected(listing);
+      onSelect?.(listing);
+    },
+    [onSelect],
+  );
+
+  const renderItem = useCallback(
+    (listing: NFTListing) => (
+      <View className="flex-row items-center gap-3">
+        <View className="w-8 h-8 rounded-lg bg-zinc-800 items-center justify-center">
+          <Text className="text-xs text-zinc-400">NFT</Text>
+        </View>
+        <View className="flex-1">
+          <Text className="text-sm font-medium text-white" numberOfLines={1}>
+            {listing.nft.name}
+          </Text>
+          <Text className="text-xs text-zinc-400">
+            {listing.collection || `#${listing.nft.id}`}
+          </Text>
+        </View>
+        <Text className="text-xs font-medium text-white">
+          {formatCurrency(listing.price, listing.currency)}
+        </Text>
+      </View>
+    ),
+    [],
+  );
+
+  return (
+    <View className={className}>
+      <SearchSheet
+        data={data}
+        placeholder={placeholder}
+        onSelect={handleSelect}
+        renderItem={renderItem}
+      />
+      {selected && (
+        <View className="mt-3 p-3 rounded-lg bg-zinc-800 border border-zinc-700">
+          <Text className="text-xs font-medium text-zinc-400 mb-1">Selected NFT</Text>
+          {renderItem(selected)}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/Poll.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import type { Poll as PollType, ComponentSize } from '../types/algorand';
+import { formatRelativeTime } from '../utils/format';
+import { SizeContainer } from '../ui/SizeContainer';
+import { StatusBadge } from '../ui/StatusBadge';
+import { ProgressBar } from '../ui/ProgressBar';
+
+function VoteIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="m9 12 2 2 4-4" />
+      <Path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7Z" />
+      <Path d="M22 19H2" />
+    </Svg>
+  );
+}
+
+function UsersIcon({ size = 12, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <Path d="M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" />
+      <Path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+      <Path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </Svg>
+  );
+}
+
+function TrendingUpIcon({ size = 12, color = '#34d399' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="m22 7-8.5 8.5-5-5L2 17" />
+      <Path d="M16 7h6v6" />
+    </Svg>
+  );
+}
+
+function ClockIcon({ size = 12, color = '#71717a' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z" />
+      <Path d="M12 6v6l4 2" />
+    </Svg>
+  );
+}
+
+function CalendarIcon({ size = 12, color = '#71717a' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M8 2v4" />
+      <Path d="M16 2v4" />
+      <Path d="M3 10h18" />
+      <Path d="M21 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
+    </Svg>
+  );
+}
+
+interface PollProps {
+  data: PollType;
+  showVoteButton?: boolean;
+  compact?: boolean;
+  size?: ComponentSize;
+  className?: string;
+  onVote?: (pollId: string, optionId: string) => void;
+}
+
+export function PollComponent({
+  data: poll,
+  showVoteButton = true,
+  compact = false,
+  size = 'full',
+  className,
+  onVote,
+}: PollProps) {
+  const isExpired = poll.expiresAt ? new Date() > poll.expiresAt : false;
+  const canVote = poll.status === 'active' && !isExpired;
+  const hasGating = poll.gating !== undefined;
+  const totalPower = poll.options.reduce((sum, opt) => sum + opt.votingPower, 0);
+
+  const isFullscreen = size === 'fullscreen';
+
+  return (
+    <SizeContainer size={size} className={className}>
+      <Animated.View
+        entering={FadeInDown.duration(400).springify()}
+        className={`rounded-2xl ${isFullscreen ? 'border border-zinc-800' : 'bg-zinc-900/80'}`}
+      >
+        <View className={compact ? 'p-2' : 'p-5'}>
+          {/* Header */}
+          <View className={compact ? 'mb-1' : 'mb-3'}>
+            <View className="flex-row items-center gap-2 flex-wrap mb-1">
+              <VoteIcon size={16} color={poll.status === 'active' ? '#34d399' : '#71717a'} />
+              <Text className="text-sm font-medium text-zinc-400">Poll</Text>
+              <StatusBadge
+                label={poll.status.charAt(0).toUpperCase() + poll.status.slice(1)}
+                variant={poll.status === 'active' ? 'success' : 'neutral'}
+              />
+              {hasGating && <StatusBadge label="Gated" variant="primary" />}
+              {isExpired && <StatusBadge label="Expired" variant="error" />}
+            </View>
+
+            <Text className={`font-semibold text-white ${compact ? 'text-xs mb-0.5' : 'text-base mb-2'}`}>
+              {poll.question}
+            </Text>
+
+            <View className="flex-row items-center justify-between">
+              <View className="flex-row items-center gap-3">
+                <View className="flex-row items-center gap-1">
+                  <UsersIcon size={12} color="#71717a" />
+                  <Text className="text-xs text-zinc-400">{poll.totalVotes} votes</Text>
+                </View>
+                {!compact && (
+                  <View className="flex-row items-center gap-1">
+                    <TrendingUpIcon size={12} color="#71717a" />
+                    <Text className="text-xs text-zinc-400">{totalPower.toLocaleString()} power</Text>
+                  </View>
+                )}
+              </View>
+              {poll.expiresAt && (
+                <View className="flex-row items-center gap-1">
+                  <ClockIcon size={12} color="#71717a" />
+                  <Text className="text-xs text-zinc-400">
+                    {canVote ? 'Ends' : 'Ended'} {formatRelativeTime(poll.expiresAt)}
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
+
+          {/* Gating Info */}
+          {hasGating && poll.gating && !compact && (
+            <View className="mb-3 bg-purple-500/5 rounded-xl px-3 py-2.5">
+              <Text className="text-xs font-medium text-purple-300 mb-1">Voting Requirements</Text>
+              <Text className="text-xs text-purple-200">
+                {poll.gating.type === 'asset-holding' && 'Requires holding specified assets to participate'}
+                {poll.gating.type === 'nfd-verified' && 'Requires verified NFD to participate'}
+              </Text>
+            </View>
+          )}
+
+          {/* Options */}
+          <View className={compact ? 'gap-1' : 'gap-2'}>
+            {poll.options.map((option, index) => {
+              const percentage = poll.totalVotes > 0 ? (option.votes / poll.totalVotes) * 100 : 0;
+              const powerPercentage =
+                totalPower > 0 ? (option.votingPower / totalPower) * 100 : 0;
+
+              return (
+                <Pressable
+                  key={option.id}
+                  onPress={() => canVote && showVoteButton && onVote?.(poll.id, option.id)}
+                  disabled={!canVote || !showVoteButton}
+                  className={`rounded-lg border overflow-hidden ${
+                    canVote && showVoteButton
+                      ? 'border-zinc-800 active:border-purple-500'
+                      : 'border-zinc-800'
+                  }`}
+                >
+                  {/* Background fill */}
+                  <View className="absolute inset-0 bg-purple-500/10" style={{ width: `${percentage}%` }} />
+
+                  <View className={compact ? 'p-2' : 'p-3'}>
+                    <View className="flex-row items-center justify-between mb-1">
+                      <View className="flex-row items-center gap-2 flex-1 mr-2">
+                        <Text
+                          className={`font-medium text-white ${compact ? 'text-xs' : 'text-sm'}`}
+                          numberOfLines={1}
+                        >
+                          {option.text}
+                        </Text>
+                        {index === 0 && poll.status === 'active' && (
+                          <View className="flex-row items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-green-500/20">
+                            <TrendingUpIcon size={10} color="#34d399" />
+                            <Text className="text-xs font-medium text-green-400">Leading</Text>
+                          </View>
+                        )}
+                      </View>
+                      <View className="items-end">
+                        <Text className={`font-bold text-white ${compact ? 'text-xs' : 'text-sm'}`}>
+                          {percentage.toFixed(1)}%
+                        </Text>
+                        {!compact && (
+                          <Text className="text-xs text-zinc-400">{option.votes} votes</Text>
+                        )}
+                      </View>
+                    </View>
+
+                    {!compact && (
+                      <View>
+                        <ProgressBar
+                          percentage={percentage}
+                          heightClass="h-1.5"
+                          trackClass="bg-zinc-800"
+                          fillClass="bg-purple-500"
+                        />
+                        <Text className="text-xs text-zinc-600 mt-1">
+                          Voting Power: {option.votingPower.toLocaleString()} ({powerPercentage.toFixed(1)}%)
+                        </Text>
+                      </View>
+                    )}
+                  </View>
+                </Pressable>
+              );
+            })}
+          </View>
+
+          {/* Vote CTA */}
+          {showVoteButton && canVote && !compact && (
+            <View className="mt-3 bg-purple-500/5 rounded-xl px-3 py-2.5 items-center">
+              <View className="flex-row items-center gap-2">
+                <VoteIcon size={16} color="#c084fc" />
+                <Text className="text-sm font-medium text-purple-300">Tap any option above to vote</Text>
+              </View>
+            </View>
+          )}
+
+          {/* Footer */}
+          {!compact && (
+            <View className="flex-row items-center justify-between mt-3 pt-3 border-t border-zinc-800">
+              <View className="flex-row items-center gap-1.5">
+                <CalendarIcon />
+                <Text className="text-xs text-zinc-600">Created {formatRelativeTime(poll.createdAt)}</Text>
+              </View>
+              <Text className="text-xs text-zinc-600">by {poll.creator.slice(0, 8)}...</Text>
+            </View>
+          )}
+        </View>
+      </Animated.View>
+    </SizeContainer>
+  );
+}

package/src/components/PollSearch.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback, useState } from 'react';
+import { View, Text } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import type { Poll } from '../types/algorand';
+import { formatRelativeTime } from '../utils/format';
+import { SearchSheet } from '../ui/SearchSheet';
+
+function VoteIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="m9 12 2 2 4-4" />
+      <Path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7Z" />
+      <Path d="M22 19H2" />
+    </Svg>
+  );
+}
+
+interface PollSearchProps {
+  data: Poll[];
+  onSelect?: (poll: Poll) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function PollSearch({
+  data,
+  onSelect,
+  placeholder = 'Search polls...',
+  className,
+}: PollSearchProps) {
+  const [selected, setSelected] = useState<Poll | null>(null);
+
+  const handleSelect = useCallback(
+    (poll: Poll) => {
+      setSelected(poll);
+      onSelect?.(poll);
+    },
+    [onSelect],
+  );
+
+  const renderItem = useCallback(
+    (poll: Poll) => (
+      <View className="flex-row items-center gap-3">
+        <VoteIcon size={16} color={poll.status === 'active' ? '#34d399' : '#71717a'} />
+        <View className="flex-1">
+          <Text className="text-sm font-medium text-white" numberOfLines={1}>
+            {poll.question}
+          </Text>
+          <Text className="text-xs text-zinc-400">
+            {poll.totalVotes} votes - {poll.options.length} options - {formatRelativeTime(poll.createdAt)}
+          </Text>
+        </View>
+        <View className={`px-2 py-0.5 rounded-full ${poll.status === 'active' ? 'bg-green-500/20' : 'bg-zinc-700'}`}>
+          <Text className={`text-xs font-medium ${poll.status === 'active' ? 'text-green-400' : 'text-zinc-400'}`}>
+            {poll.status.charAt(0).toUpperCase() + poll.status.slice(1)}
+          </Text>
+        </View>
+      </View>
+    ),
+    [],
+  );
+
+  return (
+    <View className={className}>
+      <SearchSheet
+        data={data}
+        placeholder={placeholder}
+        onSelect={handleSelect}
+        renderItem={renderItem}
+      />
+      {selected && (
+        <View className="mt-3 p-3 rounded-lg bg-zinc-800 border border-zinc-700">
+          <Text className="text-xs font-medium text-zinc-400 mb-1">Selected Poll</Text>
+          {renderItem(selected)}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/RaffleListing.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import type { RaffleListing as RaffleListingType, ComponentSize } from '../types/algorand';
+import { formatCurrency, formatRelativeTime } from '../utils/format';
+import { SizeContainer } from '../ui/SizeContainer';
+import { StatusBadge } from '../ui/StatusBadge';
+import { ProgressBar } from '../ui/ProgressBar';
+
+function TicketIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
+      <Path d="M13 5v2" />
+      <Path d="M13 17v2" />
+      <Path d="M13 11v2" />
+    </Svg>
+  );
+}
+
+function TrophyIcon({ size = 16, color = '#eab308' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
+      <Path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
+      <Path d="M4 22h16" />
+      <Path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
+      <Path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
+      <Path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
+    </Svg>
+  );
+}
+
+function CalendarIcon({ size = 16, color = '#71717a' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M8 2v4" />
+      <Path d="M16 2v4" />
+      <Path d="M3 10h18" />
+      <Path d="M21 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
+    </Svg>
+  );
+}
+
+function TimerIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M10 2h4" />
+      <Path d="M12 14V6" />
+      <Path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z" />
+    </Svg>
+  );
+}
+
+interface RaffleListingProps {
+  data: RaffleListingType;
+  showEntryButton?: boolean;
+  size?: ComponentSize;
+  className?: string;
+  imageUrl?: string;
+  onEnter?: (raffle: RaffleListingType) => void;
+}
+
+export function RaffleListingComponent({
+  data: raffle,
+  showEntryButton = true,
+  size = 'full',
+  className,
+  imageUrl,
+  onEnter,
+}: RaffleListingProps) {
+  const isActive = raffle.status === 'active';
+  const isUpcoming = raffle.status === 'upcoming';
+  const ticketsRemaining = raffle.ticketCount - raffle.entryCount;
+  const progressPercentage = (raffle.entryCount / raffle.ticketCount) * 100;
+
+  const statusVariant = isActive ? 'success' : isUpcoming ? 'info' : 'neutral';
+
+  const isFullscreen = size === 'fullscreen';
+
+  return (
+    <SizeContainer size={size} className={className}>
+      <Animated.View
+        entering={FadeInDown.duration(400).springify()}
+        className={`rounded-2xl ${isFullscreen ? 'border border-zinc-800' : 'bg-zinc-900/80'}`}
+      >
+        <View className="p-5">
+          {/* Header */}
+          <View className="flex-row items-start gap-3 mb-4">
+            {imageUrl && (
+              <View className="w-14 h-14 rounded-lg overflow-hidden bg-zinc-800/50">
+                <Image source={{ uri: imageUrl }} style={{ width: 56, height: 56 }} contentFit="cover" />
+              </View>
+            )}
+            <View className="flex-1">
+              <View className="flex-row items-center gap-2 flex-wrap mb-1">
+                <TicketIcon size={16} color={isActive ? '#34d399' : '#71717a'} />
+                <Text className="text-sm font-medium text-zinc-400">Raffle Event</Text>
+                <StatusBadge
+                  label={raffle.status.charAt(0).toUpperCase() + raffle.status.slice(1)}
+                  variant={statusVariant}
+                />
+                <View className="px-2 py-0.5 rounded-full bg-zinc-700">
+                  <Text className="text-xs font-medium text-white">
+                    {raffle.entryCount}/{raffle.ticketCount} entries
+                  </Text>
+                </View>
+              </View>
+              <Text className="text-base font-bold text-white mb-1">{raffle.title}</Text>
+              <Text className="text-sm text-zinc-300 leading-5">{raffle.description}</Text>
+            </View>
+          </View>
+
+          {/* Prize Pool */}
+          <View className="mb-4 bg-yellow-500/5 rounded-xl px-3 py-2.5">
+            <View className="flex-row items-center gap-2 mb-2">
+              <TrophyIcon size={16} color="#eab308" />
+              <Text className="text-sm font-medium text-yellow-300">Prize Pool</Text>
+            </View>
+            {raffle.prizes.map((prize, index) => (
+              <View key={index} className="flex-row items-center justify-between mb-1">
+                <Text className="text-sm font-medium text-white">{prize.name}</Text>
+                <Text className="text-xs font-mono text-yellow-300">#{prize.id}</Text>
+              </View>
+            ))}
+          </View>
+
+          {/* Entry Stats */}
+          <View className="flex-row gap-6 mb-4">
+            <View>
+              <Text className="text-2xl font-bold text-white">
+                {formatCurrency(raffle.pricePerEntry, raffle.entryAsset.unitName)}
+              </Text>
+              <Text className="text-xs text-zinc-400">Per Entry</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">
+                {raffle.entryCount}/{raffle.ticketCount}
+              </Text>
+              <Text className="text-xs text-zinc-400">Entries</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">{ticketsRemaining}</Text>
+              <Text className="text-xs text-zinc-400">Remaining</Text>
+            </View>
+          </View>
+
+          {/* Progress */}
+          <View className="mb-4">
+            <ProgressBar
+              percentage={progressPercentage}
+              trackClass="bg-zinc-800"
+              fillClass="bg-purple-500"
+            />
+            <View className="flex-row justify-between mt-1">
+              <Text className="text-xs text-zinc-400">{progressPercentage.toFixed(1)}% sold</Text>
+              <Text className="text-xs text-zinc-400">{ticketsRemaining} left</Text>
+            </View>
+          </View>
+
+          {/* Timing */}
+          <View className="flex-row items-center gap-2 mb-4">
+            <CalendarIcon size={16} />
+            <Text className="text-sm text-zinc-300">
+              {isUpcoming ? 'Starts' : isActive ? 'Ends' : 'Ended'}{' '}
+              {formatRelativeTime(isUpcoming ? raffle.startTime : raffle.endTime)}
+            </Text>
+          </View>
+
+          {/* Entry Button */}
+          {showEntryButton && (isActive || isUpcoming) && (
+            <Pressable
+              onPress={() => isActive && ticketsRemaining > 0 && onEnter?.(raffle)}
+              disabled={!isActive || ticketsRemaining === 0}
+              className={`flex-row items-center justify-center gap-2 py-3 px-4 rounded-xl ${
+                !isActive || ticketsRemaining === 0
+                  ? 'bg-zinc-800/50'
+                  : 'bg-purple-600'
+              }`}
+            >
+              {!isActive ? (
+                <>
+                  <TimerIcon size={16} color="#a1a1aa" />
+                  <Text className="text-sm font-medium text-zinc-400">
+                    {isUpcoming ? 'Not Started' : 'Raffle Ended'}
+                  </Text>
+                </>
+              ) : ticketsRemaining === 0 ? (
+                <Text className="text-sm font-medium text-zinc-400">Sold Out</Text>
+              ) : (
+                <>
+                  <TicketIcon size={16} color="#fff" />
+                  <Text className="text-sm font-medium text-white">Enter Raffle</Text>
+                </>
+              )}
+            </Pressable>
+          )}
+        </View>
+      </Animated.View>
+    </SizeContainer>
+  );
+}