feat(explorer): add search bar in order view

[tienshaoku]

Summary

Adding a search bar in order view s.t. users don't have to go back to homepage to look up other orders!
I used max-width: 60rem, padding: 1.6rem & styled component for consistency with this repo's convention and compatibility.

• Full-screen view
  
• Mobile view
  
• When order id doesn't exist
  

To Test

1. UI components are responsive in different views

• In any view, the search bar should have paddings on all sides
• In narrower views, the search bar will become shorter but eventually the width stops shortening

2. The search bar can work/search

• Insert diff order ids and hit enter should be directed to diff order views

3. The search bar won't show up when there's already a search bar at Search not found page

• Insert invalid order id to make sure there's no a second search bar

[vercel]

@tienshaoku is attempting to deploy a commit to the cow Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[tienshaoku]

I have read the CLA Document and I hereby sign the CLA

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
explorer-dev	✅ Ready (Inspect)	Visit Preview	Nov 24, 2024 4:37pm

[elena-zh]

Hey @tienshaoku , lots of thanks for your valuable contribution!
The feature works great!

But now I'm thinking that we should have the same field on a user details page: (https://explorer.cow.fi/address/...)

and a TX details page

So a user can run search from any place in the app. WDYT about it? :)

[tienshaoku]

@elena-zh thank you for the catch! I used only the order view page so was totally unaware of those two views 😆
If there're more places to be added, lmk!

1. User view

• full screen
  
• medium screen
  

2. Transaction view

• full screen
  
• medium screen
  

[elena-zh]

Hey @tienshaoku , awesome! Thank you!

I have a tiny nitpick to report: in a mobile view (real device iPhone 13 mini with 17.6.1 OS) the search bar does not have right padding (on every page):

Could you please fix this?

Thanks!

[tienshaoku]

@elena-zh not a problem at all!

It'll still be cut if the width is < ~280 (px i guess?)
So i think it's okay since this value is lower than all mobile options on the browser's developer console.
lmk if this is good! it's been a while since I worked on FE so thank you for the patience 😁

[elena-zh]

@tienshaoku , great job, thank you!

[alfetopito]

Thanks a lot!