Merge pull request #710 from Sifchain/feature/staking-cta

Feature/staking cta
Sifchain · Aug 3, 2022 · 828672c · 828672c
2 parents 37c2f54 + dd39803
commit 828672c
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 119 deletions.
diff --git a/app/src/business/services/DataService/DataService.ts b/app/src/business/services/DataService/DataService.ts
@@ -281,11 +281,9 @@ export default class DataService {
         60000 * 5, // cache for 5 minute
       );
 
-      const isTestHost =
-        window.location.hostname.includes(".vercel.app") ||
-        window.location.hostname === "localhost";
+      const isLocalhost = window.location.hostname === "localhost";
 
-      if (!Output?.length && isTestHost) {
+      if (!Output?.length && isLocalhost) {
         // return mock data if address is not the recipient (means the endpoint is stubbed)
         return {
           address,

diff --git a/app/src/components/NavSidePanel/NavMoreMenu.tsx b/app/src/components/NavSidePanel/NavMoreMenu.tsx
@@ -10,10 +10,6 @@ export default defineComponent({
   },
   setup(props) {
     const items = [
-      {
-        name: "Stake",
-        href: "https://wallet.keplr.app/#/sifchain/stake",
-      },
       {
         name: "Documentation",
         href: "https://docs.sifchain.finance/using-the-website/web-ui-step-by-step",

diff --git a/app/src/components/NavSidePanel/NavSidePanel.tsx b/app/src/components/NavSidePanel/NavSidePanel.tsx
@@ -26,7 +26,9 @@ import TVL from "./TVL";
 let VOTE_PARAM_IN_URL = false;
 try {
   VOTE_PARAM_IN_URL = window.location.href.includes("vote=1");
-} catch (_) {}
+} catch (_) {
+  // do nothing
+}
 
 export default defineComponent({
   setup() {
@@ -44,7 +46,7 @@ export default defineComponent({
 
     watch([router.currentRoute], () => {
       // add ?vote=anything to any hash route to open the voting modal
-      if (!!router.currentRoute.value?.query?.vote) {
+      if (router.currentRoute.value?.query?.vote) {
         votingOpenRef.value = true;
       }
     });
@@ -162,6 +164,11 @@ export default defineComponent({
                     )
                   }
                 />
+                <NavSidePanelItem
+                  displayName="Stake"
+                  icon="navigation/stake"
+                  href="https://wallet.keplr.app/#/sifchain/stake"
+                />
                 {changelogOpenRef.value && (
                   <ChangelogModal
                     onClose={() => (changelogOpenRef.value = false)}

diff --git a/app/src/components/NavSidePanel/NavSidePanelItem.tsx b/app/src/components/NavSidePanel/NavSidePanelItem.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { defineComponent, PropType, HTMLAttributes, computed } from "vue";
 import { useLink, RouterLink } from "vue-router";
 import AssetIcon, { IconName } from "../AssetIcon";
@@ -65,7 +66,7 @@ export default defineComponent({
           })}
           {...(props.onClick && { onClick: props.onClick })}
           class={[
-            `mt-[10px] flex h-[32px] w-full items-center whitespace-nowrap rounded px-[8px] text-left text-sm font-semibold transition-colors duration-75 hover:bg-gray-200`,
+            `group mt-[10px] flex h-[32px] w-full items-center whitespace-nowrap rounded px-[8px] text-left text-sm font-semibold transition-colors duration-75 hover:bg-gray-200`,
             isActive.value && "text-accent-base bg-gray-200",
             props.nonInteractable ? "pointer-events-none" : "cursor-pointer",
             props.class,
@@ -77,7 +78,21 @@ export default defineComponent({
             active={isActive.value}
           />
 
-          <span class="py-[8.5px] px-[10px]">{props.displayName}</span>
+          <span
+            class={clsx("py-[8.5px] px-2.5", {
+              "flex w-full justify-between pr-0": isExternal.value,
+            })}
+          >
+            {props.displayName}
+
+            {isExternal.value && (
+              <AssetIcon
+                icon="interactive/open-external"
+                size={16}
+                class="opacity-0 transition-opacity group-hover:opacity-100"
+              />
+            )}
+          </span>
           {!!props.action && props.action}
         </Cmp.value>
       );

diff --git a/app/src/views/BalancePage/BalanceRow.tsx b/app/src/views/BalancePage/BalanceRow.tsx
@@ -43,99 +43,141 @@ export default defineComponent({
       props.tokenItem.asset.network,
     );
 
-    // Always render all buttons, expandedRef.value or not, they will just be hidden.
-    const buttonsRef = computed(() => [
-      {
-        tag: RouterLink,
-        icon: "interactive/arrow-down",
-        name: "Import",
-        visible: true,
-        help: chainConfig.underMaintenance
-          ? `${displayName} Connection Under Maintenance`
-          : null,
-        props: {
-          disabled:
-            props.tokenItem.asset.decommissioned ||
-            chainConfig.underMaintenance,
-          replace: false,
-          to: getImportLocation("select", {
-            symbol: props.tokenItem.asset.symbol,
-            network:
-              props.tokenItem.asset.homeNetwork === Network.SIFCHAIN
-                ? Network.ETHEREUM
-                : props.tokenItem.asset.homeNetwork,
-          }),
+    const swapItem = computed(() => ({
+      icon: "navigation/swap",
+      name: "Swap",
+      id: "swap",
+      tag: RouterLink,
+      visible: props.isExpanded,
+      help: null,
+      props: {
+        disabled: props.tokenItem.asset.decommissioned,
+        to: {
+          name: "Swap",
+          query: { fromSymbol: props.tokenItem.asset.symbol },
         },
       },
-      hasNoBalance.value
-        ? {
-            tag: "button",
-            icon: "interactive/arrow-up",
-            name: "Export",
-            visible: true,
-            props: { disabled: true, class: "" },
-          }
-        : {
-            tag: RouterLink,
-            icon: "interactive/arrow-up",
-            name: "Export",
-            visible: true,
-            help: chainConfig.underMaintenance
-              ? `${displayName} Connection Under Maintenance`
-              : null,
-            props: {
-              disabled: useChains().get(props.tokenItem.asset.homeNetwork)
-                .chainConfig.underMaintenance,
-              replace: false,
-              to: getExportLocation("setup", {
-                symbol: props.tokenItem.asset.symbol,
-                network:
-                  props.tokenItem.asset.homeNetwork === Network.SIFCHAIN
-                    ? Network.ETHEREUM
-                    : props.tokenItem.asset.homeNetwork,
-              }),
+    }));
+
+    const importItem = computed(() => ({
+      tag: RouterLink,
+      icon: "interactive/arrow-down",
+      name: "Import",
+      visible: true,
+      help: chainConfig.underMaintenance
+        ? `${displayName} Connection Under Maintenance`
+        : null,
+      props: {
+        disabled:
+          props.tokenItem.asset.decommissioned || chainConfig.underMaintenance,
+        replace: false,
+        to: getImportLocation("select", {
+          symbol: props.tokenItem.asset.symbol,
+          network:
+            props.tokenItem.asset.homeNetwork === Network.SIFCHAIN
+              ? Network.ETHEREUM
+              : props.tokenItem.asset.homeNetwork,
+        }),
+      },
+    }));
+
+    // Always render all buttons, expandedRef.value or not, they will just be hidden.
+    const buttonsRef = computed(() =>
+      props.tokenItem.asset.displaySymbol === "rowan" && !props.isExpanded
+        ? [
+            hasNoBalance.value
+              ? importItem.value
+              : {
+                  tag: "a",
+                  icon: "navigation/stake",
+                  name: "Stake",
+                  visible: true,
+                  help: null,
+                  props: {
+                    href: "https://wallet.keplr.app/#/sifchain/stake",
+                    target: "_blank",
+                    rel: "noreferrer noopener",
+                  },
+                },
+            {
+              ...swapItem.value,
+              visible: true,
             },
-          },
-      {
-        icon: "navigation/pool",
-        name: "Pool",
-        id: "pool",
-        visible: props.isExpanded,
-        tag: RouterLink,
-        props: {
-          disabled: props.tokenItem.asset.decommissioned,
-          to: {
-            name: "AddLiquidity",
-            params: {
-              externalAsset:
-                props.tokenItem.asset.symbol === "rowan"
-                  ? ""
-                  : props.tokenItem.asset.symbol,
+          ]
+        : [
+            importItem.value,
+            hasNoBalance.value
+              ? {
+                  tag: "button",
+                  icon: "interactive/arrow-up",
+                  name: "Export",
+                  visible: true,
+                  help: null,
+                  props: { disabled: true, class: "" },
+                }
+              : {
+                  tag: RouterLink,
+                  icon: "interactive/arrow-up",
+                  name: "Export",
+                  visible: true,
+                  help: chainConfig.underMaintenance
+                    ? `${displayName} Connection Under Maintenance`
+                    : null,
+                  props: {
+                    disabled: useChains().get(props.tokenItem.asset.homeNetwork)
+                      .chainConfig.underMaintenance,
+                    replace: false,
+                    to: getExportLocation("setup", {
+                      symbol: props.tokenItem.asset.symbol,
+                      network:
+                        props.tokenItem.asset.homeNetwork === Network.SIFCHAIN
+                          ? Network.ETHEREUM
+                          : props.tokenItem.asset.homeNetwork,
+                    }),
+                  },
+                },
+            {
+              tag: RouterLink,
+              icon: "navigation/pool",
+              name: "Pool",
+              id: "pool",
+              help: null,
+              visible: props.isExpanded,
+              props: {
+                disabled: props.tokenItem.asset.decommissioned,
+                to: {
+                  name: "AddLiquidity",
+                  params: {
+                    externalAsset:
+                      props.tokenItem.asset.symbol === "rowan"
+                        ? ""
+                        : props.tokenItem.asset.symbol,
+                  },
+                },
+              },
             },
-          },
-        },
-      },
-      {
-        icon: "navigation/swap",
-        name: "Swap",
-        id: "swap",
-        tag: RouterLink,
-        visible: props.isExpanded,
-        props: {
-          disabled: props.tokenItem.asset.decommissioned,
-          to: {
-            name: "Swap",
-            query: { fromSymbol: props.tokenItem.asset.symbol },
-          },
-        },
-      },
-    ]);
+            {
+              icon: "navigation/swap",
+              name: "Swap",
+              id: "swap",
+              tag: RouterLink,
+              visible: props.isExpanded,
+              props: {
+                disabled: props.tokenItem.asset.decommissioned,
+                to: {
+                  name: "Swap",
+                  query: { fromSymbol: props.tokenItem.asset.symbol },
+                },
+              },
+            },
+          ],
+    );
 
     return () => (
       <div
         onClick={() => {
           if (props.isMasked) {
-            props.onExpand("");
+            props.onExpand?.("");
           }
         }}
         class={cx(
@@ -298,25 +340,24 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        {/* controls */}
         <div class={["min-w-[360px] flex-1 text-right align-middle"]}>
           <div class="inline-flex items-center">
-            {buttonsRef.value
-              .filter((definition) => definition.visible)
-              .map((definition) => {
+            {[...buttonsRef.value]
+              .filter((btn) => btn.visible)
+              .map((btn) => {
                 const button = (
                   <Button.Inline
-                    key={definition.name}
+                    key={btn.name}
                     class="animation-fade-in mr-1"
-                    icon={definition.icon as IconName}
-                    {...definition.props}
+                    icon={btn.icon as IconName}
+                    {...btn.props}
                   >
-                    {definition.name}
+                    {btn.name}
                   </Button.Inline>
                 );
-                if (!definition.help) return button;
+                if (!btn.help) return button;
                 return (
-                  <Tooltip key={definition.name} content={definition.help}>
+                  <Tooltip key={btn.name} content={btn.help}>
                     {button}
                   </Tooltip>
                 );
@@ -329,7 +370,7 @@ export default defineComponent({
                 props.isExpanded && "bg-gray-base",
               )}
               onClick={() => {
-                props.onExpand(
+                props.onExpand?.(
                   props.isExpanded ? "" : props.tokenItem.asset.symbol,
                 );
               }}