fix: minor ui changes and update meta

rango-exchange · Dec 19, 2023 · af6b233 · af6b233
1 parent e8489e2
commit af6b233
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 44 deletions.
diff --git a/components/common/IconStatus/IconStatus.helper.ts b/components/common/IconStatus/IconStatus.helper.ts
@@ -15,7 +15,7 @@ export const StatusInfo: StatusInfoType = {
     icon: FailIcon,
   },
   success: {
-    title: 'Complete',
+    title: 'Success',
     color: 'text-success',
     backgroundColor: 'bg-backgroundSuccess',
     icon: SuccessIcon,

diff --git a/components/common/Table/cells/AmountCell.tsx b/components/common/Table/cells/AmountCell.tsx
@@ -37,10 +37,10 @@ function AmountCell(props: CellProps) {
       </div>
       <div className="text-12 md:text-14 flex items-center">
         <GassIcon className="text-neutral-400" size="0.875rem" />
-        <span className="px-5 text-neutral-400">Fee :</span>
-        <span className="text-neutral-400">{`$${
-          gasFee ? gasFee.toFixed(2) : '--'
-        }`}</span>
+        <span className="px-5 text-neutral-400">Fee:</span>
+        <span className="text-neutral-400">
+          {gasFee ? `${gasFee.toFixed(2)}` : '--'}
+        </span>
       </div>
     </div>
   );

diff --git a/components/detail/SwapSteps/TransactionURL.tsx b/components/detail/SwapSteps/TransactionURL.tsx
@@ -15,14 +15,15 @@ function TransactionURL(props: TransactionURLProps) {
   return (
     <>
       {explorerUrls.map((exploreItem, index) => {
-        const { description, url } = exploreItem;
+        const { url, description } = exploreItem;
+        const overridedDescription = description + ' Transaction';
         const transactionStatus: SwapStatus =
           index === explorerUrls.length - 1 ? status : 'success';
         return (
           <>
             <TransactionURLMobileItem
               key={url}
-              description={description}
+              description={overridedDescription}
               transactionStatus={transactionStatus}
               url={url}
             />
@@ -32,7 +33,7 @@ function TransactionURL(props: TransactionURLProps) {
               <div className="flex items-center">
                 <IconStatus status={transactionStatus} />
                 <span className="pl-5 text-14 text-primary-500">
-                  {description || 'Swap transaction'}
+                  {overridedDescription || 'Swap transaction'}
                 </span>
               </div>
               <div className="flex items-center">

diff --git a/components/home/Summary/Summary.type.ts b/components/home/Summary/Summary.type.ts
@@ -7,4 +7,5 @@ export interface SummaryProps {
 export interface SummaryItemProps {
   value: number;
   title: string;
+  prefix?: string;
 }
diff --git a/components/home/Summary/SummaryItem.tsx b/components/home/Summary/SummaryItem.tsx
@@ -3,11 +3,12 @@ import { SummaryItemProps } from './Summary.type';
 import { AmountConverter } from 'utils/amountConverter';
 
 function SummaryItem(props: SummaryItemProps) {
-  const { value, title } = props;
+  const { value, title, prefix } = props;
   return (
     <div className="p-10 md:p-25 flex flex-col justify-center bg-neutral-700 rounded-soft md:rounded-normal">
       <p className="text-10 md:text-12 text-neutral-100 mb-10">{title}</p>
       <p className="text-14 md:text-28 font-semibold text-baseForeground">
+        {prefix}
         {AmountConverter(value)}
       </p>
     </div>

diff --git a/components/home/Summary/index.tsx b/components/home/Summary/index.tsx
@@ -6,14 +6,15 @@ function Summary(props: SummaryProps) {
   const { summary } = props;
   return (
     <div className="grid grid-cols-2 gap-10 pr-20 md:pr-0 md:gap-15">
+      <SummaryItem value={summary.connectedWallets} title="Total Wallets" />
       <SummaryItem
-        value={summary.connectedWallets}
-        title="Total Wallets Connected"
+        value={summary.totalTxVolumeUSD}
+        title="Total Volume"
+        prefix="$"
       />
-      <SummaryItem value={summary.totalTxVolumeUSD} title="Total Swap Volume" />
-      <SummaryItem value={summary.totalTxCount} title="Total Swap" />
-      <SummaryItem value={summary.supportedDexes} title="Supported Dexes" />
-      <SummaryItem value={summary.supportedChains} title="Supported Chain" />
+      <SummaryItem value={summary.totalTxCount} title="Total Swaps" />
+      <SummaryItem value={summary.supportedDexes} title="Supported DEXes" />
+      <SummaryItem value={summary.supportedChains} title="Supported Chains" />
       <SummaryItem value={summary.supportedBridges} title="Supported Bridges" />
     </div>
   );

diff --git a/components/search/NotFound/index.tsx b/components/search/NotFound/index.tsx
@@ -13,14 +13,14 @@ function NotFound(props: PropsType) {
         alt="Not Found"
       />
       <div className="text-16  md:text-45 pt-[45px] md:pt-[100px] text-center text-primary-500 font-semibold">
-        Oops! We couldn't find what you are looking for
+        Oops! We couldn't find what you were looking for.
       </div>
       <div className="text-14 text-center md:text-20 text-neutral-800 pt-10">
         {`The search string you entered was: ${query || ''}`}
       </div>
-      <div className="text-14 text-center md:text-20 text-neutral-800">
+      {/* <div className="text-14 text-center md:text-20 text-neutral-800">
         This is an invalid search string.
-      </div>
+      </div> */}
       <Link
         href="/"
         className="text-baseForeground bg-primary-600 py-10 md:py-15 px-20 mt-50 text-center rounded-full w-[224px] text-14 md:text-18 font-medium">

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -8,8 +8,11 @@ import Document, {
   DocumentContext,
 } from 'next/document';
 
-const description =
-  'Multi-chain DEX aggregator, binance bridge, 1inch, Thorchain, Terra Bridge, Terra Swap, crypto API under a unified UX';
+const description = 'Track all transactions on Rango Exchange';
+const socialTitle = 'Rango Exchange Explorer';
+const BASE_URL = 'https://scan.rango.exchange';
+const APP_NAME = 'Rango Exchange Explorer';
+
 class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
@@ -20,13 +23,34 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          <link rel="icon" href="/favicon.png" />
-
+          <link rel="icon" href="/favicon.svg" />
+          <link rel="shortcut icon" type="image/png" href="/favicon.png" />
           <meta name="Description" content={description} />
           <meta
             name="keywords"
-            content="Rango Exchange, Rango Finance, Multi-chain DEX aggregator, binance bridge, 1inch, Thorchain, Terra Bridge, Terra Swap, crypto API"
+            content="Rango Exchange, Rango dApp, Multi-chain DEX aggregator, Cross-Chain Swap, binance bridge, 1inch, crypto API, Metamask"
+          />
+
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:site" content="@rangoexchange" />
+          <meta name="twitter:title" content={socialTitle} />
+          <meta name="twitter:description" content={description} />
+          <meta name="twitter:creator" content="@rangoexchange" />
+          <meta
+            name="twitter:image"
+            content="https://scan.rango.exchange/preview.jpg"
+          />
+
+          <meta property="og:title" content={socialTitle} />
+          <meta property="og:type" content="site" />
+          <meta property="og:url" content={`${BASE_URL}/`} />
+          <meta
+            property="og:image"
+            content="https://scan.rango.exchange/preview.jpg"
           />
+          <meta property="og:image:alt" content="Rango Exchange Explorer" />
+          <meta property="og:description" content={description} />
+          <meta property="og:site_name" content={APP_NAME} />
         </Head>
         <body className="bg-background">
           <Main />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -39,7 +39,7 @@ function Home(props: PropsType) {
   return status ? (
     <Error statusCode={status} />
   ) : (
-    <Layout title="Rango Scanner">
+    <Layout title="Rango Exchange Explorer">
       <div>
         <div className="flex flex-col items-center relative bg-baseBackground h-[595px] md:h-[662px]">
           <SearchBox />

diff --git a/public/favicon copy.png b/public/favicon copy.png
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,21 +1,22 @@
 {
-    "short_name": "Rango Exchange Explorer",
-    "name": "Rango Exchange Explorer",
-    "icons": [
-      {
-        "src": "favicon.png",
-        "sizes": "64x64 32x32 24x24 16x16",
-        "type": "image/png"
-      },
-      {
-        "src": "logo192.png",
-        "type": "image/png",
-        "sizes": "192x192"
-      }
-    ],
-    "start_url": ".",
-    "display": "standalone",
-    "theme_color": "#000000",
-    "background_color": "#ffffff"
-  }
-
+  "short_name": "Rango Exchange Explorer",
+  "name": "Rango Exchange Explorer",
+  "description": "Track all transactions on Rango Exchange",
+  "icons": [
+    {
+      "src": "logo.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "logo.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "homepage_url": "https://scan.rango.exchange"
+}
diff --git a/public/preview.jpg b/public/preview.jpg