fix share on Web (spee.ch) URLs

src/renderer/component/viewOnWebButton/view.jsx

@@ -4,18 +4,22 @@ import * as icons from 'constants/icons';
 import Button from 'component/button';
 
 type Props = {
-  uri: ?string,
+  claimId: ?string,
+  claimName: ?string,
 };
 
 export default (props: Props) => {
-  const { uri } = props;
+  const { claimId, claimName } = props;
+  const speechURL = claimName.startsWith('@')
+    ? `${claimName}:${claimId}`
+    : `${claimId}/${claimName}`;
 
-  return uri ? (
+  return claimId && claimName ? (
     <Button
-      iconRight={icons.GLOBE}
+      icon={icons.GLOBE}
       button="alt"
       label={__('View on Web')}
-      href={`http://spee.ch/${uri}`}
+      href={`http://spee.ch/${speechURL}`}
     />
   ) : null;
 };

src/renderer/page/channel/view.jsx

@@ -85,7 +85,7 @@ class ChannelPage extends React.PureComponent<Props> {
           <h1>{name}</h1>
           <div className="card__actions card__actions--no-margin">
             <SubscribeButton uri={permanentUrl} channelName={name} />
-            <ViewOnWebButton uri={`${name}:${claimId}`} />
+            <ViewOnWebButton claimId={claimId} claimName={name} />
           </div>
         </section>
         <section>{contentList}</section>

src/renderer/page/file/view.jsx

@@ -183,7 +183,7 @@ class FilePage extends React.Component<Props> {
                     <React.Fragment>
                       <Button
                         button="alt"
-                        iconRight="Send"
+                        icon="Send"
                         label={__('Enjoy this? Send a tip')}
                         onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                       />
@@ -191,12 +191,7 @@ class FilePage extends React.Component<Props> {
                     </React.Fragment>
                   )}
                   {speechSharable && (
-                    <ViewOnWebButton
+                    <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
-                      uri={buildURI({
-                        claimId: claim.claim_id,
-                        contentName: claim.name,
-                      }).slice(7)}
-                    />
                   )}
                 </div>
               </div>