recode walets

.gitignore

@@ -104,3 +104,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# React Component Preview
+previewConfig.json

components/AlertMessage.tsx

@@ -140,4 +140,4 @@ export default React.memo(styled(AlertMessage)`
       color: #333333;
     }
   }
-`)
+` as any)

components/BindAirdrop.tsx

@@ -16,7 +16,7 @@ import MDropdown from "./MDropdown";
 import { BaseProps } from "./types";
 
 
-const BindTypeDropdown = styled(MDropdown)`
+const BindTypeDropdown = styled(MDropdown as any)`
     &.mdropdown {
       display: inline-block;
       vertical-align: top;

components/Btn.tsx

@@ -21,4 +21,4 @@ export default React.memo<Props>(styled(Btn)`
     background: var(--primary-color) !important;
     color: white !important;
   }
-`)
+` as any)

components/BtnUpload.tsx

@@ -91,4 +91,4 @@ export const BtnUpload = React.memo<Props>(styled(btnUpload)`
       }
     }
   }
-`)
+` as any)

components/FileItem.tsx

@@ -376,4 +376,4 @@ export default React.memo<Props>(styled(FileItem)`
     border-radius: 8px !important;
   }
 
-`)
+` as any)

components/FilesTable.tsx

@@ -171,6 +171,6 @@ export const FilesTable = React.memo<Props>(styled(filesTable)`
         }
       }
     }
-`)
+` as any)
 
 export default FilesTable

components/GetNickname.tsx

@@ -239,4 +239,4 @@ export const GetNickname = React.memo<BaseProps>(styled(_GetNickname)`
     margin-top: 16px;
     text-align: left;
   }
-`);
+` as any);

components/Logo.tsx

@@ -30,5 +30,5 @@ export default React.memo<Props>(styled(Logo)`
     color: white;
     display: inline-block;
   }
-`)
+` as any)
 

components/MAccordion.tsx

@@ -33,4 +33,4 @@ function _MAccordion(props: Props) {
 
 export const MAccordion = React.memo<Props>(styled(_MAccordion)`
 
-`)
+` as any)

components/MCard.tsx

@@ -54,4 +54,4 @@ export const MCard = React.memo<BasePropsWithChildren>(styled(_MCard)`
         margin-right: 1rem;
       }
     }
-`)
+` as any)

components/MDropdown.tsx

@@ -199,4 +199,4 @@ export default React.memo<Props>(styled(MDropdown)`
       }
     }
   }
-`)
+` as any)

components/OnDrapDropFrame.tsx

@@ -135,4 +135,4 @@ export const OnDrapDropFrame = React.memo<Props>(styled(_OnDrapDropFrame)`
   &.show {
     display: flex;
   }
-`);
+` as any);

components/PageUserSideLayout.tsx

@@ -38,4 +38,4 @@ export default React.memo<Props>(styled(_PageUserSideLayout)`
         padding: 2.29rem;
         height: max-content;
     }
-`)
+` as any)

components/SideLayout.tsx

@@ -239,4 +239,4 @@ export default React.memo<Props>(styled(SideLayout)`
     overflow: auto !important;
     background: white;
   }
-`)
+` as any)

components/User.tsx

@@ -14,7 +14,7 @@ import { getEarnRewards } from "../lib/http/share_earn";
 import { useAutoUpdateToStore } from "../lib/initAppStore";
 import { getFormatValue, shortStr } from "../lib/utils";
 import { EVMChains } from "../lib/wallet/config";
-import { WalletName, WrapLoginUser } from "../lib/wallet/hooks";
+import { WrapLoginUser } from "../lib/wallet/hooks";
 import { Links2 } from "./Links";
 import ModalSelectAccount from "./modal/ModalSelectAccount";
 export interface Props {
@@ -31,18 +31,6 @@ function getWalletIcon(user: WrapLoginUser): string {
       return "/images/subwallet.png";
     case "metamask":
       return "/images/wallet_metamask.png";
-    // case "metamask-Polygon":
-    //   return "/images/wallet_polygon.png";
-    // case "metamask-Moonriver":
-    //   return "/images/wallet_moonriver.png";
-    // case "metamask-BSC":
-    //   return "/images/wallet_bsc.png";
-    // case "metamask-HECO":
-    //   return "/images/wallet_heco.png";
-    // case "metamask-Cubechain":
-    //   return "/images/wallet_cube.png";
-    case "near":
-      return "/images/wallet_near.png";
     case "solana":
       return "/images/wallet_solana.png";
     case "elrond":
@@ -57,8 +45,6 @@ function getWalletIcon(user: WrapLoginUser): string {
       return "/images/martian.png";
     case "aptos-petra":
       return "/images/aptos.svg";
-    case "web3auth":
-      return user.profileImage;
     case "talisman":
       return "/images/talisman.png";
     case "oasis":
@@ -160,7 +146,7 @@ function User(props: Props) {
   const [firstExpandUser, toggleFirstExpandUser] = useToggle();
   useEffect(() => {
     open && toggleFirstExpandUser(true);
-  },[open])
+  }, [open]);
   const [mRewards] = useGet(() => getEarnRewards(user.account), [user.account, isCrust, firstExpandUser], "getEarnRewards");
   const { rewards } = useAutoUpdateToStore({ key: "rewards", value: mRewards });
   const totalRewards = getFormatValue(rewards, "total.total");
@@ -236,9 +222,7 @@ function User(props: Props) {
             onClick={() => user && user.wallet === "metamask" && setShowChains(!showChains)}
           >
             <Item.Image src={getWalletIcon(user)} size={"tiny"} />
-            <div style={{ fontSize: 24, visibility: user.wallet === "metamask" ? "visible" : "hidden" }}>
-              {showChains ? <FiChevronUp /> : <FiChevronDown />}
-            </div>
+            <div style={{ fontSize: 24, visibility: user.wallet === "metamask" ? "visible" : "hidden" }}>{showChains ? <FiChevronUp /> : <FiChevronDown />}</div>
             {showChains && (
               <div
                 style={{
@@ -288,15 +272,10 @@ function User(props: Props) {
             )}
           </div>
           <Item.Content verticalAlign={"middle"} style={{ flex: "unset", paddingLeft: "0.7rem" }}>
-            <Dropdown
-              pointing={"top right"}
-              icon={<span className="cru-fo cru-fo-chevron-down" />}
-              basic
-              text={user.nickName || ftmAccount}
-            >
+            <Dropdown pointing={"top right"} icon={<span className="cru-fo cru-fo-chevron-down" />} basic text={user.nickName || ftmAccount}>
               <Dropdown.Menu>
                 <TwoText>
-                  <div className="title-text">Sign-in Wallet : {WalletName[user.wallet]}</div>
+                  <div className="title-text">Sign-in Wallet : {user.useWallet?.name}</div>
                   <div className="sub-text">
                     {ftmAccont2}
                     <span onClick={() => copy(user.account)} className="cru-fo cru-fo-copy" />
@@ -325,8 +304,7 @@ function User(props: Props) {
     </Segment>
   );
 }
-
-export default React.memo(styled(User)`
+const StyleUser = styled(User)`
   border-bottom: 1px solid var(--line-color) !important;
   margin: unset !important;
   padding: 1.1rem !important;
@@ -386,4 +364,6 @@ export default React.memo(styled(User)`
       margin-top: 1.6rem !important;
     }
   }
