feat: apply figma responsive home design

src/pages/WalletPage.tsx

@@ -1,5 +1,9 @@
+import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
+import { WagmiProvider } from "wagmi";
+import "@rainbow-me/rainbowkit/styles.css";
 import { WalletLoginControls } from "../components/WalletLoginControls";
 import { useI18n } from "../i18n";
+import { wagmiConfig } from "../wagmiConfig";
 
 export function WalletPage() {
   const { t } = useI18n();
@@ -16,7 +20,27 @@ export function WalletPage() {
         <li>{t("walletStepSign")}</li>
       </ul>
       <div className="rounded-2xl border border-ark-line bg-ark-panel p-6 space-y-4">
-        <WalletLoginControls />
+        {import.meta.env.VITE_WALLETCONNECT_PROJECT_ID ? (
+          <WagmiProvider config={wagmiConfig}>
+            <RainbowKitProvider
+              theme={darkTheme({
+                accentColor: "#d4af37",
+                accentColorForeground: "#0a0a0a",
+                borderRadius: "medium",
+              })}
+              modalSize="wide"
+            >
+              <WalletLoginControls />
+            </RainbowKitProvider>
+          </WagmiProvider>
+        ) : (
+          <p
+            className="text-sm text-amber-500/90 leading-relaxed"
+            title={t("walletMissingProjectId")}
+          >
+            {t("walletSetupNeeded")}
+          </p>
+        )}
       </div>
     </div>
   );