@akta/algomd-rn 0.0.1-canary

package/src/types/algorand.ts

@@ -0,0 +1,205 @@
+// Core Algorand Types for React Native
+export interface AlgorandAccount {
+  id: string;
+  address: string;
+  balance: number;
+  assets: ASA[];
+  apps: Application[];
+  createdAt: Date;
+  isOnline: boolean;
+  round: number;
+}
+
+export interface NFDProfile {
+  id: string;
+  name: string;
+  address: string;
+  avatar?: string;
+  bio?: string;
+  properties: Record<string, string>;
+  verified: boolean;
+  createdAt: Date;
+}
+
+export interface ASA {
+  id: number;
+  name: string;
+  unitName: string;
+  total: number;
+  decimals: number;
+  defaultFrozen: boolean;
+  url?: string;
+  metadataHash?: string;
+  manager?: string;
+  reserve?: string;
+  freeze?: string;
+  clawback?: string;
+  creator: string;
+  createdAt: Date;
+  price?: number;
+  verified: boolean;
+}
+
+export interface Application {
+  id: number;
+  creator: string;
+  globalState: Record<string, unknown>;
+  localState: Record<string, unknown>;
+  params: {
+    globalNumUint: number;
+    globalNumByteSlice: number;
+    localNumUint: number;
+    localNumByteSlice: number;
+  };
+  createdAt: Date;
+  name?: string;
+  description?: string;
+}
+
+export interface TransactionDetails {
+  id: string;
+  type:
+    | 'payment'
+    | 'asset-transfer'
+    | 'application-call'
+    | 'asset-config'
+    | 'key-registration'
+    | 'asset-freeze';
+  from: string;
+  to?: string;
+  amount?: number;
+  asset?: ASA;
+  application?: Application;
+  note?: string;
+  fee: number;
+  round: number;
+  timestamp: Date;
+  confirmed: boolean;
+  signature: string;
+  context?: {
+    type: 'nft-purchase' | 'auction-won' | 'raffle-entry' | 'trade-offer' | 'vote';
+    metadata: Record<string, unknown>;
+  };
+}
+
+// Social and Trading Types
+export interface NFTListing {
+  id: string;
+  nft: ASA;
+  price: number;
+  priceAsset: ASA;
+  currency: string;
+  seller: string;
+  collection?: string;
+  authenticityBadge: boolean;
+  quantity: number;
+  reservedFor?: string;
+  gating?: GatingInfo;
+  views: number;
+  favorites: number;
+  createdAt: Date;
+  listedAt: Date;
+  expiresAt?: Date;
+}
+
+export interface RaffleListing {
+  id: string;
+  title: string;
+  description: string;
+  pricePerEntry: number;
+  entryAsset: ASA;
+  startTime: Date;
+  endTime: Date;
+  prizes: ASA[];
+  entryCount: number;
+  ticketCount: number;
+  gating?: GatingInfo;
+  creator: string;
+  status: 'upcoming' | 'active' | 'ended' | 'claimed';
+}
+
+export interface AuctionListing {
+  id: string;
+  title: string;
+  description: string;
+  bidAsset: ASA;
+  currentHighestBid: number;
+  minimumNextBid: number;
+  startTime: Date;
+  endTime: Date;
+  prizes: ASA[];
+  bidFeePercentage?: number;
+  currentBidFeePool: number;
+  bidCount: number;
+  timeExtended: boolean;
+  creator: string;
+  status: 'upcoming' | 'active' | 'ended' | 'claimed';
+}
+
+export interface TradeOffer {
+  id: string;
+  creator: string;
+  recipients: string[];
+  offering: (ASA | AlgorandAccount)[];
+  requesting: (ASA | AlgorandAccount)[];
+  message?: string;
+  expiresAt: Date;
+  status: 'pending' | 'accepted' | 'rejected' | 'expired';
+  createdAt: Date;
+}
+
+export interface Poll {
+  id: string;
+  question: string;
+  options: PollOption[];
+  creator: string;
+  createdAt: Date;
+  expiresAt?: Date;
+  totalVotes: number;
+  status: 'active' | 'ended';
+  gating?: GatingInfo;
+}
+
+export interface PollOption {
+  id: string;
+  text: string;
+  asset?: ASA;
+  collection?: string;
+  votes: number;
+  votingPower: number;
+}
+
+export interface GatingInfo {
+  type: 'asset-holding' | 'nfd-verified' | 'application-optin' | 'custom' | 'token' | 'nft';
+  requirements: {
+    assets?: { assetId: number; minimumBalance: number }[];
+    nfdVerified?: boolean;
+    applications?: number[];
+    custom?: Record<string, unknown>;
+  };
+  requirement?: number;
+  asset?: string;
+  collection?: string;
+}
+
+// Search Types
+export interface SearchResult<T> {
+  item: T;
+  score: number;
+  matches: string[];
+}
+
+export type SearchableEntity =
+  | AlgorandAccount
+  | NFDProfile
+  | ASA
+  | Application
+  | TransactionDetails
+  | NFTListing
+  | RaffleListing
+  | AuctionListing
+  | TradeOffer
+  | Poll;
+
+// Component shared prop types
+export type ComponentSize = 'sm' | 'md' | 'lg' | 'full' | 'fullscreen';

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './algorand';

