diff --git a/src/features/rewards/grantError/__snapshots__/spec.tsx.snap b/src/features/rewards/grantError/__snapshots__/spec.tsx.snap
new file mode 100644
index 000000000..331f6487f
--- /dev/null
+++ b/src/features/rewards/grantError/__snapshots__/spec.tsx.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grant error tests basic tests matches the snapshot 1`] = `
+.c4 {
+ --button-main-color: #FB542B;
+ --button-main-color-hover: #F43405;
+ --button-main-color-active: #FDBBAA;
+ --button-state-color: var(--button-main-color);
+ --icon-size: 18px;
+ --icon-spacing: 6px;
+ --webkit-appearance: none;
+ box-sizing: border-box;
+ background: none;
+ border: none;
+ outline: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row-reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-family: Poppins,sans-serif;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-size: 14px;
+ border-radius: 28px;
+ width: 100%;
+ min-width: 235px;
+ padding: 19px 15px;
+}
+
+.c4:hover:enabled {
+ --button-state-color: var(--button-main-color-hover);
+}
+
+.c4:active:enabled {
+ --button-state-color: var(--button-main-color-active);
+}
+
+.c3 {
+ color: #fff;
+ background: var(--button-state-color);
+}
+
+.c0 {
+ text-align: center;
+ width: 100%;
+ padding: 20px 10px;
+ font-family: Poppins,sans-serif;
+}
+
+.c1 {
+ font-family: Muli,sans-serif;
+ font-size: 14px;
+ line-height: 1.29;
+ color: #838391;
+ margin: 44px 0 32px;
+}
+
+.c2 {
+ display: block;
+ margin: 0 auto;
+}
+
+
+`;
diff --git a/src/features/rewards/grantError/index.tsx b/src/features/rewards/grantError/index.tsx
new file mode 100644
index 000000000..41e320c5d
--- /dev/null
+++ b/src/features/rewards/grantError/index.tsx
@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+import Button from '../../../components/buttonsIndicators/button'
+import { StyledWrapper, StyledText, StyledButton } from './style'
+
+export interface Props {
+ text?: string
+ buttonText: string
+ onClick: () => void
+}
+
+export default class GrantError extends React.PureComponent {
+ render () {
+ const { id, text, buttonText, onClick } = this.props
+
+ return (
+
+
+ {text}
+
+
+
+
+
+ )
+ }
+}
diff --git a/src/features/rewards/grantError/spec.tsx b/src/features/rewards/grantError/spec.tsx
new file mode 100644
index 000000000..7261ec190
--- /dev/null
+++ b/src/features/rewards/grantError/spec.tsx
@@ -0,0 +1,24 @@
+/* global jest, expect, describe, it, afterEach */
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { create } from 'react-test-renderer'
+import GrantError from './index'
+import { TestThemeProvider } from '../../../theme'
+
+describe('Grant error tests', () => {
+ const baseComponent = (props?: object) =>
+
+ describe('basic tests', () => {
+ it('matches the snapshot', () => {
+ const component = baseComponent()
+ const tree = create(component).toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+
+ it('renders the component', () => {
+ const wrapper = shallow(baseComponent())
+ const assertion = wrapper.find('#error').length
+ expect(assertion).toBe(1)
+ })
+ })
+})
diff --git a/src/features/rewards/grantError/style.ts b/src/features/rewards/grantError/style.ts
new file mode 100644
index 000000000..73d4997e3
--- /dev/null
+++ b/src/features/rewards/grantError/style.ts
@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License. v. 2.0. If a copy of the MPL was not distributed with this file.
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'styled-components'
+
+export const StyledWrapper = styled<{}, 'div'>('div')`
+ text-align: center;
+ width: 100%;
+ padding: 20px 10px;
+ font-family: Poppins, sans-serif;
+`
+
+export const StyledText = styled<{}, 'div'>('div')`
+ font-family: Muli, sans-serif;
+ font-size: 14px;
+ line-height: 1.29;
+ color: #838391;
+ margin: 44px 0 32px;
+`
+
+export const StyledButton = styled<{}, 'div'>('div')`
+ display: block;
+ margin: 0 auto;
+`
diff --git a/src/features/rewards/index.ts b/src/features/rewards/index.ts
index 71e448477..f13241263 100644
--- a/src/features/rewards/index.ts
+++ b/src/features/rewards/index.ts
@@ -11,6 +11,7 @@ import DonationOverlay from './donationOverlay'
import GrantCaptcha from './grantCaptcha'
import GrantClaim from './grantClaim'
import GrantComplete from './grantComplete'
+import GrantError from './grantError'
import GrantWrapper from './grantWrapper'
import InfoCard from './infoCard'
import List from './list'
@@ -51,6 +52,7 @@ export {
GrantCaptcha,
GrantClaim,
GrantComplete,
+ GrantError,
GrantWrapper,
InfoCard,
List,
diff --git a/stories/features/rewards/grant.tsx b/stories/features/rewards/grant.tsx
index fcb0658ea..b7ed2701f 100644
--- a/stories/features/rewards/grant.tsx
+++ b/stories/features/rewards/grant.tsx
@@ -9,6 +9,7 @@ import { withKnobs, text } from '@storybook/addon-knobs'
import centered from '@storybook/addon-centered/dist'
// Components
import GrantClaim from '../../../src/features/rewards/grantClaim'
+import GrantError from '../../../src/features/rewards/grantError'
import GrantWrapper from '../../../src/features/rewards/grantWrapper'
import GrantCaptcha from '../../../src/features/rewards/grantCaptcha'
import GrantComplete from '../../../src/features/rewards/grantComplete'
@@ -64,3 +65,14 @@ storiesOf('Feature Components/Rewards/Grant', module)
)
})
+ .add('Grant Error',() => {
+ return (
+
+
+
+ )
+ })
diff --git a/stories/features/rewards/other.tsx b/stories/features/rewards/other.tsx
index fbf08c89c..a0055881e 100644
--- a/stories/features/rewards/other.tsx
+++ b/stories/features/rewards/other.tsx
@@ -211,6 +211,7 @@ storiesOf('Feature Components/Rewards/Other/Desktop', module)