RenBTC

.env.example.kovan

@@ -16,7 +16,6 @@ REACT_APP_MTA_ADDRESS=0xcda64b5d3ca85800ab9f7409686985b59f2b9598
 REACT_APP_CHAIN_ID=42
 REACT_APP_PORTIS_DAPP_ID=
 REACT_APP_FORTMATIC_API_KEY=
-REACT_APP_SQUARELINK_CLIENT_ID=
-REACT_APP_RPC_API_KEY=
+REACT_APP_RPC_API_KEY=YOUR_INFURA_KEY_GOES_HERE
 REACT_APP_RPC_URL=https://kovan.infura.io/v3/
-REACT_APP_SENTRY_DSN=
+REACT_APP_SENTRY_DSN=

.env.example.mainnet

@@ -11,7 +11,6 @@ REACT_APP_MTA_ADDRESS=0xa3bed4e1c75d00fa6f4e5e6922db7261b5e9acd2
 REACT_APP_CHAIN_ID=1
 REACT_APP_PORTIS_DAPP_ID=${PORTIS_DAPP_ID}
 REACT_APP_FORTMATIC_API_KEY=${FORTMATIC_API_KEY}
-REACT_APP_SQUARELINK_CLIENT_ID=${SQUARELINK_CLIENT_ID}
-REACT_APP_RPC_API_KEY=a6daf77ef0ae4b60af39259e435a40fe
+REACT_APP_RPC_API_KEY=YOUR_INFURA_KEY_GOES_HERE
 REACT_APP_RPC_URL=https://mainnet.infura.io/v3/
 REACT_APP_SENTRY_DSN=${SENTRY_DSN}

.env.example.ropsten

@@ -16,7 +16,6 @@ REACT_APP_MTA_ADDRESS=0x273bc479e5c21caa15aa8538decbf310981d14c0
 REACT_APP_CHAIN_ID=3
 REACT_APP_PORTIS_DAPP_ID=
 REACT_APP_FORTMATIC_API_KEY=
-REACT_APP_SQUARELINK_CLIENT_ID=
 REACT_APP_RPC_API_KEY=YOUR_INFURA_KEY_GOES_HERE
 REACT_APP_RPC_URL=https://ropsten.infura.io/v3/
 REACT_APP_SENTRY_DSN=

package.json

@@ -11,6 +11,10 @@
     "@apollo/react-common": "^3.2.0-beta.1",
     "@apollo/react-hooks": "^3.2.0-beta.1",
     "@habx/apollo-multi-endpoint-link": "^1.1.0",
+    "@renproject/chains": "^2.1.0",
+    "@renproject/interfaces": "^2.1.0",
+    "@renproject/ren": "^2.1.0",
+    "@renproject/utils": "^2.1.0",
     "@sentry/react": "^5.19.0",
     "@testing-library/jest-dom": "^5.7.0",
     "@testing-library/react": "^10.0.4",
@@ -34,7 +38,7 @@
     "apollo-link-error": "^1.1.13",
     "apollo-utilities": "^1.3.4",
     "bignumber.js": "^9.0.0",
-    "bnc-onboard": "^1.18.0",
+    "bnc-onboard": "1.18.0",
     "date-fns": "^2.14.0",
     "dotenv": "^8.2.0",
     "dotenv-expand": "^5.1.0",
@@ -60,6 +64,7 @@
     "react-is": "^16.13.1",
     "react-loading-skeleton": "^2.0.1",
     "react-modal-hook": "^3.0.0",
+    "react-qr-code": "^1.0.5",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.1",
     "react-swipeable": "^5.5.1",
@@ -70,9 +75,9 @@
     "styled-components": "^5.1.0",
     "styled-reset": "^4.1.4",
     "ts-pipe-compose": "^0.2.0",
-    "use-resize-observer": "^7.0.0",
     "use-clipboard-copy": "^0.1.2",
     "use-onclickoutside": "^0.3.1",
+    "use-resize-observer": "^7.0.0",
     "utility-types": "^3.10.0",
     "web3-utils": "^1.2.6"
   },

src/components/core/Arrow.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
 
