15 files changed, 37 insertions, 54 deletions
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx
index 9adb565f9..1dff1b1fc 100644
--- a/packages/instant/src/components/animations/full_rotation.tsx
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -14,10 +14,7 @@ to {
 }
 `;
 
-export const FullRotation =
-    styled.div <
-    FullRotationProps >
-    `
+export const FullRotation = styled.div<FullRotationProps>`
     animation: ${rotatingKeyframes} 2s linear infinite;
     height: ${props => props.height};
     width: ${props => props.width};
diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index 8b3b294b7..4f8f25679 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -95,10 +95,7 @@ const animationForSize = (
     return animationSettingsForSize && mediaFn`${generatePositionAnimationCss(animationSettingsForSize)}`;
 };
 
-export const PositionAnimation =
-    styled.div <
-    PositionAnimationProps >
-    `
+export const PositionAnimation = styled.div<PositionAnimationProps>`
     && {
         ${props => props.zIndex && stylesForMedia<number>('z-index', props.zIndex)}
         ${props => defaultAnimation(props.positionSettings)}
diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx
index 0bef85389..d1b20f4c9 100644
--- a/packages/instant/src/components/css_reset.tsx
+++ b/packages/instant/src/components/css_reset.tsx
@@ -4,9 +4,9 @@ import { createGlobalStyle } from '../style/theme';
 export interface CSSResetProps {}
 
 /*
-* Derived from
-* https://github.com/jtrost/Complete-CSS-Reset
-*/
+ * Derived from
+ * https://github.com/jtrost/Complete-CSS-Reset
+ */
 export const CSSReset = createGlobalStyle`
     .${INJECTED_DIV_CLASS} {
         a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button,
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index b1644b871..287269af7 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -68,10 +68,7 @@ interface ProgressProps {
     animationSettings?: WidthAnimationSettings;
 }
 
-export const Progress =
-    styled.div <
-    ProgressProps >
-    `
+export const Progress = styled.div<ProgressProps>`
     && {
         background-color: ${props => props.theme[ColorOption.primaryColor]};
         border-radius: 6px;
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index 4f9f56f12..e4f2c5260 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -8,16 +8,15 @@ export interface CircleProps {
 }
 
 export const Circle = withTheme(
-    styled.div <
-        CircleProps >
-        `
-    && {
-        width: ${props => props.diameter}px;
-        height: ${props => props.diameter}px;
-        background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])};
-        border-radius: 50%;
-    }
-`,
+    styled.div<CircleProps>`
+        && {
+            width: ${props => props.diameter}px;
+            height: ${props => props.diameter}px;
+            background-color: ${props =>
+                props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white]};
+            border-radius: 50%;
+        }
+    `,
 );
 
 Circle.displayName = 'Circle';
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 58d7d5871..59b733f3e 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -51,10 +51,7 @@ const getBackgroundColor = (theme: any, backgroundColor?: ColorOption, rawBackgr
     return 'none';
 };
 
-export const Container =
-    styled.div <
-    ContainerProps >
-    `
+export const Container = styled.div<ContainerProps>`
     && {
         box-sizing: border-box;
         ${props => cssRuleIfExists(props, 'flex-grow')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 274c46b9e..145e654f1 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -14,10 +14,7 @@ export interface FlexProps {
     flexGrow?: number | string;
 }
 
-export const Flex =
-    styled.div <
-    FlexProps >
-    `
+export const Flex = styled.div<FlexProps>`
     && {
         display: ${props => (props.inline ? 'inline-flex' : 'flex')};
         flex-direction: ${props => props.direction};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 53c43ea0b..024e81b15 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -14,10 +14,7 @@ export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Input =
-    styled.input <
-    InputProps >
-    `
+export const Input = styled.input<InputProps>`
     && {
         all: initial;
         font-size: ${props => props.fontSize};
@@ -32,10 +29,11 @@ export const Input =
             color: ${props => props.theme[props.fontColor || 'white']} !important;
             opacity: 0.5 !important;
         }
-        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
             -webkit-appearance: none;
             margin: 0;
-          }
+        }
     }
 `;
 
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 0b5eaf299..0b1be6a65 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -12,10 +12,7 @@ export interface OverlayProps {
     showMaxWidth?: ScreenWidths;
 }
 
-export const Overlay =
-    styled.div <
-    OverlayProps >
-    `
+export const Overlay = styled.div<OverlayProps>`
     && {
         position: fixed;
         top: 0;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 282477758..ca120f3bd 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -31,10 +31,7 @@ export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...re
 };
 
 const opacityOnHoverAmount = 0.5;
-export const StyledText =
-    styled.div <
-    TextProps >
-    `
+export const StyledText = styled.div<TextProps>`
     && {
         font-family: 'Inter UI', sans-serif;
         font-style: ${props => props.fontStyle};
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 67558c84a..bfd9e9098 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -74,5 +74,6 @@ export const PROVIDER_TYPE_TO_NAME: { [key in ProviderType]: string } = {
     [ProviderType.CoinbaseWallet]: 'Coinbase Wallet',
     [ProviderType.Parity]: 'Parity',
     [ProviderType.TrustWallet]: 'Trust Wallet',
+    [ProviderType.Opera]: 'Opera Wallet',
     [ProviderType.Fallback]: 'Fallback',
 };
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 6da4558ef..57a2dbdc2 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -62,4 +62,7 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>, _ownProps: LatestErrorPr
     },
 });
 
-export const LatestError = connect(mapStateToProps, mapDispatchToProps)(LatestErrorComponent);
+export const LatestError = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(LatestErrorComponent);
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index ae672c919..f07a407da 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -183,6 +183,7 @@ export enum ProviderType {
     CoinbaseWallet = 'COINBASE_WALLET',
     Cipher = 'CIPHER',
     TrustWallet = 'TRUST_WALLET',
+    Opera = 'OPERA',
     Fallback = 'FALLBACK',
 }
 
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index b009a327f..709561dbc 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -104,9 +104,8 @@ export const assetUtils = {
         return assetDataGroupIfExists[Network.Mainnet];
     },
     getERC20AssetsFromAssets: (assets: Asset[]): ERC20Asset[] => {
-        const erc20sOrUndefined = _.map(
-            assets,
-            asset => (asset.metaData.assetProxyId === AssetProxyId.ERC20 ? (asset as ERC20Asset) : undefined),
+        const erc20sOrUndefined = _.map(assets, asset =>
+            asset.metaData.assetProxyId === AssetProxyId.ERC20 ? (asset as ERC20Asset) : undefined,
         );
         return _.compact(erc20sOrUndefined);
     },
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
index aedf4f5d6..7d4f836ff 100644
--- a/packages/instant/src/util/env.ts
+++ b/packages/instant/src/util/env.ts
@@ -42,18 +42,21 @@ export const envUtil = {
         }
     },
     getProviderType(provider: Provider): ProviderType | undefined {
+        const anyProvider = provider as any;
         if (provider.constructor.name === 'EthereumProvider') {
             return ProviderType.Mist;
-        } else if ((provider as any).isTrust) {
+        } else if (anyProvider.isTrust) {
             return ProviderType.TrustWallet;
-        } else if ((provider as any).isParity) {
+        } else if (anyProvider.isParity) {
             return ProviderType.Parity;
-        } else if ((provider as any).isMetaMask) {
+        } else if (anyProvider.isMetaMask) {
             return ProviderType.MetaMask;
         } else if (!_.isUndefined(_.get(window, 'SOFA'))) {
             return ProviderType.CoinbaseWallet;
         } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) {
             return ProviderType.Cipher;
+        } else if (envUtil.getBrowser() === Browser.Opera && !anyProvider.isMetaMask) {
+            return ProviderType.Opera;
         }
         return;
     },