{children}
Almost there! To set up your Civil account, you need to authenticate your account with a signature. This is similar to signing in with a password. It verifies your account with your crypto wallet.
MetaMask will open a new window, and will require you to sign a message.
{this.renderTransactionUI()}
Common / Auth / Email Signup Flow
AccountEmailAuth
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Log into Civil with your crypto wallet
Almost there! To set up your Civil account, you need to authenticate your account with a signature. This is similar to signing in with a password. It verifies your account with your crypto wallet.
MetaMask will open a new window, and will require you to sign a message.
Common / Auth / ETH
AccountEthAuth Component
Story Source
<
StorybookProvider
>
<
Unknown
value
=
{
{
civil
:
{
ethApi
:
{
rpcId
:
10000
,
web3
:
{
currentProvider
:
{
host
:
'http://localhost:8033'
,
httpAgent
:
{
domain
:
null
,
_events
:
{
free
:
anonymous
}
,
_eventsCount
:
1
,
…
}
,
timeout
:
0
,
…
}
,
_requestManager
:
{
provider
:
{
host
:
'http://localhost:8033'
,
httpAgent
:
{
domain
:
null
,
_events
:
{
free
:
anonymous
}
,
_eventsCount
:
1
,
…
}
,
timeout
:
0
,
…
}
,
providers
:
{
WebsocketProvider
:
WebsocketProvider
,
HttpProvider
:
HttpProvider
,
IpcProvider
:
IpcProvider
}
,
subscriptions
:
{
}
}
,
givenProvider
:
null
,
…
}
,
abiDecoder
:
{
savedABIs
:
[
{
constant
:
true
,
inputs
:
[
]
,
name
:
'PROCESSBY'
,
…
}
,
{
constant
:
false
,
inputs
:
[
{
name
:
'_propID'
,
type
:
'bytes32'
}
]
,
name
:
'processProposal'
,
…
}
,
{
constant
:
true
,
inputs
:
[
{
name
:
''
,
type
:
'bytes32'
}
]
,
name
:
'proposals'
,
…
}
,
…
]
,
methodIds
:
{
0xb25bdef16105f099e5c185f9c7fd969571e8e0caa3f7bd75409512fe0a41a60b
:
{
anonymous
:
false
,
inputs
:
[
{
indexed
:
false
,
name
:
'name'
,
type
:
'string'
}
,
{
indexed
:
false
,
name
:
'value'
,
type
:
'uint256'
}
,
{
indexed
:
false
,
name
:
'propID'
,
type
:
'bytes32'
}
,
…
]
,
name
:
'_ReparameterizationProposal'
,
…
}
,
0xe94e3086c4bfe84acba4437b85a80fca3721dfc419d1f7afe4fa4e470e670b48
:
{
anonymous
:
false
,
inputs
:
[
{
indexed
:
true
,
name
:
'propID'
,
type
:
'bytes32'
}
,
{
indexed
:
false
,
name
:
'challengeID'
,
type
:
'uint256'
}
,
{
indexed
:
false
,
name
:
'commitEndDate'
,
type
:
'uint256'
}
,
…
]
,
name
:
'_NewChallenge'
,
…
}
,
0x37f3986c71e1aa2c470cfc4a92af70820610c3065589d35ef1664ea27f3e73a5
:
{
anonymous
:
false
,
inputs
:
[
{
indexed
:
true
,
name
:
'propID'
,
type
:
'bytes32'
}
,
{
indexed
:
false
,
name
:
'name'
,
type
:
'string'
}
,
{
indexed
:
false
,
name
:
'value'
,
type
:
'uint256'
}
]
,
name
:
'_ProposalAccepted'
,
…
}
,
…
}
}
,
…
}
,
contentProvider
:
{
providers
:
[
{
}
]
}
}
,
auth
:
{
currentUser
:
null
,
loading
:
false
,
apolloClient
:
null
,
…
}
,
features
:
{
featureFlags
:
[
]
}
,
…
}
}
>
<
styled.div
>
<
AccountEthAuth
onAuthenticated
=
{
onAuthenticated
}
/>
</
styled.div
>
</
Unknown
>
</
StorybookProvider
>
Prop Types
" AccountEthAuth " Component
No propTypes defined!" StorybookProvider " Component
No propTypes defined!" Unknown " Component
No propTypes defined!" styled.div " Component
No propTypes defined!
Skip for now
Common / Web3Auth
UserSetAvatar
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Almost done!
To receive payment confirmations and account-related alerts, please enter your email address.
Skip for now
Common / Web3Auth
UserSetEmail
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Email Address Confirmed!
Thanks for confirming your email address.
Common / Auth / VerifyToken
Complete
Story Source
<
AuthEmailVerify
hasVerified
errorMessage
=
{
null
}
onAuthenticationContinue
=
{
onAuthenticationContinue
}
/>
Prop Types
" AuthEmailVerify " Component
No propTypes defined!Uh oh.
Error is bad
Common / Auth / VerifyToken
Error
Story Source
<
AuthEmailVerify
hasVerified
errorMessage
=
"
Error is bad
"
onAuthenticationContinue
=
{
onAuthenticationContinue
}
/>
Prop Types
" AuthEmailVerify " Component
No propTypes defined!Confirming your email address...
Common / Auth / VerifyToken
Loading
Story Source
<
AuthEmailVerify
hasVerified
=
{
false
}
errorMessage
=
{
null
}
onAuthenticationContinue
=
{
onAuthenticationContinue
}
/>
Prop Types
" AuthEmailVerify " Component
No propTypes defined!Can we switch to a different browser?
Civil Registry applications and token purchases currently only work in browsers with Ethereum wallet support, like desktop Chrome and Firefox. We’re working to support other browsers.
In the meantime, please…
Common / Browser Compatible Message
Browser Compatible
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
This is a Transaction Button styled as a Card, and can contain any markup
I am a basic clickable card.
Pattern Library / Cards
Clickable Card
Story Source
<
Container
>
<
CardClickable
onClick
=
{
handleClick
}
>
I am a basic clickable card.
</
CardClickable
>
</
Container
>
Prop Types
" CardClickable " Component
No propTypes defined!" Container " Component
No propTypes defined!{children}
Challenge Results
The Civil Community voted to accept this newsroom on the grounds that it adheres to the Civil Constitution.
Accept
73
%
73000
Reject
27
%
27000
Total Votes
100000
Registry
Challenge Results Chart
Story Source
<
Container
>
<
ChallengeResults
totalVotes
=
"
100000
"
votesFor
=
"
73000
"
votesAgainst
=
"
27000
"
percentFor
=
"
73
"
percentAgainst
=
"
27
"
didChallengeSucceed
=
{
false
}
/>
</
Container
>
Prop Types
" ChallengeResults " Component
No propTypes defined!" Container " Component
No propTypes defined!Some Content
Some Content
Some Content
Some Content
Some Content
Common / Contributors
Contributor Count
Story Source
<
styled.div
>
<
ContributorCount
displayedContributors
=
{
[
{
usdEquivalent
:
2.5
,
payerChannel
:
{
handle
:
'violetnight13'
,
tiny72AvatarDataUrl
:
'https://picsum.photos/50'
}
}
,
{
usdEquivalent
:
3
,
payerChannel
:
{
handle
:
'CaryRay'
,
tiny72AvatarDataUrl
:
'https://picsum.photos/50'
}
}
,
{
usdEquivalent
:
5
,
payerChannel
:
{
handle
:
'ronburgundy'
,
tiny72AvatarDataUrl
:
'https://picsum.photos/50'
}
}
]
}
totalContributors
=
{
30
}
/>
</
styled.div
>
Prop Types
" ContributorCount " Component
No propTypes defined!" styled.div " Component
No propTypes defined!
v
Common / Contributors
Contributor Default Avatar
Story Source
<
styled.div
>
<
ContributorsDefaultAvatar
contributor
=
{
{
usdEquivalent
:
2.5
,
payerChannel
:
{
handle
:
'violetnight13'
,
tiny72AvatarDataUrl
:
'https://picsum.photos/50'
}
}
}
index
=
{
1
}
size
=
{
17
}
/>
</
styled.div
>
Prop Types
" ContributorsDefaultAvatar " Component
No propTypes defined!" styled.div " Component
No propTypes defined!
violetnight13
$2.50
CaryRay
$3.00
ronburgundy
$5.00
Common / Contributors
Contributors
Story Source
<
styled.div
>
<
Contributors
sortedContributors
=
{
[
{
usdEquivalent
:
2.5
,
payerChannel
:
{
handle
:
'violetnight13'
,
tiny72AvatarDataUrl
:
'https://picsum.photos/50'
}
}
,
{
usdEquivalent
:
3
,
payerChannel
:
{
handle
:
'CaryRay'
,
tiny72AvatarDataUrl
:
'https://picsum.photos/50'
}
}
,
{
usdEquivalent
:
5
,
payerChannel
:
{
handle
:
'ronburgundy'
,
tiny72AvatarDataUrl
:
'https://picsum.photos/50'
}
}
]
}
/>
</
styled.div
>
Prop Types
" Contributors " Component
No propTypes defined!" styled.div " Component
No propTypes defined!Common / Copy
Copy URL
Story Source
<
styled.div
>
<
CopyURL
copyText
=
"
Copy the URL to open in your own wallet
"
/>
</
styled.div
>
Prop Types
" CopyURL " Component
No propTypes defined!" styled.div " Component
No propTypes defined!(exchange rate is 0.5x)
(exchange rate is 2x)
You don’t have enough ETH in your wallet.
{props.totalPrice} CVL
approx. @ ${props.pricePerCvl} per CVL
); ================================================ FILE: packages/components/src/CurrencyConverter/UsdEthConverter.tsx ================================================ import * as React from "react"; import gql from "graphql-tag"; import { Query } from "react-apollo"; import { CurrencyConverter } from "./CurrencyConverter"; const ethPriceQuery = gql` query { storefrontEthPrice } `; export interface UsdEthConverterProps { fromValue?: string; displayErrorMsg?: boolean; className?: string; onNotEnoughEthError?(error: boolean): void; onConversion(usdValue: number, ethValue: number): void; } export const UsdEthConverter = (props: UsdEthConverterProps) => { return (
(exchange rate is 2x)
CVL
0
ETH
Common / Currency / Currency Converter
CVL to ETH
Story Source
<
StorybookProvider
>
<
styled.div
>
<
div
>
(exchange rate is 2x)
</
div
>
<
CurrencyConverter
currencyCodeFrom
=
"
CVL
"
currencyCodeTo
=
"
ETH
"
currencyLabelFrom
=
"
Enter CVL Amount
"
currencyLabelTo
=
"
Converted ETH
"
onConversion
=
{
onConversion
}
doConversion
=
{
doConversion
}
/>
</
styled.div
>
</
StorybookProvider
>
Prop Types
" CurrencyConverter " Component
No propTypes defined!" StorybookProvider " Component
No propTypes defined!" styled.div " Component
No propTypes defined!
(exchange rate is 0.5x)
USD
0
ETH
Common / Currency / Currency Converter
USD to ETH
Story Source
<
StorybookProvider
>
<
styled.div
>
<
div
>
(exchange rate is 0.5x)
</
div
>
<
CurrencyConverter
fromValue
=
"
3
"
currencyCodeFrom
=
"
USD
"
currencyCodeTo
=
"
ETH
"
currencyLabelFrom
=
"
Enter USD Amount
"
currencyLabelTo
=
"
Converted ETH
"
displayErrorMsg
onConversion
=
{
onConversion
}
doConversion
=
{
doConversion
}
onNotEnoughEthError
=
{
onNotEnoughEthError
}
/>
</
styled.div
>
</
StorybookProvider
>
Prop Types
" CurrencyConverter " Component
No propTypes defined!" StorybookProvider " Component
No propTypes defined!" styled.div " Component
No propTypes defined!
Get the Civil Registry Alerts
Receive real-time email alerts when a new event occurs on the Civil Registry. These events include new applications, challenges, when voting begins / ends and more. By subscribing, you'll ensure you have maximum time to make decisions about how you will participate in Civil's governance.
Follow us on twitter for alerts @Civil_Alerts
Registry / Mailing List Signup Component
Mailing List Signup Signup
Story Source
<
Container
>
<
EmailSignup
onChange
=
{
onChange
}
onSubmit
=
{
onSubmit
}
/>
</
Container
>
Prop Types
" Container " Component
No propTypes defined!" EmailSignup " Component
No propTypes defined!
Thanks for signing up!
Please check your email to confirm your subscription.
Follow us on twitter for alerts @Civil_Alerts
Registry / Mailing List Signup Component
Mailing List Signup Success
Story Source
<
Container
>
<
EmailSignupSuccess
/>
</
Container
>
Prop Types
" Container " Component
No propTypes defined!" EmailSignupSuccess " Component
No propTypes defined!
CVL Token Contract Address
0x 3e39 fa98 3abc d349 d95a ed60 8e79 8817 397c f0d1
Etherscan
Common / Ethereum / EthAddress Viewer
EthAddress Viewer
Story Source
<
Container
>
<
EthAddressViewer
address
=
"
0x 3e39 fa98 3abc d349 d95a ed60 8e79 8817 397c f0…
"
displayName
=
"
CVL Token Contract Address
"
etherscanBaseURL
=
"
https://rinkeby.etherscan.io
"
/>
</
Container
>
Prop Types
" Container " Component
No propTypes defined!" EthAddressViewer " Component
No propTypes defined!{children}
A community-driven space for curating quality journalism.
Use Civil tokens to apply, challenge and vote on which newsrooms can publish on the Civil platform.{" "} Learn how .
); export const ExploreTCRText: React.FunctionComponent = props => <>Explore The Civil Registry; ================================================ FILE: packages/components/src/Hero/HomepageHero.tsx ================================================ import * as React from "react"; import { buttonSizes } from "../Button"; import { ExpandDownArrow } from "../icons"; import { StyledHeroHeading, StyledHeroCopy, StyledExplore, StyledButtonContainer, CTAButton, } from "./HeroStyledComponents"; import { HeroTitleText, HeroCopyText, ExploreTCRText } from "./HeroTextComponents"; export interface HomepageHeroProps { buyCvlUrl: string; applyURL: string; learnMoreURL: string; } export const HomepageHero: React.FunctionComponentThe Civil Registry
A community-driven space for curating quality journalism.
Use Civil tokens to apply, challenge and vote on which newsrooms can publish on the Civil platform. Learn how .
Explore The Civil Registry
Registry / Hero
Homepage
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Ethereum Info
This public wallet address is the Newsroom's identity on the blockchain.
You can send CVL and ETH to this wallet address.
Smart contract address allow you to see the Newsroom's activities on the blockchain.
Do not send CVL or ETH to this contract address. You will lose your cryptocurrency, and the Civil Media Company can not help you to retrieve it.{" "} Learn more .
{children}
Submit Vote
The Civil Times
Civil is the decentralized marketplace for sustainable journalism.
Registry / Listing / Listing Details Header
Accepting Votes
Story Source
<
Container
>
<
ListingDetailHeader
listingAddress
=
"
0x0
"
newsroomName
=
"
The Civil Times
"
charter
=
{
{
tagline
:
'Civil is the decentralized marketplace for sustain…'
,
newsroomUrl
:
'https://civil.co'
}
}
owner
=
"
0x0
"
unstakedDeposit
=
"
100 CVL
"
etherscanBaseURL
=
"
https://rinkeby.etherscan.io
"
ethInfoModalLearnMoreURL
=
"
#faq
"
isInApplication
=
{
false
}
inChallengeCommitVotePhase
inChallengeRevealPhase
=
{
false
}
/>
</
Container
>
Prop Types
" Container " Component
No propTypes defined!" ListingDetailHeader " Component
No propTypes defined!
Awaiting Approval
The Civil Times
Civil is the decentralized marketplace for sustainable journalism.
Registry / Listing / Listing Details Header
In Application
Story Source
<
Container
>
<
ListingDetailHeader
listingAddress
=
"
0x0
"
newsroomName
=
"
The Civil Times
"
charter
=
{
{
tagline
:
'Civil is the decentralized marketplace for sustain…'
,
newsroomUrl
:
'https://civil.co'
}
}
owner
=
"
0x0
"
unstakedDeposit
=
"
100 CVL
"
etherscanBaseURL
=
"
https://rinkeby.etherscan.io
"
ethInfoModalLearnMoreURL
=
"
#faq
"
isInApplication
inChallengeCommitVotePhase
=
{
false
}
inChallengeRevealPhase
=
{
false
}
/>
</
Container
>
Prop Types
" Container " Component
No propTypes defined!" ListingDetailHeader " Component
No propTypes defined!Registry / Listing / Listing Details Header
No phase label
Story Source
<
Container
>
<
ListingDetailHeader
listingAddress
=
"
0x0
"
newsroomName
=
"
The Civil Times
"
charter
=
{
{
tagline
:
'Civil is the decentralized marketplace for sustain…'
,
newsroomUrl
:
'https://civil.co'
}
}
owner
=
"
0x0
"
etherscanBaseURL
=
"
https://rinkeby.etherscan.io
"
ethInfoModalLearnMoreURL
=
"
#faq
"
unstakedDeposit
=
"
100 CVL
"
isInApplication
=
{
false
}
inChallengeCommitVotePhase
=
{
false
}
inChallengeRevealPhase
=
{
false
}
/>
</
Container
>
Prop Types
" Container " Component
No propTypes defined!" ListingDetailHeader " Component
No propTypes defined!
Confirm Vote
The Civil Times
Civil is the decentralized marketplace for sustainable journalism.
Registry / Listing / Listing Details Header
Revealing Votes
Story Source
<
Container
>
<
ListingDetailHeader
listingAddress
=
"
0x0
"
newsroomName
=
"
The Civil Times
"
charter
=
{
{
tagline
:
'Civil is the decentralized marketplace for sustain…'
,
newsroomUrl
:
'https://civil.co'
}
}
owner
=
"
0x0
"
etherscanBaseURL
=
"
https://rinkeby.etherscan.io
"
ethInfoModalLearnMoreURL
=
"
#faq
"
unstakedDeposit
=
"
100 CVL
"
isInApplication
=
{
false
}
inChallengeCommitVotePhase
=
{
false
}
inChallengeRevealPhase
/>
</
Container
>
Prop Types
" Container " Component
No propTypes defined!" ListingDetailHeader " Component
No propTypes defined!
{!props.txIdToConfirm && {text}
);
};
export const AppealAwaitingDecisionCard: React.FunctionComponent this.setState({ displayStep: 0 })}>
Back
{tokenBalanceLabel}
{children}
{props.children}
Registry / Listing / Listing Details Phase Card
Appeal Challenge: Commit Vote
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Appeal Challenge: Resolve
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Appeal Challenge: Reveal Vote - User Already Revealed
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Appeal Challenge: Reveal Vote - User Did Not Commit
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Appeal Challenge: Reveal Vote - User committed and has not revealed
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
In Application
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Rejected
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Resolve Application
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Appeal: Awaiting Appeal Decision
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Appeal: Awaiting Appeal Decision, Civil Council Multisig
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Appeal: Decision / Can Challenge
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Appeal: Resolve
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Challenge: Commit Vote
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Challenge: Request Appeal
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Challenge: Resolve
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Challenge: Reveal Vote - User Already Revealed
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Challenge: Reveal Vote - User Did Not Commit
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Under Challenge: Reveal Vote - User committed and has not revealed
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Details Phase Card
Whitelisted
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
CVL token holders may challenge a Newsroom if their mission, charter, or roster is perceived to misalign with the Civil Constitution. Newsroom will be approved if there are no challenges.
); }; export const UnderChallengeToolTipText: React.FunctionComponentThis Newsroom is being challenged by a CVL token holder who believes it violates one of principles outlined in the Civil Constitution. Read the challenger's statement in the Discussion section.
The challenge phase consists of 2 subphases: Submit Vote and Confirm Vote.
); }; export const WhitelistedNewroomsToolTipText: React.FunctionComponent = props => { return ( <>This Newsroom has committed to uphold the values of the Civil Constitution and has been approved by the Civil community to be on the Civil Registry.
The community of CVL token holders are the stewards of ethical journalism on the Civil Registry. If for any reason you believe that a Newsroom has violated either the Civil Constitution or the Newsroom's own stated mission and charter, you may challenge them at any time.
); }; export const RejectedNewsroomsToolTipText: React.FunctionComponent = props => { return ( <>This Newsroom has been rejected by the CVL token-holding community due to misalignment with the Civil Constitution.
Rejected Newsrooms may reapply to the Civil Registry at any time.
); }; export const WithdrawnNewsroomsToolTipText: React.FunctionComponent = props => { return ( <>This Newsroom has been withdrawn from the registry by its owner.
Withdrawn Newsrooms may reapply to the Civil Registry at any time.
); }; export const ResolveChallengeToolTipText: React.FunctionComponent = props => { return ( <>Challenge results are in, and any CVL token holder may resolve this challenge. When this is resolved, Newsroom will be listed or delisted from The Civil Registry. Please note that this requires paying some Ethereum gas to complete.
); }; export const CommitVoteToolTipText: React.FunctionComponentDecide how many tokens you would like to put towards this vote. Note that the more tokens you include, the more power your vote carries. You can never lose your vote, but you will not be able to withdraw them until the end of the voting process. All votes will be hidden, using a unique 4-word voting code, until the end of the voting period. You have to come back and confirm your vote for it to count.
); }; export const ConfirmVoteToolTipText: React.FunctionComponentVoters must enter the unique 4-word voting code they received during the commit vote stage of the process in order to confirm their vote. Votes can not be counted and rewards can not be claimed unless voters confirm their earlier vote.
); }; export const RewardPoolToolTipText: React.FunctionComponentCVL token holders, (including newsrooms or challengers) can appeal a vote outcome if they believe it is not in keeping with the Civil Constitution. This system of checks and balances ensures that all voices and perspectives have an opportunity to be heard in the Civil community.
); }; export const WaitingCouncilDecisionToolTipText: React.FunctionComponentAfter The Civil Council reaches a decision on the appeal, they will publish a document explaining their choice and citing the section of the Civil Constitution they used to reach their decision. This system of checks and balances ensures that all voices and views have an opportunity to be heard in the Civil community.
); }; export const ChallangeCouncilToolTipText: React.FunctionComponentThe challenger must submit a statement with evidence to make their case, and deposit CVL tokens equal to the amount of the Newsroom's deposit. The CVL token deposit for the challenge is set aside for the duration of the challenge process, like an escrow account.
); }; // Num tokens for Commit Vote text export const VotingTokenBalanceText: React.FunctionComponent = props => { return <>Voting Token Balance; }; export const AvailableTokenBalanceText: React.FunctionComponent = props => { return <>Available Token Balance; }; export const VotingTokenBalanceTooltipText: React.FunctionComponent = props => { return ( <> Voting tokens are tokens locked in voting contracts until the challenge is completed. If a token is locked in a vote, it can be used for other votes, but can NOT be used for applications, challenges, appeals, or exchanged for currency. If you’re planning on taking other actions, we recommend reserving some CVL in your available balance. ); }; export const AvailableTokenBalanceTooltipText: React.FunctionComponent = props => { return ( <> CVL tokens you can use to tip journalists, use for deposits to challenge, request appeal, and challenge appeal, or cash out for fiat currency. To vote, you will need to approve and transfer them to your Voting Token Balance. Committing CVL tokens from your Available Balance with any vote will automatically transfer those tokens into your Voting Token Balance. If you’re planning on taking other actions, we recommend reserving some CVL in your Available Balance ); }; export const SelectNumTokensText: React.FunctionComponent = props => { return <>Select amount of CVL tokens to commit to your vote.; }; export const OneTokenOneVoteText: React.FunctionComponent = props => { return <>1 token equals 1 vote.; }; export const OneTokenOneVoteTooltipText: React.FunctionComponent = props => { return ( <> Your vote is weighted based on the amount of CVL tokens you put towards your vote. If you have 1 CVL, you have 1 vote; 10 CVL gives you the power of 10 votes. This ensures that those who have the most tokens are incentivized to vote for the side that abides by the Civil Constitution. Note that you can not lose any CVL as a result of voting. ); }; export const CommitVoteInsufficientTokensText: React.FunctionComponent = props => { return <>You don't have enough CVL tokens in your available balance; }; export const CommitVoteMaxTokensWarningText: React.FunctionComponent = props => { return ( <> You are commiting all of your CVL tokens to this vote. If you’re planning on taking other actions - tipping journalists, challenging listings, requesting appeals, challenging granted appeals, or cashing out for fiat currency - we recommend reserving some CVL in your Available Balance. ); }; ================================================ FILE: packages/components/src/ListingDetailPhaseCard/types.ts ================================================ import { EthAddress } from "@joincivil/typescript-types"; export interface ListingDetailPhaseCardComponentProps { challenge?: any; listing?: any; listingAddress?: EthAddress; transactions?: any[]; constitutionURI?: string; learnMoreURL?: string; faqURL: string; onMobileTransactionClick?(): any; } export interface PhaseWithExpiryProps { endTime: number; phaseLength: number; secondaryPhaseLength?: number; } export interface SubmitChallengeProps { submitChallengeURI?: string; } export interface RequestAppealProps { requestAppealURI?: string; } export interface ChallengePhaseProps { challengeID?: string; isViewingUserChallenger?: boolean; challenger?: EthAddress; rewardPool?: string; stake?: string; dispensationPct?: string; userHasCommittedVote?: boolean; userHasRevealedVote?: boolean; } export interface VoteBaseProps { newsroomName?: string; isAppealChallenge?: boolean; salt?: string; voteOption?: string; onInputChange(propsData: any, validateFn?: () => boolean): void; postExecuteTransactions?(): any; } export interface CommitVoteProps extends VoteBaseProps { tokenBalance: number; votingTokenBalance: number; tokenBalanceDisplay: string; votingTokenBalanceDisplay: string; numTokens?: string; userHasCommittedVote?: boolean; userHasRevealedVote?: boolean; buttonText?: string | JSX.Element; onCommitMaxTokens(): void; onReviewVote(): void; } export interface RevealVoteProps extends VoteBaseProps { votingSmartContractFaqURL: string; transactions: any[]; } export interface AppealDecisionProps { appealRequested?: boolean; appealGranted?: boolean; appealGrantedStatementURI?: string; submitAppealChallengeURI?: string; } export interface AppealChallengePhaseProps { appealChallengeID?: string; } export interface AppealChallengeResultsProps { appealChallengeTotalVotes?: string; appealChallengeVotesFor?: string; appealChallengeVotesAgainst?: string; appealChallengePercentFor?: string; appealChallengePercentAgainst?: string; didAppealChallengeSucceed?: boolean; } ================================================ FILE: packages/components/src/ListingHistoryEvent/AppealGrantedEvent.tsx ================================================ import * as React from "react"; import { ListingHistoryEventTimestampProps } from "./types"; import { ListingEventTitles } from "./constants"; import { ListingHistoryEvent, StyledEventCopy } from "./ListingHistoryEvent"; export const AppealGrantedEvent: React.FunctionComponentThe Civil Council decided to {councilDecision} this Newsroom, {councilContext}ing the Civil Community's vote
)} {appealChallengeTotalVotes && (The Civil Council decided to {councilDecision} this Newsroom, {councilContext}ing the Civil Community's vote
)} {appealChallengeTotalVotes && (Registry / Listing / Listing History Event
Default
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing History Event
History Events Timelime
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
{appealChallengeStatementSummary}
{appealStatementSummary}
{challengeStatementSummary}
{children}
Registry / Listing / Listing Summary
Card
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Summary
Card Grid
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Registry / Listing / Listing Summary
Card Rejected
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
{children}
{children}
{props.children}
;
};
export const Message = styled(MessageBase)`
margin: 10px 0;
padding: 15px;
font-size: 15px;
font-family: ${fonts.SERIF};
color: black;
`;
export const InfoMessage = styled(Message)`
background-color: ${colors.accent.CIVIL_BLUE_VERY_FADED};
color: black;
`;
================================================
FILE: packages/components/src/MetaMaskLogoButton.tsx
================================================
import * as React from "react";
import { MetaMaskSideIcon, Button, buttonSizes, TransactionButtonInnerProps } from ".";
import styled from "styled-components";
const B = styled(Button)`
position: relative;
display: flex;
align-items: center;
height: 46px;
padding-left: 75px;
`;
const ImgWrapper = styled.div`
width: 44px;
height: 44px;
background-color: #ffffff;
position: absolute;
top: 1px;
left: 1px;
display: flex;
justify-content: center;
align-items: center;
`;
export const MetaMaskLogoButton = (props: TransactionButtonInnerProps): JSX.Element => {
return (
test
);
})
.add("waitingMetaMaskModal", () => {
return process.env.NODE_ENV !== "test" ? (
test
);
})
.add("deniedMetaMaskModal", () => {
return process.env.NODE_ENV !== "test" ? (
test
);
})
.add("SignatureMetaMaskModal", () => {
return process.env.NODE_ENV !== "test" ? (
test
);
})
.add("SignatureMetaMaskModal waiting", () => {
return process.env.NODE_ENV !== "test" ? (
test
);
});
================================================
FILE: packages/components/src/MetaMaskModal.tsx
================================================
import * as React from "react";
import styled from "styled-components";
import {
Modal,
Button,
buttonSizes,
BorderlessButton,
ClipLoader,
TransactionButtonNoModal,
Transaction,
MetaMaskSideIcon,
MetaMaskLogoButton,
} from ".";
import metaMaskModalUrl from "./images/img-metamask-modalconfirm@2x.png";
import confirmButton from "./images/img-metamask-confirm@2x.png";
import signImage from "./images/img-metamaskmodal-new-signature.png";
const ModalP = styled.p`
font-size: 16px;
color: #5f5f5f;
line-height: 26px;
&& {
margin: 16px 0;
}
`;
const HalfPWrapper = styled.div`
width: 55%;
`;
const MainImg = styled.img`
width: 40%;
height: 240px;
object-fit: cover;
`;
export interface ContentSectionWrapperProps {
row?: boolean;
}
export const MetaMaskStepCounter = styled.div`
font-weight: 600;
`;
const ContentSectionWrapper = styled.div`
display: flex;
flex-direction: ${(props: ContentSectionWrapperProps) => (props.row ? "row" : "column")};
justify-content: space-between;
margin-top: -20px;
`;
const IB = styled(BorderlessButton)`
font-weight: 400;
margin-right: 30px;
`;
const ImgWrapperSmall = styled.span`
border-radius: 2px;
padding: 4px 5px 1px 5px;
border: 1px solid #dddddd;
display: inline-blocks;
vertical-align: middle;
`;
const ImgWrapperFull = styled.div`
text-align: center;
line-height: 0;
`;
const ButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
padding: 19px 24px;
margin: 0 -25px;
border-top: 1px solid #dddddd;
margin-top: -1px;
`;
const WaitingButton = styled.div`
border: 1px solid #dddddd;
padding: 12px 23px;
color: #5f5f5f;
display: flex;
align-items: center;
justify-content: space-around;
`;
const SpanWithMargin = styled.span`
margin-right: 10px;
font-weight: 600;
font-size: 14px;
`;
export interface MetaMaskModalProps {
waiting?: boolean;
alert?: boolean;
errored?: boolean;
denied?: boolean;
signing?: boolean;
ipfsPost?: boolean;
bodyText?: string;
denialText?: string;
errorText?: string;
restartTransactions?: Transaction[];
cancelTransaction?(): void;
startTransaction?(): void;
}
export const MetaMaskModal: React.FunctionComponent{props.errorText}
{children}
Some good stuff was already on the page which is pretty exciting
{process.env.NODE_ENV !== "test" && (Hello
lorem ipsum whatever you know what i mean. It gets pretty long because thats more useful
Some good stuff was already on the page which is pretty exciting
{process.env.NODE_ENV !== "test" && (Hello
lorem ipsum whatever you know what i mean. It gets pretty long because thats more useful
{children}
Common / Nav / Nav Bar
Global Nav
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
Please Switch To Rinkeby Testnet
Common / Nav / Nav Bar
Nav Error Bar
Story Source
<
StoryRouter
story
=
{
anonymous
}
links
=
{
null
}
routerProps
=
{
null
}
/>
Prop Types
" StoryRouter " Component
| property | propType | required | default | description |
|---|---|---|---|---|
| story | other | yes | - | |
| links | other | - | - | |
| routerProps | other | - | - |
This is an alert notice
Pattern Library / Notices
Alert
Story Source
<
Notice
type
=
{
2
}
>
This is an alert notice
</
Notice
>
Prop Types
" Notice " Component
No propTypes defined!
This is an attention notice
Pattern Library / Notices
Attention
Story Source
<
Notice
type
=
{
3
}
>
This is an attention notice
</
Notice
>
Prop Types
" Notice " Component
No propTypes defined!
This is an error notice
Pattern Library / Notices
Error
Story Source
<
Notice
type
=
{
1
}
>
This is an error notice
</
Notice
>
Prop Types
" Notice " Component
No propTypes defined!
This is an info notice
Pattern Library / Notices
Info
Story Source
<
Notice
type
=
{
0
}
>
This is an info notice
</
Notice
>
Prop Types
" Notice " Component
No propTypes defined!
This is an info notice
This is an error notice
This is an alert notice
This is an attention notice
Pattern Library / Notices
Notice - All types
Story Source
<
styled.div
>
<
Notice
type
=
{
0
}
>
This is an info notice
</
Notice
>
<
Notice
type
=
{
1
}
>
This is an error notice
</
Notice
>
<
Notice
type
=
{
2
}
>
This is an alert notice
</
Notice
>
<
Notice
type
=
{
3
}
>
This is an attention notice
</
Notice
>
</
styled.div
>
Prop Types
" Notice " Component
No propTypes defined!" styled.div " Component
No propTypes defined!
This is a foundation action notice
Pattern Library / Notices
foundation action
Story Source
<
Notice
type
=
{
4
}
icon
=
{
<function (props) {
var width = (props.width || 82).toString();
var height = (props.height || 82).toString();
return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 82 82", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("g", { fill: "none", fillRule: "evenodd" },
React.createElement("circle", { cx: "41", cy: "41", r: "41", fill: "#90E8D3" }),
React.createElement("g", { fill: "#000", transform: "translate(11 10)" },
React.createElement("path", { fillRule: "nonzero", d: "M2.86742813,19.5094459 L57.2076375,19.5094459 C57.6222497,19.5093254 57.9875374,19.238741 58.1058429,18.8441062 C58.2241484,18.4494714 58.0673687,18.0245305 57.7203375,17.7992193 L30.5502281,0.151842414 C30.238919,-0.050912319 29.8361467,-0.050912319 29.5248375,0.151842414 L2.3547375,17.7992193 C2.00770626,18.0245305 1.85092658,18.4494714 1.9692321,18.8441062 C2.08753763,19.238741 2.45282526,19.5093254 2.8674375,19.5094459 L2.86742813,19.5094459 Z M30.0375,2.0434531 L54.0609375,17.6473769 L6.0140625,17.6473769 L30.0375,2.0434531 Z" }),
React.createElement("path", { fillRule: "nonzero", d: "M30.0375,8.31748034 C28.0624928,8.31785569 26.4616926,9.90808967 26.4619032,11.8694761 C26.4621137,13.8308626 28.0632553,15.4207576 30.0382625,15.4207148 C32.0132697,15.4206719 33.6143413,13.8307075 33.6144656,11.869321 C33.6124137,9.90836017 32.0120789,8.31926622 30.0375,8.31748034 L30.0375,8.31748034 Z M30.0375,13.5586366 C29.097967,13.5582612 28.3366081,12.8016113 28.3369032,11.8685578 C28.3371983,10.9355043 29.0990356,10.1793294 30.0385687,10.1795402 C30.9781017,10.1797509 31.739595,10.9362675 31.7394656,11.869321 C31.7385708,12.8022952 30.9769535,13.55826 30.0375,13.5586552 L30.0375,13.5586366 Z" }),
React.createElement("path", { d: "M7.99712813 22.8371679L7.99712813 48.8102369C7.99712813 49.324433 8.41686117 49.7412714 8.93462813 49.7412714 9.45239508 49.7412714 9.87212813 49.324433 9.87212813 48.8102369L9.87212813 22.8371679C9.87212813 22.3229718 9.45239508 21.9061334 8.93462813 21.9061334 8.41686117 21.9061334 7.99712813 22.3229718 7.99712813 22.8371679zM22.4322469 22.8371679L22.4322469 48.8102369C22.4322469 49.324433 22.8519799 49.7412714 23.3697469 49.7412714 23.8875138 49.7412714 24.3072469 49.324433 24.3072469 48.8102369L24.3072469 22.8371679C24.3072469 22.3229718 23.8875138 21.9061334 23.3697469 21.9061334 22.8519799 21.9061334 22.4322469 22.3229718 22.4322469 22.8371679zM36.8664563 22.8371679L36.8664563 48.8102369C36.8664563 49.324433 37.2861893 49.7412714 37.8039563 49.7412714 38.3217232 49.7412714 38.7414563 49.324433 38.7414563 48.8102369L38.7414563 22.8371679C38.7414563 22.3229718 38.3217232 21.9061334 37.8039563 21.9061334 37.2861893 21.9061334 36.8664563 22.3229718 36.8664563 22.8371679zM51.301575 22.8371679L51.301575 48.8102369C51.301575 49.324433 51.721308 49.7412714 52.239075 49.7412714 52.756842 49.7412714 53.176575 49.324433 53.176575 48.8102369L53.176575 22.8371679C53.176575 22.3229718 52.756842 21.9061334 52.239075 21.9061334 51.721308 21.9061334 51.301575 22.3229718 51.301575 22.8371679zM1.50695625 54L58.4930437 54C59.0108107 54 59.4305437 53.5831617 59.4305437 53.0689655 59.4305437 52.5547694 59.0108107 52.137931 58.4930437 52.137931L1.50695625 52.137931C.989189297 52.137931.56945625 52.5547694.56945625 53.0689655.56945625 53.5831617.989189297 54 1.50695625 54z" })))));
} />
}
>
This is a foundation action notice
</
Notice
>
Prop Types
" Notice " Component
No propTypes defined!Remember to set event to Private
{children}
Registry / Parameterizer
Create Proposal
Story Source
<
Container
/>
Prop Types
" Container " Component
No propTypes defined!Please check your email to confirm your email address.
)}