refactor links (#1395)

* asshub account link * subscan link * subsquare link * statescan link * in-site tips link * in-site user detail link * delete make url pathname
opensquare-network · Jul 5, 2024 · b910bd9 · b910bd9
1 parent 88af0c0
commit b910bd9
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 126 deletions.
diff --git a/site/src/components/User/index.jsx b/site/src/components/User/index.jsx
@@ -7,7 +7,6 @@ import Badge from "./Badge";
 import { useIdentity } from "../../utils/hooks";
 import DeletedAccount from "./DeletedAccount";
 import { Link as RouterLink } from "react-router-dom";
-import { makeInSiteUserDetailLink } from "../../utils/url";
 import { truncate } from "../../styles/tailwindcss";
 
 const Wrapper = styled.div`
@@ -55,9 +54,7 @@ const User = ({
   );
 
   if (!noLink) {
-    username = (
-      <Link to={makeInSiteUserDetailLink(address, role)}>{username}</Link>
-    );
+    username = <Link to={`/users/${address}/${role}`}>{username}</Link>;
   }
 
   return (

diff --git a/site/src/constants/assetHub.js b/site/src/constants/assetHub.js
@@ -2,3 +2,4 @@ export const ASSET_HUB_ACCOUNT =
   "14xmwinmCEz6oRrFdczHKqHgWNMiCysE2KrA4jXXAAM1Eogk";
 export const ASSET_HUB_USDT_ASSET_ID = 1984;
 export const ASSET_HUB_USDC_ASSET_ID = 1337;
+export const ASSET_HUB_ACCOUNT_LINK = `https://statemint.statescan.io/#/accounts/${ASSET_HUB_ACCOUNT}`;
diff --git a/site/src/pages/Overview/AssetHub.jsx b/site/src/pages/Overview/AssetHub.jsx
@@ -20,6 +20,7 @@ import { overviewSelector } from "../../store/reducers/overviewSlice";
 import { useSelector } from "react-redux";
 import { useAssetHubAsset } from "../../hooks/assetHub/useAssetHubAsset";
 import {
+  ASSET_HUB_ACCOUNT_LINK,
   ASSET_HUB_USDC_ASSET_ID,
   ASSET_HUB_USDT_ASSET_ID,
 } from "../../constants/assetHub";
@@ -247,10 +248,7 @@ export default function AssetHub() {
     <Wrapper>
       <Title>
         <img src="/imgs/chains-assethub.svg" alt="" />
-        <TitleLink
-          href="https://statemint.statescan.io/#/accounts/14xmwinmCEz6oRrFdczHKqHgWNMiCysE2KrA4jXXAAM1Eogk"
-          iconSize={24}
-        >
+        <TitleLink href={ASSET_HUB_ACCOUNT_LINK} iconSize={24}>
           AssetHub
         </TitleLink>
       </Title>

diff --git a/site/src/pages/UsersDetail/Councilor/CouncilorShip/index.jsx b/site/src/pages/UsersDetail/Councilor/CouncilorShip/index.jsx
@@ -22,7 +22,6 @@ import { CouncilorShipLoading } from "./styled";
 import { sortBy } from "lodash";
 import HeatMap from "../../../../components/HeatMap";
 import ExternalLink from "../../../../components/ExternalLink";
-import { makeSubscanLink } from "../../../../utils/url";
 
 export default function CouncilorShip() {
   const dispatch = useDispatch();
@@ -80,11 +79,7 @@ function CouncilorInfo({ chain, data }) {
         </TooltipContentDetailItemLabel>
         <TooltipContentDetailItemValue>
           <ExternalLink
-            href={makeSubscanLink(
-              chain,
-              "block",
-              data.meta?.indexer?.blockHeight,
-            )}
+            href={`https://${chain}.subscan.io/block/${data.meta?.indexer?.blockHeight}`}
           >
             {data.meta?.indexer?.blockHeight?.toLocaleString?.() || "-"}
           </ExternalLink>

diff --git a/site/src/pages/UsersDetail/Councilor/MotionAttendance.jsx b/site/src/pages/UsersDetail/Councilor/MotionAttendance.jsx
@@ -19,7 +19,6 @@ import { chainSelector } from "../../../store/reducers/chainSlice";
 import { useEffect } from "react";
 import { useParams } from "react-router";
 import Loading from "../../../components/TableLoading";
-import { makeSubsquareLink } from "../../../utils/url";
 import ExternalLink from "../../../components/ExternalLink";
 import { sortBy } from "lodash";
 
@@ -65,12 +64,7 @@ export default function MotionAttendance() {
                 </TooltipContentDetailItemLabel>
                 <TooltipContentDetailItemValue>
                   <ExternalLink
-                    href={makeSubsquareLink(
-                      chain,
-                      "council",
-                      "motion",
-                      data.meta.motionIndex,
-                    )}
+                    href={`https://${chain}.subsquare.io/council/motion/${data.meta.motionIndex}`}
                   >
                     #{data.meta.motionIndex}
                   </ExternalLink>

diff --git a/site/src/pages/UsersDetail/Councilor/TipAttendance.jsx b/site/src/pages/UsersDetail/Councilor/TipAttendance.jsx
@@ -20,7 +20,6 @@ import {
 } from "./styled";
 import HeatMap from "../../../components/HeatMap";
 import { Link } from "react-router-dom";
-import { makeInSiteTipLink } from "../../../utils/url";
 import { ellipsis } from "../../../utils/ellipsis";
 import { toPrecision, getPrecision } from "../../../utils";
 import { sortBy } from "lodash";
@@ -66,11 +65,7 @@ export default function TipAttendance() {
                 </TooltipContentDetailItemLabel>
                 <TooltipContentDetailItemValue>
                   <Link
-                    to={makeInSiteTipLink(
-                      "tips",
-                      data.meta.tipHeight,
-                      data.meta.tipHash,
-                    )}
+                    to={`/tips/${data.meta.tipHeight}_${data.meta.tipHash}`}
                   >
                     {ellipsis(data.meta.tipHash)}
                   </Link>

diff --git a/site/src/pages/UsersDetail/UserInfo/index.jsx b/site/src/pages/UsersDetail/UserInfo/index.jsx
@@ -18,7 +18,6 @@ import { USER_ROLES } from "../../../constants";
 import styled from "styled-components";
 import { Link as RouterLink } from "react-router-dom";
 import { useUserLinks } from "./useUserLinks";
-import { makeInSiteUserDetailLink } from "../../../utils/url";
 import { isProposalsRole } from "../utils";
 
 const InfoCardTitleWrapper = styled.div`
@@ -93,11 +92,9 @@ export default function UserInfo({ role, setRole = () => {} }) {
             {Object.values(USER_ROLES).map((r, idx) => (
               <Link
                 key={idx}
-                to={makeInSiteUserDetailLink(
-                  address,
-                  r,
-                  isProposalsRole(r) ? "proposals" : "",
-                )}
+                to={`/users/${address}/${r}${
+                  isProposalsRole(r) ? "proposals" : ""
+                }`}
               >
                 <Tag
                   rounded

diff --git a/site/src/pages/UsersDetail/UserInfo/useUserLinks.jsx b/site/src/pages/UsersDetail/UserInfo/useUserLinks.jsx
@@ -2,12 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router";
 import { chainSelector } from "../../../store/reducers/chainSlice";
-import {
-  ensureLinkProtocol,
-  makeStatescanLink,
-  makeSubscanLink,
-  makeSubsquareLink,
-} from "../../../utils/url";
+import { ensureLinkProtocol } from "../../../utils/url";
 import { currentChainSettings } from "../../../utils/chains";
 
 export function useUserLinks() {
@@ -20,13 +15,13 @@ export function useUserLinks() {
     const items = [];
     const fixedItems = [
       {
-        link: makeSubsquareLink(chain, "user", address),
+        link: `https://${chain}.subsquare.io/user/${address}`,
       },
       {
-        link: makeSubscanLink(chain, "account", address),
+        link: `https://${chain}.subscan.io/account/${address}`,
       },
       currentChainSettings.hasStatescan && {
-        link: makeStatescanLink(chain, "#", "accounts", address),
+        link: `https://${chain}.statescan.io/#/accounts/${address}`,
       },
     ].filter(Boolean);
 

diff --git a/site/src/pages/UsersDetail/index.jsx b/site/src/pages/UsersDetail/index.jsx
@@ -9,7 +9,6 @@ import { useResetTableData } from "./useResetTableData";
 import Councilor from "./Councilor";
 import { useHistory, useParams } from "react-router";
 import { isProposalsRole } from "./utils";
-import { makeInSiteUserDetailLink } from "../../utils/url";
 import Grade from "./Councilor/Grade";
 
 export default function UsersDetail() {
@@ -25,9 +24,7 @@ export default function UsersDetail() {
 
   useEffect(() => {
     if (!tableTab && isProposalsRole(roleParam)) {
-      history.replace(
-        makeInSiteUserDetailLink(address, roleParam, "proposals"),
-      );
+      history.replace(`/users/${address}/${roleParam}/proposals`);
     }
   }, [roleParam, tableTab, address, history]);
 

diff --git a/site/src/services/urls.js b/site/src/services/urls.js
@@ -1,33 +1,32 @@
 // NOTE: collection for all api urls
 // TODO: move all to here
-import { makeUrlPathname } from "../utils/url";
 
 // page user detail
 // route: /:symbol/users/:address
-export function userDetailProposalCounts(address, role) {
-  return makeUrlPathname("account", address, role, "counts");
+export function userDetailProposalCountsApi(address, role) {
+  return `/account/${address}/${role}/counts`;
 }
-export function userDetailCouncilorTerms(address) {
-  return makeUrlPathname("account", address, "councilor", "terms");
+export function userDetailCouncilorTermsApi(address) {
+  return `/account/${address}/councilor/terms`;
 }
-export function userDetailCouncilorMotions(address) {
-  return makeUrlPathname("account", address, "councilor", "motions");
+export function userDetailCouncilorMotionsApi(address) {
+  return `/account/${address}/councilor/motions`;
 }
-export function userDetailCouncilorTips(address) {
-  return makeUrlPathname("account", address, "councilor", "tippers");
+export function userDetailCouncilorTipsApi(address) {
+  return `/account/${address}/councilor/tips`;
 }
-export function userDetailCouncilorRates(address) {
-  return makeUrlPathname("account", address, "councilor", "rates");
+export function userDetailCouncilorRatesApi(address) {
+  return `/account/${address}/councilor/rates`;
 }
 
-export function userDetailRates(address) {
-  return makeUrlPathname("account", address, "rates");
+export function userDetailRatesApi(address) {
+  return `/account/${address}/rates`;
 }
 
-export function userDetailCouncilorRateStats(address) {
-  return makeUrlPathname("account", address, "councilor", "ratestats");
+export function userDetailCouncilorRateStatsApi(address) {
+  return `/account/${address}/councilor/ratestats`;
 }
 
-export function userDetailRateStats(address) {
-  return makeUrlPathname("account", address, "ratestats");
+export function userDetailRateStatsApi(address) {
+  return `/account/${address}/ratestats`;
 }
diff --git a/site/src/store/reducers/rateSlice.js b/site/src/store/reducers/rateSlice.js
@@ -5,10 +5,10 @@ import { signMessageWithExtension } from "../../services/chainApi";
 import { addToast } from "./toastSlice";
 import { REACTION_THUMBUP } from "../../constants";
 import {
-  userDetailCouncilorRates,
-  userDetailCouncilorRateStats,
-  userDetailRates,
-  userDetailRateStats,
+  userDetailCouncilorRatesApi,
+  userDetailCouncilorRateStatsApi,
+  userDetailRatesApi,
+  userDetailRateStatsApi,
 } from "../../services/urls";
 
 const rateSlice = createSlice({
@@ -106,9 +106,9 @@ export const addRate =
 export const fetchRateStats = (type, index) => async (dispatch) => {
   let url = `/${pluralize(type)}/${index}/ratestats`;
   if (type === "councilor") {
-    url = userDetailCouncilorRateStats(index);
+    url = userDetailCouncilorRateStatsApi(index);
   } else if (type === "user") {
-    url = userDetailRateStats(index);
+    url = userDetailRateStatsApi(index);
   }
 
   const { result } = await api.fetch(url);
@@ -128,9 +128,9 @@ export const fetchRateStats = (type, index) => async (dispatch) => {
 export const fetchRates = (type, index, page, pageSize) => async (dispatch) => {
   let url = `/${pluralize(type)}/${index}/rates`;
   if (type === "councilor") {
-    url = userDetailCouncilorRates(index);
+    url = userDetailCouncilorRatesApi(index);
   } else if (type === "user") {
-    url = userDetailRates(index);
+    url = userDetailRatesApi(index);
   }
 
   const { result } = await api.maybeAuthFetch(url, { page, pageSize });

diff --git a/site/src/store/reducers/usersDetailSlice.js b/site/src/store/reducers/usersDetailSlice.js
@@ -4,10 +4,10 @@
 import { createSlice } from "@reduxjs/toolkit";
 import api from "../../services/scanApi";
 import {
-  userDetailProposalCounts,
-  userDetailCouncilorTerms,
-  userDetailCouncilorMotions,
-  userDetailCouncilorTips,
+  userDetailProposalCountsApi,
+  userDetailCouncilorTermsApi,
+  userDetailCouncilorMotionsApi,
+  userDetailCouncilorTipsApi,
 } from "../../services/urls";
 
 const usersDetailSlice = createSlice({
@@ -68,7 +68,9 @@ export const {
 export const fetchUsersCounts = (address, role) => async (dispatch) => {
   dispatch(setCountsLoading(true));
   try {
-    const { result } = await api.fetch(userDetailProposalCounts(address, role));
+    const { result } = await api.fetch(
+      userDetailProposalCountsApi(address, role),
+    );
     dispatch(setCounts(result));
   } finally {
     dispatch(setCountsLoading(false));
@@ -81,7 +83,7 @@ export const resetUsersCounts = () => (dispatch) => {
 export const fetchCouncilorShipTerms = (address) => async (dispatch) => {
   dispatch(setCouncilorShipLoading(true));
   try {
-    const { result } = await api.fetch(userDetailCouncilorTerms(address));
+    const { result } = await api.fetch(userDetailCouncilorTermsApi(address));
     dispatch(setCouncilorShip(result));
   } finally {
     dispatch(setCouncilorShipLoading(false));
@@ -92,7 +94,7 @@ export const resetCouncilorShipTerms = makeReset(setCouncilorShip, null);
 export const fetchMotionAttendance = (address) => async (dispatch) => {
   dispatch(setMotionAttendanceLoading(true));
   try {
-    const { result } = await api.fetch(userDetailCouncilorMotions(address));
+    const { result } = await api.fetch(userDetailCouncilorMotionsApi(address));
     dispatch(setMotionAttendance(result));
   } finally {
     dispatch(setMotionAttendanceLoading(false));
@@ -103,7 +105,7 @@ export const resetMotionAttendance = makeReset(setMotionAttendance, null);
 export const fetchTipAttendance = (address) => async (dispatch) => {
   dispatch(setTipAttendanceLoading(true));
   try {
-    const { result } = await api.fetch(userDetailCouncilorTips(address));
+    const { result } = await api.fetch(userDetailCouncilorTipsApi(address));
     dispatch(setTipAttendance(result));
   } finally {
     dispatch(setTipAttendanceLoading(false));

diff --git a/site/src/utils/url.js b/site/src/utils/url.js
@@ -1,46 +1,3 @@
-/**
- * @description compose subscan link
- * @example makeSubscanLink("kusama", "user", :address) -> "https://kusama.subscan.io/user/:address"
- */
-export function makeSubscanLink(chain, ...pathnames) {
-  const hostname = `${chain}.subscan.io`;
-
-  return makeUrl({
-    hostname,
-    pathname: makeUrlPathname(...pathnames),
-  });
-}
-
-export function makeSubsquareLink(chain, ...pathnames) {
-  const hostname = `${chain}.subsquare.io`;
-
-  return makeUrl({
-    hostname,
-    pathname: makeUrlPathname(...pathnames),
-  });
-}
-
-export function makeStatescanLink(chain, ...pathnames) {
-  const hostname = `${chain}.statescan.io`;
-
-  return makeUrl({
-    hostname,
-    pathname: makeUrlPathname(...pathnames),
-  });
-}
-
-export function makeInSiteTipLink(page, tipHeight, tipHash) {
-  return makeUrlPathname(page, `${tipHeight}_${tipHash}`);
-}
-
-/**
- * @link `/:symbol/users/:address`
- * @description page user detail
- */
-export function makeInSiteUserDetailLink(address, role, tableTab) {
-  return makeUrlPathname("users", address, role, tableTab);
-}
-
 /**
  * @description ensure link protocol
  * @example google.com -> https://google.com
@@ -58,10 +15,6 @@ export function ensureLinkProtocol(link = "", protocol = "https:") {
   return makeUrl(value);
 }
 
-export function makeUrlPathname(...paths) {
-  return "/" + paths.filter(Boolean).join("/");
-}
-
 /**
  * @description get url file extension, otherwise returns `''`
  * @example returns `.svg` or `svg`