-
+
{isActive ? (
error ? (
-
Try again?
+
{getStatusIcon(connector)}
) : (
{
@@ -83,11 +83,11 @@ export function ConnectWithSelect({
}
}}
>
- {connector instanceof MetaMask || connector instanceof GnosisSafe ? '' : <>{'Disconnect'}}
+
{getStatusIcon(connector)}
)
) : (
-
{error ? 'Try again?' : getStatusIcon(connector)}
+
{getStatusIcon(connector)}
)}
)
diff --git a/src/components/ConnectedWalletIcon.tsx b/src/components/ConnectedWalletIcon.tsx
index b31a958a..97e0f227 100644
--- a/src/components/ConnectedWalletIcon.tsx
+++ b/src/components/ConnectedWalletIcon.tsx
@@ -5,6 +5,8 @@ import Identicon from './Icons/Identicon'
import { MetaMask } from '@web3-react/metamask'
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
+import walletConnectIcon from '../assets/connectors/walletConnectIcon.svg'
+import coinbaseWalletIcon from '../assets/connectors/coinbaseWalletIcon.svg'
interface Props {
size?: number
@@ -23,19 +25,13 @@ const ConnectedWalletIcon = ({ size }: Props) => {
} else if (connector instanceof WalletConnectV2) {
return (
- .default})
+ 
)
} else if (connector instanceof CoinbaseWallet) {
return (
- .default})
+ 
)
}
@@ -46,7 +42,7 @@ const ConnectedWalletIcon = ({ size }: Props) => {
export default ConnectedWalletIcon
-export const IconWrapper = styled.div<{ size?: number }>`
+export const IconWrapper = styled.div<{ size?: number; children?: React.ReactNode; className?: string }>`
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/components/ConnectedWalletInfo.tsx b/src/components/ConnectedWalletInfo.tsx
index 9f12c38d..000503ef 100644
--- a/src/components/ConnectedWalletInfo.tsx
+++ b/src/components/ConnectedWalletInfo.tsx
@@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
-import { newTransactionsFirst, returnWalletAddress, getEtherscanLink, SUPPORTED_WALLETS } from '~/utils'
+import { newTransactionsFirst, getEtherscanLink, SUPPORTED_WALLETS } from '~/utils'
import { useStoreActions, useStoreState } from '~/store'
import { isTransactionRecent } from '~/hooks'
import ExpandIcon from './Icons/ExpandIcon'
@@ -13,19 +13,22 @@ import CopyIcon from './Icons/CopyIcon'
import Button from './Button'
import ConnectedWalletIcon from '~/components/ConnectedWalletIcon'
import { MetaMask } from '@web3-react/metamask'
+import { Info } from 'react-feather'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+import { useAddress } from '~/hooks/useAddress'
+import { GnosisSafe } from '@web3-react/gnosis-safe'
const ConnectedWalletInfo = () => {
const { t } = useTranslation()
-
const { isActive, account, connector, chainId } = useWeb3React()
-
const [copied, setCopied] = useState(false)
-
const { transactionsModel: transactionsState } = useStoreState((state) => state)
const { popupsModel: popupsActions, transactionsModel: transactionsActions } = useStoreActions((state) => state)
+ const address = useAddress(account)
const handleChange = () => {
popupsActions.setIsConnectedWalletModalOpen(false)
+ popupsActions.setChangeWalletActive(true)
popupsActions.setIsConnectorsWalletOpen(true)
}
@@ -68,15 +71,34 @@ const ConnectedWalletInfo = () => {
return (
<>
-
- {t('connected_with')} {connector ? formatConnectorName() : 'N/A'}
-
-
+
+
+
+
+ {account && isActive ? address : 'N/A'}
+
+ {connector ? formatConnectorName() : 'N/A'}
+
-
-
- {account && isActive ? returnWalletAddress(account) : 'N/A'}
-
+
+
+ {(connector instanceof MetaMask || connector instanceof GnosisSafe) && (
+ <>
+
+
+
+ )}
+
+
{account && isActive ? (
{copied ? (
@@ -96,7 +118,7 @@ const ConnectedWalletInfo = () => {
)}
{chainId && account ? (
- {t('view_etherscan')}
+ {t('view_arbiscan')}
) : null}
@@ -104,14 +126,14 @@ const ConnectedWalletInfo = () => {
{!!pendingTransactions.length || !!confirmedTransactions.length ? (
<>
- {t('recent_transactions')}
+ {t('transaction_msg')}
{renderTransactions(pendingTransactions)}
@@ -127,32 +149,28 @@ const ConnectedWalletInfo = () => {
export default ConnectedWalletInfo
-const BtnContainer = styled.div`
- displat: flex;
- justify-content: center;
- margin-top: 24px;
- button {
- min-width: 100px;
- padding: 4px 12px;
- }
- &.top-up {
- right: auto;
- left: 50px;
- top: 50px;
- }
- ${({ theme }) => theme.mediaWidth.upToSmall`
- position: static;
- margin-bottom:20px;
- &.top-up {
- display:none;
- }
- `}
+const LeftContainer = styled.div`
+ display: flex;
+ align-items: center;
`
-const BtnInner = styled.div`
+const RightContainer = styled.div`
display: flex;
align-items: center;
- gap: 5px;
+ gap: 4px;
+`
+
+const Row = styled.div`
+ align-items: center;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+`
+
+const BtnContainer = styled.div`
+ button {
+ border: #e2f1ff 1px solid;
+ }
`
const Connection = styled.div`
@@ -164,7 +182,7 @@ const Connection = styled.div`
button {
width: auto;
min-width: auto;
- font-size: ${(props) => props.theme.font.extraSmall};
+ font-size: ${(props) => props.theme.font.xSmall};
padding-top: 2px;
padding-bottom: 2px;
}
@@ -174,87 +192,60 @@ const Address = styled.div`
display: flex;
margin: 20px 0;
align-items: center;
+ line-height: 20px;
color: ${(props) => props.theme.colors.neutral};
img {
width: 20px;
margin-right: 10px;
}
- font-size: ${(props) => props.theme.font.large};
+ font-size: ${(props) => props.theme.font.medium};
`
const WalletData = styled.div`
display: flex;
align-items: center;
- align-items: center;
`
-const CopyBtn = styled.div`
- color: ${(props) => props.theme.colors.secondary};
- font-size: ${(props) => props.theme.font.small};
- transition: all 0.3s ease;
+const CopyBtn = styled.button`
+ background-color: transparent;
+ color: #ffffff;
+ font-size: ${(props) => props.theme.font.xxSmall};
cursor: pointer;
display: flex;
align-items: center;
- svg {
- color: ${(props) => props.theme.colors.secondary};
- width: 15px;
- height: 15px;
- margin-right: 5px;
- }
- &:hover {
- text-decoration: underline;
- color: ${(props) => props.theme.colors.customSecondary};
- svg {
- color: ${(props) => props.theme.colors.customSecondary};
- }
- }
+ margin-right: 20px;
+ transition: all 0.3s ease;
+ gap: 4px;
- &.greenish {
- background: ${(props) => props.theme.colors.gradient};
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- color: ${(props) => props.theme.colors.inputBorderColor};
+ &:hover {
+ color: #b3ceff;
}
-
- margin-right: 20px;
`
const LinkBtn = styled.a`
- color: ${(props) => props.theme.colors.secondary};
- font-size: ${(props) => props.theme.font.small};
- transition: all 0.3s ease;
+ color: #ffffff;
+ font-size: ${(props) => props.theme.font.xxSmall};
+ transition: color 0.3s ease;
display: flex;
align-items: center;
- svg {
- color: ${(props) => props.theme.colors.secondary};
- width: 15px;
- height: 15px;
- margin-right: 5px;
- }
+ gap: 4px;
&:hover {
- text-decoration: underline;
- color: ${(props) => props.theme.colors.customSecondary};
- svg {
- color: ${(props) => props.theme.colors.customSecondary};
- }
+ color: #b3ceff;
}
`
const DataContainer = styled.div`
- border-radius: 20px;
- padding: 15px;
- border: 1px solid ${(props) => props.theme.colors.border};
+ border-radius: 4px;
+ padding: 0 0 15px 0;
`
const TransactionsContainer = styled.div`
- background-color: ${(props) => props.theme.colors.background};
padding: 20px;
- margin: 20px -20px -20px -20px;
+ color: white;
+ margin: 0px -20px -20px -20px;
border-radius: 0 0 25px 25px;
- font-size: ${(props) => props.theme.font.small};
- color: ${(props) => props.theme.colors.customSecondary};
+ font-size: ${(props) => props.theme.font.xSmall};
`
const Heading = styled.div`
diff --git a/src/components/CookieBanner.tsx b/src/components/CookieBanner.tsx
index 72fbfb7d..7d12d86a 100644
--- a/src/components/CookieBanner.tsx
+++ b/src/components/CookieBanner.tsx
@@ -3,40 +3,68 @@ import styled from 'styled-components'
const CookieBanner = () => {
return (
-
-
-
- .default})
- This website uses cookies to enhance the user experience. By continuing to browse the site you're
- agreeing to our
-
- use of cookies.
-
-
-
-
+
+
+
+ This website uses cookies to enhance the user experience. By continuing to browse the site
+ you're agreeing to our{' '}
+
+ use of cookies
+
+ .
+
+
+
+
+
+
+ {t(title)}
+ {t(text)}
+
+
+
+ )
+}
+
+export default CreateVaultStep
+
+const ImageContainer = styled.div<{ stepNumber: number }>`
+ margin-right: ${(props) => (props.stepNumber === 0 ? '' : '30px')};
+ max-width: ${(props) => (props.stepNumber === 0 ? '358px' : '319px')};
+
+ @media (max-width: 960px) {
+ margin-right: 0;
+ }
+`
+
+const ContentWrapper = styled.div<{ stepNumber: number }>`
+ display: flex;
+ flex-direction: column;
+ align-items: ${(props) => (props.stepNumber === 0 ? 'center' : 'flex-start')};
+
+ @media (max-width: 960px) {
+ align-items: center;
+ }
+`
+
+const ContentContainer = styled.div<{ stepNumber: number }>`
+ display: flex;
+ flex-direction: ${(props) => (props.stepNumber === 0 ? 'column' : 'row')};
+ justify-content: center;
+ max-width: 100%;
+ align-items: center;
+ padding: 1em;
+ @media (max-width: 960px) {
+ flex-direction: column;
+ }
+`
+
+const Title = styled.h2`
+ font-size: 40px;
+ font-weight: 700;
+ color: #1c293a;
+ margin-bottom: 28px;
+`
+
+const Text = styled.p`
+ font-size: 18px;
+ font-weight: 400;
+ color: #475662;
+ margin-bottom: 28px;
+ line-height: 38px;
+ text-align: start;
+
+ @media (max-width: 960px) {
+ text-align: center;
+ }
+`
diff --git a/src/components/DecimalInput.tsx b/src/components/DecimalInput.tsx
index 4567f155..e9c2bdf4 100644
--- a/src/components/DecimalInput.tsx
+++ b/src/components/DecimalInput.tsx
@@ -16,6 +16,21 @@ interface Props {
data_test_id?: string
}
+export function processInputValue(inputValue: string): string {
+ const decimalRegex = /^-?\d+(\.\d{1,4})?$/
+ let processedValue = inputValue
+ if (decimalRegex.test(inputValue)) {
+ if (inputValue.startsWith('0') && inputValue.charAt(1) !== '.') {
+ processedValue = inputValue.replace(/(\d)(?=(\d))/, '$1.')
+ } else if (inputValue.startsWith('.')) {
+ processedValue = '0' + inputValue
+ } else if (inputValue.length === 6 && Number(inputValue) === 0) {
+ processedValue = ''
+ }
+ }
+ return processedValue
+}
+
const DecimalInput = ({
label,
placeholder,
@@ -35,21 +50,9 @@ const DecimalInput = ({
const handleChange = (e: ChangeEvent) => {
const val = e.target.value
- if (/^-?\d*[.,]?\d*$/.test(val) && /^\d*(\.\d{0,4})?$/.test(val)) {
- val.includes('.') ? setLength(17) : setLength(16)
- if (val.startsWith('0') && val.charAt(1) !== '.') {
- const returnedVal = val.replace(/(\d)(?=(\d))/, '$1.')
- onChange(returnedVal)
- } else if (val.startsWith('.')) {
- onChange('0' + val)
- } else if (val.replace(/[^.]/g, '').length > 1) {
- onChange(value)
- } else if (val.length === 6 && Number(val) === 0) {
- onChange('')
- } else {
- onChange(val)
- }
- }
+ const processedValue = processInputValue(val)
+ setLength(val.includes('.') ? 17 : 16)
+ onChange(processedValue)
}
return (
@@ -82,7 +85,6 @@ const Container = styled.div``
const Label = styled.div`
line-height: 21px;
- color: ${(props) => props.theme.colors.secondary};
font-size: ${(props) => props.theme.font.small};
letter-spacing: -0.09px;
margin-bottom: 4px;
@@ -112,10 +114,9 @@ const CustomInput = styled.input`
border: none;
border-radius: 0;
padding: 20px;
- background: ${(props) => props.theme.colors.background};
- color: ${(props) => props.theme.colors.primary};
line-height: 24px;
outline: none;
+ font-weight: 600;
&:disabled {
cursor: not-allowed;
@@ -129,7 +130,7 @@ const MaxBtn = styled.div`
padding: 6px;
font-weight: 600;
color: ${(props) => props.theme.colors.neutral};
- font-size: ${(props) => props.theme.font.extraSmall};
+ font-size: ${(props) => props.theme.font.xSmall};
border-radius: ${(props) => props.theme.global.borderRadius};
margin-right: 20px;
&:hover {
diff --git a/src/components/DollarValueInner.tsx b/src/components/DollarValueInner.tsx
new file mode 100644
index 00000000..6f4968b4
--- /dev/null
+++ b/src/components/DollarValueInner.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import Loader from './Loader'
+import TokenIcon from './TokenIcon'
+import ArrowDown from './Icons/ArrowDown'
+
+const DollarValueInner = ({ value, popup }: { value: string; popup: boolean }) => {
+ return (
+
+
+ {value ? {value} : }
+
+
+ )
+}
+
+const Container = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ white-space: nowrap;
+ gap: 8px;
+`
+
+export default DollarValueInner
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index bea8face..e671bdd0 100755
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -28,7 +28,7 @@ interface Props {
dropSelection?: boolean
}
const Dropdown = (props: Props) => {
- const wrapperRef = useRef(null)
+ const wrapperRef = useRef(null)
const {
itemSelected,
items,
@@ -59,9 +59,9 @@ const Dropdown = (props: Props) => {
}
}
- const handleClickOutside = (event: any) => {
- const wrapper: any = wrapperRef.current
- if (!wrapper.contains(event.target)) {
+ const handleClickOutside = (event: MouseEvent) => {
+ const wrapper = wrapperRef.current
+ if (wrapper && !wrapper.contains(event.target as Node)) {
setTimeout(() => {
setIsOpen(false)
}, 10)
@@ -73,7 +73,7 @@ const Dropdown = (props: Props) => {
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
- })
+ }, [])
useEffect(() => {
setSelectedItem(itemSelected)
@@ -85,8 +85,8 @@ const Dropdown = (props: Props) => {
setIsOpen(!isOpen)}
>
@@ -114,7 +114,7 @@ const Dropdown = (props: Props) => {
)}
- {items.length > 0 ? : null}
+ {items.length > 0 ? : null}
{items.length > 0 ? (
props.theme.colors.border};
+ border: 2px solid ${(props) => props.theme.colors.primary};
box-shadow: none;
background: ${(props) => props.theme.colors.placeholder};
- color: ${(props) => props.theme.colors.primary};
- border-radius: 10px;
+ color: ${(props) => props.theme.colors.accent};
+ border-radius: 4px;
+ font-weight: 700;
+
outline: none;
text-align: left;
cursor: pointer;
width: 100%;
display: flex;
+ align-items: center;
+ justify-content: space-between;
+
.text {
display: inline-block;
vertical-align: middle;
}
- svg {
- position: absolute;
- top: 36%;
- right: 20px;
- }
`
const DropdownMenu = styled.div`
@@ -199,7 +199,7 @@ const DropdownMenu = styled.div`
left: 0;
border-radius: ${(props) => props.theme.global.borderRadius};
background: ${(props) => props.theme.colors.background};
- border: 1px solid ${(props) => props.theme.colors.border};
+ border: 2px solid ${(props) => props.theme.colors.border};
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
text-align: left;
z-index: 5;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 82272b97..830ccf69 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,31 +1,16 @@
import React from 'react'
import styled from 'styled-components'
import Logo from '../assets/od-full-logo-grey.svg'
-import { useStoreActions } from '~/store'
-import { Link as RouterLink } from 'react-router-dom'
-import FooterBackgroundImage from '~/assets/footer-bg-art.svg'
const Footer: React.FC = () => {
- const { popupsModel: popupsActions } = useStoreActions((state) => state)
-
- const handleLinkClick = async (e: React.MouseEvent, disable = false, externalLink = '') => {
- if (disable) {
- e.preventDefault()
- }
- popupsActions.setShowSideMenu(false)
- if (externalLink) {
- window.open(externalLink, '_blank')
- e.preventDefault()
- }
- }
return (
-
-
+
+
- 
+
@@ -33,7 +18,7 @@ const Footer: React.FC = () => {
-
+
@@ -47,28 +32,19 @@ const Footer: React.FC = () => {
-
- handleLinkClick(e, false)}
- className={window.location.pathname.startsWith('/vaults') ? 'activeLink' : ''}
- >
- App
-
- handleLinkClick(e, false)}
- className={window.location.pathname.startsWith('/auctions') ? 'activeLink' : ''}
- >
- Auctions
-
- handleLinkClick(e, false)}
- className={window.location.pathname.startsWith('/stats') ? 'activeLink' : ''}
- >
- Stats
-
+
+
+ Litepaper
+
+
+ Blog
+
+
+ Privacy Policy
+
+
+ Terms of Service
+
@@ -81,25 +57,15 @@ const Footer: React.FC = () => {
Telegram
+
+ Farcaster
+
DeBank
-
-
-
- Privacy Policy
-
-
- Terms of Service
-
-
-
-
- 
-
)
}
@@ -107,65 +73,61 @@ const Footer: React.FC = () => {
export default Footer
const Header = styled.div`
- font-size: 16px;
- font-weight: bold;
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 600;
margin-bottom: 5px;
- color: #58a6ff;
+ color: white;
`
const FooterAndImageContainer = styled.div`
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
+ justify-content: start;
+ align-items: start;
position: relative;
`
-const FooterImage = styled.div`
- display: flex;
- width: 100%;
- z-index: -1;
- img {
- width: 100%;
- }
-`
-
const FooterContainer = styled.div`
display: flex;
- padding-top: 80px;
- bottom: 170px;
+ padding-top: 60px;
+ padding-bottom: 60px;
+ padding-left: 60px;
+ padding-right: 60px;
+ padding: 60px;
width: 100%;
flex-direction: row;
- justify-content: space-around;
+ background: linear-gradient(to bottom, #1a74ec, #6396ff);
color: ${(props) => props.theme.colors.blueish};
+ margin-top: 80px;
@media (max-width: 767px) {
- bottom: 117px;
flex-direction: column;
- justify-content: center;
+ justify-content: start;
+ padding-left: 10px;
+ padding-right: 10px;
}
`
const Row = styled.div`
display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
width: 100%;
+ justify-content: space-between;
+
+ &.logoContainerAndText {
+ display: flex;
+ flex-direction: column;
- &.logoRow,
- &.privacyRow {
- font-size: 12px;
@media (max-width: 767px) {
- justify-content: space-between;
- font-size: 12px;
+ margin-bottom: 20px;
}
}
- &.linksRow {
+ &.linksContainer {
+ justify-content: flex-end;
+
@media (max-width: 767px) {
justify-content: space-between;
- font-size: 16px;
- margin: 24px 0;
}
}
`
@@ -174,8 +136,15 @@ const Column = styled.div`
display: flex;
flex-direction: column;
flex-wrap: wrap;
- padding-left: 10px;
- padding-right: 10px;
+ padding-left: 20px;
+ padding-right: 20px;
+
+ &.logoRow {
+ @media (max-width: 767px) {
+ width: 100%;
+ }
+ gap: 10.78px;
+ }
@media (max-width: 767px) {
padding-left: 20px;
@@ -184,6 +153,7 @@ const Column = styled.div`
`
const LogoContainer = styled.div`
+ display: flex;
a {
color: inherit;
text-decoration: none;
@@ -196,36 +166,12 @@ const LogoContainer = styled.div`
}
`
-const SmallerLink = styled.a`
- cursor: pointer;
- color: #00587e;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
-`
-
-const InnerLink = styled(RouterLink)`
- cursor: pointer;
- color: inherit;
- text-decoration: none;
- margin-bottom: 5px;
-
- &:hover {
- text-decoration: underline;
- }
-
- @media (max-width: 767px) {
- margin: 5px 0;
- }
-`
-
const SmallText = styled.div`
- font-size: 12px;
- line-height: 21px;
+ font-size: 16px;
+ line-height: 24px;
max-width: 300px;
- color: ${(props) => props.theme.colors.secondary};
+ color: background;
+ font-weight: 400;
button {
img {
display: none;
@@ -235,9 +181,12 @@ const SmallText = styled.div`
const Link = styled.a`
cursor: pointer;
- color: inherit;
+ color: white;
text-decoration: none;
- margin-bottom: 5px;
+ margin-bottom: 8px;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 20px;
&:hover {
text-decoration: underline;
diff --git a/src/components/Icons/Camelot.tsx b/src/components/Icons/Camelot.tsx
index af9b8042..0814dd5d 100644
--- a/src/components/Icons/Camelot.tsx
+++ b/src/components/Icons/Camelot.tsx
@@ -1,9 +1,6 @@
-import React from 'react'
-
const Camelot = () => {
return (
+https://app.dev.opendollar.com/ Testnet `dev` branch
# ⚡️ Run the app locally
For security and resiliency we publish the app as a self-contained Docker image
1. Install [Docker](https://docs.docker.com/desktop/)
-2. Get the latest [Release](https://github.com/open-dollar/od-app/releases), eg. `1.5.9`
+2. Get the latest [Release](https://github.com/open-dollar/od-app/releases), eg. `1.7.0`
3. Run the start command, replacing `