add wallet feedback (#714)

Co-authored-by: Felicio <felicio@users.noreply.github.com>

.changeset/grumpy-jars-boil.md

@@ -0,0 +1,6 @@
+---
+'@status-im/wallet': patch
+'wallet': patch
+---
+
+add wallet feedback

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,48 @@
+---
+name: Bug Report
+about: Create a bug report to help us improve
+title: '[BUG] '
+labels: ['bug']
+assignees: ''
+---
+
+## Bug Description
+
+A clear and concise description of what the bug is.
+
+## Steps to Reproduce
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## Expected Behavior
+
+A clear and concise description of what you expected to happen.
+
+## Actual Behavior
+
+A clear and concise description of what actually happened.
+
+## Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+## More information
+
+- App: [e.g. Wallet, Status website]
+- Browser: [e.g. Chrome 118, Firefox 119, Safari 17]
+
+## Additional Context
+
+Add any other context about the problem here. Include:
+
+- Error messages or logs
+- Network conditions
+- Relevant configuration
+- Related issues
+
+## Possible Solution
+
+If you have suggestions on how to fix the bug, please describe them here.

apps/wallet/src/components/splitted-layout.tsx

@@ -149,7 +149,9 @@ const SplittedLayout = (props: Props) => {
         </div>
 
         <div className="relative hidden basis-1/2 flex-col bg-white-100 2xl:flex">
-          <div className="relative z-20">{detail}</div>
+          <div className="relative z-20 flex h-full items-center justify-center">
+            {detail}
+          </div>
 
           <div
             className="absolute z-10 size-full"

apps/wallet/src/routes/__root.tsx

@@ -11,6 +11,7 @@ import {
   // Navigate,
   Outlet,
   redirect,
+  useRouterState,
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
@@ -74,6 +75,9 @@ export const Route = createRootRouteWithContext<{
 })
 
 function RootComponent() {
+  const routerState = useRouterState()
+  const pathname = routerState.location.pathname
+
   return (
     <>
       {/* <div className="min-h-screen bg-neutral-100 text-white-100">
@@ -100,7 +104,13 @@ function RootComponent() {
           {/* <ConnectKitProvider> */}
           <WalletProvider>
             <div className="flex min-h-[56px] items-center px-2">
-              <Navbar />
+              <Navbar
+                hasFeedback={
+                  !['/portfolio/assets', '/portfolio/collectibles'].includes(
+                    pathname?.replace(/\/$/, '') ?? '',
+                  )
+                }
+              />
             </div>
             <div className="px-1">
               <div className="flex-1 flex-col 2md:flex xl:pb-1">

apps/wallet/src/routes/portfolio/assets/index.tsx

@@ -1,4 +1,8 @@
-import { AssetsList, PinExtension } from '@status-im/wallet/components'
+import {
+  AssetsList,
+  FeedbackSection,
+  PinExtension,
+} from '@status-im/wallet/components'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 
 import SplittedLayout from '@/components/splitted-layout'
@@ -57,6 +61,7 @@ function Component() {
             <div className="mt-4 flex flex-col gap-3">Empty state</div>
           )
         }
+        detail={<FeedbackSection />}
         isLoading={isLoading}
       />
       {isPinExtension && (

apps/wallet/src/routes/portfolio/collectibles/index.tsx

@@ -1,5 +1,6 @@
 import {
   CollectiblesGrid as CollectiblesList,
+  FeedbackSection,
   PinExtension,
 } from '@status-im/wallet/components'
 import { createFileRoute } from '@tanstack/react-router'
@@ -66,6 +67,7 @@ function Component() {
             hasNextPage={hasNextPage}
           />
         }
+        detail={<FeedbackSection />}
         isLoading={isLoading}
       />
       {isPinExtension && (

packages/wallet/src/components/feedback/dropdown-icon.tsx

@@ -0,0 +1,17 @@
+const DropdownIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none">
+      <g stroke="#A1ABBD" clip-path="url(#a)">
+        <circle cx="6" cy="6" r="5" stroke-width="1.2" />
+        <path stroke-width="1.1" d="M3.5 5 6 7.5 8.5 5" />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h12v12H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export { DropdownIcon }

packages/wallet/src/components/feedback/index.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { useState } from 'react'
+
+import { DropdownMenu } from '@status-im/components'
+import { ExternalIcon } from '@status-im/icons/20'
+import { Link } from 'react-aria-components'
+
+import { DropdownIcon } from './dropdown-icon'
+
+const FEEDBACK_LINKS = [
+  {
+    label: 'Message us',
+    href: 'https://status.app', // TODO: change to actual form link
+  },
+  {
+    label: 'Submit bug',
+    href: 'https://github.com/status-im/status-web/issues/new?template=bug_report.md',
+  },
+  {
+    label: 'Request feature',
+    href: 'https://discuss.status.app/c/features/51',
+  },
+]
+
+const FeedbackPopover = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <DropdownMenu.Root onOpenChange={setIsOpen} open={isOpen}>
+      <button className="flex cursor-pointer select-none items-center rounded-10 border border-neutral-70 hover:border-neutral-60">
+        <div className="flex items-center gap-1 px-2 py-[5px] text-15 font-500 text-white-100 transition">
+          Share feedback
+          <DropdownIcon />
+        </div>
+      </button>
+
+      <DropdownMenu.Content
+        collisionPadding={12}
+        sideOffset={24}
+        className="w-[256px]"
+      >
+        {FEEDBACK_LINKS.map(({ label, href }) => (
+          <DropdownMenu.Item
+            key={label}
+            label={label}
+            external
+            onSelect={() => {
+              window.open(href, '_blank')
+            }}
+          />
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
+
+const FeedbackSection = () => {
+  return (
+    <div className="flex size-full items-center justify-center">
+      <div className="flex w-[256px] flex-col gap-4 rounded-16 border border-neutral-10 bg-neutral-2.5 p-4">
+        <span className="text-19 font-600 text-neutral-100">
+          We're building with you.
+        </span>
+        <div className="flex flex-col">
+          {FEEDBACK_LINKS.map(({ label, href }) => (
+            <Link
+              key={label}
+              href={href}
+              target="_blank"
+              className="flex justify-between px-2 py-[5px] text-15 font-500 text-neutral-100 hover:text-neutral-50"
+            >
+              {label} <ExternalIcon />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { FeedbackPopover, FeedbackSection }

packages/wallet/src/components/index.tsx

@@ -13,6 +13,7 @@ export {
 export { CurrencyAmount } from './currency-amount'
 export { DeleteAddressAlert } from './delete-address-alert'
 export { DropdownSort } from './dropdown-sort'
+export { FeedbackPopover, FeedbackSection } from './feedback'
 export { Image, type ImageProps } from './image'
 export {
   ImportRecoveryPhraseForm,

packages/wallet/src/components/nav-bar/index.tsx

@@ -1,13 +1,17 @@
 'use client'
 
-// import { ConnectButton } from '../connect-button'
+import { FeedbackPopover } from '../feedback'
 import { Logo } from '../logo'
 
-const Navbar = () => {
+type Props = {
+  hasFeedback?: boolean
+}
+
+const Navbar = (props: Props) => {
   return (
     <div
       data-theme="dark"
-      className="sticky top-0 z-20 flex h-14 flex-1 items-center justify-between bg-neutral-100"
+      className="sticky top-0 z-20 flex h-14 flex-1 items-center justify-between bg-neutral-100 pr-1"
     >
       <div className="flex items-center pl-3 lg:pl-6">
         <a
@@ -17,6 +21,7 @@ const Navbar = () => {
           <Logo isTopbarDesktop />
         </a>
       </div>
+      {props.hasFeedback && <FeedbackPopover />}
     </div>
   )
 }