-`);
+`;
+
+export default React.memo(StyleUser as any);

components/effect/Pixels.tsx

@@ -237,8 +237,8 @@ export const PixelBtn1 = styled.div<{ height?: number }>`
 `
 
 
-const prixlBoardAttrs = (p: { board_size: number }) => ({ board_size: p.board_size || 12 });
-export const PixelBoard = styled.div.attrs(prixlBoardAttrs)`
+const prixlBoardAttrs = (p: { board_size?: number }) => ({ board_size: p.board_size || 12 });
+export const PixelBoard = styled.div.attrs<{ board_size?: number }>(prixlBoardAttrs)`
   padding: ${(p) => p.board_size}px;
   background-repeat: no-repeat;
   background-size: 

components/layout.tsx

@@ -1,57 +1,47 @@
-import Head from 'next/head'
-import React from "react";
+import Head from "next/head";
+import React, { ReactNode } from "react";
 import styled from "styled-components";
-
+import { BasePropsWithChildren } from "./types";
 
 export function CenterFlex(p: React.HTMLProps<HTMLDivElement> = {}) {
-  const { className, children, style = {}, ...other } = p
-  return <div
-    className={className}
-    style={{ display: 'flex', ...style }}
-    {...other}>
-    <div style={{ flex: 1, height: 1, width: 1 }} />
-    {children}
-    <div style={{ flex: 1, height: 1, width: 1 }} />
-  </div>
+  const { className, children, style = {}, ...other } = p;
+  return (
+    <div className={className} style={{ display: "flex", ...style }} {...other}>
+      <div style={{ flex: 1, height: 1, width: 1 }} />
+      {children as ReactNode}
+      <div style={{ flex: 1, height: 1, width: 1 }} />
+    </div>
+  );
 }
 
 export const RowFlex = styled.div`
   display: flex;
   flex-direction: row;
-`
+`;
 
 export const ColFlex = styled.div`
-  display:  flex;
+  display: flex;
   flex-direction: column;
-`
+`;
 
-export const siteTitle = 'Crust Files'
+export const siteTitle = "Crust Files";
 
-function Layout({
-  children,
-  className,
-}: {
-  children: React.ReactNode,
-  className?: string,
-}) {
+function Layout({ children, className }: BasePropsWithChildren) {
   return (
     <div className={className}>
       <Head>
         <link rel="icon" href="/favicon.ico" />
-        <meta
-          name="description"
-          content="Crust Files, the Web3.0 file storage application"
-        />
+        <meta name="description" content="Crust Files, the Web3.0 file storage application" />
         <meta name="og:title" content={siteTitle} />
       </Head>
       {children}
     </div>
-  )
+  );
 }
 
-export default React.memo(styled(Layout)`
+export default styled(Layout)`
   width: 100%;
   height: 100%;
   max-height: 100%;
   overflow: auto;
-`)
+`;

components/modal/ModalNewKey.tsx

@@ -88,4 +88,4 @@ export default React.memo<Props>(styled(ModalNewKey)`
       }
     }
   }
-`)
+` as any)