Merge branch 'master' into feat/tool-menuitems-and-components

Author: HashEngineering

.mcp.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "figma-dev-mode-mcp-server": {
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}

CLAUDE.md

@@ -47,20 +47,12 @@ MCP servers must be configured in Claude Desktop's configuration file. Without t
 
 ### Setting Up Figma MCP Server
 
-1. **Create or update the configuration file**:
-```bash
-cat > ~/Library/Application\ Support/Claude/claude_desktop_config.json << 'EOF'
-{
-  "mcpServers": {
-    "figma-dev-mode-mcp-server": {
-      "command": "npx",
-      "args": ["-y", "@figma/mcp-server-figma-dev-mode"],
-      "description": "Figma Dev Mode MCP server for extracting design specifications, code, and images from Figma files"
-    }
-  }
-}
-EOF
-```
+1. **Enable the Figma desktop MCP server**:
+   - Open Figma Desktop app
+   - Toggle to Dev Mode (`Shift+D`)
+   - In the MCP server section of the inspect panel, click "Enable desktop MCP server"
+   - The server runs at `http://127.0.0.1:3845/mcp`
+   - The project `.mcp.json` already configures the connection for Claude Code
 
 2. **Restart Claude Code**:
    - Stop Claude Code with `Ctrl+C` in the terminal
@@ -69,9 +61,12 @@ EOF
 
 3. **Verify MCP tools are available**:
    - After restart, MCP tools should appear as:
-     - `mcp__figma-dev-mode-mcp-server__get_code`
-     - `mcp__figma-dev-mode-mcp-server__get_image`
+     - `mcp__figma-dev-mode-mcp-server__get_design_context`
+     - `mcp__figma-dev-mode-mcp-server__get_screenshot`
      - `mcp__figma-dev-mode-mcp-server__get_metadata`
+     - `mcp__figma-dev-mode-mcp-server__get_variable_defs`
+     - `mcp__figma-dev-mode-mcp-server__create_design_system_rules`
+     - `mcp__figma-dev-mode-mcp-server__get_figjam`
 
 ### Figma Requirements
 
@@ -83,19 +78,11 @@ For the Figma MCP server to work properly:
 ### Troubleshooting MCP Issues
 
 If MCP tools are not available:
-1. **Check configuration exists**: `cat ~/Library/Application\ Support/Claude/claude_desktop_config.json`
-2. **Verify correct package name**: Should be `@figma/mcp-server-figma-dev-mode` NOT `claude-talk-to-figma-mcp`
-3. **Verify server name matches**: Should be `figma-dev-mode-mcp-server` to match tool names
-4. **Verify Figma is running**: `ps aux | grep -i figma`
+1. **Verify Figma Desktop is running**: `ps aux | grep -i figma`
+2. **Verify Dev Mode is enabled**: Press `Shift+D` in Figma, enable MCP server in inspect panel
+3. **Check server is responding**: `curl -s http://127.0.0.1:3845/mcp`
+4. **Verify `.mcp.json` exists** in project root with correct URL (`http://127.0.0.1:3845/mcp`)
 5. **Restart Claude Code**: MCP connections are only established at startup
-6. **Check npx availability**: Ensure Node.js/npm is installed for npx command
-
-### Why MCP Configuration is Required
-
-- MCP servers are external processes that Claude Code connects to
-- Configuration tells Claude where to find and how to start MCP servers
-- Without the configuration file, Claude Code has no knowledge of available MCP servers
-- Previous sessions' MCP usage (recorded in `.claude/settings.local.json`) doesn't automatically enable MCP in new sessions
 
 ## Build Commands
 
@@ -540,6 +527,119 @@ The shortcut bar displays different button combinations based on wallet state:
 4. Implement action handler in `HomeViewController+Shortcuts.swift`
 5. Update `reloadShortcuts()` logic if needed
 
