diff --git a/example/lib/pages/assetsContent.dart b/example/lib/pages/assetsContent.dart
index 330e5786f..cb2669c51 100644
--- a/example/lib/pages/assetsContent.dart
+++ b/example/lib/pages/assetsContent.dart
@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
-import 'package:polkawallet_ui/components/borderedTitle.dart';
-import 'package:polkawallet_ui/components/roundedCard.dart';
 import 'package:polkawallet_sdk/plugin/index.dart';
 import 'package:polkawallet_sdk/plugin/store/balances.dart';
 import 'package:polkawallet_sdk/storage/keyring.dart';
+import 'package:polkawallet_ui/components/borderedTitle.dart';
+import 'package:polkawallet_ui/components/roundedCard.dart';
 import 'package:polkawallet_ui/components/textTag.dart';
+import 'package:polkawallet_ui/utils/consts.dart';
 import 'package:polkawallet_ui/utils/format.dart';
 
 class AssetsContent extends StatefulWidget {
@@ -63,7 +64,7 @@ class _AssetsContentState extends State<AssetsContent> {
                         child: TextTag(
                           'TestToken',
                           fontSize: 16,
-                          color: Colors.red,
+                          color: PluginColorsDark.primary,
                           margin: EdgeInsets.only(left: 12),
                           padding: EdgeInsets.fromLTRB(8, 4, 8, 4),
                         ))
diff --git a/example/pubspec.lock b/example/pubspec.lock
index d0d0a6fd7..584e475dd 100644
--- a/example/pubspec.lock
+++ b/example/pubspec.lock
@@ -1,6 +1,27 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  _fe_analyzer_shared:
+    dependency: transitive
+    description:
+      name: _fe_analyzer_shared
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "44.0.0"
+  analyzer:
+    dependency: transitive
+    description:
+      name: analyzer
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.4.0"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.1"
   async:
     dependency: transitive
     description:
@@ -8,13 +29,55 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.8.2"
-  auth_header:
+  bip32:
     dependency: transitive
     description:
-      name: auth_header
+      name: bip32
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.1"
+    version: "2.0.0"
+  bip39:
+    dependency: transitive
+    description:
+      name: bip39
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.6"
+  bs58check:
+    dependency: transitive
+    description:
+      name: bs58check
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
+  build:
+    dependency: transitive
+    description:
+      name: build
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.0"
+  build_config:
+    dependency: transitive
+    description:
+      name: build_config
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
+  built_collection:
+    dependency: transitive
+    description:
+      name: built_collection
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.1.1"
+  built_value:
+    dependency: transitive
+    description:
+      name: built_value
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "8.4.0"
   card_swiper:
     dependency: transitive
     description:
@@ -28,7 +91,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   charcode:
     dependency: transitive
     description:
@@ -36,13 +99,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.1"
+  checked_yaml:
+    dependency: transitive
+    description:
+      name: checked_yaml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   clock:
     dependency: transitive
     description:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
+  code_builder:
+    dependency: transitive
+    description:
+      name: code_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.2.0"
   collection:
     dependency: transitive
     description:
@@ -78,6 +155,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.3"
+  dart_style:
+    dependency: transitive
+    description:
+      name: dart_style
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.3"
+  decimal:
+    dependency: transitive
+    description:
+      name: decimal
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.0"
   dropdown_search:
     dependency: transitive
     description:
@@ -92,6 +183,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.3"
+  ethers:
+    dependency: transitive
+    description:
+      name: ethers
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.1+3"
   ffi:
     dependency: transitive
     description:
@@ -106,6 +204,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "6.1.2"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
   fl_chart:
     dependency: transitive
     description:
@@ -178,7 +283,7 @@ packages:
       name: flutter_svg
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.3"
+    version: "1.1.3"
   flutter_swiper:
     dependency: transitive
     description:
@@ -205,6 +310,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.3"
+  glob:
+    dependency: transitive
+    description:
+      name: glob
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
+  graphs:
+    dependency: transitive
+    description:
+      name: graphs
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
+  hex:
+    dependency: transitive
+    description:
+      name: hex
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.0"
   http:
     dependency: transitive
     description:
@@ -219,13 +345,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.0.0"
-  http_server:
-    dependency: transitive
-    description:
-      name: http_server
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.0.0"
   image_picker:
     dependency: transitive
     description:
@@ -254,27 +373,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.17.0"
-  jaguar:
-    dependency: transitive
-    description:
-      name: jaguar
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.0.12"
-  jaguar_common:
-    dependency: transitive
-    description:
-      name: jaguar_common
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.0.0"
-  jaguar_flutter_asset:
-    dependency: transitive
-    description:
-      name: jaguar_flutter_asset
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.0.0"
   js:
     dependency: transitive
     description:
@@ -289,6 +387,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.3.0"
+  json_rpc_2:
+    dependency: transitive
+    description:
+      name: json_rpc_2
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.2"
   logging:
     dependency: transitive
     description:
@@ -296,20 +401,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.2"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.12.12"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.4"
+    version: "0.1.5"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0"
   mime:
     dependency: transitive
     description:
@@ -324,27 +436,34 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.7"
+  package_config:
+    dependency: transitive
+    description:
+      name: package_config
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.2"
   path_drawing:
     dependency: transitive
     description:
       name: path_drawing
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.0"
+    version: "1.0.1"
   path_parsing:
     dependency: transitive
     description:
       name: path_parsing
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.0"
+    version: "1.0.1"
   path_provider:
     dependency: transitive
     description:
@@ -380,13 +499,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.3"
-  path_tree:
-    dependency: transitive
-    description:
-      name: path_tree
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.0.0"
   permission_handler:
     dependency: transitive
     description:
@@ -407,7 +519,7 @@ packages:
       name: petitparser
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.4.0"
+    version: "5.0.0"
   platform:
     dependency: transitive
     description:
@@ -422,6 +534,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.2"
+  pointycastle:
+    dependency: transitive
+    description:
+      name: pointycastle
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.6.1"
   polkawallet_plugin_kusama:
     dependency: "direct dev"
     description:
@@ -435,14 +554,14 @@ packages:
       name: polkawallet_sdk
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.8"
+    version: "0.4.9"
   polkawallet_ui:
     dependency: "direct main"
     description:
       path: "../../ui"
       relative: true
     source: path
-    version: "0.4.8"
+    version: "0.4.9"
   process:
     dependency: transitive
     description:
@@ -450,6 +569,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.2.4"
+  pub_semver:
+    dependency: transitive
+    description:
+      name: pub_semver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
+  pubspec_parse:
+    dependency: transitive
+    description:
+      name: pubspec_parse
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.2.0"
   qr:
     dependency: transitive
     description:
@@ -464,6 +597,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.0.0"
+  rational:
+    dependency: transitive
+    description:
+      name: rational
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.0"
+  rive:
+    dependency: transitive
+    description:
+      name: rive
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.1"
   scrollable_positioned_list:
     dependency: transitive
     description:
@@ -595,6 +742,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.2.0"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   string_scanner:
     dependency: transitive
     description:
@@ -665,6 +826,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.2"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.6"
   vector_math:
     dependency: transitive
     description:
@@ -672,6 +840,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.2"
+  watcher:
+    dependency: transitive
+    description:
+      name: watcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
+  web3dart:
+    dependency: transitive
+    description:
+      name: web3dart
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.5"
   webview_flutter:
     dependency: transitive
     description:
@@ -720,7 +902,14 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.3.1"
+    version: "6.1.0"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.1"
 sdks:
-  dart: ">=2.17.0-0 <3.0.0"
-  flutter: ">=2.5.0"
+  dart: ">=2.17.0 <3.0.0"
+  flutter: ">=2.11.0-0.1.pre"
diff --git a/lib/pages/governanceNew/treasuryPage.dart b/lib/pages/governanceNew/treasuryPage.dart
index 5990f0d53..25301a53f 100644
--- a/lib/pages/governanceNew/treasuryPage.dart
+++ b/lib/pages/governanceNew/treasuryPage.dart
@@ -115,10 +115,7 @@ class _TreasuryPageState extends State<TreasuryPage> {
           proposals
               .addAll(widget.plugin.store.gov.treasuryOverview.approvals ?? []);
 
-          final tips = <TreasuryTipData>[];
-          if (widget.plugin.store.gov.treasuryTips != null) {
-            tips.addAll(widget.plugin.store.gov.treasuryTips!.reversed);
-          }
+          final tips = widget.plugin.store.gov.treasuryTips?.toList() ?? [];
 
           return RefreshIndicator(
               key: _refreshKey,
diff --git a/lib/pages/staking/actions/bondPage.dart b/lib/pages/staking/actions/bondPage.dart
index 509367a36..98e10d596 100644
--- a/lib/pages/staking/actions/bondPage.dart
+++ b/lib/pages/staking/actions/bondPage.dart
@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:polkawallet_plugin_kusama/pages/staking/actions/bondExtraPage.dart';
 import 'package:polkawallet_plugin_kusama/pages/staking/actions/setPayeePage.dart';
 import 'package:polkawallet_plugin_kusama/polkawallet_plugin_kusama.dart';
 import 'package:polkawallet_plugin_kusama/utils/i18n/index.dart';
+import 'package:polkawallet_sdk/plugin/store/balances.dart';
 import 'package:polkawallet_sdk/storage/keyring.dart';
 import 'package:polkawallet_sdk/storage/types/keyPairData.dart';
 import 'package:polkawallet_sdk/utils/i18n.dart';
@@ -9,6 +11,7 @@ import 'package:polkawallet_ui/components/textTag.dart';
 import 'package:polkawallet_ui/components/txButton.dart';
 import 'package:polkawallet_ui/components/v3/plugin/pluginAddressFormItem.dart';
 import 'package:polkawallet_ui/components/v3/plugin/pluginButton.dart';
+import 'package:polkawallet_ui/components/v3/plugin/pluginInputBalance.dart';
 import 'package:polkawallet_ui/components/v3/plugin/pluginTextFormField.dart';
 import 'package:polkawallet_ui/utils/consts.dart';
 // import 'package:polkawallet_ui/pages/accountListPage.dart';
@@ -25,7 +28,6 @@ class BondPage extends StatefulWidget {
 }
 
 class _BondPageState extends State<BondPage> {
-  final _formKey = GlobalKey<FormState>();
   final TextEditingController _amountCtrl = new TextEditingController();
 
   final _rewardToOptions = ['Staked', 'Stash', 'Controller'];
@@ -35,6 +37,8 @@ class _BondPageState extends State<BondPage> {
   int _rewardTo = 0;
   String? _rewardAccount;
 
+  String? _error;
+
   // Future<void> _changeControllerId(BuildContext context) async {
   //   final accounts = widget.keyring.keyPairs.toList();
   //   accounts.addAll(widget.keyring.externals);
@@ -64,10 +68,10 @@ class _BondPageState extends State<BondPage> {
     final symbol = widget.plugin.networkState.tokenSymbol![0];
     final decimals = widget.plugin.networkState.tokenDecimals![0];
 
-    double freeBalance = 0;
+    BigInt freeBalance = BigInt.zero;
     if (widget.plugin.balances.native != null) {
-      freeBalance = Fmt.balanceDouble(
-          widget.plugin.balances.native!.freeBalance.toString(), decimals);
+      freeBalance =
+          Fmt.balanceInt(widget.plugin.balances.native!.freeBalance.toString());
     }
 
     final rewardToOptions =
@@ -82,87 +86,92 @@ class _BondPageState extends State<BondPage> {
     return Column(
       children: <Widget>[
         Expanded(
-          child: Form(
-            key: _formKey,
-            child: SingleChildScrollView(
-              physics: BouncingScrollPhysics(),
-              child: Column(
-                children: <Widget>[
-                  Container(
-                    margin: EdgeInsets.symmetric(horizontal: 16),
-                    child: Row(
-                      children: [
-                        Expanded(
-                            child: TextTag(
-                          I18n.of(context)!.getDic(
-                              i18n_full_dic_kusama, 'staking')!['stake.warn'],
-                          color: Colors.deepOrange,
-                          fontSize: UI.getTextSize(12, context),
-                          margin: EdgeInsets.all(0),
-                          padding: EdgeInsets.all(8),
-                        ))
-                      ],
-                    ),
+          child: SingleChildScrollView(
+            physics: BouncingScrollPhysics(),
+            child: Column(
+              children: <Widget>[
+                Container(
+                  margin: EdgeInsets.symmetric(horizontal: 16),
+                  child: Row(
+                    children: [
+                      Expanded(
+                          child: TextTag(
+                        I18n.of(context)!.getDic(
+                            i18n_full_dic_kusama, 'staking')!['stake.warn'],
+                        color: PluginColorsDark.primary,
+                        textColor: PluginColorsDark.headline1,
+                        fontSize: UI.getTextSize(12, context),
+                        margin: EdgeInsets.all(0),
+                        padding: EdgeInsets.all(8),
+                      ))
+                    ],
                   ),
-                  Padding(
-                    padding: EdgeInsets.fromLTRB(16, 12, 16, 0),
-                    child: PluginAddressFormItem(
-                      account: widget.keyring.current,
-                      label: dicStaking['stash'],
-                    ),
+                ),
+                Padding(
+                  padding: EdgeInsets.fromLTRB(16, 12, 16, 0),
+                  child: PluginAddressFormItem(
+                    account: widget.keyring.current,
+                    label: dicStaking['stash'],
                   ),
-                  // Padding(
-                  //   padding: EdgeInsets.only(left: 16, right: 16),
-                  //   child: PluginAddressFormItem(
-                  //     account: _controller ?? widget.keyring.current,
-                  //     label: dicStaking['controller'],
-                  //     // do not allow change controller here.
-                  //     // onTap: () => _changeControllerId(context),
-                  //   ),
-                  // ),
-                  Container(
+                ),
+                // Padding(
+                //   padding: EdgeInsets.only(left: 16, right: 16),
+                //   child: PluginAddressFormItem(
+                //     account: _controller ?? widget.keyring.current,
+                //     label: dicStaking['controller'],
+                //     // do not allow change controller here.
+                //     // onTap: () => _changeControllerId(context),
+                //   ),
+                // ),
+                Container(
                     margin: EdgeInsets.fromLTRB(16, 12, 16, 0),
-                    child: PluginTextFormField(
-                      label: dic['amount'],
-                      hintText:
-                          '${dic['amount']} (${dicStaking['available']}: ${Fmt.priceFloor(
-                        freeBalance,
-                        lengthMax: 4,
-                      )} $symbol)',
-                      padding: EdgeInsets.symmetric(horizontal: 8),
-                      inputFormatters: [UI.decimalInputFormatter(decimals)!],
-                      controller: _amountCtrl,
-                      keyboardType:
-                          TextInputType.numberWithOptions(decimal: true),
-                      validator: (v) {
-                        final error = Fmt.validatePrice(v!, context);
-                        if (error != null) {
-                          return error;
-                        }
-                        final amount = double.parse(v.trim());
-                        if (amount >= freeBalance) {
-                          return dic['amount.low'];
-                        }
-                        final minBond = Fmt.balanceInt(widget
-                            .plugin.store.staking.overview['minNominatorBond']);
-                        if (amount < Fmt.bigIntToDouble(minBond, decimals)) {
-                          return '${dicStaking['stake.bond.min']} ${Fmt.priceCeilBigInt(minBond, decimals)}';
-                        }
-                        return null;
-                      },
-                    ),
-                  ),
-                  Container(
-                    margin: EdgeInsets.fromLTRB(16, 12, 16, 0),
-                    child: PayeeSelector(
-                      widget.plugin,
-                      widget.keyring,
-                      initialValue: widget.plugin.store.staking.ownStashInfo,
-                      onChange: _onPayeeChanged,
-                    ),
+                    child: Column(
+                      children: [
+                        PluginInputBalance(
+                          titleTag: dic['amount'],
+                          balance: TokenBalanceData(
+                              symbol: symbol,
+                              decimals: decimals,
+                              amount: freeBalance.toString()),
+                          tokenIconsMap: widget.plugin.tokenIcons,
+                          inputCtrl: _amountCtrl,
+                          onInputChange: (value) {
+                            var error = Fmt.validatePrice(value, context);
+                            if (error == null) {
+                              final amount = double.parse(value.trim());
+                              if (amount >=
+                                  Fmt.bigIntToDouble(freeBalance, decimals)) {
+                                error = dic['amount.low'];
+                              }
+                              final minBond = Fmt.balanceInt(widget.plugin.store
+                                  .staking.overview['minNominatorBond']);
+                              if (amount <
+                                  Fmt.bigIntToDouble(minBond, decimals)) {
+                                error =
+                                    '${dicStaking['stake.bond.min']} ${Fmt.priceCeilBigInt(minBond, decimals)}';
+                              }
+                            }
+                            setState(() {
+                              _error = error;
+                            });
+                          },
+                        ),
+                        ErrorMessage(
+                          _error,
+                          margin: EdgeInsets.symmetric(vertical: 2),
+                        ),
+                      ],
+                    )),
+                Container(
+                  margin: EdgeInsets.fromLTRB(16, 12, 16, 0),
+                  child: PayeeSelector(
+                    widget.plugin,
+                    widget.keyring,
+                    initialValue: widget.plugin.store.staking.ownStashInfo,
+                    onChange: _onPayeeChanged,
                   ),
-                ],
-              ),
+                ),
+              ],
             ),
           ),
         ),
@@ -171,7 +180,7 @@ class _BondPageState extends State<BondPage> {
           child: PluginButton(
             title: dicStaking['action.bond']!,
             onPressed: () {
-              if (_formKey.currentState!.validate()) {
+              if (_amountCtrl.text.trim().isNotEmpty && _error == null) {
                 final inputAmount = _amountCtrl.text.trim();
                 String? controllerId = widget.keyring.current.address;
                 if (_controller != null) {
diff --git a/lib/pages/staking/actions/setPayeePage.dart b/lib/pages/staking/actions/setPayeePage.dart
index 4db7d03b8..f335821e9 100644
--- a/lib/pages/staking/actions/setPayeePage.dart
+++ b/lib/pages/staking/actions/setPayeePage.dart
@@ -9,12 +9,13 @@ import 'package:polkawallet_sdk/storage/keyring.dart';
 import 'package:polkawallet_sdk/storage/types/keyPairData.dart';
 import 'package:polkawallet_sdk/utils/i18n.dart';
 import 'package:polkawallet_ui/components/textTag.dart';
+import 'package:polkawallet_ui/components/v3/addressTextFormField.dart';
 import 'package:polkawallet_ui/components/v3/dialog.dart';
 import 'package:polkawallet_ui/components/v3/plugin/pluginAddressFormItem.dart';
-import 'package:polkawallet_ui/components/v3/plugin/pluginAddressTextFormField.dart';
 import 'package:polkawallet_ui/components/v3/plugin/pluginInputItem.dart';
 import 'package:polkawallet_ui/components/v3/plugin/pluginScaffold.dart';
 import 'package:polkawallet_ui/components/v3/plugin/pluginTxButton.dart';
+import 'package:polkawallet_ui/utils/consts.dart';
 import 'package:polkawallet_ui/utils/index.dart';
 
 class SetPayeePage extends StatefulWidget {
@@ -252,7 +253,7 @@ class _PayeeSelectorState extends State<PayeeSelector> {
             visible: (_rewardTo ?? widget.initialValue!.destinationId) == 3,
             child: Container(
               margin: EdgeInsets.only(top: 12),
-              child: PluginAddressTextFormField(
+              child: AddressTextFormField(
                 widget.plugin.sdk.api,
                 widget.keyring.allWithContacts,
                 initialValue: _rewardAccount ?? defaultAcc,
@@ -263,6 +264,7 @@ class _PayeeSelectorState extends State<PayeeSelector> {
                   widget.onChange!(_rewardTo, acc.address);
                 },
                 key: ValueKey<KeyPairData?>(_rewardAccount),
+                isHubTheme: true,
               ),
             ),
           ),
@@ -273,7 +275,8 @@ class _PayeeSelectorState extends State<PayeeSelector> {
                   Expanded(
                       child: TextTag(
                     dic['stake.payee.warn'],
-                    color: Colors.deepOrange,
+                    color: PluginColorsDark.primary,
+                    textColor: PluginColorsDark.headline1,
                     fontSize: UI.getTextSize(12, context),
                     margin: EdgeInsets.symmetric(vertical: 16),
                     padding: EdgeInsets.all(8),
diff --git a/lib/pages/staking/actions/stakePage.dart b/lib/pages/staking/actions/stakePage.dart
index 922dc8742..60990a17d 100644
--- a/lib/pages/staking/actions/stakePage.dart
+++ b/lib/pages/staking/actions/stakePage.dart
@@ -71,9 +71,9 @@ class _StakePageState extends State<StakePage> {
           title: Text('${dic['staking']} ${_step + 1}/2'),
           centerTitle: true,
           leading: PluginIconButton(
-            icon: SvgPicture.asset(
-              "packages/polkawallet_ui/assets/images/icon_back_24.svg",
-              color: Colors.black,
+            icon: Image.asset(
+              "packages/polkawallet_ui/assets/images/icon_back_plugin.png",
+              width: 9,
             ),
             onPressed: () {
               if (_step == 1) {
diff --git a/lib/pages/stakingNew/stakingView.dart b/lib/pages/stakingNew/stakingView.dart
index ee637b3b9..e56da2dbf 100644
--- a/lib/pages/stakingNew/stakingView.dart
+++ b/lib/pages/stakingNew/stakingView.dart
@@ -331,9 +331,8 @@ class _StakingViewState extends State<StakingView> {
                                                             Container(
                                                                 decoration:
                                                                     BoxDecoration(
-                                                                  color:
-                                                                      PluginColorsDark
-                                                                          .green,
+                                                                  color: PluginColorsDark
+                                                                      .primary,
                                                                   borderRadius:
                                                                       BorderRadius.all(
                                                                           Radius.circular(
@@ -351,7 +350,7 @@ class _StakingViewState extends State<StakingView> {
                                                                             9,
                                                                             2),
                                                                 child: Text(
-                                                                    "${Fmt.priceFloorBigIntFormatter(unlocking, decimals, lengthMax: 4)} $symbol ${unlockDetail.length > 0 ? "(${unlockDetail.length})" : ""}",
+                                                                    "${Fmt.priceFloorBigIntFormatter(unlocking, decimals, lengthMax: 4)} $symbol${unlockDetail.length > 0 ? " (${unlockDetail.length})" : ""}",
                                                                     style: labelStyle?.copyWith(
                                                                         fontWeight:
                                                                             FontWeight
@@ -377,12 +376,71 @@ class _StakingViewState extends State<StakingView> {
                                                     ],
                                                   ),
                                                 )),
-                                            InfoItemRow(
-                                              dic['bond.redeemable']!,
-                                              "${Fmt.priceFloorBigIntFormatter(redeemable, decimals, lengthMax: 4)} $symbol",
-                                              labelStyle: labelStyle,
-                                              contentStyle: labelStyle,
-                                            ),
+                                            GestureDetector(
+                                                onTap: () async {
+                                                  if (redeemable >
+                                                          BigInt.zero &&
+                                                      isController == true) {
+                                                    _onAction(() =>
+                                                        Navigator.of(context)
+                                                            .pushNamed(
+                                                                RedeemPage
+                                                                    .route));
+                                                  }
+                                                },
+                                                child: Padding(
+                                                  padding: EdgeInsets.symmetric(
+                                                      vertical: 2),
+                                                  child: Row(
+                                                    crossAxisAlignment:
+                                                        CrossAxisAlignment
+                                                            .start,
+                                                    children: <Widget>[
+                                                      Text(
+                                                          dic['bond.redeemable']!,
+                                                          style: labelStyle),
+                                                      Expanded(
+                                                        child: Column(
+                                                          crossAxisAlignment:
+                                                              CrossAxisAlignment
+                                                                  .end,
+                                                          children: [
+                                                            Container(
+                                                                decoration:
+                                                                    BoxDecoration(
+                                                                  color:
+                                                                      PluginColorsDark
+                                                                          .green,
+                                                                  borderRadius:
+                                                                      BorderRadius.all(
+                                                                          Radius.circular(
+                                                                              4.0)),
+                                                                ),
+                                                                margin: EdgeInsets
+                                                                    .only(
+                                                                        bottom:
+                                                                            3),
+                                                                padding:
+                                                                    EdgeInsets
+                                                                        .fromLTRB(
+                                                                            14,
+                                                                            2,
+                                                                            9,
+                                                                            2),
+                                                                child: Text(
+                                                                    "${Fmt.priceFloorBigIntFormatter(redeemable, decimals, lengthMax: 4)} $symbol",
+                                                                    style: labelStyle?.copyWith(
+                                                                        fontWeight:
+                                                                            FontWeight
+                                                                                .bold,
+                                                                        color: Colors
+                                                                            .black))),
+                                                          ],
+                                                        ),
+                                                      ),
+                                                    ],
+                                                  ),
+                                                )),
                                             InfoItemRow(
                                               dic['v3.nominations']!,
                                               "${widget.plugin.store.staking.ownStashInfo!.nominating!.length.toString()} ${dic['validators']}",
diff --git a/lib/polkawallet_plugin_kusama.dart b/lib/polkawallet_plugin_kusama.dart
index 20bd00f11..84add8516 100644
--- a/lib/polkawallet_plugin_kusama.dart
+++ b/lib/polkawallet_plugin_kusama.dart
@@ -65,7 +65,7 @@ class PluginKusama extends PolkawalletPlugin {
               'packages/polkawallet_plugin_kusama/assets/images/public/$name.png'),
           iconDisabled: Image.asset(
               'packages/polkawallet_plugin_kusama/assets/images/public/${name}_gray.png'),
-          jsCodeVersion: 31501,
+          jsCodeVersion: 33501,
           isTestNet: false,
           isXCMSupport: name == network_name_kusama,
         ),
diff --git a/pubspec.lock b/pubspec.lock
index 26d8466e5..f839e2fff 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -28,7 +28,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.8.2"
+    version: "2.9.0"
   bip32:
     dependency: transitive
     description:
@@ -126,7 +126,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   charcode:
     dependency: transitive
     description:
@@ -154,7 +154,7 @@ packages:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   code_builder:
     dependency: transitive
     description:
@@ -238,7 +238,7 @@ packages:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   ffi:
     dependency: transitive
     description:
@@ -327,7 +327,7 @@ packages:
       name: flutter_svg
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.3"
+    version: "1.1.3"
   flutter_swiper:
     dependency: "direct main"
     description:
@@ -491,14 +491,14 @@ packages:
       name: material_color_utilities
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.4"
+    version: "0.1.5"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0"
   mime:
     dependency: transitive
     description:
@@ -533,21 +533,21 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.2"
   path_drawing:
     dependency: transitive
     description:
       name: path_drawing
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.0"
+    version: "1.0.1"
   path_parsing:
     dependency: transitive
     description:
       name: path_parsing
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.0"
+    version: "1.0.1"
   path_provider:
     dependency: transitive
     description:
@@ -610,7 +610,7 @@ packages:
       name: petitparser
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.4.0"
+    version: "5.0.0"
   platform:
     dependency: transitive
     description:
@@ -645,7 +645,7 @@ packages:
       path: "../ui"
       relative: true
     source: path
-    version: "0.4.8"
+    version: "0.4.9"
   pool:
     dependency: transitive
     description:
@@ -695,6 +695,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.2.0"
+  rive:
+    dependency: transitive
+    description:
+      name: rive
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.1"
   scrollable_positioned_list:
     dependency: transitive
     description:
@@ -832,7 +839,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.2"
+    version: "1.9.0"
   stack_trace:
     dependency: transitive
     description:
@@ -867,14 +874,14 @@ packages:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   test_api:
     dependency: transitive
     description:
@@ -1028,7 +1035,7 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.3.1"
+    version: "6.1.0"
   yaml:
     dependency: transitive
     description:
@@ -1037,5 +1044,5 @@ packages:
     source: hosted
     version: "3.1.0"
 sdks:
-  dart: ">=2.17.0-0 <3.0.0"
-  flutter: ">=2.5.0"
+  dart: ">=2.17.0 <3.0.0"
+  flutter: ">=2.11.0-0.1.pre"