package/src/ui/CopyButton.tsx

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import { Pressable } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+import * as Haptics from 'expo-haptics';
+import Svg, { Path } from 'react-native-svg';
+
+interface CopyButtonProps {
+  value: string;
+  size?: number;
+  color?: string;
+  className?: string;
+  onCopied?: () => void;
+}
+
+function CopyIcon({ 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="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+      <Path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z" />
+    </Svg>
+  );
+}
+
+export function CopyButton({ value, size = 16, color = '#a1a1aa', className, onCopied }: CopyButtonProps) {
+  const handleCopy = useCallback(async () => {
+    await Clipboard.setStringAsync(value);
+    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    onCopied?.();
+  }, [value, onCopied]);
+
+  return (
+    <Pressable
+      onPress={handleCopy}
+      className={`p-1.5 rounded-lg ${className ?? ''}`}
+      hitSlop={8}
+    >
+      <CopyIcon size={size} color={color} />
+    </Pressable>
+  );
+}

package/src/ui/DataStates.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, Text, ActivityIndicator } from 'react-native';
+
+interface LoadingSkeletonProps {
+  name: string;
+}
+
+export function LoadingSkeleton({ name }: LoadingSkeletonProps) {
+  return (
+    <View
+      className="rounded-xl items-center justify-center bg-zinc-900/80"
+      style={{ padding: 20, minHeight: 80, borderWidth: 1, borderColor: '#27272a' }}
+    >
+      <ActivityIndicator size="small" color="#a1a1aa" />
+      <Text className="mt-2 text-xs text-zinc-500">
+        Loading {name}...
+      </Text>
+    </View>
+  );
+}
+
+interface ErrorStateProps {
+  name: string;
+  message: string;
+}
+
+export function ErrorState({ name, message }: ErrorStateProps) {
+  return (
+    <View
+      className="rounded-xl bg-zinc-900/80"
+      style={{ padding: 16, minHeight: 60, borderWidth: 1, borderColor: 'rgba(239,68,68,0.25)' }}
+    >
+      <Text className="text-xs font-semibold text-red-400">
+        Failed to load {name}
+      </Text>
+      <Text className="text-xs text-zinc-500 mt-1">
+        {message}
+      </Text>
+    </View>
+  );
+}

package/src/ui/ProgressBar.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+  useDerivedValue,
+} from 'react-native-reanimated';
+
+interface ProgressBarProps {
+  /** A value between 0 and 100. */
+  percentage: number;
+  /** Height of the bar in Tailwind. Defaults to h-2. */
+  heightClass?: string;
+  /** Track background class. */
+  trackClass?: string;
+  /** Fill background class. */
+  fillClass?: string;
+  className?: string;
+}
+
+export function ProgressBar({
+  percentage,
+  heightClass = 'h-2',
+  trackClass = 'bg-zinc-700',
+  fillClass = 'bg-purple-500',
+  className,
+}: ProgressBarProps) {
+  const clampedPct = useDerivedValue(() => Math.max(0, Math.min(100, percentage)));
+
+  const fillStyle = useAnimatedStyle(() => ({
+    width: `${withTiming(clampedPct.value, { duration: 500 })}%`,
+  }));
+
+  return (
+    <View className={`w-full rounded-full overflow-hidden ${trackClass} ${heightClass} ${className ?? ''}`}>
+      <Animated.View
+        className={`${heightClass} rounded-full ${fillClass}`}
+        style={fillStyle}
+      />
+    </View>
+  );
+}

