@akta/algomd-rn 0.0.1-canary

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@akta/algomd-rn",
+  "version": "0.0.1-canary",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "scripts": {
+    "compile": "tsc --noEmit -p . --pretty",
+    "lint": "eslint src/ --fix"
+  },
+  "files": [
+    "src/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "clsx": ">=2.0.0",
+    "expo-clipboard": ">=8.0.0",
+    "expo-haptics": ">=15.0.0",
+    "expo-image": ">=3.0.0",
+    "expo-linking": ">=8.0.0",
+    "nativewind": ">=4.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-svg": ">=15.0.0",
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "@shopify/flash-list": ">=2.0.0",
+    "@tanstack/react-query": ">=5",
+    "algosdk": ">=3.0.0",
+    "@algorandfoundation/algokit-utils": ">=9.0.0",
+    "@akta/sdk": "^0.0.1"
+  },
+  "peerDependenciesMeta": {
+    "algosdk": { "optional": true },
+    "@algorandfoundation/algokit-utils": { "optional": true },
+    "@akta/sdk": { "optional": true },
+    "@tanstack/react-query": { "optional": true }
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "typescript": "~5.9.2"
+  }
+}

package/src/components/ASA.tsx

@@ -0,0 +1,221 @@
+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 { ASA as ASAType, ComponentSize } from '../types/algorand';
+import { formatNumber, formatAssetAmount, formatRelativeTime } from '../utils/format';
+import { CopyButton } from '../ui/CopyButton';
+import { SizeContainer } from '../ui/SizeContainer';
+
+function ShieldIcon({ size = 16, color = '#60a5fa' }: { 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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </Svg>
+  );
+}
+
+function LockIcon({ size = 16, color = '#fb923c' }: { 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 10V7a4 4 0 0 0-8 0v3" />
+      <Path d="M5 10h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1Z" />
+    </Svg>
+  );
+}
+
+function UnlockIcon({ 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="M8 10V7a4 4 0 0 1 8 0" />
+      <Path d="M5 10h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1Z" />
+    </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 ASAProps {
+  data: ASAType;
+  showDetails?: boolean;
+  compact?: boolean;
+  size?: ComponentSize;
+  className?: string;
+  imageUrl?: string;
+}
+
+export function ASAComponent({
+  data: asset,
+  showDetails = false,
+  compact = false,
+  size = 'full',
+  className,
+  imageUrl,
+}: ASAProps) {
+  const isNFT = asset.total === 1 && asset.decimals === 0;
+
+  if (compact) {
+    return (
+      <View className={`flex-row items-center gap-1.5 px-2 py-1 rounded-full bg-zinc-800/60 ${className ?? ''}`}>
+        {imageUrl && (
+          <View className="w-4 h-4 rounded-full overflow-hidden bg-zinc-700">
+            <Image source={{ uri: imageUrl }} style={{ width: 16, height: 16 }} contentFit="cover" />
+          </View>
+        )}
+        {asset.verified && <ShieldIcon size={12} color="#60a5fa" />}
+        <Text className="text-xs font-medium text-white">{asset.unitName}</Text>
+        {asset.price !== undefined && (
+          <Text className="text-xs text-zinc-400">${asset.price}</Text>
+        )}
+        <CopyButton value={asset.id.toString()} size={12} color="#a1a1aa" />
+      </View>
+    );
+  }
+
+  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">
+          {/* NFT Image */}
+          {isNFT && imageUrl && (
+            <View className="mb-4 rounded-2xl overflow-hidden aspect-square">
+              <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} contentFit="cover" />
+              <View className="absolute top-2 left-2 flex-row gap-1">
+                <View className="px-2 py-1 rounded-full bg-purple-500/20">
+                  <Text className="text-xs font-medium text-purple-300">NFT</Text>
+                </View>
+              </View>
+              {asset.verified && (
+                <View className="absolute top-2 right-2">
+                  <View className="px-2 py-1 rounded-full bg-blue-500/20">
+                    <ShieldIcon size={12} color="#93c5fd" />
+                  </View>
+                </View>
+              )}
+            </View>
+          )}
+
+          {/* Regular Asset Header */}
+          {!isNFT && (
+            <View className="flex-row items-center gap-3 mb-4">
+              {imageUrl && (
+                <View className="w-10 h-10 rounded-lg overflow-hidden bg-zinc-800/50">
+                  <Image source={{ uri: imageUrl }} style={{ width: 40, height: 40 }} contentFit="cover" />
+                </View>
+              )}
+              <View className="flex-1">
+                <View className="flex-row items-center justify-between mb-0.5">
+                  <Text className="text-sm font-semibold text-white flex-1 mr-2" numberOfLines={1}>
+                    {asset.name}
+                  </Text>
+                  <View className="flex-row items-center gap-1">
+                    {asset.verified && <ShieldIcon size={16} color="#60a5fa" />}
+                    {asset.defaultFrozen && <LockIcon size={16} />}
+                  </View>
+                </View>
+                <View className="flex-row items-center justify-between">
+                  <Text className="text-xs font-mono text-zinc-400">
+                    {asset.unitName} - #{asset.id}
+                  </Text>
+                  <CopyButton value={asset.id.toString()} size={12} color="#71717a" />
+                </View>
+              </View>
+            </View>
+          )}
+
+          {/* NFT Title */}
+          {isNFT && (
+            <View className="mb-4">
+              <Text className="text-lg font-bold text-white mb-1">{asset.name}</Text>
+              <View className="flex-row items-center gap-2">
+                <Text className="text-xs font-mono text-zinc-400">
+                  {asset.unitName} - #{asset.id}
+                </Text>
+                <CopyButton value={asset.id.toString()} size={12} color="#71717a" />
+              </View>
+            </View>
+          )}
+
+          {/* Stats */}
+          <View className="flex-row gap-6 mb-3">
+            {asset.price !== undefined && (
+              <View>
+                <Text className="text-2xl font-bold text-white">${formatNumber(asset.price)}</Text>
+                <Text className="text-xs text-zinc-400">Price (USD)</Text>
+              </View>
+            )}
+            <View>
+              <Text className="text-base font-semibold text-white">
+                {formatAssetAmount(asset.total, asset.decimals)}
+              </Text>
+              <Text className="text-xs text-zinc-400">Supply</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">{asset.decimals}</Text>
+              <Text className="text-xs text-zinc-400">Decimals</Text>
+            </View>
+          </View>
+
+          {/* Details */}
+          {showDetails && (
+            <View className="pt-3 border-t border-zinc-800">
+              <Text className="text-sm font-medium text-white mb-2">Asset Details</Text>
+
+              <View className="flex-row justify-between p-2 rounded-lg bg-zinc-800/50 mb-1">
+                <Text className="text-xs text-zinc-300">Default Frozen</Text>
+                <View className="flex-row items-center gap-1">
+                  {asset.defaultFrozen ? (
+                    <>
+                      <LockIcon size={12} color="#fb923c" />
+                      <Text className="text-xs font-medium text-white">Yes</Text>
+                    </>
+                  ) : (
+                    <>
+                      <UnlockIcon size={12} color="#a1a1aa" />
+                      <Text className="text-xs font-medium text-white">No</Text>
+                    </>
+                  )}
+                </View>
+              </View>
+
+              <View className="flex-row justify-between p-2 rounded-lg bg-zinc-800/50 mb-1">
+                <Text className="text-xs text-zinc-300">Creator</Text>
+                <Text className="text-xs font-mono text-white">{asset.creator.slice(0, 8)}...</Text>
+              </View>
+
+              {asset.url && (
+                <View className="flex-row justify-between p-2 rounded-lg bg-zinc-800/50">
+                  <Text className="text-xs text-zinc-300">URL</Text>
+                  <Text className="text-xs font-mono text-white max-w-[120px]" numberOfLines={1}>
+                    {asset.url}
+                  </Text>
+                </View>
+              )}
+            </View>
+          )}
+
+          {/* Created Date */}
+          <View className="flex-row items-center gap-1.5 mt-3">
+            <CalendarIcon />
+            <Text className="text-xs text-zinc-600">Created {formatRelativeTime(asset.createdAt)}</Text>
+          </View>
+        </View>
+      </Animated.View>
+    </SizeContainer>
+  );
+}

