Improve valora deeplinking on iOS (#72)

- Improve valora deeplinking on iOS
- Update axlUSDC logo
- Allow wallet images from walletconnect.com
- Fix z-index values for header dropdown

Author: jmrossy

next.config.js

@@ -24,7 +24,7 @@ const securityHeaders = [
     key: 'Content-Security-Policy',
     value: `default-src 'self'; script-src 'self'${
       isDev ? " 'unsafe-eval'" : ''
-    }; connect-src 'self' https://*.celo.org https://*.celo-testnet.org https://*.walletconnect.com wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://raw.githubusercontent.com; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.walletconnect.com`,
+    }; connect-src 'self' https://*.celo.org https://*.celo-testnet.org https://*.walletconnect.com wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://raw.githubusercontent.com; img-src 'self' data: https://raw.githubusercontent.com https://*.walletconnect.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.walletconnect.com`,
   },
 ]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mento-protocol/mento-web",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A simple DApp for Celo Mento exchanges",
   "keywords": [
     "Celo",

src/components/input/Select.tsx

@@ -23,7 +23,7 @@ export function Select({ value, optionValues, onChange, button, option, buttonLa
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-40 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Listbox.Options className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             {optionValues.map((optionValue) => (
               <Listbox.Option key={optionValue} value={optionValue}>
                 {({ selected }) => option(optionValue, selected)}

src/components/nav/ConnectButton.tsx

@@ -36,7 +36,7 @@ export function ConnectButton() {
   }
 
   return (
-    <div className="flex justify-end mb-1 relative opacity-90">
+    <div className="relative flex justify-end mb-1 opacity-90">
       {address && isConnected ? (
         <DropdownModal
           buttonContent={

src/components/nav/Footer.tsx

@@ -13,7 +13,7 @@ import { isStale } from 'src/utils/time'
 
 export function Footer() {
   return (
-    <footer className="w-screen py-4 px-7">
+    <footer className="relative z-10 w-screen py-4 px-7">
       <div className="flex justify-between items-center">
         <div className="flex items-center opacity-90">
           <FooterIconLink to={links.twitter} imgSrc={Twitter} alt="Twitter" />

src/components/nav/Header.tsx

@@ -7,7 +7,7 @@ import Logo from 'src/images/logos/mento-logo-black.svg'
 
 export function Header({ pathName }: { pathName: string }) {
   return (
-    <header className="w-screen pt-4 pb-5 px-3 sm:pl-5 sm:pr-6">
+    <header className="relative z-10 w-screen pt-4 pb-5 px-3 sm:pl-5 sm:pr-6">
       <div className="flex items-center justify-between">
         <Link href="/" className="flex items-center sm:hidden">
           <Image src={Glyph} alt="" quality={100} width={40} />

src/config/celoWallets.tsx

@@ -48,7 +48,7 @@ export const Valora = ({
           return isAndroid()
             ? uri
             : // ideally this would use the WalletConnect registry, but this will do for now
-              `https://valoraapp.com/wc?uri=${encodeURIComponent(uri)}`
+              `celo://wallet/wc?uri=${encodeURIComponent(uri)}`
         },
       },
       qrCode: {

src/images/tokens/USDC.svg

@@ -16,7 +16,7 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
       <div className="flex flex-col h-full min-h-screen w-full min-w-screen bg-gradient-linear">
         <InfoBanner />
         <Header pathName={pathName} />
-        <main className="grow flex items-center justify-center">{children}</main>
+        <main className="relative z-0 grow flex items-center justify-center">{children}</main>
         <Footer />
       </div>
       <PollingWorker />

src/layout/AppLayout.tsx

@@ -32,7 +32,7 @@ export function DropdownMenu({
         leaveTo="transform opacity-0 scale-95"
       >
         <Menu.Items
-          className={`z-50 absolute -right-1.5 mt-3 origin-top-right rounded-md bg-white shadow-md drop-shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none ${menuClasses}`}
+          className={`z-40 absolute -right-1.5 mt-3 origin-top-right rounded-md bg-white shadow-md drop-shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none ${menuClasses}`}
         >
           {menuItems.map((mi, i) => (
             <Menu.Item key={`menu-item-${i}`}>{mi}</Menu.Item>
@@ -74,7 +74,7 @@ export function DropdownModal({
         leaveTo="transform opacity-0 scale-95"
       >
         <Popover.Panel
-          className={`z-50 absolute mt-2 origin-top-right rounded-md bg-white shadow-sm drop-shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none ${modalClasses}`}
+          className={`z-40 absolute mt-2 origin-top-right rounded-md bg-white shadow-sm drop-shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none ${modalClasses}`}
         >
           {({ close }) => modalContent(close)}
         </Popover.Panel>

src/layout/Dropdown.tsx

@@ -13,7 +13,7 @@ export function Modal({
 }: PropsWithChildren<{ isOpen: boolean; title: string; close: () => void; width?: string }>) {
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={close}>
+      <Dialog as="div" className="relative z-50" onClose={close}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"