feat: + offline alert

src/renderer/components/OfflineAlert.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+const OfflineAlertWrapper = styled.div`
+  background-color: #7084ff;
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 13px;
+  color: #fff;
+  margin-bottom: 22px;
+  display: flex;
+  line-height: 130%;
+  img {
+    width: 12px;
+    height: 12px;
+    margin-right: 7px;
+    margin-top: 1px;
+  }
+`;
+
+const OfflineAlert = () => {
+  return (
+    <OfflineAlertWrapper>
+      <img src="rabby-internal://assets/icons/home/offline-alert.svg" alt="" />
+      Rabby Desktop backend API will be discontinued on December 31. User assets
+      remain completely safe and unaffected, and can still be managed via Rabby
+      Extension or the Rabby mobile app. A new Rabby Desktop is planned for a
+      future release.
+    </OfflineAlertWrapper>
+  );
+};
+
+export default OfflineAlert;

src/renderer/routes/Bundle/components/LeftContainer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useBundle } from '@/renderer/hooks/useBundle/useBundle';
 import clsx from 'clsx';
 import { formatNumber } from '@/renderer/utils/number';
+import OfflineAlert from '@/renderer/components/OfflineAlert';
 import { Skeleton } from 'antd';
 import ChainList from '../../Home/components/ChainList';
 import PortfolioView from '../../Home/components/PortfolioView';
@@ -62,6 +63,7 @@ export const LeftContainer: React.FC = () => {
         'flex flex-col'
       )}
     >
+      <OfflineAlert />
       <div className="relative mb-[23px]">
         <h2
           className={clsx(

src/renderer/routes/Home/index.tsx

@@ -25,6 +25,7 @@ import NetSwitchTabs, {
   useSwitchNetTab,
 } from '@/renderer/components/PillsSwitch/NetSwitchTabs';
 import { requestOpenApiWithChainId } from '@/main/utils/openapi';
+import OfflineAlert from '@/renderer/components/OfflineAlert';
 import {
   useExpandList,
   useExpandProtocolList,
@@ -350,6 +351,7 @@ const Home = () => {
       <HomeTab />
       <Container>
         <HomeWrapper>
+          <OfflineAlert />
           <div className="header">
             <div className="top">
               <div className="left">