+type Direction = 'up' | 'down' | 'left' | 'right';
+
 export const Container = styled.div`
   align-items: center;
   display: flex;
@@ -11,9 +13,15 @@ export const Container = styled.div`
   user-select: none;
 `;
 
-export const Arrow: FC<{ direction?: 'up' | 'down' }> = ({
+const ArrowIcon: Record<Direction, string> = {
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+};
+
+export const Arrow: FC<{ direction?: Direction }> = ({
   direction = 'down',
 }) => {
-  const arrowIcon = direction === 'up' ? '↑' : '↓';
-  return <Container>{arrowIcon}</Container>;
+  return <Container>{ArrowIcon[direction]}</Container>;
 };

src/components/core/Dropdown.tsx

@@ -14,6 +14,7 @@ interface Props {
   options?: TransactionOption[];
   onChange?(address?: string): void;
   disabled?: boolean;
+  className?: string;
 }
 
 const ChevronContainer = styled.span<{ selected?: boolean; active?: boolean }>`
@@ -161,6 +162,7 @@ export const Dropdown: FC<Props> = ({
   options,
   onChange,
   disabled,
+  className,
 }) => {
   const [show, toggleShow] = useToggle(false);
 
@@ -185,7 +187,11 @@ export const Dropdown: FC<Props> = ({
   const isDropdown = (options?.length ?? 0) > 1;
 
   return (
-    <Container ref={container} chevronHidden={!isDropdown}>
+    <Container
+      ref={container}
+      chevronHidden={!isDropdown}
+      className={className}
+    >
       <Option
         onClick={() => {
           if (isDropdown) toggleShow();

src/components/core/ProgressBar.tsx

@@ -1,14 +1,17 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
 import { useThemeMode } from '../../context/AppProvider';
-import { colorTheme } from '../../theme';
+import { getColorTheme } from '../../theme';
 
 interface Props {
+  className?: string;
+  decimals?: number;
   value?: number;
   max?: number;
   min?: number;
   hue?: number;
   lightness?: number;
+  showLabel?: boolean;
 }
 
 const HEIGHT = 5;
@@ -24,17 +27,24 @@ const Container = styled.svg`
 `;
 
 export const ProgressBar: FC<Props> = ({
+  className,
+  decimals,
   max = 1,
   min = 0,
   value = min,
   hue = 90,
   lightness = 50,
+  showLabel,
 }) => {
   const themeMode = useThemeMode();
   const scaledValue = (value - min) / (max - min);
   const progressWidth = Math.max(scaledValue * WIDTH, HEIGHT * 2);
   return (
-    <Container viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="none">
+    <Container
+      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+      preserveAspectRatio="none"
+      className={className}
+    >
       <defs>
         <pattern
           id="hatch"
@@ -57,7 +67,7 @@ export const ProgressBar: FC<Props> = ({
             from="4"
             to="0"
             begin="0"
-            dur={`${Math.sin(value)}s`}
+            dur={`${1 - Math.sin(scaledValue || 0.01)}s`}
             repeatCount="indefinite"
             additive="sum"
           />
@@ -81,7 +91,7 @@ export const ProgressBar: FC<Props> = ({
           y={0}
           rx={HEIGHT / 2}
           ry={HEIGHT / 2}
-          fill={colorTheme(themeMode).accent}
+          fill={getColorTheme(themeMode).accent}
         />
         <rect
           width={progressWidth}
@@ -92,20 +102,22 @@ export const ProgressBar: FC<Props> = ({
           ry={HEIGHT / 2}
           fill="url(#hatch)"
         />
-        <g transform={`translate(${progressWidth - 2.25}, 0)`}>
-          <text
-            x={0}
-            y={HEIGHT / 2}
-            alignmentBaseline="central"
-            fontSize={3}
-            fontFamily="'DM Mono', monospace"
-            fontWeight="bold"
-            fill="white"
-            textAnchor="end"
-          >
-            {value.toFixed(1)}
-          </text>
-        </g>
+        {showLabel && (
+          <g transform={`translate(${progressWidth - 2.25}, 0)`}>
+            <text
+              x={0}
+              y={HEIGHT / 2}
+              alignmentBaseline="central"
+              fontSize={3}
+              fontFamily="'DM Mono', monospace"
+              fontWeight="bold"
+              fill="white"
+              textAnchor="end"
+            >
+              {value.toFixed(decimals)}
+            </text>
+          </g>
+        )}
       </g>
     </Container>
   );

src/components/core/ThemedSkeleton.tsx

@@ -2,11 +2,11 @@
 import React, { ComponentProps, FC } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useThemeMode } from '../../context/AppProvider';
-import { colorTheme } from '../../theme';
+import { getColorTheme } from '../../theme';
 
 export const ThemedSkeleton: FC<ComponentProps<typeof Skeleton>> = props => {
   const themeMode = useThemeMode();
-  const theme = colorTheme(themeMode);
+  const theme = getColorTheme(themeMode);
   return (
     <SkeletonTheme color={theme.accent} highlightColor={theme.bodyTransparent}>
       <Skeleton {...props} />

src/components/forms/AssetExchange.tsx

@@ -10,6 +10,8 @@ import { TransactionOption } from '../../types';
 import { ErrorMessage } from '../core/ErrorMessage';
 
 export interface Props {
+  className?: string;
+
   inputAddress?: string;
   inputAddressDisabled?: boolean;
   inputAddressOptions: TransactionOption[];
@@ -54,6 +56,7 @@ export const AssetExchange: FC<Props> = ({
   outputAddressDisabled,
   outputFormValue,
   children,
+  className,
 }) => {
   const inputToken = useTokenSubscription(inputAddress);
   const outputToken = useTokenSubscription(outputAddress);
@@ -66,7 +69,7 @@ export const AssetExchange: FC<Props> = ({
       : undefined;
 
   return (
-    <Container>
+    <Container className={className}>
       <AssetInput
         address={inputAddress}
         addressOptions={inputAddressOptions}

src/components/icons/TokenIcon.tsx

@@ -33,6 +33,7 @@ import CREAM, { ReactComponent as CreamSvg } from './tokens/Cream.svg';
 import IMBTCMTA, {
   ReactComponent as ImbtcmtaSvg,
 } from './tokens/imbtc-mta.svg';
+import BTC, { ReactComponent as BtcSvg } from './tokens/BTC.svg';
 
 interface Props {
   className?: string;
@@ -75,6 +76,7 @@ export const TOKEN_ICONS: Record<string, string> = {
   BADGER,
   CREAM,
   IMBTCMTA,
+  BTC,
 };
 
 const SVG_ICONS: Record<string, SvgComponent> = {
@@ -109,6 +111,7 @@ const SVG_ICONS: Record<string, SvgComponent> = {
   BADGER: BadgerSvg as SvgComponent,
   CREAM: CreamSvg as SvgComponent,
   IMBTCMTA: ImbtcmtaSvg as SvgComponent,
+  BTC: BtcSvg as SvgComponent,
 };
 
 const Image = styled.img`

src/components/layout/Navigation.tsx

@@ -4,7 +4,7 @@ import { NavLink } from 'react-router-dom';
 
 import { useSelectedMassetName } from '../../context/SelectedMassetNameProvider';
 import { useCloseAccount, useThemeMode } from '../../context/AppProvider';
-import { colorTheme } from '../../theme';
+import { getColorTheme } from '../../theme';
 
 interface NavItem {
   title: string;
@@ -43,7 +43,7 @@ export const Navigation: FC = () => {
       <List>
         {navItems.map(({ title, path }) => (
           <StyledNavLink
-            activeStyle={{ color: colorTheme(themeMode).primary }}
+            activeStyle={{ color: getColorTheme(themeMode).primary }}
             key={title}
             onClick={collapseWallet}
             to={`/${massetName}${path}`}

src/components/pages/MassetPage.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
 
-import { MassetState } from '../../context/DataProvider/types';
 import { useSelectedMassetState } from '../../context/DataProvider/DataProvider';
 
 import { SimpleMassetStats } from '../stats/SimpleMassetStats';
@@ -36,7 +35,8 @@ const description = {
 };
 
 const MassetAside: FC = () => {
-  const massetState = useSelectedMassetState() as MassetState;
+  const massetState = useSelectedMassetState();
+  if (!massetState) return null;
   return (
     <MassetAsideContainer>
       <h3>About {massetState.token.symbol}</h3>
@@ -53,7 +53,7 @@ const Separator = styled.div`
   padding-bottom: 2rem;
   margin-bottom: 2rem;
 
-  @media (min-width: ${({ theme }) => theme.viewportWidth.m}) {
+  @media (min-width: ${({ theme }) => theme.viewportWidth.l}) {
     display: none;
   }
 `;

src/components/pages/Mint/amm/index.tsx

@@ -84,8 +84,8 @@ const MintLogic: FC = () => {
     const _minOutputAmount = BigDecimal.maybeParse(
       outputAmount.value && slippage.simple
         ? (outputAmount.value.simple * (1 - slippage.simple / 100)).toFixed(
-            outputAmount.value.decimals,
-          )
+        outputAmount.value.decimals,
+        )
         : undefined,
     );
 
@@ -313,11 +313,11 @@ export const Mint: FC = () => {
       Object.fromEntries(
         Object.entries(massetState?.bAssets ?? {}).map(
           ([
-            address,
-            {
-              token: { decimals },
-            },
-          ]) => [address, { decimals }],
+             address,
+             {
+               token: { decimals },
+             },
+           ]) => [address, { decimals }],
         ),
       ),
     [massetState],