Link to IPFS version from development URL (#9337)

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## master
+
+Changes:
+
+- Link to IPFS version from development URL
+
+
 ## 0.127.1 Apr 16, 2023
 
 Contributed:

packages/apps/src/Apps.tsx

@@ -14,6 +14,7 @@ import Signer from '@polkadot/react-signer';
 import Content from './Content/index.js';
 import Menu from './Menu/index.js';
 import ConnectingOverlay from './overlays/Connecting.js';
+import DotAppsOverlay from './overlays/DotApps.js';
 import WarmUp from './WarmUp.js';
 
 export const PORTAL_ID = 'portals';
@@ -39,6 +40,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
             <Content />
           </Signer>
           <ConnectingOverlay />
+          <DotAppsOverlay />
           <div id={PORTAL_ID} />
         </AccountSidebar>
       </StyledDiv>

packages/apps/src/overlays/Base.tsx

@@ -12,10 +12,12 @@ interface Props {
   children: React.ReactNode;
   className?: string;
   icon: IconName;
+  isBottom?: boolean;
+  isFull?: boolean;
   type: 'error' | 'info';
 }
 
-function BaseOverlay ({ children, className = '', icon, type }: Props): React.ReactElement<Props> | null {
+function BaseOverlay ({ children, className = '', icon, isBottom = false, isFull = false, type }: Props): React.ReactElement<Props> | null {
   const [isHidden, toggleHidden] = useToggle();
 
   if (isHidden) {
@@ -23,7 +25,7 @@ function BaseOverlay ({ children, className = '', icon, type }: Props): React.Re
   }
 
   return (
-    <StyledDiv className={`${className} ${type === 'error' ? 'isError' : 'isInfo'}`}>
+    <StyledDiv className={`${className} ${type === 'error' ? 'isError' : 'isInfo'} ${isBottom ? 'isBottom' : 'isTop'} ${isFull ? 'isFull' : 'isPartial'}`}>
       <div className='content'>
         <Icon
           className='contentIcon'
@@ -55,10 +57,26 @@ const StyledDiv = styled.div`
   position: fixed;
   right: 0.75rem;
   top: 0.75rem;
-  max-width: 42rem;
-  width: 42rem;
   z-index: 500;
 
+  &.isBottom {
+    bottom: 0.75rem;
+    top: auto;
+  }
+
+  &.isFull {
+    left: 0.75rem;
+  }
+
+  &.isPartial {
+    max-width: 42rem;
+    width: 42rem;
+
+    .content {
+      max-width: 50rem;
+    }
+  }
+
   &:before {
     border-radius: 0.25rem;
     bottom: 0;
@@ -90,7 +108,6 @@ const StyledDiv = styled.div`
     align-items: center;
     display: flex;
     margin: 0 auto;
-    max-width: 50rem;
     padding: 1em 3rem 1rem 0.5rem;
     position: relative;
 

packages/apps/src/overlays/DotApps.tsx

@@ -0,0 +1,68 @@
+// Copyright 2017-2023 @polkadot/apps authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useMemo } from 'react';
+
+import { createWsEndpoints } from '@polkadot/apps-config/endpoints';
+import { useApi } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate.js';
+import BaseOverlay from './Base.js';
+
+const isDev = window.location.host.startsWith('polkadot.js.org');
+const dnsLinks = createWsEndpoints(() => '')
+  .map((e) => e.dnslink)
+  .reduce((all: string[], dnslink) => {
+    if (dnslink && !all.includes(dnslink)) {
+      all.push(dnslink);
+    }
+
+    return all;
+  }, []);
+
+interface Props {
+  className?: string;
+}
+
+function DotApps ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { systemChain } = useApi();
+
+  const appsUrl = useMemo(
+    () => {
+      const lowerChain = systemChain?.toLowerCase();
+
+      return (lowerChain && dnsLinks.includes(lowerChain))
+        ? `https://${lowerChain}.dotapps.io`
+        : 'https://dotapps.io';
+    },
+    [systemChain]
+  );
+
+  if (isDev) {
+    return (
+      <BaseOverlay
+        className={className}
+        icon='link'
+        isBottom
+        isFull
+        type='info'
+      >
+        <div>
+          {t<string>('You are connected to the development instance of the UI. For a fully decentralized experience, you are encouraged to use the IPFS deployed version as the canonical URL: ')}
+          <a
+            href={appsUrl}
+            rel='noreferrer'
+            target='_blank'
+          >
+            {appsUrl.replace('https://', '')}
+          </a>
+        </div>
+      </BaseOverlay>
+    );
+  }
+
+  return null;
+}
+
+export default React.memo(DotApps);