{
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
onChange={onChange}
+ value={value}
>
{options &&
- options.map((option: string, index: number) => (
-
- ))}
+ options
+ .sort((a, b) => a.localeCompare(b))
+ .map((option: string, index: number) => (
+
+ ))}
)
diff --git a/src/components/atoms/Form/InputGroup.module.scss b/client/src/components/atoms/Form/InputGroup.module.scss
similarity index 100%
rename from src/components/atoms/Form/InputGroup.module.scss
rename to client/src/components/atoms/Form/InputGroup.module.scss
diff --git a/src/components/atoms/Form/InputGroup.tsx b/client/src/components/atoms/Form/InputGroup.tsx
similarity index 100%
rename from src/components/atoms/Form/InputGroup.tsx
rename to client/src/components/atoms/Form/InputGroup.tsx
diff --git a/src/components/atoms/Form/Label.module.scss b/client/src/components/atoms/Form/Label.module.scss
similarity index 100%
rename from src/components/atoms/Form/Label.module.scss
rename to client/src/components/atoms/Form/Label.module.scss
diff --git a/src/components/atoms/Form/Label.tsx b/client/src/components/atoms/Form/Label.tsx
similarity index 100%
rename from src/components/atoms/Form/Label.tsx
rename to client/src/components/atoms/Form/Label.tsx
diff --git a/src/components/atoms/Form/Row.module.scss b/client/src/components/atoms/Form/Row.module.scss
similarity index 100%
rename from src/components/atoms/Form/Row.module.scss
rename to client/src/components/atoms/Form/Row.module.scss
diff --git a/src/components/atoms/Form/Row.tsx b/client/src/components/atoms/Form/Row.tsx
similarity index 100%
rename from src/components/atoms/Form/Row.tsx
rename to client/src/components/atoms/Form/Row.tsx
diff --git a/src/components/atoms/Spinner.module.scss b/client/src/components/atoms/Spinner.module.scss
similarity index 90%
rename from src/components/atoms/Spinner.module.scss
rename to client/src/components/atoms/Spinner.module.scss
index 78992c6..f26db14 100644
--- a/src/components/atoms/Spinner.module.scss
+++ b/client/src/components/atoms/Spinner.module.scss
@@ -3,6 +3,7 @@
.spinner {
position: relative;
text-align: center;
+ margin-top: $spacer * $line-height;
margin-bottom: $spacer / 2;
&:before {
@@ -13,7 +14,7 @@
left: 50%;
width: 20px;
height: 20px;
- margin-top: -10px;
+ margin-top: -20px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid $brand-purple;
@@ -24,7 +25,6 @@
.spinnerMessage {
color: $brand-grey-light;
- margin-top: $spacer / 2;
}
@keyframes spinner {
diff --git a/src/components/atoms/Spinner.tsx b/client/src/components/atoms/Spinner.tsx
similarity index 100%
rename from src/components/atoms/Spinner.tsx
rename to client/src/components/atoms/Spinner.tsx
diff --git a/client/src/components/molecules/AccountStatus/Indicator.module.scss b/client/src/components/molecules/AccountStatus/Indicator.module.scss
new file mode 100644
index 0000000..7d82117
--- /dev/null
+++ b/client/src/components/molecules/AccountStatus/Indicator.module.scss
@@ -0,0 +1,33 @@
+@import '../../../styles/variables';
+
+.status {
+ display: inline-block;
+ position: relative;
+ cursor: help;
+}
+
+// default: red square
+.statusIndicator {
+ width: $font-size-small;
+ height: $font-size-small;
+ display: block;
+ background: $red;
+}
+
+// yellow triangle
+.statusIndicatorCloseEnough {
+ composes: statusIndicator;
+ background: none;
+ width: 0;
+ height: 0;
+ border-left: $font-size-small / 1.7 solid transparent;
+ border-right: $font-size-small / 1.7 solid transparent;
+ border-bottom: $font-size-small solid $yellow;
+}
+
+// green circle
+.statusIndicatorActive {
+ composes: statusIndicator;
+ border-radius: 50%;
+ background: $green;
+}
diff --git a/client/src/components/molecules/AccountStatus/Indicator.tsx b/client/src/components/molecules/AccountStatus/Indicator.tsx
new file mode 100644
index 0000000..8deeacb
--- /dev/null
+++ b/client/src/components/molecules/AccountStatus/Indicator.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import cx from 'classnames'
+import { User } from '../../../context/User'
+import styles from './Indicator.module.scss'
+
+const Indicator = ({
+ className,
+ togglePopover,
+ forwardedRef
+}: {
+ className?: string
+ togglePopover: () => void
+ forwardedRef: (ref: HTMLElement | null) => void
+}) => (
+
+
+ {states =>
+ !states.isWeb3 ? (
+
+ ) : !states.isLogged ? (
+
+ ) : states.isLogged ? (
+
+ ) : null
+ }
+
+
+)
+
+export default Indicator
diff --git a/client/src/components/molecules/AccountStatus/Popover.module.scss b/client/src/components/molecules/AccountStatus/Popover.module.scss
new file mode 100644
index 0000000..0860ed9
--- /dev/null
+++ b/client/src/components/molecules/AccountStatus/Popover.module.scss
@@ -0,0 +1,62 @@
+@import '../../../styles/variables';
+
+$popoverWidth: 18rem;
+
+.popover {
+ position: relative;
+ width: $popoverWidth;
+ padding: $spacer / 2;
+ background: $brand-black;
+ border-radius: .1rem;
+ border: .1rem solid $brand-grey-light;
+ box-shadow: 0 6px 16px 0 rgba($brand-black, .3);
+ color: $brand-grey-light;
+ font-size: $font-size-small;
+ animation: showPopup .2s ease-in forwards;
+}
+
+@keyframes showPopup {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.popoverInfoline {
+ border-bottom: .05rem solid $brand-grey;
+ padding: $spacer / 3 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ &:last-child {
+ padding-bottom: 0;
+ border-bottom: 0;
+ }
+
+ button {
+ font-size: $font-size-small;
+ }
+}
+
+.address {
+ width: 15rem;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.balance {
+ font-size: $font-size-small;
+ margin-left: $spacer / 2;
+ white-space: nowrap;
+
+ &:first-child {
+ margin-left: 0;
+ }
+}
diff --git a/client/src/components/molecules/AccountStatus/Popover.tsx b/client/src/components/molecules/AccountStatus/Popover.tsx
new file mode 100644
index 0000000..e8c3541
--- /dev/null
+++ b/client/src/components/molecules/AccountStatus/Popover.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { User } from '../../../context/User'
+import styles from './Popover.module.scss'
+
+const Popover = ({
+ forwardedRef,
+ style
+}: {
+ forwardedRef: (ref: HTMLElement | null) => void
+ style: React.CSSProperties
+}) => (
+
+
+ {states =>
+ states.account &&
+ states.balance && (
+
+
+
+ {(states.balance.eth / 1e18)
+ .toFixed(3)
+ .slice(0, -1)}
+ {' '}
+ ETH
+
+
+ {states.balance.ocn} OCEAN
+
+
+ )
+ }
+
+
+
+
+ {states =>
+ states.account ? (
+
+ {states.account}
+
+ ) : (
+ No account selected
+ )
+ }
+
+
+
+
+
+ {states => states.network && states.network}
+
+
+
+
No Web3 Browser. For
+ publishing an asset you need to{' '}
+
+ setup MetaMask
+ {' '}
+ or use any other Web3-capable plugin or browser.
+
+
Account locked. For
+ publishing an asset you need to unlock your Web3 account.
+
+
+
Connected with
+ account
+
+ {`${account && account.substring(0, 20)}...`}
+
+
+ {this.state.isLoading ? (
+
+ ) : this.state.error ? (
+
+ {this.state.error}{' '}
+
+
+ ) : this.state.success ? (
+
{this.state.success}
+ ) : (
+
+ )}
+
+
+ You can only request Ether once every 24 hours for your address.
+
+
+ {this.state.results.map((asset, index) => (
+
+ ))}
+
No invoices yet
+ )
+
+ public render() {
+ return (
+
+ {this.renderResults()}
+
+ )
+ }
+}
+
+Invoices.contextType = User
diff --git a/src/routes/NotFound.tsx b/client/src/routes/NotFound.tsx
similarity index 100%
rename from src/routes/NotFound.tsx
rename to client/src/routes/NotFound.tsx
diff --git a/src/routes/Publish/Files/Item.module.scss b/client/src/routes/Publish/Files/Item.module.scss
similarity index 83%
rename from src/routes/Publish/Files/Item.module.scss
rename to client/src/routes/Publish/Files/Item.module.scss
index 59e2f81..08fdc7b 100644
--- a/src/routes/Publish/Files/Item.module.scss
+++ b/client/src/routes/Publish/Files/Item.module.scss
@@ -32,3 +32,13 @@
opacity: .7;
}
}
+
+.details {
+ font-size: $font-size-mini;
+ font-size: .85rem;
+ color: #6e7e93;
+
+ span {
+ padding-right: .5rem;
+ }
+}
diff --git a/src/routes/Publish/Files/Item.tsx b/client/src/routes/Publish/Files/Item.tsx
similarity index 52%
rename from src/routes/Publish/Files/Item.tsx
rename to client/src/routes/Publish/Files/Item.tsx
index 995569c..2fb57da 100644
--- a/src/routes/Publish/Files/Item.tsx
+++ b/client/src/routes/Publish/Files/Item.tsx
@@ -1,9 +1,18 @@
import React from 'react'
import styles from './Item.module.scss'
+import filesize from 'filesize'
const Item = ({ item, removeItem }: { item: any; removeItem: any }) => (
{item.url}
+
+ url: {item.found ? 'confirmed' : 'unconfirmed'}
+
+ size:
+ {item.found && item.size ? filesize(item.size) : 'unknown'}
+
+ type: {item.found && item.type ? item.type : 'unknown'}
+