diff --git a/frontend/client/components/Header/styled.tsx b/frontend/client/components/Header/styled.ts similarity index 96% rename from frontend/client/components/Header/styled.tsx rename to frontend/client/components/Header/styled.ts index 68e438a2..24d6a09b 100644 --- a/frontend/client/components/Header/styled.tsx +++ b/frontend/client/components/Header/styled.ts @@ -7,7 +7,7 @@ export const Placeholder = styled.div` height: ${headerHeight}; `; -export const Header = styled.header<{ isTransparent?: boolean }>` +export const Header = styled<{ isTransparent: boolean }, 'header'>('header')` position: ${(p: any) => (p.isTransparent ? 'absolute' : 'relative')}; top: 0; left: 0; diff --git a/frontend/client/components/Home/styled.tsx b/frontend/client/components/Home/styled.ts similarity index 95% rename from frontend/client/components/Home/styled.tsx rename to frontend/client/components/Home/styled.ts index e40926ef..47b0fb93 100644 --- a/frontend/client/components/Home/styled.tsx +++ b/frontend/client/components/Home/styled.ts @@ -41,17 +41,17 @@ export const HeroButtons = styled.div` } `; -export const HeroButton = styled.a<{ isPrimary?: boolean }>` +export const HeroButton = styled<{ isPrimary?: boolean }, 'a'>('a')` height: 3.6rem; line-height: 3.6rem; width: 16rem; padding: 0; margin: 0 10px; - background: ${(p: any) => + background: ${p => p.isPrimary ? 'linear-gradient(-180deg, #3498DB 0%, #2C8ACA 100%)' : 'linear-gradient(-180deg, #FFFFFF 0%, #FAFAFA 98%)'}; - color: ${(p: any) => (p.isPrimary ? '#FFF' : '#4C4C4C')}; + color: ${p => (p.isPrimary ? '#FFF' : '#4C4C4C')}; text-align: center; font-size: 1.4rem; border-radius: 4px; @@ -61,7 +61,7 @@ export const HeroButton = styled.a<{ isPrimary?: boolean }>` &:hover, &:focus { transform: translateY(-2px); - color: ${(p: any) => (p.isPrimary ? '#FFF' : '#4C4C4C')}; + color: ${p => (p.isPrimary ? '#FFF' : '#4C4C4C')}; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); } diff --git a/frontend/client/components/NewsletterForm/styled.tsx b/frontend/client/components/NewsletterForm/styled.tsx index dc27153b..7b2c1c0f 100644 --- a/frontend/client/components/NewsletterForm/styled.tsx +++ b/frontend/client/components/NewsletterForm/styled.tsx @@ -16,7 +16,7 @@ export const Form = styled.form` } `; -export const Input = styled.input<{ isSuccess: boolean }>` +export const Input = styled<{ isSuccess?: boolean }, 'input'>('input')` display: block; height: ${inputHeight}; width: 100%; @@ -60,7 +60,9 @@ export const Input = styled.input<{ isSuccess: boolean }>` } `; -export const Button = styled.button<{ isLoading: boolean; isSuccess: boolean }>` +export const Button = styled<{ isLoading?: boolean; isSuccess?: boolean }, 'button'>( + 'button', +)` display: block; position: absolute; top: 50%; diff --git a/frontend/client/components/Proposal/CampaignBlock/styled.ts b/frontend/client/components/Proposal/CampaignBlock/styled.ts index 7c3a4c33..c3818ffd 100644 --- a/frontend/client/components/Proposal/CampaignBlock/styled.ts +++ b/frontend/client/components/Proposal/CampaignBlock/styled.ts @@ -64,7 +64,7 @@ export const Button = styled.a` } `; -export const FundingOverMessage = styled.div<{ isSuccess: boolean }>` +export const FundingOverMessage = styled<{ isSuccess: boolean }, 'div'>('div')` display: flex; justify-content: center; align-items: center; diff --git a/frontend/client/components/Proposal/styled.tsx b/frontend/client/components/Proposal/styled.tsx index 55b4edc8..d2c86dce 100644 --- a/frontend/client/components/Proposal/styled.tsx +++ b/frontend/client/components/Proposal/styled.tsx @@ -110,7 +110,7 @@ export const SideBlock = styled.div` } `; -export const BodyText = styled.div<{ isExpanded: boolean }>` +export const BodyText = styled<{ isExpanded: boolean }, 'div'>('div')` max-height: ${(p: any) => (p.isExpanded ? 'none' : '27rem')}; overflow: hidden; font-size: 1.1rem; diff --git a/frontend/client/components/Proposals/ProposalCard/styled.ts b/frontend/client/components/Proposals/ProposalCard/styled.ts index 4c550a82..2dd8eef3 100644 --- a/frontend/client/components/Proposals/ProposalCard/styled.ts +++ b/frontend/client/components/Proposals/ProposalCard/styled.ts @@ -80,7 +80,7 @@ export const FundingRaised = styled.div` } `; -export const FundingPercent = styled.div<{ isFunded: boolean }>` +export const FundingPercent = styled<{ isFunded: boolean }, 'div'>('div')` color: ${p => (p.isFunded ? '#2ecc71' : 'inherit')}; font-size: 0.7rem; padding-left: 0.25rem; diff --git a/frontend/client/lib/getWeb3.ts b/frontend/client/lib/getWeb3.ts index 29bc43d1..a8f75eb7 100644 --- a/frontend/client/lib/getWeb3.ts +++ b/frontend/client/lib/getWeb3.ts @@ -4,10 +4,12 @@ interface Web3Window extends Window { web3?: Web3; } -const web3Window = window as Web3Window; - const resolveWeb3 = (resolve: (web3: Web3) => void, reject: (err: Error) => void) => { - let { web3 } = web3Window; + if (typeof window === 'undefined') { + return reject(new Error('No global window variable')); + } + + let { web3 } = window as Web3Window; const alreadyInjected = typeof web3 !== 'undefined'; // i.e. Mist/Metamask const localProvider = `http://localhost:8545`; diff --git a/frontend/client/lib/with-redux-store.tsx b/frontend/client/lib/with-redux-store.tsx index af860203..3773fbac 100644 --- a/frontend/client/lib/with-redux-store.tsx +++ b/frontend/client/lib/with-redux-store.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { AppState } from 'store/reducers'; import { configureStore } from 'store/configure'; -const anyWindow = window as any; const isServer = typeof window === 'undefined'; const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'; @@ -13,6 +12,7 @@ function getOrCreateStore(initialState?: Partial) { } // Create store if unavailable on the client and set it on the window object + const anyWindow = window as any; if (!anyWindow[__NEXT_REDUX_STORE__]) { anyWindow[__NEXT_REDUX_STORE__] = configureStore(initialState); }