Merge pull request #410 from rnsdomains/develop

Release v2.1.3

package.json

@@ -1,12 +1,12 @@
 {
   "name": "rns-manager-react",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": true,
   "license": "MIT",
   "dependencies": {
     "@ensdomains/address-encoder": "^0.1.8",
     "@githubprimer/octicons-react": "^8.5.0",
-    "@rsksmart/rlogin": "^1.0.2",
+    "@rsksmart/rlogin": "^1.0.4",
     "@rsksmart/rns": "^1.9.0",
     "@rsksmart/rns-suite": "^1.1.0",
     "@walletconnect/web3-provider": "^1.3.1",

src/app/components/HeaderComponent.js

@@ -28,7 +28,6 @@ const HeaderComponent = (props) => {
             alt="RSK Logo"
           />
         </Link>
-        <IndicatorLight />
         <Navbar.Toggle aria-controls="responsive-navbar-nav" />
         <Navbar.Collapse className>
           <Nav className="ml-auto">
@@ -37,11 +36,16 @@ const HeaderComponent = (props) => {
                 {strings.search}
               </Link>
             </Nav.Item>
+            <Nav.Item>
+              <Link to="/resolve" className="nav-link" title={strings.resolve}>{strings.resolve}</Link>
+            </Nav.Item>
 
             <Form onSubmit={e => e.preventDefault()} inline>
               <LanguageSelectContainer />
             </Form>
 
+            <Nav.Item><IndicatorLight /></Nav.Item>
+
             <LoginDropdownContainer />
           </Nav>
         </Navbar.Collapse>

src/app/reducers.js

@@ -1,18 +1,25 @@
 import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';
-import tabReducers from './tabs';
 import authReducer from './auth';
 import notificationReducer from './notifications';
 import browserNotificationsReducer from './browerNotifications';
 import multilanguage from './multilanguageReducer';
 
+import newAdmin from './tabs/newAdmin/reducer';
+import registrar from './tabs/registrar/reducer';
+import resolve from './tabs/resolve/reducer';
+import search from './tabs/search/reducer';
+
 const rootReducer = history => combineReducers({
-  ...tabReducers,
   auth: authReducer,
-  notifications: notificationReducer,
   browserNotifications: browserNotificationsReducer,
-  router: connectRouter(history),
   multilanguage,
+  newAdmin,
+  notifications: notificationReducer,
+  registrar,
+  resolve,
+  router: connectRouter(history),
+  search,
 });
 
 export default rootReducer;

src/app/tabs/home/components/HomeComponent.js

@@ -13,6 +13,8 @@ import book from '../../../../assets/img/home/book.svg';
 import github from '../../../../assets/img/home/github.svg';
 import integrate from '../../../../assets/img/home/integrate.svg';
 import ask from '../../../../assets/img/home/ask.svg';
+import WalletCarousel from './WalletCarousel';
+import wallets from '../wallets.json';
 
 const HomeComponent = ({ strings }) => (
   <div className="home">
@@ -55,6 +57,8 @@ const HomeComponent = ({ strings }) => (
         </Col>
       </Row>
 
+      <WalletCarousel wallets={wallets} />
+
       <Row className="developer break-above">
         <Row>
           <div className="col-md-8 offset-md-2">

src/app/tabs/home/components/WalletCarousel.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { multilanguage } from 'redux-multilanguage';
+import propTypes from 'prop-types';
+import { Carousel, Row, Col } from 'react-bootstrap';
+
+const WalletCarousel = ({ wallets, strings }) => {
+  const [index, setIndex] = useState(0);
+
+  const handleSelect = (selectedIndex) => {
+    setIndex(selectedIndex);
+  };
+
+  /**
+   * Group the wallets into 3s:
+   */
+  const walletsByThree = [];
+  wallets.forEach((wallet, i) => {
+    if (i % 3 === 0) {
+      // new set
+      walletsByThree[Math.floor(i / 3)] = [wallet];
+    } else {
+      walletsByThree[Math.floor(i / 3)].push(wallet);
+    }
+  });
+
+  const SingleItem = item => (
+    <Col key={item.name}>
+      <a href={item.link} target="_blank" rel="noopener noreferrer">
+        <div className="image-container" style={{ backgroundImage: `url(${item.image})` }} />
+        <p>{item.name}</p>
+      </a>
+    </Col>
+  );
+
+  return (
+    <div className="supported-wallets">
+      <h2>{strings.rns_integrations}</h2>
+      <Carousel activeIndex={index} onSelect={handleSelect} controls className="wallet-carousel">
+        {walletsByThree.map(walletGroup => (
+          <Carousel.Item key={walletGroup[0].name}>
+            <Row>
+              {walletGroup.map(wallet => SingleItem(wallet))}
+            </Row>
+          </Carousel.Item>
+        ))}
+      </Carousel>
+    </div>
+  );
+};
+
+WalletCarousel.propTypes = {
+  wallets: propTypes.arrayOf(propTypes.shape({
+    name: propTypes.string.isRequired,
+    link: propTypes.string.isRequired,
+    image: propTypes.string.isRequired,
+  })).isRequired,
+  strings: propTypes.shape({
+    rns_integrations: propTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default multilanguage(WalletCarousel);

src/app/tabs/home/components/WalletCarousel.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { mockStoreEnglish } from '../../../../../tests/config/mockStore';
+import WalletCarousel from './WalletCarousel';
+
+describe('WalletCarousel', () => {
+  const wallet = i => ({ name: `name${i}`, image: `image${i}.jpg`, link: `url${i}` });
+  const wallets2 = [wallet(1), wallet(2)];
+  const wallets7 = [wallet(1), wallet(2), wallet(3), wallet(4), wallet(5), wallet(6), wallet(7)];
+
+  const store = mockStoreEnglish();
+  const generateComponent = wallets => (
+    <Provider store={store}><WalletCarousel wallets={wallets} /></Provider>
+  );
+
+  describe('basic', () => {
+    it('renders', () => {
+      const component = mount(generateComponent(wallets2));
+      expect(component).toBeDefined();
+    });
+
+    it('has header', () => {
+      const component = mount(generateComponent(wallets2));
+      expect(component.find('h2').text()).toBe('Wallet and dapp integrations');
+    });
+  });
+
+  describe('content', () => {
+    it('displays the correct content for first item', () => {
+      const component = mount(generateComponent(wallets2));
+
+      const first = component.find('.carousel-item').find('.col').at(0);
+
+      expect(first.find('p').text()).toBe('name1');
+      expect(first.find('a').props().href).toBe('url1');
+      expect(first.find('.image-container').props().style).toMatchObject({ backgroundImage: 'url(image1.jpg)' });
+    });
+
+    it('displays name of sixth item', () => {
+      const component = mount(generateComponent(wallets7));
+      const column = component.find('.carousel-item').at(1).find('.col').at(2);
+      expect(column.find('p').text()).toBe('name6');
+    });
+  });
+
+  describe('number of items', () => {
+    it('creates 3 pages', () => {
+      const component = mount(generateComponent(wallets7));
+      expect(component.find('.carousel-item')).toHaveLength(3);
+    });
+
+    it('creates 1 page', () => {
+      const component = mount(generateComponent(wallets2));
+      expect(component.find('.carousel-item')).toHaveLength(1);
+    });
+  });
+});

src/app/tabs/home/wallets.json

@@ -0,0 +1,47 @@
+[
+   {
+      "name":"MyCrypto",
+      "image":"https://rsk.co/img/wallets/1-mycrypto.png",
+      "link":"https://mycrypto.com/account"
+   },
+   {
+      "name":"Math Wallet",
+      "image":"https://developers.rsk.co/assets/img/rsk/wallets/MathWallet_Logo_Vertical_Black.png",
+      "link":"https://mathwallet.org/en-us/"
+   },
+   {
+      "name":"Nifty Wallet",
+      "image":"https://lh3.googleusercontent.com/vzJy_6bmNXDfiwFePYMfKPjfLMJsQFzEz5Ot3dtZ9Pk_0kPyLifJuQ0n5DnUoUGuKbOhTkkcX_ZyuJOaPaawHT0D=w128-h128-e365-rj-sc0x00ffffff",
+      "link":"https://chrome.google.com/webstore/detail/nifty-wallet/jbdaocneiiinmjbjlgalhcelgbejmnid?hl=en"
+   },
+   {
+      "name":"D'cent Wallet",
+      "image":"https://rsk.co/img/wallets/5-dcent.png",
+      "link":"https://dcentwallet.com/"
+   },
+   {
+      "name":"Defiant Wallet",
+      "image":"https://developers.rsk.co/assets/img/rsk/wallets/defiant-logo.png",
+      "link":"https://www.defiantapp.tech/"
+   },
+   {
+      "name":"Money on Chain",
+      "image":"https://moneyonchain.com/wp-content/uploads/2020/06/isologochico.png",
+      "link":"https://moneyonchain.com/"
+   },
+   {
+      "name":"RIF on Chain",
+      "image":"https://moneyonchain.com/wp-content/uploads/2020/10/logo_roc.svg",
+      "link":"https://moneyonchain.com/rif-on-chain/"
+   },
+   {
+      "name":"Bleumi Pay",
+      "image":"https://bleumi.com/uploads-ssl.webflow.com/5f0ea53e824f8d2cd161752e/5f0ed8885e1b0e32974f7bf6_Bleumi_dark.png",
+      "link":"https://bleumi.com/"
+   },
+   {
+      "name":"rWallet",
+      "image":"https://developers.rsk.co/assets/img/rsk_logo.svg",
+      "link":"https://developers.rsk.co/wallet/rwallet/"
+   }
+]

src/app/tabs/newAdmin/addresses/components/YourAddressesComponent.js

@@ -60,7 +60,6 @@ const YourAddressesComponent = ({
               validation={isHex}
               suggestions={suggestion}
               strings={{
-                value_prefix: strings.value,
                 error_message: errorMessage,
                 cancel: strings.cancel,
                 submit: strings.change,

src/app/tabs/newAdmin/addresses/containers/MigrateToMultiResolverContainer.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { MigrateToMultiResolverComponent } from '../components';
+import MigrateToMultiResolverComponent from '../components/MigrateToMultiResolverComponent';
 import { definitiveResolver } from '../../../../adapters/configAdapter';
 import { setDomainResolver, setDomainResolverAndMigrate } from '../../resolver/operations';
 import { closeMessage, clearMigrateContent } from '../../resolver/actions';

src/app/tabs/newAdmin/addresses/reducer.js

@@ -4,7 +4,7 @@ import {
   CLEAR_ADDRESSES,
 } from './types';
 
-const initialState = {
+export const initialState = {
   newChainAddress: '',
   newChainSuccess: false,
   chainAddresses: [],

src/app/tabs/newAdmin/components/LeftNavComponent.test.js

@@ -41,7 +41,7 @@ describe('LeftNavComponent', () => {
     );
 
     expect(component.find('a.active').text()).toEqual('subdomains');
-    expect(component.find('li').length).toBe(3);
+    expect(component.find('li').length).toBe(4);
   });
 
   it('sets home as active when resolver is passed, but advancedView is false.', () => {

src/app/tabs/newAdmin/components/LetftNavComponent.js

@@ -35,10 +35,10 @@ const LeftNavComponent = (props) => {
 
           {ListItemLink('addresses', strings.your_addresses)}
           {ListItemLink('subdomains', strings.subdomains)}
+          {ListItemLink('myurl', strings.my_url)}
 
           {advancedView && (
             <>
-              {ListItemLink('myurl', strings.my_url)}
               {ListItemLink('resolver', strings.resolver)}
               {ListItemLink('reverse', strings.reverse)}
             </>

src/app/tabs/newAdmin/domainInfo/components/RenewButtonComponent.js

@@ -18,7 +18,7 @@ const RenewButtonComponent = (props) => {
     <p>
       {disable ? strings.domain_expired : `${strings.expires_on} ${formatDate(dayMath(expires))}`}
 
-      <Button onClick={handleClick} className={isRenewOpen ? 'active' : ''} disabled={disable}>
+      <Button onClick={handleClick} className={isRenewOpen ? 'active caps-first' : 'caps-first'} disabled={disable}>
         {strings.renew}
       </Button>
     </p>

src/app/tabs/newAdmin/myurl/components/MyUrlComponent.js

@@ -4,6 +4,7 @@ import { multilanguage } from 'redux-multilanguage';
 import { Alert } from 'react-bootstrap';
 import UserWaitingComponent from '../../../../components/UserWaitingComponent';
 import AddressInputComponent from '../../../../components/AddressInputComponent';
+import MigrateToMultiResolverContainer from '../../addresses/containers/MigrateToMultiResolverContainer';
 
 const MyUrlComponent = ({
   strings, url, gettingContent, handleSave,
@@ -20,6 +21,7 @@ const MyUrlComponent = ({
       <>
         <h1>{strings.decentralized_url}</h1>
         <Alert key="decode" variant="warning">Your resolver does not support decentralized URL.</Alert>
+        <MigrateToMultiResolverContainer />
       </>
     );
   }

src/app/tabs/newAdmin/myurl/components/MyUrlComponent.test.js

@@ -3,16 +3,26 @@ import { shallow, mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { mockStoreEnglish } from '../../../../../../tests/config/mockStore';
 import MyUrlComponent from './MyUrlComponent';
-import { contentInititalState } from '../../resolver/reducer';
+import { initialState, contentInititalState } from '../../resolver/reducer';
+import { initialState as addresses } from '../../addresses/reducer';
 
-const store = mockStoreEnglish();
+const store = mockStoreEnglish({
+  auth: {
+    name: 'test.rsk',
+  },
+  newAdmin: {
+    resolver: initialState,
+    addresses,
+  },
+});
 
 describe('MyUrlComponent', () => {
   const initProps = {
     start: jest.fn(),
     handleSave: jest.fn(),
     url: null,
     receiveContent: true,
+    gettingContent: false,
   };
 
   const generateComponent = (localProps = {}) => {

src/app/tabs/newAdmin/resolver/components/ViewRecordsComponent.js

@@ -41,7 +41,7 @@ const ViewRecordsComponent = ({ strings, content, gettingContent }) => {
 
   return (
     <div className="major-section records">
-      <h2>{strings.records}</h2>
+      <h1>{strings.records}</h1>
       <p>{strings.records_explanation}</p>
       {content.map(item => switchViewType(item))}
     </div>

src/app/tabs/newAdmin/resolver/reducer.js

@@ -7,7 +7,7 @@ import {
   CLEAR_MIGRATE_CONTENT, RECEIVE_SUPPORTED_INTERFACES,
 } from './types';
 
-const initialState = {
+export const initialState = {
   resolverAddr: '',
   resolverName: '',
   isEditing: false,