package/src/ui/SearchSheet.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View, Text, TextInput, Pressable } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import BottomSheet, { BottomSheetBackdrop, BottomSheetView } from '@gorhom/bottom-sheet';
+import Svg, { Path } from 'react-native-svg';
+import type { SearchableEntity, SearchResult } from '../types/algorand';
+import { searchEntities } from '../utils/search';
+
+function SearchIcon({ 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="M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" />
+      <Path d="m21 21-4.35-4.35" />
+    </Svg>
+  );
+}
+
+interface SearchSheetProps<T extends SearchableEntity> {
+  data: T[];
+  placeholder?: string;
+  onSelect?: (item: T) => void;
+  renderItem: (item: T) => React.ReactElement;
+  className?: string;
+}
+
+export function SearchSheet<T extends SearchableEntity>({
+  data,
+  placeholder = 'Search...',
+  onSelect,
+  renderItem,
+  className,
+}: SearchSheetProps<T>) {
+  const sheetRef = useRef<BottomSheet>(null);
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const snapPoints = useMemo(() => ['50%', '80%'], []);
+
+  const results = useMemo(() => {
+    if (!query.trim()) {
+      return data.slice(0, 10).map((item) => ({ item, score: 1, matches: [] as string[] }));
+    }
+    return searchEntities(data, query, 10);
+  }, [data, query]);
+
+  const handleOpen = useCallback(() => {
+    setIsOpen(true);
+    sheetRef.current?.snapToIndex(0);
+  }, []);
+
+  const handleSelect = useCallback(
+    (item: T) => {
+      onSelect?.(item);
+      setQuery('');
+      sheetRef.current?.close();
+    },
+    [onSelect],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
+      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />
+    ),
+    [],
+  );
+
+  const renderResultItem = useCallback(
+    ({ item }: { item: SearchResult<T> }) => (
+      <Pressable
+        onPress={() => handleSelect(item.item)}
+        className="px-4 py-3 border-b border-zinc-800"
+      >
+        {renderItem(item.item)}
+      </Pressable>
+    ),
+    [handleSelect, renderItem],
+  );
+
+  return (
+    <View className={className}>
+      {/* Search Trigger Button */}
+      <Pressable
+        onPress={handleOpen}
+        className="flex-row items-center gap-2 px-3 py-2.5 rounded-lg border border-zinc-700 bg-zinc-900"
+      >
+        <SearchIcon size={16} color="#71717a" />
+        <Text className="flex-1 text-sm text-zinc-500">{placeholder}</Text>
+      </Pressable>
+
+      {/* Bottom Sheet */}
+      <BottomSheet
+        ref={sheetRef}
+        index={-1}
+        snapPoints={snapPoints}
+        enablePanDownToClose
+        backdropComponent={renderBackdrop}
+        backgroundStyle={{ backgroundColor: '#18181b' }}
+        handleIndicatorStyle={{ backgroundColor: '#52525b' }}
+        onChange={(index) => {
+          if (index === -1) setIsOpen(false);
+        }}
+      >
+        <BottomSheetView className="flex-1 px-4 pt-2">
+          {/* Search Input */}
+          <View className="flex-row items-center gap-2 px-3 py-2 mb-3 rounded-lg border border-zinc-700 bg-zinc-800">
+            <SearchIcon size={16} color="#71717a" />
+            <TextInput
+              value={query}
+              onChangeText={setQuery}
+              placeholder={placeholder}
+              placeholderTextColor="#71717a"
+              className="flex-1 text-sm text-white p-0"
+              autoFocus={isOpen}
+            />
+          </View>
+
+          {/* Results */}
+          <FlashList
+            data={results}
+            renderItem={renderResultItem}
+            estimatedItemSize={56}
+            keyExtractor={(item, index) => `search-${index}`}
+            ListEmptyComponent={
+              <View className="py-8 items-center">
+                <Text className="text-sm text-zinc-500">
+                  {query.trim() ? 'No results found.' : 'No items available.'}
+                </Text>
+              </View>
+            }
+          />
+        </BottomSheetView>
+      </BottomSheet>
+    </View>
+  );
+}

