upgrade baseui and remove jotai provider

Phala-Network · Apr 8, 2022 · c8eda2b · c8eda2b
1 parent cef84b4
commit c8eda2b
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   "dependencies": {
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.43",
-    "baseui": "10.12.1",
+    "baseui": "11.0.0",
     "jotai": "^1.6.2",
     "npm-run-all": "^4.1.5",
     "react-query": "3.34.19",

diff --git a/packages/app-mining/src/components/ClaimAll.tsx b/packages/app-mining/src/components/ClaimAll.tsx
@@ -193,7 +193,7 @@ const ClaimAll = (props: BlockProps) => {
               endEnhancer={
                 polkadotAccount && (
                   <Button
-                    kind="minimal"
+                    kind="tertiary"
                     size="mini"
                     onClick={() => {
                       setAddress(polkadotAccount.address)

diff --git a/packages/app-mining/src/components/DelegateBanner.tsx b/packages/app-mining/src/components/DelegateBanner.tsx
@@ -26,7 +26,7 @@ const DelegateBanner = (): JSX.Element => {
         </HeadingMedium>
       </div>
       <Link to="/delegate/my-delegate">
-        <Button kind="minimal">
+        <Button kind="tertiary">
           My Delegate
           <ChevronRight />
         </Button>

diff --git a/packages/app-mining/src/components/PopoverButton.tsx b/packages/app-mining/src/components/PopoverButton.tsx
@@ -6,7 +6,7 @@ const PopoverButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     return (
       <Button
-        kind="minimal"
+        kind="tertiary"
         size="mini"
         shape="circle"
         overrides={{

diff --git a/packages/app-mining/src/components/StakePool/SettingButton.tsx b/packages/app-mining/src/components/StakePool/SettingButton.tsx
@@ -5,7 +5,7 @@ import {Settings} from 'react-feather'
 const SettingButton: VFC<Pick<ButtonProps, 'onClick'>> = ({onClick}) => {
   return (
     <Button
-      kind="minimal"
+      kind="tertiary"
       size="mini"
       shape="circle"
       onClick={onClick}

diff --git a/packages/app-mining/src/components/StakePoolModal/ClaimModalBody.tsx b/packages/app-mining/src/components/StakePoolModal/ClaimModalBody.tsx
@@ -87,7 +87,7 @@ const ClaimModalBody: VFC<
             endEnhancer={
               polkadotAccount && (
                 <Button
-                  kind="minimal"
+                  kind="tertiary"
                   size="mini"
                   onClick={() => {
                     setAddress(polkadotAccount.address)

diff --git a/packages/app-mining/src/components/StakePoolModal/WithdrawModalBody.tsx b/packages/app-mining/src/components/StakePoolModal/WithdrawModalBody.tsx
@@ -89,7 +89,7 @@ const WithdrawModalBody: VFC<
             endEnhancer={
               <Button
                 size="mini"
-                kind="minimal"
+                kind="tertiary"
                 onClick={() => {
                   if (stakePoolStakers[0]) {
                     setAmount(stakePoolStakers[0].stake)

diff --git a/packages/app-mining/src/pages/MyDelegateV2.tsx b/packages/app-mining/src/pages/MyDelegateV2.tsx
@@ -43,7 +43,7 @@ export const MyDelegateV2 = () => {
         >
           <Block display="flex" alignItems="center">
             <Link to="/delegate/">
-              <Button size="compact" kind="minimal">
+              <Button size="compact" kind="tertiary">
                 <ChevronLeft />
               </Button>
             </Link>

diff --git a/packages/app/src/WrapApp.tsx b/packages/app/src/WrapApp.tsx
@@ -1,5 +1,4 @@
 import {ethereumGraphEndpoint} from '@phala/app-config'
-import {Provider as AppStoreProvider} from '@phala/app-store'
 import {MobileToastContextProvider} from '@phala/react-components'
 import {Provider as LibProvider} from '@phala/react-libs'
 import {isProduction} from '@phala/utils'
@@ -55,29 +54,27 @@ const WrapApp: React.FC = ({children}) => {
     <StrictMode>
       <div>
         <QueryClientProvider contextSharing={true} client={client.current}>
-          <AppStoreProvider>
-            <LibProvider {...productionConfig}>
-              <ThemeProvider theme={theme}>
-                <MobileToastContextProvider>
-                  <BaseProvider theme={baseTheme}>
-                    <SnackbarProvider>{children}</SnackbarProvider>
-                    <ToasterContainer
-                      autoHideDuration={3000}
-                      overrides={{
-                        ToastBody: {
-                          style: {
-                            maxWidth: '100%',
-                            width: '400px',
-                          },
+          <LibProvider {...productionConfig}>
+            <ThemeProvider theme={theme}>
+              <MobileToastContextProvider>
+                <BaseProvider theme={baseTheme}>
+                  <SnackbarProvider>{children}</SnackbarProvider>
+                  <ToasterContainer
+                    autoHideDuration={3000}
+                    overrides={{
+                      ToastBody: {
+                        style: {
+                          maxWidth: '100%',
+                          width: '400px',
                         },
-                      }}
-                    />
-                  </BaseProvider>
-                </MobileToastContextProvider>
-              </ThemeProvider>
-              <ReactQueryDevtools />
-            </LibProvider>
-          </AppStoreProvider>
+                      },
+                    }}
+                  />
+                </BaseProvider>
+              </MobileToastContextProvider>
+            </ThemeProvider>
+            <ReactQueryDevtools />
+          </LibProvider>
         </QueryClientProvider>
       </div>
     </StrictMode>

diff --git a/packages/react-components/src/Modal/ModalWrapper.tsx b/packages/react-components/src/Modal/ModalWrapper.tsx
@@ -24,11 +24,6 @@ export const ModalWrapper: React.FC<IModalProps> = (props) => {
   const {title, children, visible, ...params} = props
   return (
     <Modal
-      // From https://baseweb.design/components/modal:
-      // Makes modal scrollable while cursor is over the modal's backdrop.
-      // Will be removed and implemented as the default behavior in the
-      // next major version.
-      unstable_ModalBackdropScroll={true}
       closeable={false}
       isOpen={visible}
       overrides={{

diff --git a/packages/react-components/src/SelectAccountModal/AccountModal.tsx b/packages/react-components/src/SelectAccountModal/AccountModal.tsx
@@ -72,7 +72,7 @@ const Body: VFC<Props> = ({onSelect, onDisconnect}) => {
                   {isCurrentAccount && (
                     <Button
                       size="compact"
-                      kind="minimal"
+                      kind="tertiary"
                       onClick={onDisconnect}
                     >
                       Disconnect
@@ -93,9 +93,12 @@ const Body: VFC<Props> = ({onSelect, onDisconnect}) => {
   )
 }
 
-const AccountModal: VFC<
-  Required<Pick<ModalProps, 'isOpen' | 'onClose'>> & Props
-> = ({isOpen, onClose, onSelect, onDisconnect}) => {
+const AccountModal: VFC<ModalProps & Props> = ({
+  isOpen,
+  onClose,
+  onSelect,
+  onDisconnect,
+}) => {
   return (
     <Modal
       isOpen={isOpen}

diff --git a/packages/react-components/src/SelectAccountModal/WalletModal.tsx b/packages/react-components/src/SelectAccountModal/WalletModal.tsx
@@ -96,9 +96,7 @@ const Body: VFC<Props> = ({onSelect}) => {
   )
 }
 
-const WalletModal: VFC<
-  Required<Pick<ModalProps, 'isOpen' | 'onClose'>> & Props
-> = ({isOpen, onClose, onSelect}) => {
+const WalletModal: VFC<ModalProps & Props> = ({isOpen, onClose, onSelect}) => {
   return (
     <Modal
       isOpen={isOpen}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml