fix: safe -> walletconnect -> app issue + other fixes (#3970)

* Cold start loading time improvement (use NEXT_PUBLIC_SWAP_WIDGET_ONBOARDING_HIDDEN=true) * remove irritating key and svg errors * chore: Actual safe -> walletconnect -> app fix
OasisDEX · Jun 26, 2024 · 61a66ca · 61a66ca
1 parent 5c4e4b4
commit 61a66ca
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 44 deletions.
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
@@ -66,6 +66,7 @@ export function Tabs<T>({
         {items.map(({ content, id }) => (
           <Box
             {...(id === selectedId && { ref })}
+            key={id as string}
             as="li"
             onClick={() => {
               onClick(id)

diff --git a/components/assetsTable/AssetsFiltersContainer.tsx b/components/assetsTable/AssetsFiltersContainer.tsx
@@ -5,7 +5,10 @@ import { Box, Flex } from 'theme-ui'
 import { useMediaQuery } from 'usehooks-ts'
 
 interface AssetsFiltersContainerProps {
-  filters: ReactNode[]
+  filters: {
+    id: string
+    component: ReactNode
+  }[]
   isSticky?: boolean
   lastWithAutoOffset?: boolean
 }
@@ -48,8 +51,9 @@ export function AssetsFiltersContainer({
           justifyContent: 'flex-start',
         }}
       >
-        {filters.map((filter) => (
+        {filters.map(({ id, component }) => (
           <Box
+            key={id}
             sx={{
               flex: ['1', '1 45%', '1'],
               maxWidth: ['none', null, null, '255px'],
@@ -60,7 +64,7 @@ export function AssetsFiltersContainer({
               }),
             }}
           >
-            {filter}
+            {component}
           </Box>
         ))}
       </Flex>

diff --git a/components/swapWidget/SwapWidgetNoSsr.tsx b/components/swapWidget/SwapWidgetNoSsr.tsx
@@ -2,12 +2,14 @@ import dynamic from 'next/dynamic'
 
 import { SwapWidgetSkeleton } from './SwapWidgetSkeleton'
 
-export const SwapWidgetNoSsr = dynamic(
-  () => {
-    return import('./SwapWidget').then((component) => component.SwapWidget)
-  },
-  {
-    ssr: false,
-    loading: SwapWidgetSkeleton,
-  },
-)
+export const SwapWidgetNoSsr = !process.env.NEXT_PUBLIC_SWAP_WIDGET_ONBOARDING_HIDDEN
+  ? dynamic(
+      () => {
+        return import('./SwapWidget').then((component) => component.SwapWidget)
+      },
+      {
+        ssr: false,
+        loading: SwapWidgetSkeleton,
+      },
+    )
+  : () => null
diff --git a/features/productHub/components/ProductHubLoadingState.tsx b/features/productHub/components/ProductHubLoadingState.tsx
@@ -10,10 +10,22 @@ export const ProductHubLoadingState: FC = () => {
       <AssetsTableContainer>
         <AssetsFiltersContainer
           filters={[
-            <Skeleton height="56px" />,
-            <Skeleton height="56px" />,
-            <Skeleton height="56px" />,
-            <Skeleton height="56px" />,
+            {
+              id: 'skeleton1',
+              component: <Skeleton height="56px" />,
+            },
+            {
+              id: 'skeleton2',
+              component: <Skeleton height="56px" />,
+            },
+            {
+              id: 'skeleton3',
+              component: <Skeleton height="56px" />,
+            },
+            {
+              id: 'skeleton4',
+              component: <Skeleton height="56px" />,
+            },
           ]}
         />
         <Box sx={{ m: 4 }}>

diff --git a/features/productHub/controls/ProductHubFiltersController.tsx b/features/productHub/controls/ProductHubFiltersController.tsx
@@ -49,10 +49,30 @@ export const ProductHubFiltersController: FC<ProductHubFiltersControllerProps> =
       key={selectedProduct}
       filters={[
         ...(selectedProduct === OmniProductType.Earn
-          ? [depositTokenFilter]
-          : [collateralTokenFilter, debtTokenFilter]),
-        ...(!hiddenProtocolFilter ? [protocolFilter] : []),
-        ...(!hiddenNetworkFilter ? [networkFilter] : []),
+          ? [{ id: 'depositTokenFilter', component: depositTokenFilter }]
+          : [
+              { id: 'collateralTokenFilter', component: collateralTokenFilter },
+              {
+                id: 'debtTokenFilter',
+                component: debtTokenFilter,
+              },
+            ]),
+        ...(!hiddenProtocolFilter
+          ? [
+              {
+                id: 'protocolFilter',
+                component: protocolFilter,
+              },
+            ]
+          : []),
+        ...(!hiddenNetworkFilter
+          ? [
+              {
+                id: 'networkFilter',
+                component: networkFilter,
+              },
+            ]
+          : []),
       ]}
       lastWithAutoOffset={!hiddenProtocolFilter && !hiddenNetworkFilter}
     >

diff --git a/handlers/signature-auth/signin.ts b/handlers/signature-auth/signin.ts
@@ -69,7 +69,11 @@ export function makeSignIn(options: signInOptions): NextApiHandler {
         const isOwner = await checkIfGnosisOwner(web3, challenge, signedAddress)
 
         if (!isOwner) {
-          throw new SignatureAuthError('Signature not correct - personal sign')
+          // it might be a wallet connect + safe, no way to check
+          // that during connect/sign so im checking that here
+          if (!(await isValidSignature(web3, challenge.address, message, body.signature))) {
+            throw new SignatureAuthError('Signature not correct - personal sign')
+          }
         }
       }
     }

diff --git a/theme/icons/arb_circle.tsx b/theme/icons/arb_circle.tsx
@@ -36,8 +36,8 @@ export const arb_circle = {
           y2="16"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#2D374B" />
-          <stop offset="1" stop-color="#585C65" />
+          <stop stopColor="#2D374B" />
+          <stop offset="1" stopColor="#585C65" />
         </linearGradient>
       </defs>
     </>

diff --git a/theme/icons/bal_circle.tsx b/theme/icons/bal_circle.tsx
@@ -23,8 +23,8 @@ export const bal_circle = {
           y2="29.0001"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#222121" />
-          <stop offset="1" stop-color="#8E8E8E" />
+          <stop stopColor="#222121" />
+          <stop offset="1" stopColor="#8E8E8E" />
         </linearGradient>
       </defs>
     </>

diff --git a/theme/icons/crv_circle.tsx b/theme/icons/crv_circle.tsx
@@ -6039,8 +6039,8 @@ export const crv_circle = {
           y2="29"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#609DEA" />
-          <stop offset="1" stop-color="#3465A4" />
+          <stop stopColor="#609DEA" />
+          <stop offset="1" stopColor="#3465A4" />
         </linearGradient>
       </defs>
     </>

diff --git a/theme/icons/cseth.tsx b/theme/icons/cseth.tsx
@@ -45,11 +45,11 @@ export const cseth = {
           y2="29"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#A57BFF" />
-          <stop offset="0.239583" stop-color="#FF66D4" />
-          <stop offset="0.5" stop-color="#FF5B78" />
-          <stop offset="0.739583" stop-color="#FF9E57" />
-          <stop offset="1" stop-color="#FFD595" />
+          <stop stopColor="#A57BFF" />
+          <stop offset="0.239583" stopColor="#FF66D4" />
+          <stop offset="0.5" stopColor="#FF5B78" />
+          <stop offset="0.739583" stopColor="#FF9E57" />
+          <stop offset="1" stopColor="#FFD595" />
         </linearGradient>
         <clipPath id="clip0_14480_4437">
           <rect width="26" height="26" fill="white" transform="translate(3 3)" />

diff --git a/theme/icons/mkr_circle_color.tsx b/theme/icons/mkr_circle_color.tsx
@@ -20,8 +20,8 @@ export const mkr_circle_color = {
           y2="29"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#2DC1B1" />
-          <stop offset="1" stop-color="#139D8D" />
+          <stop stopColor="#2DC1B1" />
+          <stop offset="1" stopColor="#139D8D" />
         </linearGradient>
       </defs>
     </>

diff --git a/theme/icons/mpeth.tsx b/theme/icons/mpeth.tsx
@@ -21,8 +21,8 @@ export const mpeth = {
           y2="24.5"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#6271AD" />
-          <stop offset="1" stop-color="#8A92B2" />
+          <stop stopColor="#6271AD" />
+          <stop offset="1" stopColor="#8A92B2" />
         </linearGradient>
       </defs>
     </>

diff --git a/theme/icons/op_circle.tsx b/theme/icons/op_circle.tsx
@@ -18,8 +18,8 @@ export const op_circle = {
           y2="16"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#FF0420" />
-          <stop offset="1" stop-color="#FF6C7D" />
+          <stop stopColor="#FF0420" />
+          <stop offset="1" stopColor="#FF6C7D" />
         </linearGradient>
       </defs>
     </>

diff --git a/theme/icons/styeth_circle_color.tsx b/theme/icons/styeth_circle_color.tsx
@@ -20,8 +20,8 @@ export const styeth_circle_color = {
           y2="6"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#5816F9" />
-          <stop offset="1" stop-color="#7840FF" />
+          <stop stopColor="#5816F9" />
+          <stop offset="1" stopColor="#7840FF" />
         </linearGradient>
       </defs>
     </>

diff --git a/theme/icons/susd_circle.tsx b/theme/icons/susd_circle.tsx
@@ -46,8 +46,8 @@ export const susd_circle = {
           y2="41.0151"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#08021E" />
-          <stop offset="1" stop-color="#1F0777" />
+          <stop stopColor="#08021E" />
+          <stop offset="1" stopColor="#1F0777" />
         </linearGradient>
         <clipPath id="clip0_14079_6971">
           <rect width="26" height="26" fill="white" transform="translate(3 3)" />

diff --git a/theme/icons/unieth.tsx b/theme/icons/unieth.tsx
@@ -42,8 +42,8 @@ export const unieth = {
           y2="24.5"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#1A2435" />
-          <stop offset="1" stop-color="#434B59" />
+          <stop stopColor="#1A2435" />
+          <stop offset="1" stopColor="#434B59" />
         </linearGradient>
       </defs>
     </>