Skip to content

Commit

Permalink
Merge pull request #2501 from synapsecns/master
Browse files Browse the repository at this point in the history
FE Release 2024-04-15 2
  • Loading branch information
abtestingalpha authored Apr 15, 2024
2 parents be4d973 + 64f3baf commit 4b31c61
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 38 deletions.
9 changes: 9 additions & 0 deletions packages/synapse-interface/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.


## [0.16.7](https://github.com/synapsecns/sanguine/compare/@synapsecns/synapse-interface@0.16.6...@synapsecns/synapse-interface@0.16.7) (2024-04-15)

**Note:** Version bump only for package @synapsecns/synapse-interface





## [0.16.6](https://github.com/synapsecns/sanguine/compare/@synapsecns/synapse-interface@0.16.5...@synapsecns/synapse-interface@0.16.6) (2024-04-13)

**Note:** Version bump only for package @synapsecns/synapse-interface
Expand Down
14 changes: 7 additions & 7 deletions packages/synapse-interface/components/ui/ChainSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function ChainSelector({
action,
}: ChainSelectorTypes) {
const [searchStr, setSearchStr] = useState('')
const [hover, setHover] = useState(false)
const [open, setOpen] = useState(false)

const [currentId, setCurrentId] = useState(null)
const dispatch = useDispatch()
Expand Down Expand Up @@ -55,17 +55,17 @@ export function ChainSelector({
const onClose = () => {
setSearchStr('')
setCurrentId(null)
setHover(false)
setOpen(false)
}

const onSearch = (str: string) => {
setSearchStr(str)
setCurrentId(null)
}

const arrowUp = useKeyPress('ArrowUp', hover)
const arrowDown = useKeyPress('ArrowDown', hover)
const enterPress = useKeyPress('Enter', hover)
const arrowUp = useKeyPress('ArrowUp', open)
const arrowDown = useKeyPress('ArrowDown', open)
const enterPress = useKeyPress('Enter', open)

const arrowDownFunc = () => {
const currentIndex = flatItemList.findIndex((item) => item.id === currentId)
Expand Down Expand Up @@ -102,8 +102,8 @@ export function ChainSelector({
selectedItem={selectedItem}
searchStr={searchStr}
onSearch={onSearch}
hover={hover}
setHover={setHover}
open={open}
setOpen={setOpen}
onClose={onClose}
>
{Object.entries(itemList).map(([key, value]: [string, Chain[]]) => {
Expand Down
39 changes: 16 additions & 23 deletions packages/synapse-interface/components/ui/SelectorWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { useEffect, useRef } from 'react'

import { getHoverStyleForButton } from '@/styles/hover'
import { getActiveStyleForButton, getHoverStyleForButton } from '@/styles/hover'
import { DropDownArrowSvg } from '@/components/icons/DropDownArrowSvg'
import { SlideSearchBox } from '@/components/ui/SlideSearchBox'
import { CloseButton } from '@/components/ui/CloseButton'
import { SearchResults } from '@/components/ui/SearchResults'
import { useKeyPress } from '@/utils/hooks/useKeyPress'
import { joinClassNames } from '@/utils/joinClassNames'
import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'

export const SelectorWrapper = ({
dataTestId,
Expand All @@ -17,11 +18,12 @@ export const SelectorWrapper = ({
searchStr,
onClose,
onSearch,
hover,
setHover,
open,
setOpen,
}) => {
const escPressed = useKeyPress('Escape', hover)
const escPressed = useKeyPress('Escape', open)

const parentRef = useRef(null)
const popoverRef = useRef(null)

useEffect(() => {
Expand All @@ -34,7 +36,7 @@ export const SelectorWrapper = ({
if (y + height * 0.67 > screen) {
ref.style.position = 'fixed'
ref.style.bottom = '4px'
document.addEventListener('scroll', () => setHover(false), {
document.addEventListener('scroll', () => setOpen(false), {
once: true,
})
}
Expand All @@ -55,26 +57,18 @@ export const SelectorWrapper = ({

useEffect(escFunc, [escPressed])

function handleMouseMove(e) {
if (
(Math.round(e.movementX) < 1 && !e.movementY) ||
(Math.round(e.movementY) < 1 && !e.movementX)
)
setHover(true)
}

function handleMouseLeave() {
if (!searchStr) onClose()
}
useCloseOnOutsideClick(parentRef, () => onClose())

const buttonClassName = joinClassNames({
flex: 'flex items-center gap-2',
space: 'px-2 py-1.5 rounded',
border: 'border border-zinc-200 dark:border-transparent',
text: 'leading-tight',
hover: getHoverStyleForButton(selectedItem?.color),
text: `leading-tight ${!label && 'text-lg'}`,
open: `${getHoverStyleForButton(selectedItem?.color)} ${
open && getActiveStyleForButton(selectedItem?.color)
}`,
active: 'active:opacity-80',
custom: label ? 'bg-transparent' : 'bg-white dark:bg-separator text-lg',
custom: label || open ? 'bg-transparent' : 'bg-white dark:bg-separator',
})

// TODO: Unify chainImg/icon properties between Chain and Token types
Expand All @@ -84,12 +78,11 @@ export const SelectorWrapper = ({
const itemName = selectedItem?.['symbol' in selectedItem ? 'symbol' : 'name']

return (
<div className="relative" onMouseLeave={handleMouseLeave}>
<div className="relative" ref={parentRef}>
<button
data-test-id={`${dataTestId}-button`}
className={buttonClassName}
onMouseMove={handleMouseMove}
onClick={() => setHover(true)}
onClick={() => (!open ? setOpen(true) : onClose())}
>
{itemName && (
<img
Expand All @@ -110,7 +103,7 @@ export const SelectorWrapper = ({
</span>
<DropDownArrowSvg />
</button>
{hover && (
{open && (
<div
ref={popoverRef}
data-test-id={`${dataTestId}-overlay`}
Expand Down
14 changes: 7 additions & 7 deletions packages/synapse-interface/components/ui/TokenSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function TokenSelector({
action,
}: TokenSelectorTypes) {
const [searchStr, setSearchStr] = useState('')
const [hover, setHover] = useState(false)
const [open, setOpen] = useState(false)

const [currentRouteSymbol, setCurrentRouteSymbol] = useState(null)
const dispatch = useDispatch()
Expand Down Expand Up @@ -54,17 +54,17 @@ export function TokenSelector({
const onClose = () => {
setSearchStr('')
setCurrentRouteSymbol(null)
setHover(false)
setOpen(false)
}

const onSearch = (str: string) => {
setSearchStr(str)
setCurrentRouteSymbol(null)
}

const arrowUp = useKeyPress('ArrowUp', hover)
const arrowDown = useKeyPress('ArrowDown', hover)
const enterPress = useKeyPress('Enter', hover)
const arrowUp = useKeyPress('ArrowUp', open)
const arrowDown = useKeyPress('ArrowDown', open)
const enterPress = useKeyPress('Enter', open)

const arrowDownFunc = () => {
const currentIndex = flatItemList.findIndex(
Expand Down Expand Up @@ -108,8 +108,8 @@ export function TokenSelector({
searchStr={searchStr}
onSearch={onSearch}
onClose={onClose}
hover={hover}
setHover={setHover}
open={open}
setOpen={setOpen}
>
{Object.entries(itemList).map(([key, value]: [string, Token[]]) => {
return value.length ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/synapse-interface/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@synapsecns/synapse-interface",
"version": "0.16.6",
"version": "0.16.7",
"private": true,
"engines": {
"node": ">=18.17.0"
Expand Down

0 comments on commit 4b31c61

Please sign in to comment.