-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
452 additions
and
157 deletions.
There are no files selected for viewing
Binary file modified
BIN
-8 Bytes
(100%)
...screenshots/simulator/recurring/Recurring limit range/simulator-input-price.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-34 Bytes
(100%)
...enshots/simulator/recurring/Recurring limit range/simulator-results-summary.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-2 Bytes
(100%)
...screenshots/simulator/recurring/Recurring range limit/simulator-input-price.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+0 Bytes
(100%)
e2e/screenshots/strategy/disposable/Disposable buy limit/create/my-strategy.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+0 Bytes
(100%)
e2e/screenshots/strategy/recurring/Recurring limit limit/create/my-strategy.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
.icon::before { | ||
content: ""; | ||
position: absolute; | ||
inset: 0; | ||
border-radius: 50%; | ||
transform-origin: center; | ||
background-color: currentColor; | ||
opacity: 0; | ||
transform: scale(0); | ||
animation: ripple 2s 0.9s cubic-bezier(0.16, 1, 0.3, 1); | ||
pointer-events: none; | ||
} | ||
.icon { | ||
animation: pulse 1.3s cubic-bezier(0.34, 1.56, 0.64, 1); | ||
} | ||
.icon g { | ||
animation: enter 1.3s cubic-bezier(0.34, 1.56, 0.64, 1); | ||
} | ||
.icon line { | ||
animation: scale 1.3s cubic-bezier(0.34, 1.56, 0.64, 1); | ||
} | ||
|
||
@keyframes pulse { | ||
0% { | ||
transform: scale(0.3); | ||
} | ||
50% { | ||
transform: scale(1.2); | ||
} | ||
100% { | ||
transform: scale(1); | ||
} | ||
} | ||
|
||
@keyframes enter { | ||
0%, 30% { | ||
transform: translateX(-100%); | ||
} | ||
100% { | ||
transform: translateX(0); | ||
} | ||
} | ||
|
||
@keyframes scale { | ||
0%, 60% { | ||
transform: scale(0.3); | ||
} | ||
100% { | ||
transform: scale(1); | ||
} | ||
} | ||
|
||
@keyframes ripple { | ||
from { | ||
transform: scale(0); | ||
opacity: 1; | ||
} | ||
to { | ||
transform: scale(20); | ||
opacity: 0; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import { FC, useId } from 'react'; | ||
import { NotificationActivity } from 'libs/notifications/types'; | ||
import { activityActionName, activityDescription } from './utils'; | ||
import { ReactComponent as IconClose } from 'assets/icons/X.svg'; | ||
import { Link } from '@tanstack/react-router'; | ||
import { cn } from 'utils/helpers'; | ||
import { ActivityAction } from 'libs/queries/extApi/activity'; | ||
import { unix } from 'dayjs'; | ||
import style from './ActivityNotification.module.css'; | ||
|
||
interface Props { | ||
notification: NotificationActivity; | ||
close: () => void; | ||
} | ||
|
||
export const ActivityNotification: FC<Props> = ({ notification, close }) => { | ||
const titleId = useId(); | ||
const { activity } = notification; | ||
|
||
return ( | ||
<article aria-labelledby={titleId} className="flex gap-16"> | ||
<AnimatedActionIcon action={activity.action} /> | ||
<div className="text-14 flex flex-1 flex-col gap-8 overflow-hidden"> | ||
<hgroup> | ||
<h3 className="text-16" id={titleId} data-testid="notif-title"> | ||
{activityActionName[activity.action]} | ||
</h3> | ||
<p className="truncate text-white/60" data-testid="notif-description"> | ||
{activityDescription(activity)} | ||
</p> | ||
</hgroup> | ||
<Link | ||
to="/strategy/$id" | ||
params={{ id: activity.strategy.id }} | ||
className="font-weight-500 flex items-center" | ||
> | ||
View Activity | ||
</Link> | ||
</div> | ||
<div className="flex flex-col items-end justify-between"> | ||
<button | ||
onClick={close} | ||
data-testid="notif-close" | ||
aria-label="Remove notification" | ||
> | ||
<IconClose className="h-14 w-14 text-white/80" /> | ||
</button> | ||
|
||
<p className="text-12 font-weight-500 whitespace-nowrap text-white/60"> | ||
{unix(notification.timestamp).fromNow(true)} | ||
</p> | ||
</div> | ||
</article> | ||
); | ||
}; | ||
|
||
export const AnimatedActionIcon = (props: { action: ActivityAction }) => { | ||
const transform = props.action === 'buy' ? 'rotate(30deg)' : 'rotate(-30deg)'; | ||
return ( | ||
<div | ||
className={cn( | ||
'h-38 w-38 relative grid place-items-center rounded-full', | ||
style.icon, | ||
{ | ||
'bg-buy/20 text-buy': props.action === 'buy', | ||
'bg-sell/20 text-sell': props.action === 'sell', | ||
} | ||
)} | ||
> | ||
<svg width="24" height="24" viewBox="0 0 100 100" style={{ transform }}> | ||
<g> | ||
<line | ||
x1="20" | ||
x2="75" | ||
y1="50" | ||
y2="50" | ||
stroke="currentColor" | ||
stroke-width="8" | ||
stroke-linecap="round" | ||
transform-origin="75 50" | ||
/> | ||
<line | ||
x1="50" | ||
x2="75" | ||
y1="25" | ||
y2="50" | ||
stroke="currentColor" | ||
stroke-width="8" | ||
stroke-linecap="round" | ||
transform-origin="75 50" | ||
/> | ||
<line | ||
x1="50" | ||
x2="75" | ||
y1="75" | ||
y2="50" | ||
stroke="currentColor" | ||
stroke-width="8" | ||
stroke-linecap="round" | ||
transform-origin="75 50" | ||
/> | ||
</g> | ||
</svg> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { useWeb3 } from 'libs/web3'; | ||
import { useActivityQuery } from './useActivityQuery'; | ||
import { useEffect, useState } from 'react'; | ||
import { useNotifications } from 'hooks/useNotifications'; | ||
|
||
export const useActivityNotifications = () => { | ||
const { user } = useWeb3(); | ||
const [previousUser, setPreviousUser] = useState<string | null>(null); | ||
const [previous, setPrevious] = useState<number | null>(null); | ||
const query = useActivityQuery({ ownerId: user }); | ||
const allActivities = query.data || []; | ||
const buyOrSell = allActivities.filter( | ||
(a) => a.action === 'sell' || a.action === 'buy' | ||
); | ||
const { dispatchNotification } = useNotifications(); | ||
|
||
useEffect(() => { | ||
if (query.isLoading) return; | ||
// We need to keep this in the same useEffect to force re-evaluate previous in next render | ||
if (user && user !== previousUser) { | ||
setPreviousUser(user); | ||
setPrevious(null); | ||
return; | ||
} | ||
const length = buyOrSell.length; | ||
if (typeof previous === 'number' && length > previous) { | ||
// Sorted by date desc | ||
for (let i = 0; i < length - previous; i++) { | ||
const activity = buyOrSell[i]; | ||
dispatchNotification('activity', { activity }); | ||
} | ||
} | ||
setPrevious(length); | ||
}, [ | ||
buyOrSell, | ||
dispatchNotification, | ||
previous, | ||
query.isLoading, | ||
previousUser, | ||
user, | ||
]); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.