@lobehub/lobehub 2.0.0-next.3 → 2.0.0-next.30

package/src/app/[variants]/(main)/settings/_layout/Desktop/index.tsx

@@ -5,7 +5,6 @@ import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import InitClientDB from '@/features/InitClientDB';
 import SettingContainer from '@/features/Setting/SettingContainer';
 import { SettingsTabs } from '@/store/global/initialState';
 
@@ -43,7 +42,6 @@ const Layout = memo<LayoutProps>((props) => {
       <SettingContainer maxWidth={'none'}>
         <SettingsContent activeTab={activeTab} mobile={false} showLLM={showLLM} />
       </SettingContainer>
-      <InitClientDB />
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/settings/_layout/Mobile/index.tsx

@@ -3,7 +3,6 @@
 import { useQueryState } from 'nuqs';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
-import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import { SettingsTabs } from '@/store/global/initialState';
 
@@ -19,7 +18,6 @@ const Layout = () => {
     <MobileContentLayout header={<Header />}>
       <SettingsContent activeTab={activeTab} mobile={true} />
       <Footer />
-      <InitClientDB />
     </MobileContentLayout>
   );
 };

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -1,11 +1,11 @@
 import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
 import { Avatar, Text } from '@lobehub/ui';
 import { Divider, Skeleton } from 'antd';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import Link from '@/components/Link';
 import { AiProviderListItem } from '@/types/aiProvider';
 
 import EnableSwitch from './EnableSwitch';

package/src/app/[variants]/(main)/settings/provider/detail/azure/index.tsx

@@ -6,13 +6,11 @@ import { ModelProvider } from 'model-bank';
 import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { AzureProviderCard } from '@/config/modelProviders';
-import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
+import { aiModelSelectors, aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 
@@ -35,11 +33,11 @@ const useProviderCard = (): ProviderItem => {
   const { styles } = useStyles();
 
   // Get the first model card's deployment name as the check model
-  const checkModel = useUserStore((s) => {
-    const chatModelCards = modelProviderSelectors.getModelCardsById(providerKey)(s);
+  const checkModel = useAiInfraStore((s) => {
+    const modelList = aiModelSelectors.enabledAiProviderModelList(s);
 
-    if (chatModelCards.length > 0) {
-      return chatModelCards[0].deploymentName;
+    if (modelList.length > 0) {
+      return modelList[0].id;
     }
 
     return 'gpt-35-turbo';

package/src/app/[variants]/(main)/settings/provider/detail/azureai/index.tsx

@@ -4,11 +4,11 @@ import { ModelProvider } from 'model-bank';
 import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { AzureAIProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/bedrock/index.tsx

@@ -4,12 +4,12 @@ import { Select } from '@lobehub/ui';
 import { useTranslation } from 'react-i18next';
 
 import { FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { BedrockProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/cloudflare/index.tsx

@@ -3,12 +3,12 @@
 import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { CloudflareProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/comfyui/index.tsx

@@ -5,12 +5,12 @@ import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
 import KeyValueEditor from '@/components/KeyValueEditor';
+import { SkeletonInput } from '@/components/Skeleton';
 import { ComfyUIProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/github/index.tsx

@@ -5,12 +5,12 @@ import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
 import { FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { GithubProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/detail/vertexai/index.tsx

@@ -5,12 +5,12 @@ import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
 import { FormPassword } from '@/components/FormInput';
+import { SkeletonInput } from '@/components/Skeleton';
 import { VertexAIProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
-import { SkeletonInput } from '../../features/ProviderConfig';
 import { ProviderItem } from '../../type';
 import ProviderDetail from '../default';
 

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -21,6 +21,7 @@ import urlJoin from 'url-join';
 import { z } from 'zod';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
+import { SkeletonInput, SkeletonSwitch } from '@/components/Skeleton';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { isDesktop, isServerMode } from '@/const/version';
@@ -34,7 +35,6 @@ import {
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
 import Checker, { CheckErrorRender } from './Checker';
 import EnableSwitch from './EnableSwitch';
-import { SkeletonInput } from './SkeletonInput';
 import UpdateProviderInfo from './UpdateProviderInfo';
 
 const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
@@ -298,7 +298,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
         (showApiKey && isProviderApiKeyNotEmpty));
     const clientFetchItem = showClientFetch && {
       children: isLoading ? (
-        <Skeleton.Button active className={styles.switchLoading} />
+        <SkeletonSwitch />
       ) : (
         <Switch checked={isFetchOnClient} disabled={configUpdating} />
       ),
@@ -424,5 +424,3 @@ const ProviderConfig = memo<ProviderConfigProps>(
 );
 
 export default ProviderConfig;
-
-export { SkeletonInput } from './SkeletonInput';

package/src/app/[variants]/layout.tsx

@@ -73,6 +73,7 @@ export const generateViewport = async (props: DynamicLayoutProps): ResolvingView
 
   return {
     ...dynamicScale,
+    colorScheme: null,
     initialScale: 1,
     minimumScale: 1,
     themeColor: [

package/src/app/[variants]/loading/index.tsx

@@ -1,10 +1 @@
-import { isServerMode } from '@/const/version';
-
-import Client from './Client';
-import Server from './Server';
-
-const ScreenLoading = () => (isServerMode ? <Server /> : <Client />);
-
-ScreenLoading.displayName = 'ScreenLoading';
-
-export default ScreenLoading;
+export { default } from './Server';

package/src/app/[variants]/oauth/ResultLayout.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Card } from 'antd';
+import { createStyles } from 'antd-style';
+import { type ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+interface ResultLayoutProps {
+  children: ReactNode;
+}
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  card: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    min-width: 500px;
+    min-height: 280px;
+
+    ${responsive.mobile} {
+      min-width: auto;
+    }
+  `,
+  container: css`
+    ${responsive.mobile} {
+      justify-content: flex-start;
+      width: 100%;
+      padding-block-start: 64px;
+    }
+  `,
+}));
+
+const ResultLayout = memo<ResultLayoutProps>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Center className={styles.container} height="100vh" paddingBlock={24} paddingInline={12}>
+      <Card className={styles.card}>{children}</Card>
+    </Center>
+  );
+});
+
+ResultLayout.displayName = 'ResultLayout';
+
+export default ResultLayout;

package/src/app/[variants]/oauth/callback/error/page.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { Button, Highlighter, Icon } from '@lobehub/ui';
-import { Card, Result } from 'antd';
+import { Result } from 'antd';
 import { ShieldX } from 'lucide-react';
 import Link from 'next/link';
 import { parseAsString, useQueryState } from 'nuqs';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 const FailedPage = memo(() => {
   const { t } = useTranslation('oauth');
@@ -15,38 +15,25 @@ const FailedPage = memo(() => {
   const [errorMessage] = useQueryState<string>('errorMessage', parseAsString);
 
   return (
-    <Center height="100vh">
-      <Card
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'center',
-          minHeight: 280,
-          minWidth: 500,
-          width: '100%',
-        }}
-      >
-        <Result
-          extra={
-            <Link href="/">
-              <Button type="primary">{t('error.backToHome')}</Button>
-            </Link>
-          }
-          icon={<Icon icon={ShieldX} />}
-          status="error"
-          subTitle={
-            <Flexbox gap={8}>
-              {t('error.desc', {
-                reason: t(`error.reason.${reason}` as any, { defaultValue: reason }),
-              })}
+    <Result
+      extra={
+        <Link href="/">
+          <Button type="primary">{t('error.backToHome')}</Button>
+        </Link>
+      }
+      icon={<Icon icon={ShieldX} />}
+      status="error"
+      subTitle={
+        <Flexbox gap={8}>
+          {t('error.desc', {
+            reason: t(`error.reason.${reason}` as any, { defaultValue: reason }),
+          })}
 
-              {!!errorMessage && <Highlighter language={'log'}>{errorMessage}</Highlighter>}
-            </Flexbox>
-          }
-          title={t('error.title')}
-        />
-      </Card>
-    </Center>
+          {!!errorMessage && <Highlighter language={'log'}>{errorMessage}</Highlighter>}
+        </Flexbox>
+      }
+      title={t('error.title')}
+    />
   );
 });
 

package/src/app/[variants]/oauth/callback/layout.tsx

@@ -0,0 +1 @@
+export { default } from '../ResultLayout';

package/src/app/[variants]/oauth/callback/success/page.tsx

@@ -1,36 +1,22 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { Card, Result } from 'antd';
+import { Result } from 'antd';
 import { CheckCircle } from 'lucide-react';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
 
 const SuccessPage = memo(() => {
   const { t } = useTranslation('oauth');
 
   return (
-    <Center height="100vh">
-      <Card
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'center',
-          minHeight: 280,
-          minWidth: 500,
-          width: '100%',
-        }}
-      >
-        <Result
-          icon={<Icon icon={CheckCircle} />}
-          status="success"
-          style={{ padding: 0 }}
-          subTitle={t('success.subTitle')}
-          title={t('success.title')}
-        />
-      </Card>
-    </Center>
+    <Result
+      icon={<Icon icon={CheckCircle} />}
+      status="success"
+      style={{ padding: 0 }}
+      subTitle={t('success.subTitle')}
+      title={t('success.title')}
+    />
   );
 });
 

package/src/app/[variants]/oauth/consent/[uid]/Consent/BuiltinConsent.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Result } from 'antd';
+import { useTheme } from 'antd-style';
+import { LoaderCircle } from 'lucide-react';
+import { memo, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ResultLayout from '../../../ResultLayout';
+
+interface BuiltinConsentProps {
+  uid: string;
+}
+
+const BuiltinConsent = memo<BuiltinConsentProps>(({ uid }) => {
+  const { t } = useTranslation('oauth');
+  const formRef = useRef<HTMLFormElement>(null);
+
+  useEffect(() => {
+    // Auto-submit on mount
+    formRef.current?.submit();
+  }, []);
+
+  const theme = useTheme();
+  return (
+    <>
+      <ResultLayout>
+        <Result
+          icon={<Icon icon={LoaderCircle} spin style={{ color: theme.colorText }} />}
+          status="success"
+          style={{ padding: 0 }}
+          subTitle={t('consent.redirecting')}
+          title=""
+        />
+      </ResultLayout>
+      <form action="/oidc/consent" method="post" ref={formRef} style={{ display: 'none' }}>
+        <input name="uid" type="hidden" value={uid} />
+        <input name="consent" type="hidden" value="accept" />
+      </form>
+    </>
+  );
+});
+
+BuiltinConsent.displayName = 'BuiltinConsent';
+
+export default BuiltinConsent;

package/src/app/[variants]/oauth/consent/[uid]/{Consent.tsx → Consent/index.tsx}

@@ -7,7 +7,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import OAuthApplicationLogo from './components/OAuthApplicationLogo';
+import OAuthApplicationLogo from '../components/OAuthApplicationLogo';
+import BuiltinConsent from './BuiltinConsent';
 
 interface ClientProps {
   clientId: string;
@@ -60,7 +61,10 @@ const useStyles = createStyles(({ css, token }) => ({
   container: css`
     width: 100%;
     min-height: 100vh;
+    padding-block: 12px;
+
     color: ${token.colorTextBase};
+
     background-color: ${token.colorBgLayout};
   `,
   icon: css`
@@ -117,6 +121,8 @@ function getScopeDescription(scope: string, t: any): string {
   return t(`consent.scope.${scope.replace(':', '-')}`, scope);
 }
 
+const BUILTIN_CLIENTS = new Set(['lobehub-desktop', 'lobehub-mobile', 'lobehub-market']);
+
 const ConsentClient = memo<ClientProps>(({ uid, clientId, scopes, clientMetadata }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('oauth');
@@ -124,6 +130,11 @@ const ConsentClient = memo<ClientProps>(({ uid, clientId, scopes, clientMetadata
   const [isLoading, setIsLoading] = useState(false);
 
   const clientDisplayName = clientMetadata?.clientName || clientId;
+
+  if (BUILTIN_CLIENTS.has(clientId)) {
+    return <BuiltinConsent uid={clientId} />;
+  }
+
   return (
     <Center className={styles.container} gap={16}>
       <Flexbox gap={40}>

package/src/app/[variants]/oauth/consent/[uid]/Login.tsx

@@ -21,7 +21,7 @@ interface LoginConfirmProps {
   uid: string;
 }
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   authButton: css`
     width: 100%;
     height: 40px;
@@ -35,12 +35,21 @@ const useStyles = createStyles(({ css, token }) => ({
     border-radius: 12px;
 
     background: ${token.colorBgContainer};
+
+    ${responsive.mobile} {
+      min-width: auto;
+    }
   `,
   container: css`
     width: 100%;
     min-height: 100vh;
     color: ${token.colorTextBase};
     background-color: ${token.colorBgLayout};
+
+    ${responsive.mobile} {
+      justify-content: flex-start;
+      padding-block-start: 64px;
+    }
   `,
   title: css`
     margin-block-end: ${token.marginLG}px;
@@ -59,6 +68,8 @@ const LoginConfirmClient = memo<LoginConfirmProps>(({ uid, clientMetadata }) =>
   const avatar = useUserStore(userProfileSelectors.userAvatar);
   const nickName = useUserStore(userProfileSelectors.nickName);
 
+  const [isLoading, setIsLoading] = React.useState(false);
+
   const titleText = t('login.title', { clientName: clientDisplayName });
   const descriptionText = t('login.description', { clientName: clientDisplayName });
   const buttonText = t('login.button'); // Or "Continue"
@@ -99,7 +110,12 @@ const LoginConfirmClient = memo<LoginConfirmProps>(({ uid, clientMetadata }) =>
 
           <Flexbox gap={16}>
             {/* Form points to the endpoint handling login confirmation */}
-            <form action="/oidc/consent" method="post" style={{ width: '100%' }}>
+            <form
+              action="/oidc/consent"
+              method="post"
+              onSubmit={() => setIsLoading(true)}
+              style={{ width: '100%' }}
+            >
               {/* Adjust action URL */}
               <input name="uid" type="hidden" value={uid} />
               <input name="choice" type="hidden" value={'accept'} />
@@ -108,6 +124,7 @@ const LoginConfirmClient = memo<LoginConfirmProps>(({ uid, clientMetadata }) =>
                 className={styles.authButton}
                 disabled={!isUserStateInit}
                 htmlType="submit"
+                loading={isLoading}
                 name="consent"
                 size="large"
                 type="primary"

package/src/app/sitemap.tsx

@@ -47,7 +47,13 @@ export function parsePaginatedId(id: string): { page?: number; type: SitemapType
   return { type: id as SitemapType };
 }
 
-export default async function sitemap({ id }: { id: string }): Promise<MetadataRoute.Sitemap> {
+export default async function sitemap({
+  id: idPromise,
+}: {
+  id: string;
+}): Promise<MetadataRoute.Sitemap> {
+  const id = await idPromise;
+
   const { type, page } = parsePaginatedId(id);
   const sitemapModule = new Sitemap();
 

package/src/components/InvalidAPIKey/APIKeyForm/Bedrock.tsx

@@ -7,21 +7,16 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FormAction } from '@/features/Conversation/Error/style';
-import { useUserStore } from '@/store/user';
-import { keyVaultsConfigSelectors } from '@/store/user/selectors';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 const BedrockForm = memo<{ description: string }>(({ description }) => {
   const { t } = useTranslation('modelProvider');
   const [showRegion, setShow] = useState(false);
   const [showSessionToken, setShowSessionToken] = useState(false);
 
-  const [accessKeyId, secretAccessKey, sessionToken, region, setConfig] = useUserStore((s) => [
-    keyVaultsConfigSelectors.bedrockConfig(s).accessKeyId,
-    keyVaultsConfigSelectors.bedrockConfig(s).secretAccessKey,
-    keyVaultsConfigSelectors.bedrockConfig(s).sessionToken,
-    keyVaultsConfigSelectors.bedrockConfig(s).region,
-    s.updateKeyVaultConfig,
-  ]);
+  const config = useAiInfraStore(aiProviderSelectors.providerKeyVaults(ModelProvider.Bedrock));
+  const setConfig = useAiInfraStore((s) => s.updateAiProviderConfig);
+  const { accessKeyId, secretAccessKey, sessionToken, region } = config || {};
 
   const theme = useTheme();
   return (
@@ -33,7 +28,7 @@ const BedrockForm = memo<{ description: string }>(({ description }) => {
       <InputPassword
         autoComplete={'new-password'}
         onChange={(e) => {
-          setConfig(ModelProvider.Bedrock, { accessKeyId: e.target.value });
+          setConfig(ModelProvider.Bedrock, { keyVaults: { accessKeyId: e.target.value } });
         }}
         placeholder={'Aws Access Key Id'}
         value={accessKeyId}
@@ -42,7 +37,7 @@ const BedrockForm = memo<{ description: string }>(({ description }) => {
       <InputPassword
         autoComplete={'new-password'}
         onChange={(e) => {
-          setConfig(ModelProvider.Bedrock, { secretAccessKey: e.target.value });
+          setConfig(ModelProvider.Bedrock, { keyVaults: { secretAccessKey: e.target.value } });
         }}
         placeholder={'Aws Secret Access Key'}
         value={secretAccessKey}
@@ -52,7 +47,7 @@ const BedrockForm = memo<{ description: string }>(({ description }) => {
         <InputPassword
           autoComplete={'new-password'}
           onChange={(e) => {
-            setConfig(ModelProvider.Bedrock, { sessionToken: e.target.value });
+            setConfig(ModelProvider.Bedrock, { keyVaults: { sessionToken: e.target.value } });
           }}
           placeholder={'Aws Session Token'}
           value={sessionToken}
@@ -73,7 +68,7 @@ const BedrockForm = memo<{ description: string }>(({ description }) => {
       {showRegion ? (
         <Select
           onChange={(region) => {
-            setConfig('bedrock', { region });
+            setConfig('bedrock', { keyVaults: { region } });
           }}
           options={['us-east-1', 'us-west-2', 'ap-southeast-1', 'eu-central-1'].map((i) => ({
             label: i,

package/src/components/Link.tsx

@@ -0,0 +1,12 @@
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import React, { memo } from 'react';
+
+interface LinkProps extends NextLinkProps {
+  children?: React.ReactNode | undefined;
+}
+
+const Link = memo<LinkProps>((props) => {
+  return <NextLink {...props} prefetch={false} />;
+});
+
+export default Link;

package/src/components/Skeleton/SkeletonSwitch.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from 'antd';
+import { css, cx } from 'antd-style';
+
+const switchLoading = cx(css`
+  width: 44px !important;
+  min-width: 44px !important;
+  height: 22px !important;
+  border-radius: 12px !important;
+`);
+
+export const SkeletonSwitch = () => {
+  return <Skeleton.Button active className={switchLoading} />;
+};

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonInput';
+export * from './SkeletonSwitch';