From da48e54bd67b55ed515599ec1723d8edb7ca615d Mon Sep 17 00:00:00 2001
From: Hadi Lee <leeshuzheng@gmail.com>
Date: Mon, 18 Nov 2024 12:10:09 +0800
Subject: [PATCH] feat: change to logo [SF-1281]

---
 src/assets/img/tradingview-black-logo.svg          | 12 ++++++++++++
 .../molecules/HistoricalChart/HistoricalChart.tsx  | 14 +++++++++++++-
 .../__snapshots__/HistoricalChart.test.tsx.snap    | 13 ++++++++++++-
 .../HistoricalWidget/HistoricalWidget.tsx          | 10 ----------
 4 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/img/tradingview-black-logo.svg

diff --git a/src/assets/img/tradingview-black-logo.svg b/src/assets/img/tradingview-black-logo.svg
new file mode 100644
index 000000000..2768efdc4
--- /dev/null
+++ b/src/assets/img/tradingview-black-logo.svg
@@ -0,0 +1,12 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="180" height="180" fill="black"/>
+<g clip-path="url(#clip0_4807_10016)">
+<path d="M10 10H170V170H10V10Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115.055 72.5C115.055 79.8638 109.086 85.8333 101.722 85.8333C94.3583 85.8333 88.3888 79.8638 88.3888 72.5C88.3888 65.1362 94.3583 59.1667 101.722 59.1667C109.086 59.1667 115.055 65.1362 115.055 72.5ZM81.9999 59.7778H28.6667L28.6665 86.4444H55.3332V125.556H81.9999V59.7778ZM128.755 59.7778H159.333L131.778 125.556H101.111L128.755 59.7778Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4807_10016">
+<rect width="160" height="160" fill="white" transform="translate(10 10)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/molecules/HistoricalChart/HistoricalChart.tsx b/src/components/molecules/HistoricalChart/HistoricalChart.tsx
index ef2e706eb..cd995b54e 100644
--- a/src/components/molecules/HistoricalChart/HistoricalChart.tsx
+++ b/src/components/molecules/HistoricalChart/HistoricalChart.tsx
@@ -10,8 +10,10 @@ import {
     UTCTimestamp,
     WhitespaceData,
 } from 'lightweight-charts';
+import Link from 'next/link';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
+import TradingViewLogo from 'src/assets/img/tradingview-black-logo.svg';
 import { useBreakpoint, useLastPrices } from 'src/hooks';
 import { selectLandingOrderForm } from 'src/store/landingOrderForm';
 import { RootState } from 'src/store/types';
@@ -269,7 +271,7 @@ export function HistoricalChart({
 
     return (
         <div
-            className='bg-neutral-900 pt-1 font-tertiary laptop:pt-2.5'
+            className='relative bg-neutral-900 pt-1 font-tertiary laptop:pt-2.5'
             data-chromatic='ignore'
         >
             <div className={clsx(titleOfChartClass)}>
@@ -345,6 +347,16 @@ export function HistoricalChart({
                 data-testid='volume-chart'
                 className='relative h-[92px] w-full laptop:h-[115px]'
             ></div>
+
+            <Link
+                href='https://www.tradingview.com/'
+                target='_blank'
+                rel='noopener noreferrer'
+                aria-label='Visit TradingView website'
+                className='absolute bottom-3 left-3 z-10 overflow-hidden rounded-full'
+            >
+                <TradingViewLogo className='h-8 w-8' />
+            </Link>
         </div>
     );
 }
diff --git a/src/components/molecules/HistoricalChart/__snapshots__/HistoricalChart.test.tsx.snap b/src/components/molecules/HistoricalChart/__snapshots__/HistoricalChart.test.tsx.snap
index d1c850c89..af84b6132 100644
--- a/src/components/molecules/HistoricalChart/__snapshots__/HistoricalChart.test.tsx.snap
+++ b/src/components/molecules/HistoricalChart/__snapshots__/HistoricalChart.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`HistoricalChart component should match snapshot 1`] = `
     class="w-[600px]"
   >
     <div
-      class="bg-neutral-900 pt-1 font-tertiary laptop:pt-2.5"
+      class="relative bg-neutral-900 pt-1 font-tertiary laptop:pt-2.5"
       data-chromatic="ignore"
     >
       <div
@@ -248,6 +248,17 @@ exports[`HistoricalChart component should match snapshot 1`] = `
           </table>
         </div>
       </div>
+      <a
+        aria-label="Visit TradingView website"
+        class="absolute bottom-3 left-3 z-10 overflow-hidden rounded-full"
+        href="https://www.tradingview.com/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          class="h-8 w-8"
+        />
+      </a>
     </div>
   </div>
 </div>
diff --git a/src/components/organisms/HistoricalWidget/HistoricalWidget.tsx b/src/components/organisms/HistoricalWidget/HistoricalWidget.tsx
index f61de247c..88f0fd085 100644
--- a/src/components/organisms/HistoricalWidget/HistoricalWidget.tsx
+++ b/src/components/organisms/HistoricalWidget/HistoricalWidget.tsx
@@ -1,6 +1,5 @@
 import { toBytes32 } from '@secured-finance/sf-graph-client';
 import queries from '@secured-finance/sf-graph-client/dist/graphclients';
-import Link from 'next/link';
 import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { DropdownSelector, RadioButton } from 'src/components/atoms';
@@ -94,15 +93,6 @@ export const HistoricalWidget = () => {
                         onChange={(time: string) => onTimeScaleChange(time)}
                     />
                 </div>
-                <Link
-                    href='https://www.tradingview.com/'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    aria-label='Visit TradingView website'
-                    className='leading-3.5 rounded-md border border-neutral-200 px-2.5 py-1 text-2.5 font-semibold text-neutral-50'
-                >
-                    Powered by TradingView
-                </Link>
             </div>
             <HistoricalChart data={data} timeScale={selectedTimeScale} />
         </>