+### Figma MCP Asset Download Workflow (MANDATORY)
+
+#### Overview
+The Figma MCP server exposes image assets via temporary localhost URLs (e.g., `http://localhost:3845/assets/{hash}.svg`). These URLs are **ephemeral** — they only exist while Figma Desktop is running and the MCP server is active. **Image files MUST be downloaded and saved to the project's asset catalog** so they can be committed to git and verified in the UI.
+
+#### ⚠️ CRITICAL: Always Download Assets During Development
+When implementing UI from Figma designs, you MUST:
+1. **Download every image asset** referenced in the design context to a local file
+2. **Save it to the correct asset catalog location** in the project
+3. **Verify the asset displays correctly** in the running app before committing
+4. **Never reference localhost URLs in code** — they are only a transport mechanism
+
+#### Step-by-Step Asset Download Process
+
+**Step 1: Get design context from Figma MCP**
+Use `get_design_context` to retrieve the design. Image URLs appear as constants:
+```javascript
+const imgMayaLogo = "http://localhost:3845/assets/4b039921e0c1cdbe2b8ca56814e78264985c97a0.svg";
+```
+
+**Step 2: Download each image asset**
+```bash
+# Download SVG asset from Figma MCP server
+curl -s -o /path/to/project/DashWallet/Resources/AppAssets.xcassets/IconName.imageset/icon.svg \
+  "http://localhost:3845/assets/{hash}.svg"
+
+# Download PNG asset if needed
+curl -s -o /path/to/project/DashWallet/Resources/AppAssets.xcassets/IconName.imageset/icon.png \
+  "http://localhost:3845/assets/{hash}.png"
+```
+
+**Step 3: Create or update Contents.json**
+
+> **Shortcut bar icons**: Use `"original"` so that SVG fill colors are preserved in both UIKit (shortcut bar) and SwiftUI (selection sheet). Template rendering strips colors and applies system tint, which causes icons to appear grey in SwiftUI `Button` labels.
+
+```json
+{
+  "images" : [
+    {
+      "filename" : "icon.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "original"
+  }
+}
+```
+
+**Step 4: Verify the asset in the running app**
+- Build and run the app in Simulator
+- Navigate to the screen that uses the asset
+- Confirm the icon/image renders correctly (right icon, right color, right size)
+- Only after visual verification should the asset be staged for commit
+
+**Step 5: Verify the file is valid before committing**
+```bash
+# Confirm file type
+file /path/to/imageset/icon.svg
+# Expected: SVG Scalable Vector Graphics image
+
+# Confirm non-zero file size
+ls -la /path/to/imageset/icon.svg
+```
+
+#### Batch Download Pattern
+When a design has multiple assets, download them all at once:
+```bash
+# Example: Download all assets for a new screen
+curl -s -o asset1.svg "http://localhost:3845/assets/{hash1}.svg"
+curl -s -o asset2.svg "http://localhost:3845/assets/{hash2}.svg"
+curl -s -o asset3.svg "http://localhost:3845/assets/{hash3}.svg"
+```
+
+#### Important Notes
+- **Localhost URLs expire** when Figma Desktop closes or the MCP server stops
+- **Always download immediately** when you get design context — don't defer downloads
+- **SVG preferred over PNG** — SVGs scale perfectly and have smaller file sizes
+- **Verify before committing** — wrong or placeholder assets are a common source of UI bugs
+- **Asset catalog structure**: Each image needs its own `.imageset` folder with a `Contents.json`
+
+#### ⚠️ CRITICAL: Clean SVGs for iOS Compatibility
+Figma MCP exports SVGs with **web-specific features that iOS cannot render**. You MUST clean every SVG after downloading:
+
+| Figma SVG Feature | iOS Problem | Fix |
+|---|---|---|
+| `fill="var(--fill-0, #78C4F5)"` | CSS custom properties not supported — paths render invisible | Replace with plain hex: `fill="#78C4F5"` |
+| `width="100%" height="100%"` | iOS needs explicit pixel dimensions | Use viewBox dimensions: `width="36" height="36"` |
+| `preserveAspectRatio="none"` | Web-specific, causes rendering issues | Remove attribute |
+| `style="display: block;"` | Web-specific inline style | Remove attribute |
+| `overflow="visible"` | Web-specific | Remove attribute |
+
+**Example cleanup:**
+```xml
+<!-- ❌ RAW from Figma MCP — will NOT render on iOS -->
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible"
+     style="display: block;" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 0C8.06..." fill="var(--fill-0, #78C4F5)"/>
+</svg>
+
+<!-- ✅ CLEANED for iOS asset catalog -->
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 0C8.06..." fill="#78C4F5"/>
+</svg>
+```
+
+**If icons appear blank after adding SVGs**, the first thing to check is whether the SVG contains `var(--fill-0, ...)` or `width="100%"`.
+
 ### Icon Implementation Best Practices
 
 #### When Updating Icons from Figma
