Add warning message for upgrading wallet

backend/b3_basic_wallet/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "b3_basic_wallet"
-version = "0.0.0-alpha.16"
+version = "0.0.0-alpha.17"
 edition = "2021"
 
 [lib]

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b3wallet-frontend",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "author": "b3hr4d",
   "description": "Wallet and System Canister for the B3Wallet on the Internet Computer",
   "keywords": [

frontend/src/components/Header.tsx

@@ -17,14 +17,16 @@ import {
   ModalHeader,
   ModalOverlay,
   Select,
-  Stack
+  Stack,
+  Text
 } from "@chakra-ui/react"
 import { ManagementCanisterRecord } from "@dfinity/agent"
 import { Principal } from "@dfinity/principal"
 import useToastMessage from "hooks/useToastMessage"
 import { useCallback, useEffect, useState } from "react"
 import { B3System, CanisterStatus } from "service"
 import Loading from "./Loading"
+import Address from "./Wallet/Address"
 import PrincipalCard from "./Wallet/PrincipalCard"
 import CanisterControllers from "./Wallet/Setting/CanisterController"
 import WalletError from "./WalletError"
@@ -206,6 +208,9 @@ const Header: React.FC<HeaderProps> = ({
             )}
             <Stack spacing={4}>
               <PrincipalCard address={principal} fontSize="sm" p={2} />
+              <Text fontSize="sm">
+                If you want to use your own wallet canister, please add it here.
+              </Text>
               <FormControl id="addWallet">
                 <FormLabel>Add Wallet Canister</FormLabel>
                 <Stack direction="row">
@@ -253,6 +258,9 @@ const Header: React.FC<HeaderProps> = ({
                       </option>
                     ))}
                   </Select>
+                  {selectedCanisterId && (
+                    <Address address={selectedCanisterId} hiddenAddress />
+                  )}
                   <Button
                     colorScheme="orange"
                     flex={2}

frontend/src/components/Wallet/Address.tsx

@@ -13,13 +13,15 @@ import { useMemo } from "react"
 interface AddressWithCopyProps extends FlexProps {
   address: string
   noIcon?: boolean
+  hiddenAddress?: boolean
 }
 
 const Address: React.FC<AddressWithCopyProps> = ({
   address,
   noIcon,
   overflow,
   children,
+  hiddenAddress,
   ...rest
 }) => {
   const { hasCopied, onCopy } = useClipboard(address)
@@ -44,15 +46,20 @@ const Address: React.FC<AddressWithCopyProps> = ({
     <Tooltip label={address} aria-label="Full address">
       <Flex alignItems="center" overflow={overflow} {...rest}>
         {children}
-        <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+        <Text
+          overflow="hidden"
+          textOverflow="ellipsis"
+          whiteSpace="nowrap"
+          hidden={hiddenAddress}
+        >
           {truncatedAddress}
         </Text>
         {noIcon ? null : (
           <IconButton
             colorScheme="blue"
             onClick={onCopy}
             aria-label="Copy to clipboard"
-            variant="ghost"
+            variant={hiddenAddress ? "solid" : "ghost"}
             icon={hasCopied ? <CheckIcon /> : <CopyIcon />}
           />
         )}

frontend/src/components/Wallet/Setting/index.tsx

@@ -1,6 +1,8 @@
-import { Stack, Text } from "@chakra-ui/react"
+import { Alert, AlertIcon, Stack, Text } from "@chakra-ui/react"
 import { WalletSettings } from "declarations/b3_wallet/b3_wallet.did"
+import { B3_SYSTEM_CANISTER_ID } from "helpers/config"
 import { B3BasicWallet, B3System, B3Wallet } from "service"
+import Address from "../Address"
 import PrincipalCard from "../PrincipalCard"
 import Controllers from "./Controllers"
 import Cycles from "./Cycles"
@@ -37,6 +39,22 @@ const Settings: React.FC<SettingsProps> = ({
         Settings
       </Text>
       <PrincipalCard address={principal} />
+      <Alert status="warning" borderRadius="base">
+        <AlertIcon />
+        <Text fontSize="sm">
+          If you have trouble with your wallet canister, you should try to
+          update it.
+          <br />
+          If update fails, you can uninstall from below and reinstall it. don't
+          forget to add system
+          <Address
+            address={B3_SYSTEM_CANISTER_ID}
+            display="inline-flex"
+            color="blue.500"
+          />
+          canister id as a controller before uninstalling.
+        </Text>
+      </Alert>
       <Cycles actor={actor} />
       {signers && (
         <Signers