✨ Refactor iframe size and allow setting site liker id without overr…

…ide (#199) * ✨ Use NFT Widget dimension in iframe * 🎨 Use shorter iframe for non-iscn button * ✨ Refactor setting allow site liker id without override * ♻️ Refactor likecoin url host to php constant * 💄 Increase iscn widget height * 🚨 Fix lint error
likecoin · Aug 30, 2022 · 559cca7 · 559cca7
1 parent 21a02c8
commit 559cca7
Show file tree

Hide file tree

Showing 16 changed files with 126 additions and 101 deletions.
diff --git a/likecoin/admin/metabox.php b/likecoin/admin/metabox.php
@@ -106,9 +106,9 @@ function likecoin_parse_iscn_status( $publish_params, $post ) {
 	$iscn_view_page_url  = null;
 	$iscn_badge_endpoint = null;
 	if ( $iscn_mainnet_info ) {
-		$iscn_view_page_url  = 'https://like.co/in/tx/iscn/';
+		$iscn_view_page_url  = 'https://' . LC_LIKE_CO_HOST . '/in/tx/iscn/';
 		$iscn_badge_endpoint = 'https://static.like.co/badge/iscn/';
-		$iscn_card_endpoint  = 'https://app.like.co/view/';
+		$iscn_card_endpoint  = 'https://app.' . LC_LIKE_CO_HOST . '/view/';
 	} elseif ( $iscn_testnet_info ) {
 		$iscn_view_page_url  = 'https://like.co/in/tx/iscn/dev/';
 		$iscn_badge_endpoint = 'https://static.like.co/badge/iscn/dev/';
@@ -444,10 +444,12 @@ function likecoin_add_meta_box( $post, $button_params, $publish_params ) {
 			'lc_js_metabox',
 			'wpApiSettings',
 			array(
-				'root'    => esc_url_raw( rest_url() ),
-				'siteurl' => get_site_url(),
-				'nonce'   => wp_create_nonce( 'wp_rest' ),
-				'postId'  => $post_id,
+				'root'          => esc_url_raw( rest_url() ),
+				'siteurl'       => get_site_url(),
+				'nonce'         => wp_create_nonce( 'wp_rest' ),
+				'postId'        => $post_id,
+				'likecoHost'    => LC_LIKE_CO_HOST,
+				'likerlandHost' => LC_LIKER_LAND_HOST,
 			)
 		);
 		wp_localize_script(

diff --git a/likecoin/admin/sidebar.php b/likecoin/admin/sidebar.php
@@ -54,10 +54,12 @@ function likecoin_add_sidebar( $post, $publish_params ) {
 		'lc-plugin-sidebar-js',
 		'wpApiSettings',
 		array(
-			'root'    => esc_url_raw( rest_url() ),
-			'siteurl' => get_site_url(),
-			'nonce'   => wp_create_nonce( 'wp_rest' ),
-			'postId'  => $post_id,
+			'root'          => esc_url_raw( rest_url() ),
+			'siteurl'       => get_site_url(),
+			'nonce'         => wp_create_nonce( 'wp_rest' ),
+			'postId'        => $post_id,
+			'likecoHost'    => LC_LIKE_CO_HOST,
+			'likerlandHost' => LC_LIKER_LAND_HOST,
 		)
 	);
 	wp_localize_script(

diff --git a/likecoin/admin/view/view.php b/likecoin/admin/view/view.php
@@ -180,6 +180,10 @@ function likecoin_enqueue_admin_js() {
 	wp_localize_script(
 		'likecoin-admin-settings-1',
 		'likecoinReactAppData',
-		array( 'appSelector' => '#wpbody #wpbody-content' )
+		array(
+			'appSelector'   => '#wpbody #wpbody-content',
+			'likecoHost'    => LC_LIKE_CO_HOST,
+			'likerlandHost' => LC_LIKER_LAND_HOST,
+		)
 	);
 }
diff --git a/likecoin/includes/constant/options.php b/likecoin/includes/constant/options.php
@@ -69,3 +69,6 @@
 define( 'LC_MATTERS_USER_ACCESS_TOKEN_FIELD', 'access_token' );
 
 define( 'LC_MATTERS_API_ENDPOINT', 'https://server.matters.news/graphql' );
+
+define( 'LC_LIKE_CO_HOST', 'like.co' );
+define( 'LC_LIKER_LAND_HOST', 'liker.land' );
diff --git a/likecoin/js/admin-settings/src/components/LikeButtonPreview.js b/likecoin/js/admin-settings/src/components/LikeButtonPreview.js
@@ -3,12 +3,12 @@ import { ReactComponent as SettingSvg } from './icon/settings.svg';
 
 function LikeButtonPreview(props) {
   const iframeSrc = props.userLikerId.length > 0
-    ? `https://button.like.co/in/embed/${props.userLikerId}/button?type=wp&integration=wordpress_plugin`
+    ? `https://button.${props.likecoHost}/in/embed/${props.userLikerId}/button?type=wp&integration=wordpress_plugin`
     : '';
   const iframeStyle = {
     pointerEvents: 'none',
-    height: '212px',
-    width: '500px',
+    height: '480px',
+    width: '360px',
   };
   return (
     <section className="likecoin optionsSection">
@@ -18,7 +18,7 @@ function LikeButtonPreview(props) {
           rel="noopener noreferrer"
           target="_blank"
           className="icon"
-          href="https://like.co/in/settings"
+          href={`https://${props.likecoHost}/in/settings`}
         >
           <SettingSvg />
         </a>

diff --git a/likecoin/js/admin-settings/src/components/LikecoinInfoTable.js b/likecoin/js/admin-settings/src/components/LikecoinInfoTable.js
@@ -7,7 +7,7 @@ function LikecoinInfoTable(props) {
   return (
     <tr>
       {props.isMainSettingPage && (
-        <th className="optionTitle">{__('Site Liker ID', 'likecoin')}</th>
+        <th className="optionTitle">{__('Site Default Liker ID', 'likecoin')}</th>
       )}
       <td>
         <table className="form-table likecoinTable">
@@ -37,7 +37,7 @@ function LikecoinInfoTable(props) {
                         id="likecoinId"
                         rel="noopener noreferrer"
                         target="_blank"
-                        href={`https://like.co/${props.likerIdValue}`}
+                        href={`https://${props.likecoHost}/${props.likerIdValue}`}
                         className="likecoin likecoinId"
                       >
                         {props.likerIdValue}
@@ -59,7 +59,7 @@ function LikecoinInfoTable(props) {
                           className="likecoinInputLabel"
                           target="blacnk"
                           rel="noopener"
-                          href="https://like.co/in"
+                          href={`https://${props.likecoHost}/in`}
                         >
                           {__('Sign Up / Find my Liker ID', 'likecoin')}
                         </a>

diff --git a/likecoin/js/admin-settings/src/components/MainSettingTable.js b/likecoin/js/admin-settings/src/components/MainSettingTable.js
@@ -63,11 +63,11 @@ function MainSettingTable(props) {
       setIsLoading(true);
       try {
         const response = await axios.get(
-          `https://api.like.co/users/id/${likerId}/min`,
+          `https://api.${props.likecoHost}/users/id/${likerId}/min`,
         );
         setLikerIdValue(response.data.user);
         setLikerDisplayName(response.data.displayName);
-        setLikerWalletAddress(response.data.cosmosWallet);
+        setLikerWalletAddress(response.data.likeWallet);
         setLikerAvatar(response.data.avatar);
       } catch (error) {
         console.error(error); // eslint-disable-line no-console
@@ -121,15 +121,10 @@ function MainSettingTable(props) {
       displayOption,
       perPostOptionEnabled: isPerPostOptionEnabled,
       siteLikerInfos: {
-        likecoin_id:
-          likerDisplayName === '-' ? DBSiteLikerId : likerIdValue,
-        display_name:
-          likerDisplayName === '-'
-            ? DBSiteLikerDisplayName
-            : likerDisplayName,
-        wallet:
-          likerDisplayName === '-' ? DBSiteLikerWallet : likerWalletAddress,
-        avatar: likerDisplayName === '-' ? DBSiteLikerAvatar : likerAvatar,
+        likecoin_id: likerIdValue,
+        display_name: likerDisplayName,
+        wallet: likerWalletAddress,
+        avatar: likerAvatar,
       },
     };
     try {
@@ -151,7 +146,13 @@ function MainSettingTable(props) {
     setSavedSuccessful(false);
     setSubmitResponse(null);
   }
-  const handleDisconnect = () => {};
+  function handleDisconnect(e) {
+    e.preventDefault();
+    setLikerIdValue('');
+    setLikerDisplayName('');
+    setLikerWalletAddress('');
+    setLikerAvatar('');
+  }
 
   const forbiddenString = __('Sorry, you are not allowed to access this page.', 'likecoin');
 
@@ -180,20 +181,32 @@ function MainSettingTable(props) {
         />
       )}
       <form onSubmit={confirmHandler}>
-        <Section title={__('Site Liker ID', 'likecoin')} />
+        <Section
+          title={__('Enable LikeCoin button', 'likecoin')}
+        />
         <tbody>
+          <DropDown
+            selected={displayOptionSelected}
+            handleSelect={setDisplayOptionSelected}
+            title={__('Display option', 'likecoin')}
+            selectRef={displayOptionRef}
+            options={pluginSettingOptions}
+          />
           <CheckBox
-            checked={siteLikerIdEnabled}
-            handleCheck={setSiteLikerIdEnabled}
-            title={__('Enable site Liker ID', 'likecoin')}
+            checked={perPostOptionEnabled}
+            handleCheck={setPerPostOptionEnabled}
+            title={__('Allow per Post option', 'likecoin')}
             details={__(
-              'Override all LikeCoin button with site Liker ID',
+              'Allow editors to customize display setting per post',
               'likecoin',
             )}
-            checkRef={siteLikerIdEnabledRef}
+            checkRef={perPostOptionEnabledRef}
           />
-        {siteLikerIdEnabled && (
+        </tbody>
+        <Section title={__('Site Default Liker ID', 'likecoin')} />
+        <tbody>
           <LikecoinInfoTable
+            likecoHost={props.likecoHost}
             likerIdValue={likerIdValue}
             likerDisplayName={likerDisplayName}
             likerWalletAddress={likerWalletAddress}
@@ -206,30 +219,17 @@ function MainSettingTable(props) {
             editable={true}
             isMainSettingPage={true}
             showChangeButton={true}
-            showDisconnectButton={false}
-          />
-        )}
-        </tbody>
-        <Section
-          title={__('Site LikeCoin button display setting', 'likecoin')}
-        />
-        <tbody>
-          <DropDown
-            selected={displayOptionSelected}
-            handleSelect={setDisplayOptionSelected}
-            title={__('Display option', 'likecoin')}
-            selectRef={displayOptionRef}
-            options={pluginSettingOptions}
+            showDisconnectButton={true}
           />
           <CheckBox
-            checked={perPostOptionEnabled}
-            handleCheck={setPerPostOptionEnabled}
-            title={__('Allow per Post option', 'likecoin')}
+            checked={siteLikerIdEnabled}
+            handleCheck={setSiteLikerIdEnabled}
+            title={__('Override all Liker ID with site default', 'likecoin')}
             details={__(
-              'Allow editors to customize display setting per post',
+              'Override all LikeCoin button with site default Liker ID',
               'likecoin',
             )}
-            checkRef={perPostOptionEnabledRef}
+            checkRef={siteLikerIdEnabledRef}
           />
         </tbody>
         <SubmitButton />

diff --git a/likecoin/js/admin-settings/src/pages/LikecoinButtonPage.js b/likecoin/js/admin-settings/src/pages/LikecoinButtonPage.js
@@ -14,6 +14,8 @@ import LikecoinHeading from '../components/LikecoinHeading';
 import { SITE_LIKER_INFO_STORE_NAME } from '../store/site-likerInfo-store';
 import { USER_LIKER_INFO_STORE_NAME } from '../store/user-likerInfo-store';
 
+const { likecoHost } = window.likecoinReactAppData;
+
 function PureLikecoinButtonPage(props) {
   const [siteLikerIdEnabled] = useState(props.DBSiteLikerIdEnabled);
   const [likerIdValue, setLikerIdValue] = useState(props.defaultLikerId);
@@ -38,11 +40,11 @@ function PureLikecoinButtonPage(props) {
       if (!likerId) return;
       try {
         const response = await axios.get(
-          `https://api.like.co/users/id/${likerId}/min`,
+          `https://api.${likecoHost}/users/id/${likerId}/min`,
         );
         setLikerIdValue(response.data.user);
         setLikerDisplayName(response.data.displayName);
-        setLikerWalletAddress(response.data.cosmosWallet);
+        setLikerWalletAddress(response.data.likeWallet);
         setLikerAvatar(response.data.avatar);
         setIsLoading(false);
         setHasValidLikecoinId(true);
@@ -144,6 +146,7 @@ function PureLikecoinButtonPage(props) {
       <Section title={__('Your Liker ID', 'likecoin')} />
       <form onSubmit={confirmHandler}>
         <LikecoinInfoTable
+          likecoHost={likecoHost}
           likerIdValue={likerIdValue}
           likerDisplayName={likerDisplayName}
           likerWalletAddress={likerWalletAddress}
@@ -164,6 +167,7 @@ function PureLikecoinButtonPage(props) {
           <LikeButtonPreview
             userLikerId={likerIdValue}
             hasValidLikecoinId={hasValidLikecoinId}
+            likecoHost={likecoHost}
           />
         )}
         <SubmitButton />
@@ -190,7 +194,7 @@ function LikecoinButtonPage() {
   const { postUserLikerInfo } = useDispatch(USER_LIKER_INFO_STORE_NAME);
 
   const defaultLikerId = useMemo(
-    () => (DBSiteLikerIdEnabled ? DBSiteLikerId : DBUserLikerId),
+    () => (DBSiteLikerIdEnabled ? DBSiteLikerId : (DBUserLikerId || DBSiteLikerId)),
     [DBSiteLikerIdEnabled, DBSiteLikerId, DBUserLikerId],
   );
   const defaultLikerDisplayName = useMemo(

diff --git a/likecoin/js/admin-settings/src/pages/MainSettingPage.js b/likecoin/js/admin-settings/src/pages/MainSettingPage.js
@@ -2,11 +2,16 @@ import { useDispatch } from '@wordpress/data';
 import MainSettingTable from '../components/MainSettingTable';
 import { SITE_LIKER_INFO_STORE_NAME } from '../store/site-likerInfo-store';
 
+const { likecoHost } = window.likecoinReactAppData;
+
 function MainSettingPage() {
   const { postSiteLikerInfo } = useDispatch(SITE_LIKER_INFO_STORE_NAME);
   return (
     <div>
-      <MainSettingTable onSubmit={postSiteLikerInfo} />
+      <MainSettingTable
+        likecoHost={likecoHost}
+        onSubmit={postSiteLikerInfo}
+      />
     </div>
   );
 }

diff --git a/likecoin/js/admin-settings/src/pages/SponsorLikecoinPage.js b/likecoin/js/admin-settings/src/pages/SponsorLikecoinPage.js
@@ -4,6 +4,8 @@ import LikecoinHeading from '../components/LikecoinHeading';
 import ParagraphTitle from '../components/ParagraphTitle';
 import Link from '../components/Link';
 
+const { likerlandHost } = window.likecoinReactAppData;
+
 function SponsorLikecoinPage() {
   const localizedIntroduction = createInterpolateElement(
     __(
@@ -50,7 +52,7 @@ function SponsorLikecoinPage() {
       }),
       CivicLiker: createElement(Link, {
         text: __('Civic Liker', 'likecoin'),
-        linkAddress: 'https://liker.land/civic',
+        linkAddress: `https://${likerlandHost}/civic`,
       }),
     },
   );

diff --git a/likecoin/js/admin/likecoin_metabox.js b/likecoin/js/admin/likecoin_metabox.js
@@ -35,7 +35,7 @@ const MAIN_STATUS_TEXT_MAP = {
   onRegisterISCN: mainStatusRegisterISCN,
 };
 
-const ISCN_WIDGET_ORIGIN = 'https://like.co';
+const ISCN_WIDGET_ORIGIN = `https://${window.wpApiSettings.likecoHost}`;
 
 function updateMainTitleField(signalCSSClass, text) {
   mainTitleField.textContent = '';
@@ -100,7 +100,7 @@ async function onRefreshPublishStatus(e) {
       text: iscnId,
       rel: 'noopener',
       target: '_blank',
-      href: `https://app.like.co/view/${iscnIdString}`,
+      href: `https://app.${window.wpApiSettings.likecoHost}/view/${iscnIdString}`,
     });
     updateFieldStatusElement(ISCNStatusTextField, ISCNLink);
   } else if ( // show button

diff --git a/likecoin/js/sidebar/src/pages/LikeCoinPlugin.js b/likecoin/js/sidebar/src/pages/LikeCoinPlugin.js
@@ -5,10 +5,10 @@ import LikeCoinPluginDocumentSettingPanel from './LikeCoinPluginDocumentSettingP
 import LikeCoinPluginSideBar from './LikeCoinPluginSideBar';
 import LikeCoinPluginPostPublishPanel from './LikeCoinPluginPostPublishPanel';
 
-const { siteurl } = window.wpApiSettings;
+const { siteurl, likecoHost, likerlandHost } = window.wpApiSettings;
 
-const ISCN_WIDGET_ORIGIN = 'https://like.co';
-const NFT_WIDGET_ORIGIN = 'https://app.like.co';
+const ISCN_WIDGET_ORIGIN = `https://${likecoHost}`;
+const NFT_WIDGET_ORIGIN = `https://app.${likecoHost}`;
 const ISCN_RECORD_NOTE = 'LikeCoin WordPress Plugin';
 
 function LikeCoinPlugin(props) {
@@ -245,7 +245,7 @@ function LikeCoinPlugin(props) {
     e.preventDefault();
     if (!ISCNId) return;
     const redirectString = encodeURIComponent(siteurl);
-    const nftUrl = NFTClassId ? `https://liker.land/nft/class/${encodeURIComponent(
+    const nftUrl = NFTClassId ? `https://${likerlandHost}/nft/class/${encodeURIComponent(
       NFTClassId,
     )}` : `${NFT_WIDGET_ORIGIN}/nft/iscn/${encodeURIComponent(ISCNId)}?opener=1&redirect_uri=${redirectString}`;
     const nftWindow = window.open(nftUrl, '_blank');

diff --git a/likecoin/js/sidebar/src/pages/LikeCoinPluginSideBar.js b/likecoin/js/sidebar/src/pages/LikeCoinPluginSideBar.js
@@ -18,7 +18,7 @@ import settingPageEndpoint from '../store/constant';
 import PublishStatus from '../components/PublishStatus';
 import LikeCoinIconPinbar from '../components/LikeCoinIconPinbar';
 
-const { siteurl } = window.wpApiSettings;
+const { siteurl, likecoHost, likerlandHost } = window.wpApiSettings;
 
 function LikeCoinPluginSideBar(props) {
   const content = useSelect((select) => select('core/editor').getEditedPostAttribute('content'));
@@ -162,7 +162,7 @@ function LikeCoinPluginSideBar(props) {
           status={props.ISCNId ? props.ISCNId : '-'}
           link={
             props.ISCNId
-              ? `https://app.like.co/view/${encodeURIComponent(
+              ? `https://app.${likecoHost}/view/${encodeURIComponent(
                 props.ISCNId,
               )}`
               : ''
@@ -171,10 +171,10 @@ function LikeCoinPluginSideBar(props) {
         {props.ISCNId && (
           <SideBarStatusRow
             title={__('NFT', 'likecoin')}
-            status={props.NFTClassId ? props.NFTClassId : '-'}
+            status={props.NFTClassId ? props.NFTClassId : __('Mint Now', 'likecoin')}
             link={
               props.NFTClassId
-                ? `https://liker.land/nft/class/${encodeURIComponent(
+                ? `https://${likerlandHost}/nft/class/${encodeURIComponent(
                   props.NFTClassId,
                 )}`
                 : ''