@@ -549,14 +649,19 @@ The shortcut bar displays different button combinations based on wallet state:
    find /path/to/project -name "*.svg" -o -name "*.png" | grep -i "icon_name"
    ```
 
-2. **Use SVG directly from Figma** - Don't convert to PNG unnecessarily
-   - Download SVG from Figma localhost server
+2. **Download SVG directly from Figma MCP** - Don't convert to PNG unnecessarily
+   ```bash
+   # Download from Figma MCP localhost server and save to asset catalog
+   curl -s -o /path/to/imageset/icon.svg "http://localhost:3845/assets/{hash}.svg"
+   ```
    - Save directly to appropriate imageset folder
-   - Update Contents.json to reference SVG
+   - Update Contents.json to reference the SVG filename
+   - Verify the downloaded file is valid: `file /path/to/icon.svg`
 
-3. **Verify icon usage** - Always test that the correct icon appears
+3. **Verify icon in running app** - Always build and visually confirm the correct icon appears
    - Wrong icons often indicate using placeholder or copied assets
    - Check that imageset name matches the one referenced in code
+   - Run the app and navigate to the relevant screen before considering the task complete
 
 4. **Clean up old assets** - Remove unused PNG files when replacing with SVG
    ```bash

DashSyncCurrentCommit

@@ -1 +1 @@
-753f9446cfd20ae5da996104a5870df839005d4c
+e272a368fa8b5a3fcaa637f5631352980dcc557f

DashWallet.xcodeproj/project.pbxproj

@@ -1018,6 +1018,8 @@
 		C94F5E8829D3E7E30034FD57 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = C94F5E8729D3E7E30034FD57 /* GoogleService-Info.plist */; };
 		C94F5E8A29D3FCCF0034FD57 /* ShortcutAction.swift in Sources */ = {isa = PBXBuildFile; fileRef = C94F5E8929D3FCCF0034FD57 /* ShortcutAction.swift */; };
 		C94F5E8E29D404850034FD57 /* ShortcutCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = C94F5E8D29D404850034FD57 /* ShortcutCell.swift */; };
+		75B3C1A22E36100100CAFE02 /* ShortcutSelectionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 75B3C1A12E36100100CAFE01 /* ShortcutSelectionView.swift */; };
+		75B3C1B22E36100100CAFE05 /* ShortcutCustomizeBannerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 75B3C1B12E36100100CAFE04 /* ShortcutCustomizeBannerView.swift */; };
 		C94F5E9029D4060A0034FD57 /* ShortcutsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = C94F5E8F29D4060A0034FD57 /* ShortcutsView.swift */; };
 		C956AF0C2A5B591A002FAB75 /* DashInputField.swift in Sources */ = {isa = PBXBuildFile; fileRef = C94D98202A4CC78F00F3BEE1 /* DashInputField.swift */; };
 		C956AF0D2A5B592E002FAB75 /* TappableLabel.swift in Sources */ = {isa = PBXBuildFile; fileRef = C9829CDD2A562822007132E4 /* TappableLabel.swift */; };
@@ -1393,6 +1395,8 @@
 		C9D2C84B2A320AA000D15901 /* UITableView+DashWallet.swift in Sources */ = {isa = PBXBuildFile; fileRef = 47F005FE297164600029EB10 /* UITableView+DashWallet.swift */; };
 		C9D2C84C2A320AA000D15901 /* TransferAmountViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 47C661B128FDC72700028A8D /* TransferAmountViewController.swift */; };
 		C9D2C84D2A320AA000D15901 /* ShortcutCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = C94F5E8D29D404850034FD57 /* ShortcutCell.swift */; };
+		75B3C1A32E36100100CAFE03 /* ShortcutSelectionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 75B3C1A12E36100100CAFE01 /* ShortcutSelectionView.swift */; };
+		75B3C1B32E36100100CAFE06 /* ShortcutCustomizeBannerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 75B3C1B12E36100100CAFE04 /* ShortcutCustomizeBannerView.swift */; };
 		C9D2C84F2A320AA000D15901 /* UIColor+DWStyle.m in Sources */ = {isa = PBXBuildFile; fileRef = 2A44312022CCA2A0009BAF7F /* UIColor+DWStyle.m */; };
 		C9D2C8502A320AA000D15901 /* DWEnvironment.m in Sources */ = {isa = PBXBuildFile; fileRef = FBEF3AF021823CD800917AB6 /* DWEnvironment.m */; };
 		C9D2C8512A320AA000D15901 /* AtmItemCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 47AE8BC928C1305E00490F5E /* AtmItemCell.swift */; };
