ShapeShift Mobile Widget

Native iOS & Android home screen widgets

🎯 Unified Interactive Demo →Widget Configuration UI →Notifications & Quick Trade →

Widget Configuration

📋

Data Source

Timeframe

Display Options

Refresh Interval

Sort Order

Current Configuration: My Watchlist • 24 Hours • Sparklines: On

Small Widget (2×2)

Single Asset View

iOS
9:41
₿
BTC
$102K
-1.4%
Android
9:41
Ξ
ETH
$3.4K
-1.83%

⚠️Technical Considerations & Potential Blockers

Based on the ShapeShift web architecture, here are critical technical considerations for widget implementation.

1

React Native WebView Architecture

The mobile app is a React Native WebView wrapper around app.shapeshift.com

  • • Widgets cannot directly share state with WebView
  • • Need native bridge for data synchronization
  • • Consider SharedPreferences (Android) / UserDefaults (iOS) for widget data
  • • May require native module development for real-time updates
2

Multi-Chain Data Infrastructure

ShapeShift uses unchained (multi-blockchain backend) for data

  • • Widgets need direct API access to unchained services
  • • Handle multiple blockchain networks simultaneously
  • • Rate limiting considerations for background updates
  • • Authentication/API key management for widget requests
3

Hardware Wallet Integration

ShapeShift uses hdwallet library for hardware wallet support

  • • Widgets cannot access hardware wallet state directly
  • • Quick trade actions require in-app authentication
  • • Deep linking strategy for secure transaction flows
  • • Consider limiting widget to read-only portfolio views initially
4

TypeScript & Build System

Web app uses React CRA with Yarn workspaces and monorepo structure

  • • Shared TypeScript types between web and native
  • • OpenAPI code generation for API clients
  • • Requires OpenJDK for openapi-generator-cli
  • • Coordinate package versions across web/mobile/widget
5

State Management & Redux

Web app uses Redux for state management (see docs/state-management.md)

  • • Widget needs alternative to Redux for state
  • • Cannot access web app Redux store from native widget
  • • Implement separate widget state management (Context API, Zustand)
  • • Sync critical state via AsyncStorage or encrypted storage
6

Performance & Battery Impact

Widgets have strict memory and CPU constraints

  • • iOS widgets have 30MB memory limit (soft), 50MB (hard)
  • • Android WorkManager for periodic updates (minimum 15 min)
  • • Implement exponential backoff for failed API calls
  • • Cache images and sparkline data locally to reduce network calls

🔧Recommended Development Approach

  1. Phase 1: Build read-only widget with static data to validate native implementation
  2. Phase 2: Implement API layer and data synchronization with web app watchlist
  3. Phase 3: Add deep linking for "view in app" functionality
  4. Phase 4: Implement quick trade with proper authentication flow
  5. Phase 5: Add notifications and price alerts with background processing

📖ShapeShift Repository References

Technical Specifications

iOS Widget Sizes

  • • Small: 158×158 pt
  • • Medium: 360×158 pt
  • • Large: 360×379 pt
  • • Extra Large: 360×795 pt (iPad)

iOS Implementation

  • • WidgetKit with Timeline Provider
  • • Glass material background support
  • • Deep linking to app sections
  • • Accented rendering mode support

Android Widget Sizes

  • • Small: 2×2 cells (184×184 dp)
  • • Medium: 4×2 cells (380×184 dp)
  • • Large: 4×4 cells (380×380 dp)
  • • Resizable with min/max bounds

Android Implementation

  • • Jetpack Glance API
  • • Material You dynamic theming
  • • WorkManager for updates
  • • PendingIntent navigation

📚Developer Resources

Official platform documentation and guidelines for implementing native widgets on iOS and Android.

🍎

Apple iOS

Official Human Interface Guidelines for designing and implementing WidgetKit widgets

View iOS Widget Guidelines↗
🤖

Android

Official Android documentation for building app widgets with Jetpack Glance

View Android Widget Overview↗
▶️

Video Tutorial

Comprehensive guide to building iOS widgets with SwiftUI and WidgetKit

Watch SwiftUI WidgetKit Tutorial↗

Additional Resources

  • • WidgetKit Framework: Timeline entries, widget configuration intents
  • • Jetpack Glance: Composable widgets with Material Design 3
  • • Deep Linking: URL schemes for app navigation from widgets
  • • Background Updates: WorkManager (Android) and Background Tasks (iOS)