refactor: simplify RainbowKit provider configuration and button styling

Author: corwintines

src/components/StartWithEthereumFlow/DownloadAWallet/index.tsx

@@ -52,6 +52,7 @@ const DownloadAWallet = ({
           </div>
           <Button
             disabled={!hasWallet}
+            className="w-fit px-10"
             onClick={() => {
               handleNext()
               trackCustomEvent({
@@ -61,7 +62,7 @@ const DownloadAWallet = ({
               })
             }}
           >
-            Next
+            Continue
           </Button>
         </div>
       </div>
@@ -92,12 +93,7 @@ const DownloadAWallet = ({
                   </div>
                   <p className="text-body">{wallet.name}</p>
                 </div>
-                <ButtonLink
-                  href={wallet.url}
-                  variant="outline"
-                  isSecondary
-                  size="sm"
-                >
+                <ButtonLink href={wallet.url} variant="outline" size="sm">
                   Get wallet
                 </ButtonLink>
               </div>
@@ -121,6 +117,7 @@ const DownloadAWallet = ({
           </div>
           <Button
             disabled={!hasWallet}
+            className="w-full px-10 lg:w-fit"
             onClick={() => {
               handleNext()
               trackCustomEvent({
@@ -130,7 +127,7 @@ const DownloadAWallet = ({
               })
             }}
           >
-            Next
+            Continue
           </Button>
         </div>
       </div>

src/components/WalletProviders.tsx

@@ -1,48 +1,22 @@
 import { WagmiProvider } from "wagmi"
 import { type Locale, RainbowKitProvider } from "@rainbow-me/rainbowkit"
 
-import { ButtonLink } from "@/components/ui/buttons/Button"
-
 import { rainbowkitConfig } from "@/config/rainbow-kit"
 
 interface WalletProvidersProps {
   children: React.ReactNode
   locale: string | undefined
 }
 
-const Disclaimer = () => {
-  return (
-    <div className="flex flex-col gap-2">
-      <div>
-        <p className="text-md font-bold">What is a wallet?</p>
-        <p className="leading text-sm text-body-medium">
-          A wallet is used to send, receive, store, and display digital assets.
-          It&apos;s a new way to log in, without needing to create new accounts
-          and passwords on every website.
-        </p>
-      </div>
-      <div className="flex flex-row justify-center gap-4">
-        <ButtonLink href="/wallets/find-wallet" size="sm" variant="outline">
-          Get a wallet
-        </ButtonLink>
-        <ButtonLink href="/wallets/" size="sm" variant="outline">
-          Learn more
-        </ButtonLink>
-      </div>
-    </div>
-  )
-}
-
 const WalletProviders = ({ children, locale }: WalletProvidersProps) => {
   return (
     <WagmiProvider config={rainbowkitConfig}>
       <RainbowKitProvider
         locale={locale as Locale}
         appInfo={{
           appName: "RainbowKit Demo",
-          disclaimer: Disclaimer,
+          learnMoreUrl: "/wallets",
         }}
-        modalSize="compact"
       >
         {children}
       </RainbowKitProvider>