diff --git a/apps/dapp/assets/icons/Abstain.svg b/apps/dapp/assets/icons/Abstain.svg new file mode 100644 index 000000000..5a2b1f7b6 --- /dev/null +++ b/apps/dapp/assets/icons/Abstain.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/dapp/assets/icons/Discord.svg b/apps/dapp/assets/icons/Discord.svg index adb32924b..ba63a0e3e 100644 --- a/apps/dapp/assets/icons/Discord.svg +++ b/apps/dapp/assets/icons/Discord.svg @@ -1,3 +1,3 @@ - + diff --git a/apps/dapp/assets/icons/MemberCheck.svg b/apps/dapp/assets/icons/MemberCheck.svg index c252010bd..7749247e4 100644 --- a/apps/dapp/assets/icons/MemberCheck.svg +++ b/apps/dapp/assets/icons/MemberCheck.svg @@ -1,4 +1,4 @@ - - + + diff --git a/apps/dapp/assets/icons/arrowUpRight.svg b/apps/dapp/assets/icons/arrowUpRight.svg new file mode 100644 index 000000000..6332fc372 --- /dev/null +++ b/apps/dapp/assets/icons/arrowUpRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/dapp/assets/icons/copy.svg b/apps/dapp/assets/icons/copy.svg new file mode 100644 index 000000000..59e7dc3c1 --- /dev/null +++ b/apps/dapp/assets/icons/copy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/dapp/assets/icons/github.svg b/apps/dapp/assets/icons/github.svg index 6812d33ed..9b2f5fef6 100644 --- a/apps/dapp/assets/icons/github.svg +++ b/apps/dapp/assets/icons/github.svg @@ -1,3 +1,3 @@ - + diff --git a/apps/dapp/atoms/sidebar.ts b/apps/dapp/atoms/sidebar.ts deleted file mode 100644 index b04a8ad06..000000000 --- a/apps/dapp/atoms/sidebar.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { atom, atomFamily } from 'recoil' - -// The expanded state of the sidebar. -export const sidebarExpandedAtom = atom({ - key: 'sidebarExpandedAtom', - default: true, -}) diff --git a/apps/dapp/components/BetaWarning.tsx b/apps/dapp/components/BetaWarning.tsx index 319c776f5..b81e08c90 100644 --- a/apps/dapp/components/BetaWarning.tsx +++ b/apps/dapp/components/BetaWarning.tsx @@ -1,45 +1,46 @@ import { ChevronRightIcon, XIcon } from '@heroicons/react/outline' +import { Button } from '@components' + import SvgMessage from 'components/icons/Message' export function BetaWarningModal({ onAccept }: { onAccept: Function }) { return ( -
-
-

Before you continue...

-

- DAO DAO is in beta, and has not yet been audited. Do not keep - large sums of money in your DAO, and do not use your DAO for - anything mission critical. -

-

- - Give us feedback! - - Bug reports and feature requests are welcome. -

-

- DAO DAO TOOLING IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT - WARRANTIES OF ANY KIND. No developer or entity involved in creating - the DAO DAO UI or smart contracts will be liable for any claims or - damages whatsoever associated with your use, inability to use, or your - interaction with other users of DAO DAO tooling, including any direct, - indirect, incidental, special, exemplary, punitive or consequential - damages, or loss of profits, cryptocurrencies, tokens, or anything - else of value. -

