[*] improve ui

src/logic/tr.rs

@@ -236,6 +236,8 @@ pub fn tr(text: &str) -> String {
     items.insert("更改密码", "Change password");
     items.insert("位组记词", "mnemonics");
     items.insert("刷新完成", "Refresh finished");
+    items.insert("管理代币", "Manage token");
+    items.insert("发送代币", "Send token");
 
     items.insert(
         "创建账户和使用组记词恢复账户",

ui/appwindow.slint

@@ -94,11 +94,11 @@ export component AppWindow inherits Window {
     if Store.is-show-landing-page: LandingPage {
         details: [
             {
-                picture: Icons.landing-subscription,
+                picture: Icons.landing-account,
                 description: Logic.tr(Store.is-cn, "创建账户和使用组记词恢复账户"),
             },
             {
-                picture: Icons.landing-reading,
+                picture: Icons.landing-send,
                 description: Logic.tr(Store.is-cn, "查看、发送和接收Sol代币和Solana的通证"),
             },
             {

ui/base/token-list.slint

@@ -1,5 +1,5 @@
 import { Theme } from "../theme.slint";
-import { TokenTile, TokenTileEntry } from "token-tile.slint";
+import { TokenTile, TokenTileWithSwitch, TokenTileEntry, TokenTileWithSwitchEntry } from "token-tile.slint";
 import { SettingDetailInner } from "setting-detail.slint";
 
 
@@ -19,3 +19,27 @@ export component TokenList inherits SettingDetailInner {
         }
     }
 }
+
+export component TokenListWithSwitch inherits SettingDetailInner {
+    in-out property <[TokenTileWithSwitchEntry]> entries;
+
+    vbox-alignment: LayoutAlignment.start;
+    vbox-spacing: Theme.spacing * 2;
+
+    callback clicked(TokenTileEntry);
+    callback toggled(bool, TokenTileEntry);
+
+    for item[index] in entries: TokenTileWithSwitch {
+        entry: item.entry;
+        checked: item.checked;
+        enabled: item.enabled;
+
+        clicked => {
+            root.clicked(item.entry);
+        }
+
+        toggled => {
+            root.toggled(self.checked, item.entry);
+        }
+    }
+}

ui/base/token-tile.slint

@@ -13,10 +13,16 @@ export struct TokenTileEntry {
     balance-usdt: string,
 }
 
+export struct TokenTileWithSwitchEntry {
+    entry: TokenTileEntry,
+    checked: bool,
+    enabled: bool,
+}
+
 component Tile inherits Rectangle {
     in-out property <TokenTileEntry> entry;
 
-    in property <length> icon-size: Theme.icon-size;
+    in property <length> icon-size: Theme.icon-size * 1.5;
     in property <color> icon-colorize;
 
     in property <length> symbol-font-size: Theme.title3-font-size;
@@ -44,13 +50,15 @@ component Tile inherits Rectangle {
 
         HorizontalLayout {
             horizontal-stretch: 1;
-            spacing: Theme.spacing * 2;
+            spacing: Theme.spacing * 4;
 
             VerticalLayout {
                 alignment: LayoutAlignment.center;
                 Rectangle {
                     width: root.icon-size + Theme.padding * 4;
                     height: self.width;
+                    background: Theme.secondary-background;
+                    border-radius: self.width / 2;
 
                     img := Image {
                         height: root.icon-size;
@@ -95,11 +103,11 @@ export component TokenTile inherits Tile {
     }
 }
 
-export component TokenTileWithSwitch inherits Rectangle {
+export component TokenTileWithSwitch inherits Tile {
     in-out property checked <=> sw.checked;
+    in-out property enabled <=> sw.enabled;
 
     callback toggled <=> sw.toggled;
 
-    sw := Switch {
-    }
+    sw := Switch { }
 }

ui/base/widgets.slint

@@ -41,8 +41,8 @@ import { Help } from "help.slint";
 import { ResetPassword } from "reset-password.slint";
 import { Banner } from "banner.slint";
 import { AccountBalance } from "account-balance.slint";
-import { TokenTile, TokenTileEntry } from "token-tile.slint";
-import { TokenList } from "token-list.slint";
+import { TokenTile, TokenTileEntry, TokenTileWithSwitchEntry } from "token-tile.slint";
+import { TokenList, TokenListWithSwitch } from "token-list.slint";
 
 export {
     Toast,
@@ -108,5 +108,7 @@ export {
     AccountBalance,
     TokenTile,
     TokenTileEntry,
-    TokenList
+    TokenTileWithSwitchEntry,
+    TokenList,
+    TokenListWithSwitch
 }

ui/logic.slint

@@ -1,6 +1,7 @@
 import { Store, SetupIndex, SettingUI, SettingDeveloperMode, AccountEntry } from "store.slint";
 import { Icons } from "theme.slint";
 import { TransactionTileEntry, TransactionTileStatus } from "base/transaction-tile.slint";
+import { TokenTileEntry } from "base/token-tile.slint";
 
 export global Logic {
     pure callback new-mnemonics(int) -> [string];
@@ -80,14 +81,24 @@ export global Logic {
     // (network) -> void
     callback switch-history-network(string);
 
+    // TODO
     // (network, address) -> void
     callback address-balance(string, string);
 
     // (network, address) -> void
-    callback open-tokens-management(string, string);
+    callback refresh-tokens-management-entries(string, string);
 
     // (network, uuid) -> void
-    callback open-send-token(string, string);
+    callback open-send-token-page(string, string);
+
+    // (network, mint-address) -> void
+    callback open-token-detail(string, string);
+
+    // (entry) -> void
+    callback add-token(TokenTileEntry);
+
+    // (uuid) -> void
+    callback remove-token(string);
 
     callback update-cache-size();
     callback remove-all-cache();

ui/panel/bodyer/home.slint

@@ -1,63 +1,85 @@
 import { Theme, Icons } from "../../theme.slint";
 import { Store, HomeIndex } from "../../store.slint";
 import { Logic } from "../../logic.slint";
-import { AccountBalance, Head, IconBtn, TextBtn, Banner, Label, Link, SettingDetail, SettingDetailInner, TokenTile, TokenTileEntry, TokenList } from "../../base/widgets.slint";
+import { AccountBalance, Head, IconBtn, TextBtn, Banner, Label, Link, SettingDetail, SettingDetailInner, TokenTile, TokenTileEntry, TokenTileWithSwitchEntry, TokenList, TokenListWithSwitch } from "../../base/widgets.slint";
 import { TestModeBanner } from "test-mode-banner.slint";
 
 export global TokensSetting {
     in-out property <[TokenTileEntry]> entries: [
         {
             uuid: "uuid-1",
-            icon: Icons.account,
+            icon: Icons.solana,
             symbol: "SOL",
             balance: "100.34",
-            balance-usdt: "$12321.34"
+            balance-usdt: "$1221.34"
         },
         {
             uuid: "uuid-2",
-            icon: Icons.account,
+            icon: Icons.token,
+            symbol: "BOOM",
+            balance: "130.4",
+            balance-usdt: "$100.34",
+        },
+        {
+            uuid: "uuid-2",
+            icon: Icons.usdt,
             symbol: "USDT",
             balance: "100.34",
             balance-usdt: "$100.34",
         },
         {
             uuid: "uuid-3",
-            icon: Icons.account,
+            icon: Icons.usdc,
             symbol: "DOG",
             balance: "120.34",
-            balance-usdt: "$1100.4",
+            balance-usdt: "$190.7",
         },
-    ];
-
-    in-out property <[TokenTileEntry]> all-account-tokens:[
         {
-            uuid: "uuid-1",
-            icon: Icons.account,
-            symbol: "SOL",
-            balance: "100.34",
-            balance-usdt: "$12321.34"
+            uuid: "uuid-3",
+            icon: Icons.doge,
+            symbol: "DOG",
+            balance: "120.34",
+            balance-usdt: "$300.4",
         },
         {
-            uuid: "uuid-2",
-            icon: Icons.account,
-            symbol: "USDT",
-            balance: "100.34",
-            balance-usdt: "$100.34",
+            uuid: "uuid-3",
+            icon: Icons.btc,
+            symbol: "BTC",
+            balance: "120.34",
+            balance-usdt: "$5380.4",
         },
         {
             uuid: "uuid-3",
-            icon: Icons.account,
-            symbol: "DOG",
+            icon: Icons.eth,
+            symbol: "ETH",
             balance: "120.34",
-            balance-usdt: "$1100.4",
+            balance-usdt: "$6360.4",
         },
+    ];
+
+    in-out property <[TokenTileWithSwitchEntry]> all-account-tokens:[
         {
-            uuid: "uuid-3",
-            icon: Icons.account,
-            symbol: "BOOM",
-            balance: "130.34",
-            balance-usdt: "$1130.8",
+            entry: {
+                uuid: "uuid-1",
+                icon: Icons.solana,
+                symbol: "SOL",
+                balance: "100.34",
+                balance-usdt: "$1221.34"
+            },
+            checked: true,
+            enabled: false,
         },
+        {
+            entry: {
+                uuid: "uuid-1",
+                icon: Icons.usdt,
+                symbol: "USDT",
+                balance: "10.34",
+                balance-usdt: "$12.34"
+            },
+            checked: true,
+            enabled: true,
+        }
     ];
 }
 
@@ -88,15 +110,29 @@ component ManagementBtn inherits VerticalLayout {
         icon: Icons.management;
         text: Logic.tr(Store.is-cn, "管理代币");
         clicked => {
-            Logic.open-tokens-management(Logic.get-current-network(), Store.current-account.pubkey);
+            Logic.refresh-tokens-management-entries(Logic.get-current-network(), Store.current-account.pubkey);
             Store.current-home-index = HomeIndex.Management;
         }
     }
 }
 
 component Management inherits SettingDetail {
-    title: Logic.tr(Store.is-cn, "管理通证");
-    SettingDetailInner { }
+    title: Logic.tr(Store.is-cn, "管理代币");
+    TokenListWithSwitch {
+        entries: TokensSetting.all-account-tokens;
+
+        clicked(entry) => {
+            Logic.open-token-detail(Logic.get-current-network(), entry.uuid);
+        }
+
+        toggled(checked, entry) => {
+            if (checked) {
+                Logic.add-token(entry);
+            } else {
+                Logic.remove-token(entry.uuid);
+            }
+        }
+    }
 }
 
 component Send inherits SettingDetail {
@@ -115,7 +151,7 @@ component Body inherits Rectangle {
         TokenList {
             entries: TokensSetting.entries;
             clicked(entry) => {
-                Logic.open-send-token(Logic.get-current-network(), entry.uuid);
+                Logic.open-send-token-page(Logic.get-current-network(), entry.uuid);
                 Store.current-home-index = HomeIndex.Send;
             }
         }