fix deposit screen when using wallet connect (#501)

0xBigBoss · web-flow · commit 8eb8a05702b2 · 2024-06-28T20:42:02.000-05:00
* fix deposit screen when using wallet connect

* no mas desposito
diff --git a/apps/next/pages/deposit/index.tsx b/apps/next/pages/deposit/index.tsx
@@ -9,7 +9,7 @@ export const Page: NextPageWithLayout = () => {
   return (
     <>
       <Head>
-        <title>Send | Desposit</title>
+        <title>Send | Deposit</title>
       </Head>
       <DepositScreen />
     </>
@@ -19,7 +19,7 @@ export const Page: NextPageWithLayout = () => {
 export const getServerSideProps = userProtectedGetSSP()
 
 Page.getLayout = (children) => (
-  <HomeLayout TopNav={<TopNav header="Desposit" />}>{children}</HomeLayout>
+  <HomeLayout TopNav={<TopNav header="Deposit" />}>{children}</HomeLayout>
 )
 
 export default Page
diff --git a/packages/app/features/deposit/screen.tsx b/packages/app/features/deposit/screen.tsx
@@ -36,16 +36,16 @@ export function DepositWelcome(props: YStackProps) {
 
         <Fade>
           <Stack gap={'$4'} w={'100%'} $gtMd={{ flexDirection: 'row' }}>
-            <DespositWeb3Link />
-            <DespositCoinbasePay />
+            <DepositWeb3Link />
+            <DepositCoinbasePay />
           </Stack>
         </Fade>
       </YStack>
     </YStack>
   )
 }
 
-function DespositWeb3Link() {
+function DepositWeb3Link() {
   return (
     <DepositStackButton>
       <DepositButton
@@ -60,7 +60,7 @@ function DespositWeb3Link() {
   )
 }
 
-function DespositCoinbasePay() {
+function DepositCoinbasePay() {
   const toast = useToastController()
   return (
     <DepositStackButton disabled disabledStyle={{ opacity: 0.5 }}>
diff --git a/packages/app/features/deposit/web3/screen.tsx b/packages/app/features/deposit/web3/screen.tsx
@@ -393,10 +393,12 @@ function FailsafeChainId({ children }: { children: React.ReactNode }) {
   const [error, setError] = useState<string>()
   const [ignoreError, setIgnoreError] = useState(false)
   const { open: openWeb3Modal } = useWeb3Modal()
+  // @ts-expect-error wagmi connector ensures this is there
+  const canCheckChainId = isWeb && window.ethereum
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: hack
   useEffect(() => {
-    if (isWeb) {
+    if (canCheckChainId) {
       // @ts-expect-error wagmi connector ensures this is there
       window.ethereum
         .request({ method: 'eth_chainId' })
@@ -405,7 +407,7 @@ function FailsafeChainId({ children }: { children: React.ReactNode }) {
     }
   }, [chainId, openWeb3Modal])
 
-  if (!isWeb) return children // we don't need to do anything on non-web
+  if (!canCheckChainId) return children // we don't need to do anything on non-web or wallet connect somtimes does not add ethereum provider
 
   if (failsafeChainId === undefined) {
     return (