@@ -3084,6 +3088,8 @@
 		C94F5E8729D3E7E30034FD57 /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = "<group>"; };
 		C94F5E8929D3FCCF0034FD57 /* ShortcutAction.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutAction.swift; sourceTree = "<group>"; };
 		C94F5E8D29D404850034FD57 /* ShortcutCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutCell.swift; sourceTree = "<group>"; };
+		75B3C1A12E36100100CAFE01 /* ShortcutSelectionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutSelectionView.swift; sourceTree = "<group>"; };
+		75B3C1B12E36100100CAFE04 /* ShortcutCustomizeBannerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutCustomizeBannerView.swift; sourceTree = "<group>"; };
 		C94F5E8F29D4060A0034FD57 /* ShortcutsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutsView.swift; sourceTree = "<group>"; };
 		C956AF152A5C3301002FAB75 /* DWPressableButton.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DWPressableButton.h; sourceTree = "<group>"; };
 		C956AF162A5C3302002FAB75 /* DWPressableButton.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DWPressableButton.m; sourceTree = "<group>"; };
@@ -3830,6 +3836,8 @@
 			children = (
 				2A2CD71F22F9B1B7008C7BC9 /* Models */,
 				C94F5E8D29D404850034FD57 /* ShortcutCell.swift */,
+				75B3C1B12E36100100CAFE04 /* ShortcutCustomizeBannerView.swift */,
+				75B3C1A12E36100100CAFE01 /* ShortcutSelectionView.swift */,
 				2A1AF6DC23C7681B00442AF5 /* DWShortcutCollectionViewCell~ipad.xib */,
 				2A1AF6DD23C7681B00442AF5 /* DWShortcutCollectionViewCell~iphone.xib */,
 				C94F5E8F29D4060A0034FD57 /* ShortcutsView.swift */,
@@ -9011,6 +9019,8 @@
 				47F005FF297164600029EB10 /* UITableView+DashWallet.swift in Sources */,
 				47C661B228FDC72700028A8D /* TransferAmountViewController.swift in Sources */,
 				C94F5E8E29D404850034FD57 /* ShortcutCell.swift in Sources */,
+				75B3C1B22E36100100CAFE05 /* ShortcutCustomizeBannerView.swift in Sources */,
+				75B3C1A22E36100100CAFE02 /* ShortcutSelectionView.swift in Sources */,
 				2A44312122CCA2A0009BAF7F /* UIColor+DWStyle.m in Sources */,
 				FBEF3AF121823CD800917AB6 /* DWEnvironment.m in Sources */,
 				47AE8BF028C1306000490F5E /* AtmItemCell.swift in Sources */,
@@ -9847,6 +9857,8 @@
 				C9D2C84B2A320AA000D15901 /* UITableView+DashWallet.swift in Sources */,
 				C9D2C84C2A320AA000D15901 /* TransferAmountViewController.swift in Sources */,
 				C9D2C84D2A320AA000D15901 /* ShortcutCell.swift in Sources */,
+				75B3C1B32E36100100CAFE06 /* ShortcutCustomizeBannerView.swift in Sources */,
+				75B3C1A32E36100100CAFE03 /* ShortcutSelectionView.swift in Sources */,
 				C943B4BB2A40A54600AF23C5 /* DWRequestsViewController.m in Sources */,
 				C9D2C84F2A320AA000D15901 /* UIColor+DWStyle.m in Sources */,
 				C9D2C8502A320AA000D15901 /* DWEnvironment.m in Sources */,

DashWallet/AppDelegate.m

@@ -97,7 +97,22 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 #if DASHPAY
     [DWGlobalOptions sharedInstance].dpInvitationFlowEnabled = YES;
 #endif
-    
+
+    // Shortcut customization banner state machine
+    DWGlobalOptions *bannerOptions = [DWGlobalOptions sharedInstance];
+    if (bannerOptions.shortcutBannerState == 0) {
+        if (bannerOptions.shouldDisplayOnboarding) {
+            // New install — defer banner to second app open
+            bannerOptions.shortcutBannerState = 1;
+        } else {
+            // Update from prior version — show on this open
+            bannerOptions.shortcutBannerState = 2;
+        }
+    } else if (bannerOptions.shortcutBannerState == 1) {
+        // New install, second+ launch — ready to show
+        bannerOptions.shortcutBannerState = 2;
+    }
+
     [DSLogger sharedInstance];
     [FIRApp configure];
     [ExploreDashObjcWrapper configure];

DashWallet/Resources/AppAssets.xcassets/Shortcuts/shortcut_atm.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "atm.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "original"
+  }
+}