diff --git a/packages/proposal-components/src/components/NotificationItem.tsx b/packages/proposal-components/src/components/NotificationItem.tsx
new file mode 100644
index 0000000..f8852d6
--- /dev/null
+++ b/packages/proposal-components/src/components/NotificationItem.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
+import { CloseButton } from '@status-waku-voting/react-components/dist/esm/src/components/misc/Buttons'
+import styled from 'styled-components'
+import { NotificationLink } from './ViewLink'
+
+interface NotificationItemProps {
+ text: string
+ address: string
+}
+
+export function NotificationItem({ address, text }: NotificationItemProps) {
+ const [show, setShow] = useState(true)
+
+ if (show) {
+ return (
+
+
+ {text}
+
+
+ setShow(false)} />
+
+ )
+ }
+ return null
+}
+
+const NotificationBlock = styled.div`
+ display: flex;
+ align-items: center;
+ background: #fff;
+ padding: 16px;
+ width: 252px;
+ border-radius: 16px;
+ filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15));
+ position: absolute;
+ top: 120px;
+ right: 24px;
+ z-index: 9999;
+
+ @media (max-width: 768px) {
+ right: 32px;
+ }
+
+ @media (max-width: 600px) {
+ top: 74px;
+ right: 16px;
+ }
+`
+
+const NotificationContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+`
+const NotificationText = styled.p`
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.1px;
+ margin: 0;
+ margin-bottom: 16px;
+`
diff --git a/packages/proposal-components/src/components/Proposal.tsx b/packages/proposal-components/src/components/Proposal.tsx
index 0639af3..0305e60 100644
--- a/packages/proposal-components/src/components/Proposal.tsx
+++ b/packages/proposal-components/src/components/Proposal.tsx
@@ -4,6 +4,7 @@ import { ProposalHeader } from './ProposalHeader'
import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
import { ProposalList } from './ProposalList'
import { VotingEmpty } from './VotingEmpty'
+import { NotificationItem } from './NotificationItem'
export function Proposal() {
return (
@@ -12,6 +13,7 @@ export function Proposal() {
{/* */}
+
)
}
diff --git a/packages/proposal-components/src/components/ViewLink.tsx b/packages/proposal-components/src/components/ViewLink.tsx
index 49d83eb..e7a65b8 100644
--- a/packages/proposal-components/src/components/ViewLink.tsx
+++ b/packages/proposal-components/src/components/ViewLink.tsx
@@ -38,3 +38,15 @@ export const Link = styled.a`
background-size: contain;
}
`
+interface NotificationLinkProps {
+ address: string
+}
+
+export function NotificationLink({ address }: NotificationLinkProps) {
+ return View on Etherscan
+}
+
+const LinkNotification = styled(Link)`
+ margin-right: 32px;
+ font-size: 12px;
+`
diff --git a/packages/proposal-components/src/components/VotePropose.tsx b/packages/proposal-components/src/components/VotePropose.tsx
index 1f88351..6cd871f 100644
--- a/packages/proposal-components/src/components/VotePropose.tsx
+++ b/packages/proposal-components/src/components/VotePropose.tsx
@@ -13,6 +13,7 @@ export interface VoteProposingProps {
export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) {
const [displayAmount, setDisplayAmount] = useState(addCommas(proposingAmount) + ' ABC')
const disabled = availableAmount === 0
+
let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2)
if (availableAmount < 100) {
diff --git a/packages/react-components/src/components/misc/Buttons.tsx b/packages/react-components/src/components/misc/Buttons.tsx
index 9cfc2cf..e752b17 100644
--- a/packages/react-components/src/components/misc/Buttons.tsx
+++ b/packages/react-components/src/components/misc/Buttons.tsx
@@ -166,4 +166,5 @@ export const CloseButton = styled.button`
background-image: url(${({ theme }) => (theme === orangeTheme ? closeButton : blueCloseButton)});
background-color: transparent;
border: none;
+ flex-shrink: 0;
`