- +
) @@ -47,14 +48,14 @@ export function BetaWarningModal({ onAccept }: { onAccept: Function }) { export function BetaNotice({ onClose }: { onClose: Function }) { return ( -
+

DAO DAO is in
beta!

}) { return ( -
    +
    • diff --git a/apps/dapp/components/ChainEnableModal.tsx b/apps/dapp/components/ChainEnableModal.tsx index 0a7bfc55e..31c01502e 100644 --- a/apps/dapp/components/ChainEnableModal.tsx +++ b/apps/dapp/components/ChainEnableModal.tsx @@ -1,6 +1,7 @@ import { XIcon } from '@heroicons/react/outline' +import { Button } from 'ui/Button' -import { GradientWrapper } from './GradientWrapper' +import { Modal } from './Modal' const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID const CHAIN_NAME = process.env.NEXT_PUBLIC_CHAIN_NAME @@ -12,27 +13,26 @@ function ChainEnableModal({ onAction: () => void }) { return ( - -
      -
      - -

      - Add Chain "{CHAIN_ID}" -

      -

      - This application is running on the {CHAIN_NAME}{' '} - {CHAIN_ID} chain. You will need to approve adding the{' '} - {CHAIN_NAME} {CHAIN_ID} chain to connect your wallet. -

      - -
      + +
      + + +

      Add Chain "{CHAIN_ID}"

      +

      + This application is running on the {CHAIN_NAME}{' '} + {CHAIN_ID} chain. You will need to approve adding the{' '} + {CHAIN_NAME} {CHAIN_ID} chain to connect your wallet. +

      +
      - +       ) } diff --git a/apps/dapp/components/CodeIdSelect.tsx b/apps/dapp/components/CodeIdSelect.tsx index 999e9a38a..478339a32 100644 --- a/apps/dapp/components/CodeIdSelect.tsx +++ b/apps/dapp/components/CodeIdSelect.tsx @@ -20,11 +20,8 @@ export default function CodeIdSelect({
      Contract Version
      -
        + -
      + ) } function DisconnectButton({ onClick }: { onClick: () => void }) { return ( -
      + -
      - ) -} - -function NetworkText({ chainId }: { chainId: string }) { - let networkText - switch (chainId) { - case 'juno-1': - networkText = 'Mainnet' - break - case 'uni-2': - networkText = 'Testnet' - break - default: - networkText = chainId - } - - return ( - {networkText} + ) } @@ -83,6 +64,7 @@ function WalletConnect() { const setInstallWarningVisible = useSetRecoilState(installWarningVisibleAtom) const setChainWarningVisible = useSetRecoilState(chainWarningVisibleAtom) const setChainDisabled = useSetRecoilState(chainDisabledAtom) + const setNoKeplrAccount = useSetRecoilState(noKeplrAccountAtom) const walletAddress = useRecoilValue(walletAddressSelector) const walletName = useRecoilValue(keplrAccountNameSelector) const walletBalance = useRecoilValue(walletChainBalanceSelector) @@ -90,8 +72,7 @@ function WalletConnect() { walletBalance, NATIVE_DECIMALS ) - const chainDenomHuman = - convertDenomToHumanReadableDenom(NATIVE_DENOM).toUpperCase() + const chainDenomHuman = convertDenomToHumanReadableDenom(NATIVE_DENOM) const handleConnect = useCallback(async () => { if (!wallet) { @@ -103,9 +84,14 @@ function WalletConnect() { await (window as any).keplr.enable(CHAIN_ID) setInstallWarningVisible(false) setWallet('keplr') - } catch { - setChainWarningVisible(true) - setChainDisabled(true) + } catch (e: any) { + console.log(e) + if (e.message === "key doesn't exist") { + setNoKeplrAccount(true) + } else { + setChainWarningVisible(true) + setChainDisabled(true) + } } } } else { @@ -116,18 +102,19 @@ function WalletConnect() { wallet, setChainWarningVisible, setInstallWarningVisible, + setNoKeplrAccount, setWallet, ]) if (walletAddress) { return ( -
      +
      -
      +
      {walletName}
      - + {walletBalanceHuman} {chainDenomHuman}
      @@ -136,21 +123,16 @@ function WalletConnect() {
      -
      - -
      ) } - return ( -
      -
      ) diff --git a/apps/dapp/components/ContractCard.tsx b/apps/dapp/components/ContractCard.tsx index efa62fe03..dade90df6 100644 --- a/apps/dapp/components/ContractCard.tsx +++ b/apps/dapp/components/ContractCard.tsx @@ -2,11 +2,7 @@ import { ReactNode } from 'react' import Link from 'next/link' -import { - PlusIcon, - ScaleIcon, - StarIcon as StarIconOutline, -} from '@heroicons/react/outline' +import { PlusIcon, StarIcon as StarIconOutline } from '@heroicons/react/outline' import { StarIcon as StarIconSolid } from '@heroicons/react/solid' import { @@ -32,6 +28,7 @@ function DIYLogo({ proposals, balance, children, + token = true, }: { title: string body: string @@ -40,21 +37,35 @@ function DIYLogo({ proposals?: number balance?: string children: ReactNode + token?: boolean }) { return (       -
      +
      +
      -
      {children}
      -

      +
      + {children} + {token && ( +
      + )} +
      +

      {title}

      -

      +

      {body}

      -
      +
      {balance && (

      @@ -75,7 +86,7 @@ function DIYLogo({

      )} {weight != undefined && ( -

      +

      {imgUrl && CARD_IMAGES_ENABLED ? (

      ) : ( - + )} -
      @@ -155,9 +169,9 @@ export function MysteryContractCard({ href: string }) { return ( - +
      - +
      ) @@ -165,7 +179,8 @@ export function MysteryContractCard({ export function LoadingContractCard() { return ( -
      +
      +
      diff --git a/apps/dapp/components/ContractView.tsx b/apps/dapp/components/ContractView.tsx index 748c56a50..7bddfe40e 100644 --- a/apps/dapp/components/ContractView.tsx +++ b/apps/dapp/components/ContractView.tsx @@ -1,11 +1,15 @@ -import { Children, MouseEventHandler, ReactNode, Suspense } from 'react' +import { Children, MouseEventHandler, ReactNode } from 'react' import Link from 'next/link' import { useRecoilValue, waitForAll } from 'recoil' -import { StarIcon as StarOutline, PlusIcon } from '@heroicons/react/outline' +import { StarIcon as StarOutline } from '@heroicons/react/outline' import { StarIcon as StarSolid } from '@heroicons/react/solid' +import Tooltip from '@reach/tooltip' +import { useThemeContext } from 'ui' + +import { Button } from '@components' import { contractInstantiateTime } from 'selectors/contracts' import { isMemberSelector } from 'selectors/daos' @@ -28,45 +32,49 @@ import { Logo, LogoNoBorder } from './Logo' import { ProposalList } from './ProposalList' export function GradientHero({ children }: { children: ReactNode }) { + const theme = useThemeContext() + const endStop = theme.theme === 'dark' ? '#111213' : '#FFFFFF' + const baseRgb = theme.accentColor + ? theme.accentColor.split('(')[1].split(')')[0] + : '73, 55, 192' return ( -
      - {children} -
      - ) -} - -export function TooltipWrapper({ - tip, - children, -}: { - tip: string - children: ReactNode -}) { - return ( -
      - {children} +
      +
      + {children} +
      ) } export function StarButton({ - className = '', pinned, onPin, }: { - className?: string pinned: boolean onPin: Function }) { + const { accentColor } = useThemeContext() + return (       + + +
      @@ -315,25 +310,22 @@ export function BalanceCard({ loading: boolean }) { return ( -
      -

      {title}

      +
      +

      {title}

      {loading ? (
      ) : ( -
      +
      {amount} ${denom}
      )}
      - +
      ) diff --git a/apps/dapp/components/CopyToClipboard.tsx b/apps/dapp/components/CopyToClipboard.tsx index 7cde4458d..076128145 100644 --- a/apps/dapp/components/CopyToClipboard.tsx +++ b/apps/dapp/components/CopyToClipboard.tsx @@ -1,5 +1,10 @@ -import { PaperClipIcon } from '@heroicons/react/outline' +import { useState } from 'react' + +import { CheckCircleIcon, PaperClipIcon } from '@heroicons/react/outline' import toast from 'react-hot-toast' +import { useThemeContext } from 'ui' + +import SvgCopy from './icons/Copy' function concatAddressImpl( address: string, @@ -26,44 +31,37 @@ export function CopyToClipboard({ value, success = 'Copied to clipboard!', }: CopyToClipboardProps) { + const [copied, setCopied] = useState(false) return ( ) } -export function CopyToClipboardSmall({ - value, - success = 'Copied to clipboard!', -}: CopyToClipboardProps) { - return ( - - ) -} - export function CopyToClipboardAccent({ value, success = 'Copied to clipboard!', }: CopyToClipboardProps) { + const { accentColor } = useThemeContext() + return (
      diff --git a/apps/dapp/components/Execute.tsx b/apps/dapp/components/Execute.tsx new file mode 100644 index 000000000..997477cf5 --- /dev/null +++ b/apps/dapp/components/Execute.tsx @@ -0,0 +1,103 @@ +import { useState } from 'react' +import { FC } from 'react' + +import { Button } from 'ui' + +import SvgAirplane from './icons/Airplane' + +export interface ExecuteProps { + onExecute: () => void + messages: number + loading: boolean +} + +export const Execute: FC = ({ onExecute, messages, loading }) => { + const [partyMode, setPartMode] = useState(false) + const [partyPhase, setPartyPhase] = useState(1) + + return ( + <> + {!partyMode && ( +
      +
      + +

      Passed

      +

      + {messages} message{messages !== 1 && 's'} +

      +
      + +
      + )} + {partyMode && ( +
      +
      + +

      Executing

      +

      + {messages} message{messages !== 1 && 's'} +

      +
      +
      + + + + + +
      +
      + )} + + ) +} diff --git a/apps/dapp/components/FormCard.tsx b/apps/dapp/components/FormCard.tsx new file mode 100644 index 000000000..439c77388 --- /dev/null +++ b/apps/dapp/components/FormCard.tsx @@ -0,0 +1,11 @@ +import { ReactNode, FC } from 'react' + +export interface FormCardProps { + children: ReactNode +} + +export const FormCard: FC = ({ children }) => ( +
      + {children} +
      +) diff --git a/apps/dapp/components/GradientWrapper.tsx b/apps/dapp/components/GradientWrapper.tsx index d2993e77a..c80cec48e 100644 --- a/apps/dapp/components/GradientWrapper.tsx +++ b/apps/dapp/components/GradientWrapper.tsx @@ -7,7 +7,7 @@ import { LogoNoBorder } from './Logo' export function GradientWrapper({ children }: { children: ReactNode }) { const theme = useThemeContext() const bg = - theme.theme === 'junoDark' + theme.theme === 'dark' ? 'url(/gradients/BG-Gradient-Dark@2x.png)' : 'url(/gradients/BG-Gradient-Light@2x.png)' diff --git a/apps/dapp/components/HelpTooltip.tsx b/apps/dapp/components/HelpTooltip.tsx deleted file mode 100644 index 5f35b59f9..000000000 --- a/apps/dapp/components/HelpTooltip.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { InformationCircleIcon, BanIcon } from '@heroicons/react/outline' - -export default function HelpTooltip({ - text, - errorText, -}: { - text: string - errorText?: string -}) { - let icon - if (errorText) { - icon = - } else { - icon = - } - return ( -
      - {icon} -
      - ) -} diff --git a/apps/dapp/components/InstallKeplr.tsx b/apps/dapp/components/InstallKeplr.tsx index 5d53b184c..ad22e285d 100644 --- a/apps/dapp/components/InstallKeplr.tsx +++ b/apps/dapp/components/InstallKeplr.tsx @@ -1,31 +1,30 @@ import { ChevronRightIcon, XIcon } from '@heroicons/react/outline' +import { Button } from 'ui/Button' -import { GradientWrapper } from './GradientWrapper' +import { Modal } from './Modal' export function InstallKeplr({ onClose }: { onClose: () => void }) { return ( - -
      -
      - -

      - You{"'"}ll need a wallet to continue -

      -

      - Your wallet is your digital identity on the blockchain. Having one - lets you interact with web3 applications like DAO DAO. -

      -

      We recommend the Keplr wallet.

      - - Install Keplr - -
      + +
      + +

      You{"'"}ll need a wallet to continue

      +

      + Your wallet is your digital identity on the blockchain. Having one + lets you interact with web3 applications like DAO DAO. +

      +

      We recommend the Keplr wallet.

      + + +
      - +       ) } diff --git a/apps/dapp/components/JunoLogo.tsx b/apps/dapp/components/JunoLogo.tsx deleted file mode 100644 index ebd9b29be..000000000 --- a/apps/dapp/components/JunoLogo.tsx +++ /dev/null @@ -1,28 +0,0 @@ -export default function JunoLogo() { - return ( - - - - - - - - - - - - - - - - - - ) -} diff --git a/apps/dapp/components/Layout.tsx b/apps/dapp/components/Layout.tsx index 7916aed78..fae947b0e 100644 --- a/apps/dapp/components/Layout.tsx +++ b/apps/dapp/components/Layout.tsx @@ -5,6 +5,7 @@ import Head from 'next/head' import { useRecoilRefresher_UNSTABLE, useRecoilState, + useRecoilValue, useSetRecoilState, } from 'recoil' @@ -13,7 +14,11 @@ import { Keplr } from '@keplr-wallet/types' import { betaWarningAcceptedAtom, showBetaNoticeAtom } from 'atoms/status' import LoadingScreen from 'components/LoadingScreen' import { SidebarLayout } from 'components/SidebarLayout' -import { kelprOfflineSigner, connectedWalletAtom } from 'selectors/cosm' +import { + kelprOfflineSigner, + connectedWalletAtom, + noKeplrAccountAtom, +} from 'selectors/cosm' import { installWarningVisibleAtom, chainWarningVisibleAtom, @@ -25,6 +30,7 @@ import { SITE_TITLE } from '../util/constants' import { BetaNotice, BetaWarningModal } from './BetaWarning' import ChainEnableModal from './ChainEnableModal' import { InstallKeplr } from './InstallKeplr' +import { NoKeplrAccountModal } from './NoKeplrAccountModal' const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID @@ -41,6 +47,7 @@ export default function Layout({ children }: { children: ReactNode }) { ) const setChainDisabled = useSetRecoilState(chainDisabledAtom) const [wallet, setWallet] = useRecoilState(connectedWalletAtom) + const [noKeplrAccount, setNoKeplrAccount] = useRecoilState(noKeplrAccountAtom) useEffect(() => { async function loadKeplr() { @@ -113,6 +120,9 @@ export default function Layout({ children }: { children: ReactNode }) { {installWarningVisible && ( setInstallWarningVisible(false)} /> )} + {noKeplrAccount && ( + setNoKeplrAccount(false)} /> + )} {!loaded && !error && } {!betaWarningAccepted && ( setBetaWarningAccepted(true)} /> diff --git a/apps/dapp/components/LinkCard.tsx b/apps/dapp/components/LinkCard.tsx deleted file mode 100644 index 6c259eec4..000000000 --- a/apps/dapp/components/LinkCard.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Link from 'next/link' - -export default function LinkCard({ - href, - children, -}: { - href: string - children: React.ReactNode -}) { - return ( - - ) -} diff --git a/apps/dapp/components/Loader.tsx b/apps/dapp/components/Loader.tsx deleted file mode 100644 index a1c48e72a..000000000 --- a/apps/dapp/components/Loader.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// https://codepen.io/chris__sev/pen/JjRqOxa - -function Loader() { - return ( -
      -
      -
      -
      -
      - ) -} - -export default Loader diff --git a/apps/dapp/components/Logo.tsx b/apps/dapp/components/Logo.tsx index 4928cbdfe..1858f3d65 100644 --- a/apps/dapp/components/Logo.tsx +++ b/apps/dapp/components/Logo.tsx @@ -2,11 +2,14 @@ export function Logo({ width = 28, height = 28, alt = '', + invert = false, }: { width?: number height?: number alt?: string + invert?: boolean }) { + const fill = invert ? '--white' : '--black' return ( ) @@ -61,7 +64,7 @@ export function LogoNoBorder({ fillRule="evenodd" clipRule="evenodd" d="M14 14C14 17.0376 16.4624 19.5 19.5 19.5C22.5376 19.5 25 17.0376 25 14C25 7.92487 20.0751 3 14 3C7.92487 3 3 7.92487 3 14C3 10.9624 5.46243 8.5 8.5 8.5C11.5376 8.5 14 10.9624 14 14ZM19.5 12.5C18.6716 12.5 18 13.1716 18 14C18 14.8284 18.6716 15.5 19.5 15.5C20.3284 15.5 21 14.8284 21 14C21 13.1716 20.3284 12.5 19.5 12.5Z" - style={{ fill: 'var(--logo-fill)' }} + style={{ fill: 'rgb(var(--black))' }} /> ) diff --git a/apps/dapp/components/MarkdownPreview.tsx b/apps/dapp/components/MarkdownPreview.tsx index 46435d4e9..30a0e18d7 100644 --- a/apps/dapp/components/MarkdownPreview.tsx +++ b/apps/dapp/components/MarkdownPreview.tsx @@ -1,12 +1,8 @@ import ReactMarkdown from 'react-markdown' -import { useThemeContext } from 'ui' export function MarkdownPreview({ markdown }: { markdown: string }) { - const theme = useThemeContext() return ( - + {markdown} ) diff --git a/apps/dapp/components/MessageSelector.tsx b/apps/dapp/components/MessageSelector.tsx deleted file mode 100644 index 5703634ed..000000000 --- a/apps/dapp/components/MessageSelector.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { ChangeEvent } from 'react' - -import { MessageAction } from '../util/messagehelpers' - -export default function MessageSelector({ - actions, -}: { - actions: MessageAction[] -}) { - const items = actions.map((action, i: number) => { - return ( - - ) - }) - - const handleItemSelected = (e: ChangeEvent) => { - if (!e.target) { - return - } - const i = e.target.selectedIndex - 1 - const action = i >= 0 && actions?.length > i ? actions[i] : undefined - if (action) { - action.execute() - } - } - - return ( - - ) -} diff --git a/apps/dapp/components/Modal.tsx b/apps/dapp/components/Modal.tsx new file mode 100644 index 000000000..704abb95c --- /dev/null +++ b/apps/dapp/components/Modal.tsx @@ -0,0 +1,11 @@ +import { ReactNode } from 'react' + +export function Modal({ children }: { children: ReactNode }) { + { + return ( +
      + {children} +
      + ) + } +} diff --git a/apps/dapp/components/MultisigContractInfo.tsx b/apps/dapp/components/MultisigContractInfo.tsx index 105ee39b0..69a21fbca 100644 --- a/apps/dapp/components/MultisigContractInfo.tsx +++ b/apps/dapp/components/MultisigContractInfo.tsx @@ -5,7 +5,7 @@ import { ClockIcon } from '@heroicons/react/outline' import { sigSelector } from 'selectors/multisigs' import { humanReadableDuration, thresholdString } from 'util/conversion' -import { GovInfoListItem, TreasuryBalances } from './ContractView' +import { GovInfoListItem } from './ContractView' import { CopyToClipboardAccent } from './CopyToClipboard' import { DaoTreasury } from './DaoTreasury' import SvgVotes from './icons/Votes' @@ -14,9 +14,9 @@ export function MultisigContractInfo({ address }: { address: string }) { const sigInfo = useRecoilValue(sigSelector(address)) return ( -
      +
      -

      Governance Details

      +

      Governance Details

        } @@ -31,14 +31,13 @@ export function MultisigContractInfo({ address }: { address: string }) {
      -

      Addresses

      -
        +

        Addresses

        +
        • - Multisig address + Multisig
        • - cw4-group address{' '} - + cw4-group
      diff --git a/apps/dapp/components/Nav.tsx b/apps/dapp/components/Nav.tsx index ece8deaff..fda03978c 100644 --- a/apps/dapp/components/Nav.tsx +++ b/apps/dapp/components/Nav.tsx @@ -21,7 +21,7 @@ import ConnectWalletButton from './ConnectWalletButton' function MemberDisplay({ name }: { name: string }) { return ( -
      +
      {name}
      @@ -50,24 +50,22 @@ function Nav({ onMenuClick }: NavProps) { const betaWarningShowing = useRecoilValue(showBetaNoticeAtom) return ( -