\n
\n);\n\nexport const CheckEmailSection = () => (\n {children}
\n \n
\n )}\n \n
\n )}\n \n Almost there! To set up your Civil account, you need to authenticate your account with a signature. This is\n similar to signing in with a password. It verifies your account with your crypto wallet.\n
\n\n\n 
\n
\n \n );\n }\n\n public componentDidMount(): void {\n this._isMounted = true;\n }\n public componentWillUnmount(): void {\n this._isMounted = false;\n }\n\n private renderTransactionUI(): JSX.Element {\n return (\n MetaMask will open a new window, and will require you to sign a message.
\n {this.renderTransactionUI()}\n\n \n \n \n \n
\n \n \n \n \n Common / Auth / Email Signup Flow\n \n \n AccountEmailAuth\n \n
\n \n \n \n Story Source\n \n \n
\n \n \n \n <\n StoryRouter\n \n \n \n \n \n story\n \n \n =\n \n {\n \n anonymous\n \n }\n \n \n \n \n \n \n links\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n routerProps\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/Account/Auth/__snapshots__/EthAuth.stories.storyshot",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Common / Auth / ETH AccountEthAuth Component 1`] = `\n\n \n \"\n StoryRouter\n \" Component\n \n \n \n \n \n property\n \n \n propType\n \n \n required\n \n \n default\n \n \n description\n \n \n \n \n \n \n story\n \n \n \n other\n \n \n \n yes\n \n \n -\n \n \n \n \n links\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n routerProps\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n
\n \n \n \n \n Log into Civil with your crypto wallet\n \n
\n \n \n \n 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.\n
\n\n \n \n
\n Open MetaMask\n \n \n MetaMask will open a new window, and will require you to sign a message.\n
\n \n\n \n \n \n Common / Auth / ETH\n \n \n AccountEthAuth Component\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n styled.div\n >\n \n
\n \n \n \n \n <\n AccountEthAuth\n \n \n \n \n \n onAuthenticated\n \n \n =\n \n {\n \n onAuthenticated\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n \n <\n StorybookProvider\n \n \n \n >\n \n
\n \n \n \n <\n Unknown\n \n \n \n \n \n value\n \n \n =\n \n {\n \n {\n \n \n
\n \n \n \n\n civil\n \n \n : \n \n {\n \n \n ethApi\n \n \n : \n \n {\n \n \n
\n \n \n \n\n rpcId\n \n \n : \n \n 10000\n \n ,\n \n \n
\n \n \n \n\n web3\n \n \n : \n \n {\n \n \n
\n \n \n \n\n currentProvider\n \n \n : \n \n {\n \n \n
\n \n \n \n\n host\n \n \n : \n \n 'http://localhost:8033'\n \n ,\n \n \n
\n \n \n \n\n httpAgent\n \n \n : \n \n {\n \n \n
\n \n \n \n\n domain\n \n \n : \n \n null\n \n ,\n \n \n
\n \n \n \n\n _events\n \n \n : \n \n {\n \n \n free\n \n \n : \n \n anonymous\n \n }\n \n ,\n \n \n
\n \n \n \n\n _eventsCount\n \n \n : \n \n 1\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n\n timeout\n \n \n : \n \n 0\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n\n _requestManager\n \n \n : \n \n {\n \n \n provider\n \n \n : \n \n {\n \n \n
\n \n \n \n\n host\n \n \n : \n \n 'http://localhost:8033'\n \n ,\n \n \n
\n \n \n \n\n httpAgent\n \n \n : \n \n {\n \n \n
\n \n \n \n\n domain\n \n \n : \n \n null\n \n ,\n \n \n
\n \n \n \n\n _events\n \n \n : \n \n {\n \n \n free\n \n \n : \n \n anonymous\n \n }\n \n ,\n \n \n
\n \n \n \n\n _eventsCount\n \n \n : \n \n 1\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n\n timeout\n \n \n : \n \n 0\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n\n providers\n \n \n : \n \n {\n \n \n WebsocketProvider\n \n \n : \n \n WebsocketProvider\n \n ,\n \n \n HttpProvider\n \n \n : \n \n HttpProvider\n \n ,\n \n \n IpcProvider\n \n \n : \n \n IpcProvider\n \n }\n \n ,\n \n \n subscriptions\n \n \n : \n \n {\n }\n \n }\n \n ,\n \n \n
\n \n \n \n\n givenProvider\n \n \n : \n \n null\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n\n abiDecoder\n \n \n : \n \n {\n \n \n savedABIs\n \n \n : \n \n [\n \n \n
\n \n \n \n\n {\n \n \n
\n \n \n \n\n constant\n \n \n : \n \n true\n \n ,\n \n \n
\n \n \n \n\n inputs\n \n \n : \n \n [\n ]\n \n ,\n \n \n
\n \n \n \n\n name\n \n \n : \n \n 'PROCESSBY'\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n \n ,\n \n \n
\n \n \n \n\n {\n \n \n
\n \n \n \n\n constant\n \n \n : \n \n false\n \n ,\n \n \n
\n \n \n \n\n inputs\n \n \n : \n \n [\n \n \n {\n \n \n name\n \n \n : \n \n '_propID'\n \n ,\n \n \n type\n \n \n : \n \n 'bytes32'\n \n }\n \n \n ]\n \n ,\n \n \n
\n \n \n \n\n name\n \n \n : \n \n 'processProposal'\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n \n ,\n \n \n
\n \n \n \n\n {\n \n \n
\n \n \n \n\n constant\n \n \n : \n \n true\n \n ,\n \n \n
\n \n \n \n\n inputs\n \n \n : \n \n [\n \n \n {\n \n \n name\n \n \n : \n \n ''\n \n ,\n \n \n type\n \n \n : \n \n 'bytes32'\n \n }\n \n \n ]\n \n ,\n \n \n
\n \n \n \n\n name\n \n \n : \n \n 'proposals'\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n ]\n \n ,\n \n\n methodIds\n \n \n : \n \n {\n \n \n
\n \n \n \n\n 0xb25bdef16105f099e5c185f9c7fd969571e8e0caa3f7bd75409512fe0a41a60b\n \n \n : \n \n {\n \n \n
\n \n \n \n\n anonymous\n \n \n : \n \n false\n \n ,\n \n \n
\n \n \n \n\n inputs\n \n \n : \n \n [\n \n \n
\n \n \n \n\n {\n \n \n indexed\n \n \n : \n \n false\n \n ,\n \n \n name\n \n \n : \n \n 'name'\n \n ,\n \n \n type\n \n \n : \n \n 'string'\n \n }\n \n \n ,\n \n \n
\n \n \n \n\n {\n \n \n indexed\n \n \n : \n \n false\n \n ,\n \n \n name\n \n \n : \n \n 'value'\n \n ,\n \n \n type\n \n \n : \n \n 'uint256'\n \n }\n \n \n ,\n \n \n
\n \n \n \n\n {\n \n \n indexed\n \n \n : \n \n false\n \n ,\n \n \n name\n \n \n : \n \n 'propID'\n \n ,\n \n \n type\n \n \n : \n \n 'bytes32'\n \n }\n \n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n ]\n \n ,\n \n \n
\n \n \n \n\n name\n \n \n : \n \n '_ReparameterizationProposal'\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n\n 0xe94e3086c4bfe84acba4437b85a80fca3721dfc419d1f7afe4fa4e470e670b48\n \n \n : \n \n {\n \n \n
\n \n \n \n\n anonymous\n \n \n : \n \n false\n \n ,\n \n \n
\n \n \n \n\n inputs\n \n \n : \n \n [\n \n \n
\n \n \n \n\n {\n \n \n indexed\n \n \n : \n \n true\n \n ,\n \n \n name\n \n \n : \n \n 'propID'\n \n ,\n \n \n type\n \n \n : \n \n 'bytes32'\n \n }\n \n \n ,\n \n \n
\n \n \n \n\n {\n \n \n indexed\n \n \n : \n \n false\n \n ,\n \n \n name\n \n \n : \n \n 'challengeID'\n \n ,\n \n \n type\n \n \n : \n \n 'uint256'\n \n }\n \n \n ,\n \n \n
\n \n \n \n\n {\n \n \n indexed\n \n \n : \n \n false\n \n ,\n \n \n name\n \n \n : \n \n 'commitEndDate'\n \n ,\n \n \n type\n \n \n : \n \n 'uint256'\n \n }\n \n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n ]\n \n ,\n \n \n
\n \n \n \n\n name\n \n \n : \n \n '_NewChallenge'\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n\n 0x37f3986c71e1aa2c470cfc4a92af70820610c3065589d35ef1664ea27f3e73a5\n \n \n : \n \n {\n \n \n
\n \n \n \n\n anonymous\n \n \n : \n \n false\n \n ,\n \n \n
\n \n \n \n\n inputs\n \n \n : \n \n [\n \n \n {\n \n \n indexed\n \n \n : \n \n true\n \n ,\n \n \n name\n \n \n : \n \n 'propID'\n \n ,\n \n \n type\n \n \n : \n \n 'bytes32'\n \n }\n \n \n ,\n \n \n {\n \n \n indexed\n \n \n : \n \n false\n \n ,\n \n \n name\n \n \n : \n \n 'name'\n \n ,\n \n \n type\n \n \n : \n \n 'string'\n \n }\n \n \n ,\n \n \n {\n \n \n indexed\n \n \n : \n \n false\n \n ,\n \n \n name\n \n \n : \n \n 'value'\n \n ,\n \n \n type\n \n \n : \n \n 'uint256'\n \n }\n \n \n ]\n \n ,\n \n \n
\n \n \n \n\n name\n \n \n : \n \n '_ProposalAccepted'\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n }\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n\n contentProvider\n \n \n : \n \n {\n \n \n providers\n \n \n : \n \n [\n \n \n {\n }\n \n \n ]\n \n }\n \n }\n \n ,\n \n \n
\n \n \n \n\n auth\n \n \n : \n \n {\n \n \n
\n \n \n \n\n currentUser\n \n \n : \n \n null\n \n ,\n \n \n
\n \n \n \n\n loading\n \n \n : \n \n false\n \n ,\n \n \n
\n \n \n \n\n apolloClient\n \n \n : \n \n null\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n\n features\n \n \n : \n \n {\n \n \n featureFlags\n \n \n : \n \n [\n ]\n \n }\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n }\n \n \n \n \n \n\n >\n \n
\n \n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n \n ,\n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n \n ,\n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n ]\n \n ,\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n ]\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n ]\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n }\n \n ,\n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n ,\n \n \n
\n \n \n \n
\n \n \n \n …\n \n \n
\n \n \n }\n \n }\n \n \n \n \n \n
\n \n \n <\n styled.div\n \n \n \n >\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/Account/Auth/__snapshots__/UserSetAvatar.stories.storyshot",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Common / Web3Auth UserSetAvatar 1`] = `\n\n \n \"\n AccountEthAuth\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n StorybookProvider\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n Unknown\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n styled.div\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n Drag and drop an image here\n \n
\n \n or\n \n
\n \n \n \n Common / Web3Auth\n \n \n UserSetAvatar\n \n
\n \n \n \n Story Source\n \n \n
\n \n \n \n <\n StoryRouter\n \n \n \n \n \n story\n \n \n =\n \n {\n \n anonymous\n \n }\n \n \n \n \n \n \n links\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n routerProps\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/Account/Auth/__snapshots__/UserSetEmail.stories.storyshot",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Common / Web3Auth UserSetEmail 1`] = `\n\n \n \"\n StoryRouter\n \" Component\n \n \n \n \n \n property\n \n \n propType\n \n \n required\n \n \n default\n \n \n description\n \n \n \n \n \n \n story\n \n \n \n other\n \n \n \n yes\n \n \n -\n \n \n \n \n links\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n routerProps\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n
\n \n \n \n Almost done!\n
\n \n \n \n \n Common / Web3Auth\n \n \n UserSetEmail\n \n
\n \n \n \n Story Source\n \n \n
\n \n \n \n <\n StoryRouter\n \n \n \n \n \n story\n \n \n =\n \n {\n \n anonymous\n \n }\n \n \n \n \n \n \n links\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n routerProps\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/Account/Auth/__snapshots__/VerifyToken.stories.storyshot",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Common / Auth / VerifyToken Complete 1`] = `\n\n \n \"\n StoryRouter\n \" Component\n \n \n \n \n \n property\n \n \n propType\n \n \n required\n \n \n default\n \n \n description\n \n \n \n \n \n \n story\n \n \n \n other\n \n \n \n yes\n \n \n -\n \n \n \n \n links\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n routerProps\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n
\n \n \n \n Email Address Confirmed!\n \n \n Thanks for confirming your email address.\n
\n \n
\n \n \n \n Continue\n \n
\n \n \n \n \n \n \n Common / Auth / VerifyToken\n \n \n Complete\n \n
\n \n \n \n Story Source\n \n \n
\n \n \n \n <\n AuthEmailVerify\n \n \n \n \n \n hasVerified\n \n \n \n \n \n errorMessage\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n onAuthenticationContinue\n \n \n =\n \n {\n \n onAuthenticationContinue\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n\nexports[`Storyshots Common / Auth / VerifyToken Error 1`] = `\n\n \n \"\n AuthEmailVerify\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n Uh oh.\n \n \n \n Error is bad\n \n
\n \n \n \n \n \n Common / Auth / VerifyToken\n \n \n Error\n \n
\n \n \n \n Story Source\n \n \n
\n \n \n \n <\n AuthEmailVerify\n \n \n \n \n \n hasVerified\n \n \n \n \n \n errorMessage\n \n \n =\n \n \"\n \n Error is bad\n \n \"\n \n \n \n \n \n \n onAuthenticationContinue\n \n \n =\n \n {\n \n onAuthenticationContinue\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n\nexports[`Storyshots Common / Auth / VerifyToken Loading 1`] = `\n\n \n \"\n AuthEmailVerify\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n Confirming your email address...\n \n \n
\n \n
\n \n \n Continue\n \n
\n \n \n \n \n \n \n Common / Auth / VerifyToken\n \n \n Loading\n \n
\n \n \n \n Story Source\n \n \n
\n \n \n \n <\n AuthEmailVerify\n \n \n \n \n \n hasVerified\n \n \n =\n \n {\n \n false\n \n }\n \n \n \n \n \n \n errorMessage\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n onAuthenticationContinue\n \n \n =\n \n {\n \n onAuthenticationContinue\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/Account/LoadUser.tsx",
"content": "import * as React from \"react\";\nimport { getApolloSessionKey, getCurrentUserQuery } from \"@joincivil/utils\";\nimport { Query } from \"react-apollo\";\nimport useStateWithLocalStorage from \"../hooks/useStateWithLocalStorage\";\n\nexport interface LoadUserChildrenProps {\n user: any;\n loading: boolean;\n refetch?: any;\n}\n\nexport interface LoadUserProps {\n children(props: LoadUserChildrenProps): any;\n}\n\nexport const LoadUser: React.FunctionComponent\n \n \"\n AuthEmailVerify\n \" Component\n \n \n No propTypes defined!\n \n
\n \n
\n
\n
\n
\n
\n
\n \n \n \n Can we switch to a different browser?\n \n \n 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.\n \n \n In the meantime, please…\n \n \n \n \n
\n \n \n \n \n Common / Browser Compatible Message\n \n \n Browser Compatible\n \n
\n \n \n \n Story Source\n \n \n
\n \n \n \n <\n StoryRouter\n \n \n \n \n \n story\n \n \n =\n \n {\n \n anonymous\n \n }\n \n \n \n \n \n \n links\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n routerProps\n \n \n =\n \n {\n \n null\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/BrowserCompatible/index.ts",
"content": "export * from \"./BrowserCompatible\";\n"
},
{
"path": "packages/components/src/Button.stories.tsx",
"content": "import { storiesOf } from \"@storybook/react\";\nimport StoryRouter from \"storybook-react-router\";\nimport * as React from \"react\";\nimport styled from \"styled-components\";\nimport { Button, SecondaryButton, DarkButton, InvertedButton, buttonSizes } from \"./Button\";\nimport { MetaMaskLogoButton } from \"./MetaMaskLogoButton\";\nimport { CardTransactionButton } from \"./CardTransactionButton\";\n\nconst StyledDiv = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 400px;\n`;\n\nconst Container: React.FunctionComponent = ({ children }) => \n \n \"\n StoryRouter\n \" Component\n \n \n \n \n \n property\n \n \n propType\n \n \n required\n \n \n default\n \n \n description\n \n \n \n \n \n \n story\n \n \n \n other\n \n \n \n yes\n \n \n -\n \n \n \n \n links\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n routerProps\n \n \n \n other\n \n \n \n -\n \n \n -\n \n \n \n \n
\n \n \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
This is a Transaction Button styled as a Card, and can contain any markup
\n\n \n \n \n I am a basic clickable card.\n
\n \n \n \n \n \n \n Pattern Library / Cards\n \n \n Clickable Card\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n CardClickable\n >\n \n
\n \n \n \n \n I am a basic clickable card.\n \n
\n \n \n \n <\n Container\n \n \n \n >\n \n
\n \n \n \n <\n CardClickable\n \n \n \n \n \n onClick\n \n \n =\n \n {\n \n handleClick\n \n }\n \n \n \n \n \n \n >\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/Card/index.ts",
"content": "export * from \"./Card\";\n"
},
{
"path": "packages/components/src/CardTransactionButton.tsx",
"content": "import * as React from \"react\";\nimport { CardClickable } from \"./Card\";\nimport { TransactionButtonInnerProps } from \"./TransactionButton\";\nimport styled from \"styled-components\";\n\nexport const CardTransactionButton = (props: TransactionButtonInnerProps): JSX.Element => {\n return (\n \n \n \"\n CardClickable\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n Container\n \" Component\n \n \n No propTypes defined!\n \n
\n {children}
\n \n \n \n
\n \n \n Challenge Results\n \n \n The Civil Community \n \n voted to accept this newsroom\n \n on the grounds that it adheres to the Civil Constitution.\n \n \n \n \n \n \n \n
\n \n \n \n \n Registry\n \n \n Challenge Results Chart\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n Container\n >\n \n
\n \n \n \n \n \n <\n ChallengeResults\n \n \n \n \n
\n \n \n\n totalVotes\n \n \n =\n \n \"\n \n 100000\n \n \"\n \n \n \n \n \n
\n \n \n\n votesFor\n \n \n =\n \n \"\n \n 73000\n \n \"\n \n \n \n \n \n
\n \n \n\n votesAgainst\n \n \n =\n \n \"\n \n 27000\n \n \"\n \n \n \n \n \n
\n \n \n\n percentFor\n \n \n =\n \n \"\n \n 73\n \n \"\n \n \n \n \n \n
\n \n \n\n percentAgainst\n \n \n =\n \n \"\n \n 27\n \n \"\n \n \n \n \n \n
\n \n \n\n didChallengeSucceed\n \n \n =\n \n {\n \n false\n \n }\n \n \n
\n \n \n\n />\n \n
\n \n \n \n <\n Container\n \n \n \n >\n \n
\n \n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/ChallengeResultsChart/constants.ts",
"content": "import { colors } from \"../styleConstants\";\n\nimport { VoteTypeColorProps } from \"./types\";\n\nexport enum CHALLENGE_RESULTS_VOTE_TYPES {\n REMAIN = \"REMAIN\",\n REMOVE = \"REMOVE\",\n OVERTURN = \"OVERTURN\",\n UPHOLD = \"UPHOLD\",\n}\n\nexport const voteColor: VoteTypeColorProps = {\n [CHALLENGE_RESULTS_VOTE_TYPES.REMAIN]: colors.accent.CIVIL_TEAL,\n [CHALLENGE_RESULTS_VOTE_TYPES.REMOVE]: colors.accent.CIVIL_RED,\n [CHALLENGE_RESULTS_VOTE_TYPES.OVERTURN]: colors.accent.CIVIL_ORANGE,\n [CHALLENGE_RESULTS_VOTE_TYPES.UPHOLD]: colors.accent.CIVIL_GREEN,\n};\n"
},
{
"path": "packages/components/src/ChallengeResultsChart/index.ts",
"content": "export * from \"./ChallengeResults\";\nexport * from \"./VoteTypeSummaryRow\";\nexport * from \"./UserVotingSummary\";\nexport * from \"./types\";\nexport * from \"./constants\";\n"
},
{
"path": "packages/components/src/ChallengeResultsChart/styledComponents.tsx",
"content": "import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { colors } from \"../styleConstants\";\nimport { CHALLENGE_RESULTS_VOTE_TYPES } from \"./constants\";\nimport { BreakdownBarPercentageProps, VotesPerTokenVoteProps } from \"./types\";\n\nexport const VoteTypeSummaryContainer = styled.div`\n box-shadow: inset 0 1px 0 0 ${colors.accent.CIVIL_GRAY_4};\n font-size: 14px;\n line-height: 17px;\n padding: 14px 0 10px;\n`;\n\nexport const VoteTypeSummary = styled.div`\n display: flex;\n color: ${colors.accent.CIVIL_GRAY_0};\n`;\n\nexport const BreakdownBarContainer = styled.div`\n display: flex;\n width: 75%;\n`;\n\nexport const BreakdownBarPercentageLabel = styled.div`\n font-weight: bold;\n width: 60px;\n`;\n\nexport const BreakdownBarTotalContainer = styled.div`\n margin-top: 4px;\n width: 100%;\n`;\n\nexport const BreakdownBarTotal = styled.div`\n background-color: ${colors.accent.CIVIL_GRAY_4};\n box-sizing: border-box;\n height: 8px;\n position: relative;\n width: 100%;\n`;\n\nexport const BreakdownBarPercentage = styled.div\n \n \"\n ChallengeResults\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n Container\n \" Component\n \n \n No propTypes defined!\n \n
\n Some Content
\nSome Content
\nSome Content
\nSome Content
\nSome Content
\n\n \n {header}{\" \"}\n {this.props.ArrowComponent ? (\n \n (this.collapseArea = el)} height={this.state.height} open={this.state.open}>\n {this.props.children}\n \n
\n );\n }\n private open = (): void => {\n if (!this.props.disabled) {\n if (this.state.open) {\n this.setState({ height: this.collapseArea!.clientHeight });\n }\n setImmediate(() => {\n this.setState({ open: !this.state.open });\n });\n }\n };\n}\n"
},
{
"path": "packages/components/src/Comments/CommentsCount.tsx",
"content": "import * as React from \"react\";\nimport { CommentsCountStyled, CommentsLabel } from \"./CommentsStyledComponents\";\n\nexport interface CommentsCountProps {\n numComments: number;\n}\n\nexport class CommentsCount extends React.Component\n {contributor.payerChannel && contributor.payerChannel.handle} \n {\"$\" + contributor.usdEquivalent.toFixed(2)} \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n Common / Contributors\n \n \n Contributor Count\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n styled.div\n >\n \n
\n \n \n \n \n \n <\n ContributorCount\n \n \n \n \n \n displayedContributors\n \n \n =\n \n {\n \n [\n \n \n {\n \n \n usdEquivalent\n \n \n : \n \n 2.5\n \n ,\n \n \n payerChannel\n \n \n : \n \n {\n \n \n handle\n \n \n : \n \n 'violetnight13'\n \n ,\n \n \n tiny72AvatarDataUrl\n \n \n : \n \n 'https://picsum.photos/50'\n \n }\n \n }\n \n \n ,\n \n \n {\n \n \n usdEquivalent\n \n \n : \n \n 3\n \n ,\n \n \n payerChannel\n \n \n : \n \n {\n \n \n handle\n \n \n : \n \n 'CaryRay'\n \n ,\n \n \n tiny72AvatarDataUrl\n \n \n : \n \n 'https://picsum.photos/50'\n \n }\n \n }\n \n \n ,\n \n \n {\n \n \n usdEquivalent\n \n \n : \n \n 5\n \n ,\n \n \n payerChannel\n \n \n : \n \n {\n \n \n handle\n \n \n : \n \n 'ronburgundy'\n \n ,\n \n \n tiny72AvatarDataUrl\n \n \n : \n \n 'https://picsum.photos/50'\n \n }\n \n }\n \n \n ]\n \n }\n \n \n \n \n \n \n totalContributors\n \n \n =\n \n {\n \n 30\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n \n <\n styled.div\n \n \n \n >\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n\nexports[`Storyshots Common / Contributors Contributor Default Avatar 1`] = `\n\n \n \"\n ContributorCount\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n styled.div\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n \n v\n
\n \n \n \n \n \n \n Common / Contributors\n \n \n Contributor Default Avatar\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n styled.div\n >\n \n
\n \n \n \n \n \n <\n ContributorsDefaultAvatar\n \n \n \n \n \n contributor\n \n \n =\n \n {\n \n {\n \n \n usdEquivalent\n \n \n : \n \n 2.5\n \n ,\n \n \n payerChannel\n \n \n : \n \n {\n \n \n handle\n \n \n : \n \n 'violetnight13'\n \n ,\n \n \n tiny72AvatarDataUrl\n \n \n : \n \n 'https://picsum.photos/50'\n \n }\n \n }\n \n }\n \n \n \n \n \n \n index\n \n \n =\n \n {\n \n 1\n \n }\n \n \n \n \n \n \n size\n \n \n =\n \n {\n \n 17\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n \n <\n styled.div\n \n \n \n >\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n\nexports[`Storyshots Common / Contributors Contributors 1`] = `\n\n \n \"\n ContributorsDefaultAvatar\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n styled.div\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n \n \n Recent Boosters\n \n \n \n $2.50\n
\n \n \n \n \n violetnight13\n
\n \n \n CaryRay\n
\n \n \n ronburgundy\n
\n \n \n \n \n Common / Contributors\n \n \n Contributors\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n styled.div\n >\n \n
\n \n \n \n \n \n <\n Contributors\n \n \n \n \n \n sortedContributors\n \n \n =\n \n {\n \n [\n \n \n {\n \n \n usdEquivalent\n \n \n : \n \n 2.5\n \n ,\n \n \n payerChannel\n \n \n : \n \n {\n \n \n handle\n \n \n : \n \n 'violetnight13'\n \n ,\n \n \n tiny72AvatarDataUrl\n \n \n : \n \n 'https://picsum.photos/50'\n \n }\n \n }\n \n \n ,\n \n \n {\n \n \n usdEquivalent\n \n \n : \n \n 3\n \n ,\n \n \n payerChannel\n \n \n : \n \n {\n \n \n handle\n \n \n : \n \n 'CaryRay'\n \n ,\n \n \n tiny72AvatarDataUrl\n \n \n : \n \n 'https://picsum.photos/50'\n \n }\n \n }\n \n \n ,\n \n \n {\n \n \n usdEquivalent\n \n \n : \n \n 5\n \n ,\n \n \n payerChannel\n \n \n : \n \n {\n \n \n handle\n \n \n : \n \n 'ronburgundy'\n \n ,\n \n \n tiny72AvatarDataUrl\n \n \n : \n \n 'https://picsum.photos/50'\n \n }\n \n }\n \n \n ]\n \n }\n \n \n \n \n \n \n />\n \n
\n \n \n \n <\n styled.div\n \n \n \n >\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/Contributors/index.ts",
"content": "export * from \"./Contributors\";\nexport * from \"./ContributorCount\";\nexport * from \"./ContributorsStyledComponents\";\nexport * from \"./types\";\n"
},
{
"path": "packages/components/src/Contributors/types.ts",
"content": "export interface ContributorData {\n usdEquivalent: number;\n payerChannel: {\n handle: string;\n tiny72AvatarDataUrl: string;\n };\n}\n"
},
{
"path": "packages/components/src/CopyToClipboard/CopyStyledComponents.tsx",
"content": "import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { colors, fonts } from \"../styleConstants\";\nimport { InvertedButton } from \"../Button\";\n\nexport const CopyBtn = styled(InvertedButton)`\n background-color: transparent;\n border: none;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.3px;\n padding: 0;\n text-transform: none;\n\n &:hover,\n &:focus {\n background-color: transparent;\n color: ${colors.accent.CIVIL_BLUE};\n text-decoration: underline;\n }\n`;\n\nexport const CopyURLSuccess = styled.div`\n color: ${colors.accent.CIVIL_GRAY_1};\n font-family: ${fonts.SANS_SERIF};\n font-size: 13px;\n font-weight: bold;\n line-height: 24px;\n text-align: center;\n\n svg {\n vertical-align: sub;\n }\n`;\n"
},
{
"path": "packages/components/src/CopyToClipboard/CopyURL.stories.tsx",
"content": "import { storiesOf } from \"@storybook/react\";\nimport * as React from \"react\";\nimport { CopyURL } from \"./CopyURL\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div`\n width: 300px;\n`;\n\nstoriesOf(\"Common / Copy\", module).add(\"Copy URL\", () => {\n return (\n \n \n \"\n Contributors\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n styled.div\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n \n Copy the URL to open in your own wallet\n \n
\n \n \n \n \n \n Common / Copy\n \n \n Copy URL\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n styled.div\n >\n \n
\n \n \n \n \n \n <\n CopyURL\n \n \n \n \n \n copyText\n \n \n =\n \n \"\n \n Copy the URL to open in your own wallet\n \n \"\n \n \n \n \n \n \n />\n \n
\n \n \n \n <\n styled.div\n \n \n \n >\n \n
\n \n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/CopyToClipboard/index.ts",
"content": "export * from \"./CopyURL\";\n"
},
{
"path": "packages/components/src/CurrencyConverter/CurrencyConverted.tsx",
"content": "import * as React from \"react\";\nimport { CurrencyConvertedBox, CurrencyCode, CurrencyConvertedPrice } from \"./CurrencyConverterStyledComponents\";\n\nexport interface CurrencyConvertedProps {\n currencyCode?: string | JSX.Element;\n currentPrice?: number;\n}\n\nexport interface CurrencyConvertedStates {\n convertedCurrency?: number;\n}\n\nexport class CurrencyConverted extends React.Component\n \n \"\n CopyURL\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n styled.div\n \" Component\n \n \n No propTypes defined!\n \n
\n (exchange rate is 0.5x)
\n (exchange rate is 2x)
\n You don’t have enough ETH in your wallet.
\n{props.totalPrice} CVL
\napprox. @ ${props.pricePerCvl} per CVL
\n \n);\n" }, { "path": "packages/components/src/CurrencyConverter/UsdEthConverter.tsx", "content": "import * as React from \"react\";\nimport gql from \"graphql-tag\";\nimport { Query } from \"react-apollo\";\nimport { CurrencyConverter } from \"./CurrencyConverter\";\n\nconst ethPriceQuery = gql`\n query {\n storefrontEthPrice\n }\n`;\n\nexport interface UsdEthConverterProps {\n fromValue?: string;\n displayErrorMsg?: boolean;\n className?: string;\n onNotEnoughEthError?(error: boolean): void;\n onConversion(usdValue: number, ethValue: number): void;\n}\nexport const UsdEthConverter = (props: UsdEthConverterProps) => {\n return (\n\n \n \n \n \n \n Enter CVL Amount\n \n \n \n \n
\n \n (exchange rate is 2x)\n
\n \n \n \n \n Common / Currency / Currency Converter\n \n \n CVL to ETH\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n div\n >\n \n
\n \n \n \n \n (exchange rate is 2x)\n \n
\n \n \n \n <\n StorybookProvider\n \n \n \n >\n \n
\n \n \n \n <\n styled.div\n \n \n \n >\n \n
\n \n \n \n <\n div\n \n \n \n >\n \n
\n \n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n Prop Types\n \n
\n \n \n \n\n`;\n\nexports[`Storyshots Common / Currency / Currency Converter USD to ETH 1`] = `\n\n \n \"\n CurrencyConverter\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n StorybookProvider\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n styled.div\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n \n \n \n Enter USD Amount\n \n \n \n \n
\n \n (exchange rate is 0.5x)\n
\n \n \n \n \n Common / Currency / Currency Converter\n \n \n USD to ETH\n \n
\n \n \n \n Story Source\n \n \n \n \n </\n div\n >\n \n
\n \n \n \n \n (exchange rate is 0.5x)\n \n
\n \n \n \n <\n StorybookProvider\n \n \n \n >\n \n
\n \n \n \n <\n styled.div\n \n \n \n >\n \n
\n \n \n \n <\n div\n \n \n \n >\n \n
\n \n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n Prop Types\n \n
\n \n \n \n\n`;\n"
},
{
"path": "packages/components/src/CurrencyConverter/index.ts",
"content": "export * from \"./CurrencyConverted\";\nexport * from \"./CurrencyConverterStyledComponents\";\nexport * from \"./UsdEthCvlConverter\";\nexport * from \"./UsdEthConverter\";\n"
},
{
"path": "packages/components/src/DAppMessageContent/ErrorLoadingData.tsx",
"content": "import * as React from \"react\";\n\nimport { OctopusErrorIcon } from \"../icons\";\n\nimport { StyledErrorIconContainer, StyledLargeModalText } from \"./styledComponents\";\n\nexport interface ErrorLoadingDataProps {\n toggleGraphQL?(): void | Promise\n \n \"\n CurrencyConverter\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n StorybookProvider\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \"\n styled.div\n \" Component\n \n \n No propTypes defined!\n \n
\n \n \n \n\n \n Oops. {props.children || defaultCopy}\n \n
\n );\n};\n"
},
{
"path": "packages/components/src/DAppMessageContent/InsufficientCVL.tsx",
"content": "import * as React from \"react\";\nimport { InvertedButton, buttonSizes } from \"../Button\";\nimport { WarningIcon } from \"../icons\";\nimport {\n StyledErrorMessage,\n StyledBuyCVLButtonContainer,\n StyledMessageIconContainer,\n StyledMessageWithIconContainer,\n} from \"./styledComponents\";\nimport { InsufficientCVLProps, BuyCVLButtonProps } from \"./types\";\nimport {\n InsufficientCVLForChallengeText,\n InsufficientCVLForAppealText,\n InsufficientCVLForAppealChallengeText,\n} from \"./textComponents\";\n\nexport const InsufficientCVL: React.FunctionComponent