show first adapool from iframe message in banner

Emurgo · Nov 10, 2021 · aeacaf9 · aeacaf9
1 parent 54eedd2
commit aeacaf9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 37 deletions.
diff --git a/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js b/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js
@@ -20,13 +20,15 @@ import TelegramIcon from '../../assets/images/social/revamp/telegram.inline.svg'
 import TwitchIcon from '../../assets/images/social/revamp/twitch.inline.svg';
 import TwitterIcon from '../../assets/images/social/revamp/twitter.inline.svg';
 import YoutubeIcon from '../../assets/images/social/revamp/youtube.inline.svg';
+import LoadingSpinner from '../../components/widgets/LoadingSpinner';
+import type { PoolData } from './staking/SeizaFetcher';
 
 type Props = {|
   +isOpen: boolean,
   +onClose: void => void,
   +isWalletWithNoFunds: boolean,
-  +poolInfo: Object,
-  +onDelegateClick: (string) => Promise<void>,
+  +poolInfo: PoolData | void,
+  +onDelegateClick: string => Promise<void>,
   +ticker: string,
 |};
 type Intl = {|
@@ -75,8 +77,15 @@ function WalletDelegationBanner({
   onDelegateClick,
   intl,
   ticker,
-  poolInfo = {},
+  poolInfo,
 }: Props & Intl): Node {
+  if (poolInfo == null) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" py="40px">
+        <LoadingSpinner />
+      </Box>
+    );
+  }
   const {
     id,
     name,
@@ -118,7 +127,7 @@ function WalletDelegationBanner({
         >
           <Box sx={{ display: 'flex' }}>
             <AvatarWrapper>
-              {avatar ? (
+              {avatar != null ? (
                 <AvatarImg src={avatar} alt={name} />
               ) : (
                 <AvatarImg src={avatarGenerated} alt={name} />
@@ -145,7 +154,7 @@ function WalletDelegationBanner({
           <Box display="flex">
             <Typography variant="body1">Stake pool social media</Typography>
             <SocialList>
-              {twitter ? (
+              {twitter != null ? (
                 <a
                   href={`https://twitter.com/${twitter}`}
                   target="_blank"
@@ -154,17 +163,17 @@ function WalletDelegationBanner({
                   <TwitterIcon />
                 </a>
               ) : null}
-              {telegram ? (
+              {telegram != null ? (
                 <a href={`https://t.me/${telegram}`} target="_blank" rel="noreferrer noopener">
                   <TelegramIcon />{' '}
                 </a>
               ) : null}
-              {facebook ? (
+              {facebook != null ? (
                 <a href={`https://fb.me/${facebook}`} target="_blank" rel="noreferrer noopener">
                   <FbIcon />
                 </a>
               ) : null}
-              {youtube ? (
+              {youtube != null ? (
                 <a
                   href={`https://youtube.com/${youtube}`}
                   target="_blank"
@@ -173,22 +182,22 @@ function WalletDelegationBanner({
                   <YoutubeIcon />
                 </a>
               ) : null}
-              {twitch ? (
+              {twitch != null ? (
                 <a href={`https://twitch.com/${twitch}`} target="_blank" rel="noreferrer noopener">
                   <TwitchIcon />
                 </a>
               ) : null}
-              {discord ? (
+              {discord != null ? (
                 <a href={`https://discord.gg/${discord}`} target="_blank" rel="noreferrer noopener">
                   <DiscordIcon />
                 </a>
               ) : null}
-              {github ? (
+              {github != null ? (
                 <a href={`https://github.com/${github}`} target="_blank" rel="noreferrer noopener">
                   <GithubIcon />
                 </a>
               ) : null}
-              {websiteUrl ? (
+              {websiteUrl != null ? (
                 <a href={websiteUrl} target="_blank" rel="noreferrer noopener">
                   <PersonalIcon />
                 </a>

diff --git a/packages/yoroi-extension/app/containers/wallet/staking/CardanoStakingPage.js b/packages/yoroi-extension/app/containers/wallet/staking/CardanoStakingPage.js
@@ -46,6 +46,7 @@ import { truncateToken } from '../../../utils/formatters';
 import { withLayout } from '../../../styles/context/layout';
 import type { LayoutComponentMap } from '../../../styles/context/layout';
 import { Box } from '@mui/system';
+import type { PoolData } from './SeizaFetcher';
 
 export type GeneratedData = typeof CardanoStakingPage.prototype.generated;
 
@@ -56,36 +57,17 @@ type Props = {|
 type InjectedProps = {|
   +renderLayoutComponent: LayoutComponentMap => Node,
 |};
-
+type State = {| firstPool: PoolData | void |};
 type AllProps = {| ...Props, ...InjectedProps |};
 
-// TODO: Show first pool from from adapools api
-const firstPool = {
-  id: '7f6c103302f96390d478a170fe80938b76fccd8a23490e3b6ddebcf7',
-  name: '[GOAT] Goat Stake',
-  roa: '5.08%',
-  socialLinks: {
-    tw: 'GoatStake',
-    tg: 'GoatStakeGroup',
-    fb: 'GoatStake',
-    yt: null,
-    tc: null,
-    di: '24GzMYgwwU',
-    gh: null,
-    icon:
-      'https://static.adapools.org/pool_logo/7f6c103302f96390d478a170fe80938b76fccd8a23490e3b6ddebcf7.png',
-  },
-  websiteUrl: 'https://goatstake.com?utm_source=adapools.org',
-  avatar:
-    'https://static.adapools.org/pool_logo/7f6c103302f96390d478a170fe80938b76fccd8a23490e3b6ddebcf7.png',
-};
-
 @observer
-class CardanoStakingPage extends Component<AllProps> {
+class CardanoStakingPage extends Component<AllProps, State> {
   static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
     intl: intlShape.isRequired,
   };
-
+  state: State = {
+    firstPool: undefined,
+  };
   @observable notificationElementId: string = '';
 
   cancel: void => void = () => {
@@ -150,7 +132,7 @@ class CardanoStakingPage extends Component<AllProps> {
               await this._updatePool(poolId);
               await this._next();
             }}
-            poolInfo={firstPool}
+            poolInfo={this.state.firstPool}
             isWalletWithNoFunds={isWalletWithNoFunds}
             ticker={truncateToken(
               getTokenName(
@@ -171,6 +153,9 @@ class CardanoStakingPage extends Component<AllProps> {
                   tuple => tuple[0]
                 ) ?? []
               }
+              setFirstPool={pool => {
+                this.setState({ firstPool: pool });
+              }}
               stakepoolSelectedAction={async poolId => {
                 await this._updatePool(poolId);
                 await this._next();

diff --git a/packages/yoroi-extension/app/containers/wallet/staking/SeizaFetcher.js b/packages/yoroi-extension/app/containers/wallet/staking/SeizaFetcher.js
@@ -12,13 +12,33 @@ import { observer } from 'mobx-react';
 import { withLayout } from '../../../styles/context/layout';
 import type { Layouts } from '../../../styles/context/layout';
 
+export type PoolData = {|
+  +id: string,
+  +name: string,
+  +avatar?: string,
+  +roa: string,
+  +websiteUrl?: string,
+  +socialLinks: {|
+    tw?: string,
+    fb?: string,
+    gh?: string,
+    tc?: string,
+    tg?: string,
+    di?: string,
+    yt?: string,
+    icon?: string,
+  |},
+|};
+
 type Props = {|
   +children?: Node,
   +urlTemplate: string,
   +locale: string,
   +totalAda: ?number,
   +stakepoolSelectedAction: string => Promise<void>,
   +poolList: Array<string>,
+  // eslint-disable-next-line react/require-default-props
+  setFirstPool?: PoolData => void,
 |};
 
 type InjectedProps = {|
@@ -57,6 +77,13 @@ class SeizaFetcher extends Component<AllProps> {
       return;
     }
     const response = JSON.parse(decodeURI(event.data));
+
+    // if it's the pool info object
+    if (typeof response === 'object' && !Array.isArray(response) && response !== null && response.id) {
+      // $FlowFixMe[not-a-function] only added for banner
+      this.props.setFirstPool(response);
+    }
+
     if (!Array.isArray(response)) {
       throw new Error(`${nameof(SeizaFetcher)} Server response is not an array`);
     }