package/src/components/ASASearch.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 { ASA } from '../types/algorand';
+import { SearchSheet } from '../ui/SearchSheet';
+
+function ShieldIcon({ size = 12, color = '#60a5fa' }: { 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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </Svg>
+  );
+}
+
+interface ASASearchProps {
+  data: ASA[];
+  onSelect?: (asset: ASA) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function ASASearch({
+  data,
+  onSelect,
+  placeholder = 'Search assets...',
+  className,
+}: ASASearchProps) {
+  const [selected, setSelected] = useState<ASA | null>(null);
+
+  const handleSelect = useCallback(
+    (asset: ASA) => {
+      setSelected(asset);
+      onSelect?.(asset);
+    },
+    [onSelect],
+  );
+
+  const renderItem = useCallback(
+    (asset: ASA) => (
+      <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">{asset.unitName.slice(0, 2)}</Text>
+        </View>
+        <View className="flex-1">
+          <View className="flex-row items-center gap-1">
+            <Text className="text-sm font-medium text-white" numberOfLines={1}>
+              {asset.name}
+            </Text>
+            {asset.verified && <ShieldIcon />}
+          </View>
+          <Text className="text-xs text-zinc-400">
+            {asset.unitName} - #{asset.id}
+          </Text>
+        </View>
+        {asset.price !== undefined && (
+          <Text className="text-xs text-zinc-300">${asset.price}</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 Asset</Text>
+          {renderItem(selected)}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/Account.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import type { AlgorandAccount, ComponentSize } from '../types/algorand';
+import { formatAddress, formatCurrency, formatRelativeTime } from '../utils/format';
+import { CopyButton } from '../ui/CopyButton';
+import { SizeContainer } from '../ui/SizeContainer';
+import Svg, { Circle as SvgCircle, Path } from 'react-native-svg';
+
+function OnlineIndicator({ isOnline, size = 8 }: { isOnline: boolean; size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 8 8">
+      <SvgCircle cx="4" cy="4" r="4" fill={isOnline ? '#34d399' : '#71717a'} />
+    </Svg>
+  );
+}
+
+function ExternalLinkIcon({ 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="M15 3h6v6" />
+      <Path d="M10 14 21 3" />
+      <Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </Svg>
+  );
+}
+
+interface AccountProps {
+  data: AlgorandAccount;
+  showAssets?: boolean;
+  showApps?: boolean;
+  compact?: boolean;
+  size?: ComponentSize;
+  className?: string;
+  onExternalLink?: (address: string) => void;
+}
+
+export function Account({
+  data: account,
+  showAssets = false,
+  showApps = false,
+  compact = false,
+  size = 'full',
+  className,
+  onExternalLink,
+}: AccountProps) {
+  if (compact) {
+    return (
+      <View className={`flex-row items-center gap-2 px-2 py-1 rounded-full bg-zinc-800/60 ${className ?? ''}`}>
+        <OnlineIndicator isOnline={account.isOnline} />
+        <Text className="font-mono text-xs text-white" numberOfLines={1}>
+          {formatAddress(account.address)}
+        </Text>
+        <CopyButton value={account.address} size={12} color="#a1a1aa" />
+      </View>
+    );
+  }
+
+  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 justify-between mb-4">
+            <View className="flex-1 mr-2">
+              <View className="flex-row items-center gap-2 mb-1">
+                <OnlineIndicator isOnline={account.isOnline} size={10} />
+                <Text className="text-xs font-medium text-zinc-400">
+                  {account.isOnline ? 'Online' : 'Offline'}
+                </Text>
+              </View>
+              <Text className="font-mono text-sm font-medium text-white" numberOfLines={1}>
+                {formatAddress(account.address)}
+              </Text>
+            </View>
+            <View className="flex-row items-center gap-1">
+              <CopyButton value={account.address} size={16} color="#a1a1aa" />
+              {onExternalLink && (
+                <Pressable onPress={() => onExternalLink(account.address)} className="p-1.5 rounded-lg" hitSlop={8}>
+                  <ExternalLinkIcon size={16} color="#a1a1aa" />
+                </Pressable>
+              )}
+            </View>
+          </View>
+
+          {/* Balance */}
+          <View className="mb-4">
+            <Text className="text-2xl font-bold text-white">
+              {formatCurrency(account.balance / 1_000_000)}
+            </Text>
+            <Text className="text-xs text-zinc-400">
+              Balance - Round #{account.round.toLocaleString()}
+            </Text>
+          </View>
+
+          {/* Stats */}
+          <View className="flex-row gap-6 mb-3">
+            <View>
+              <Text className="text-base font-semibold text-white">
+                {account.assets.length}
+              </Text>
+              <Text className="text-xs text-zinc-400">Assets</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">
+                {account.apps.length}
+              </Text>
+              <Text className="text-xs text-zinc-400">Apps</Text>
+            </View>
+          </View>
+
+          {/* Created Date */}
+          <Text className="text-xs text-zinc-600 mb-3">
+            Created {formatRelativeTime(account.createdAt)}
+          </Text>
+
+          {/* Assets List */}
+          {showAssets && account.assets.length > 0 && (
+            <View className="pt-3 border-t border-zinc-800">
+              <Text className="text-sm font-medium text-white mb-2">
+                Assets ({account.assets.length})
+              </Text>
+              {account.assets.slice(0, 3).map((asset) => (
+                <View
+                  key={asset.id}
+                  className="flex-row items-center justify-between p-2 rounded-lg bg-zinc-800/50 mb-1"
+                >
+                  <Text className="text-xs font-medium text-white flex-1 mr-2" numberOfLines={1}>
+                    {asset.name}
+                  </Text>
+                  <Text className="text-xs font-mono text-zinc-400">{asset.unitName}</Text>
+                </View>
+              ))}
+              {account.assets.length > 3 && (
+                <Text className="text-xs text-zinc-500 text-center py-1">
+                  +{account.assets.length - 3} more
+                </Text>
+              )}
+            </View>
+          )}
+        </View>
+      </Animated.View>
+    </SizeContainer>
+  );
+}

package/src/components/AccountSearch.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useState } from 'react';
+import { View, Text } from 'react-native';
+import Svg, { Circle as SvgCircle } from 'react-native-svg';
+import type { AlgorandAccount } from '../types/algorand';
+import { formatAddress } from '../utils/format';
+import { SearchSheet } from '../ui/SearchSheet';
+
+function OnlineIndicator({ isOnline }: { isOnline: boolean }) {
+  return (
+    <Svg width={8} height={8} viewBox="0 0 8 8">
+      <SvgCircle cx="4" cy="4" r="4" fill={isOnline ? '#34d399' : '#71717a'} />
+    </Svg>
+  );
+}
+
+interface AccountSearchProps {
+  data: AlgorandAccount[];
+  onSelect?: (account: AlgorandAccount) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function AccountSearch({
+  data,
+  onSelect,
+  placeholder = 'Search accounts...',
+  className,
+}: AccountSearchProps) {
+  const [selected, setSelected] = useState<AlgorandAccount | null>(null);
+
+  const handleSelect = useCallback(
+    (account: AlgorandAccount) => {
+      setSelected(account);
+      onSelect?.(account);
+    },
+    [onSelect],
+  );
+
+  const renderItem = useCallback(
+    (account: AlgorandAccount) => (
+      <View className="flex-row items-center gap-3">
+        <View className="w-8 h-8 rounded-full bg-zinc-800 items-center justify-center">
+          <Text className="text-xs text-zinc-400">AC</Text>
+        </View>
+        <View className="flex-1">
+          <Text className="text-sm font-mono font-medium text-white" numberOfLines={1}>
+            {formatAddress(account.address)}
+          </Text>
+          <Text className="text-xs text-zinc-400">
+            {account.balance / 1_000_000} ALGO - {account.assets.length} assets
+          </Text>
+        </View>
+        <OnlineIndicator isOnline={account.isOnline} />
+      </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 Account</Text>
+          {renderItem(selected)}
+        </View>
+      )}
+    </View>
+  );
+}