package/src/ui/SizeContainer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ComponentSize } from '../types/algorand';
+
+const SIZE_MAP: Record<ComponentSize, string> = {
+  sm: 'w-full max-w-xs',
+  md: 'w-full max-w-sm',
+  lg: 'w-full max-w-lg',
+  full: 'w-full',
+  fullscreen: 'w-full',
+};
+
+interface SizeContainerProps {
+  size: ComponentSize;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function SizeContainer({ size, className, children }: SizeContainerProps) {
+  return (
+    <View className={`${SIZE_MAP[size]} ${className ?? ''}`}>
+      {children}
+    </View>
+  );
+}

package/src/ui/StatusBadge.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+type BadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary';
+
+const VARIANT_CLASSES: Record<BadgeVariant, { container: string; text: string }> = {
+  success: {
+    container: 'bg-green-500/20',
+    text: 'text-green-400',
+  },
+  warning: {
+    container: 'bg-yellow-500/20',
+    text: 'text-yellow-400',
+  },
+  error: {
+    container: 'bg-red-500/20',
+    text: 'text-red-400',
+  },
+  info: {
+    container: 'bg-blue-500/20',
+    text: 'text-blue-400',
+  },
+  neutral: {
+    container: 'bg-zinc-500/20',
+    text: 'text-zinc-400',
+  },
+  primary: {
+    container: 'bg-purple-500/20',
+    text: 'text-purple-400',
+  },
+};
+
+interface StatusBadgeProps {
+  label: string;
+  variant?: BadgeVariant;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export function StatusBadge({ label, variant = 'neutral', icon, className }: StatusBadgeProps) {
+  const styles = VARIANT_CLASSES[variant];
+
+  return (
+    <View
+      className={`flex-row items-center gap-1 px-2 py-0.5 rounded-full ${styles.container} ${className ?? ''}`}
+    >
+      {icon}
+      <Text className={`text-xs font-medium ${styles.text}`}>{label}</Text>
+    </View>
+  );
+}

package/src/ui/index.ts

@@ -0,0 +1,6 @@
+export { SizeContainer } from './SizeContainer';
+export { CopyButton } from './CopyButton';
+export { StatusBadge } from './StatusBadge';
+export { ProgressBar } from './ProgressBar';
+export { SearchSheet } from './SearchSheet';
+export { LoadingSkeleton, ErrorState } from './DataStates';

package/src/utils/format.ts

@@ -0,0 +1,70 @@
+/**
+ * Format an Algorand address for display (truncated).
+ */
+export function formatAddress(address: string, chars = 5): string {
+  if (address.length <= chars * 2) return address;
+  return `${address.slice(0, chars)}...${address.slice(-chars)}`;
+}
+
+/**
+ * Format a number with locale-aware separators.
+ */
+export function formatNumber(num: number, decimals = 2): string {
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(num);
+}
+
+/**
+ * Format a currency value with its unit.
+ */
+export function formatCurrency(amount: number, currency = 'ALGO'): string {
+  return `${formatNumber(amount)} ${currency}`;
+}
+
+/**
+ * Format a date into a readable string.
+ */
+export function formatDate(date: Date): string {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
+/**
+ * Format a date into a human-readable relative time string.
+ */
+export function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 0) {
+    // Future date
+    const absDiff = Math.abs(diffInSeconds);
+    if (absDiff < 60) return 'in a moment';
+    if (absDiff < 3600) return `in ${Math.floor(absDiff / 60)}m`;
+    if (absDiff < 86400) return `in ${Math.floor(absDiff / 3600)}h`;
+    if (absDiff < 2592000) return `in ${Math.floor(absDiff / 86400)}d`;
+    return formatDate(date);
+  }
+
+  if (diffInSeconds < 60) return 'just now';
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+  if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)}d ago`;
+
+  return formatDate(date);
+}
+
+/**
+ * Format an asset amount considering its decimals.
+ */
+export function formatAssetAmount(amount: number, decimals: number): string {
+  const divisor = Math.pow(10, decimals);
+  return formatNumber(amount / divisor, Math.min(decimals, 6));
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './format';
+export * from './search';

package/src/utils/search.ts

@@ -0,0 +1,65 @@
+import type {
+  SearchResult,
+  SearchableEntity,
+  AlgorandAccount,
+  NFDProfile,
+  ASA,
+  Application,
+} from '../types/algorand';
+
+/**
+ * Simple fuzzy search across Algorand entity collections.
+ */
+export function searchEntities<T extends SearchableEntity>(
+  entities: T[],
+  query: string,
+  maxResults = 10,
+): SearchResult<T>[] {
+  if (!query.trim()) return [];
+
+  const queryLower = query.toLowerCase();
+  const results: SearchResult<T>[] = [];
+
+  for (const entity of entities) {
+    const matches: string[] = [];
+    let score = 0;
+
+    if ('address' in entity) {
+      const account = entity as unknown as AlgorandAccount;
+      if (account.address.toLowerCase().includes(queryLower)) {
+        matches.push('address');
+        score += account.address.toLowerCase().startsWith(queryLower) ? 10 : 5;
+      }
+    }
+
+    if ('name' in entity) {
+      const named = entity as unknown as NFDProfile | ASA;
+      if (named.name.toLowerCase().includes(queryLower)) {
+        matches.push('name');
+        score += named.name.toLowerCase().startsWith(queryLower) ? 10 : 5;
+      }
+    }
+
+    if ('unitName' in entity) {
+      const asa = entity as unknown as ASA;
+      if (asa.unitName.toLowerCase().includes(queryLower)) {
+        matches.push('unitName');
+        score += asa.unitName.toLowerCase().startsWith(queryLower) ? 8 : 4;
+      }
+    }
+
+    if ('description' in entity && (entity as unknown as Application).description) {
+      const app = entity as unknown as Application;
+      if (app.description && app.description.toLowerCase().includes(queryLower)) {
+        matches.push('description');
+        score += 2;
+      }
+    }
+
+    if (score > 0) {
+      results.push({ item: entity, score, matches });
+    }
+  }
+
+  return results.sort((a, b) => b.score - a.score).slice(0, maxResults);
+}