update interface

ergoplatform · Mar 12, 2024 · e329cb6 · e329cb6
1 parent d4f212d
commit e329cb6
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "axios": "^0.24.0",
     "axios-hooks": "^4.0.0",
     "craco-less": "^1.20.0",
-    "dexy-sdk-ts": "0.2.3",
+    "dexy-sdk-ts": "0.2.4",
     "ergo-lib-wasm-browser": "^0.23.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "lodash": "^4.17.21",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,11 @@
 import {
+  Box,
   Col,
   ContextModalProvider,
   Flex,
   Row,
+  Space,
+  Typography,
   useDevice,
 } from '@ergolabs/ui-kit';
 import { DateTime, Interval } from 'luxon';
@@ -57,45 +60,58 @@ export const App: FC = () => {
     <>
       {applicationReady && (
         <ContextModalProvider>
-          <Container col>
-            <Glow />
-            <Flex.Item>
-              <Header />
-            </Flex.Item>
-
-            <Flex.Item
-              marginTop={valBySize(5, 5, 20)}
-              style={{ paddingBottom: '100px' }}
-            >
-              <Content col={valBySize(true, true, false)}>
-                <Col
-                  span={valBySize(24, 24, 12)}
-                  style={{
-                    paddingRight: valBySize('0', '0', '16px'),
-                    paddingBottom: valBySize('16px', '16px', '0'),
-                  }}
+          <div>
+            <Flex justify="center" style={{ background: '#0ca581' }}>
+              <Box padding={1} transparent bordered={false}>
+                <Typography.Link
+                  href="https://docs.ergoplatform.com/eco/dexy/"
+                  style={{ color: 'white' }}
+                  target="_blank"
                 >
-                  <Flex col>
-                    <Flex.Item marginBottom={4}>
-                      <BankInfo />
-                    </Flex.Item>
-                    <Flex.Item marginBottom={4}>
-                      <MintForm />
-                    </Flex.Item>
-                    <Flex.Item>
-                      <TradeInfo />
-                    </Flex.Item>
-                  </Flex>
-                </Col>
-                <Col span={valBySize(24, 24, 12)}>
-                  <Content gap={4} col>
-                    <BankReservesGraph />
-                    <CirculationSupply />
-                  </Content>
-                </Col>
-              </Content>
-            </Flex.Item>
-          </Container>
+                  Check how it works ↗️
+                </Typography.Link>
+              </Box>
+            </Flex>
+            <Container col>
+              <Glow />
+              <Flex.Item>
+                <Header />
+              </Flex.Item>
+
+              <Flex.Item
+                marginTop={valBySize(5, 5, 20)}
+                style={{ paddingBottom: '100px' }}
+              >
+                <Content col={valBySize(true, true, false)}>
+                  <Col
+                    span={valBySize(24, 24, 12)}
+                    style={{
+                      paddingRight: valBySize('0', '0', '16px'),
+                      paddingBottom: valBySize('16px', '16px', '0'),
+                    }}
+                  >
+                    <Flex col>
+                      <Flex.Item marginBottom={4}>
+                        <BankInfo />
+                      </Flex.Item>
+                      <Flex.Item marginBottom={4}>
+                        <MintForm />
+                      </Flex.Item>
+                      <Flex.Item>
+                        <TradeInfo />
+                      </Flex.Item>
+                    </Flex>
+                  </Col>
+                  <Col span={valBySize(24, 24, 12)}>
+                    <Content gap={4} col>
+                      <BankReservesGraph />
+                      <CirculationSupply />
+                    </Content>
+                  </Col>
+                </Content>
+              </Flex.Item>
+            </Container>
+          </div>
         </ContextModalProvider>
       )}
     </>

diff --git a/src/applicationConfig.ts b/src/applicationConfig.ts
@@ -13,6 +13,8 @@ export interface ApplicationConfig {
   readonly spectrumUrl: string;
   readonly dexybankUrl: string;
   readonly dexyOraclePool: string;
+  readonly dexyTradeLink: string;
+  readonly dexyProvideLiquidity: string;
 }
 
 export const applicationConfig: ApplicationConfig = {
@@ -31,4 +33,8 @@ export const applicationConfig: ApplicationConfig = {
   dexybankUrl: 'https://api-testnet.dexygold.com/api',
   dexyOraclePool:
     'https://explorer.ergoplatform.com/en/oracle-pool-state/xauerg',
+  dexyTradeLink:
+    'https://dexy.interface-ggd.pages.dev/ergo/swap?base=0000000000000000000000000000000000000000000000000000000000000000&quote=0d69a552b30df9be519099ec07682039b0610267aaee48d2a1d3dad398287ef5&initialPoolId=0fa04f3851b18085f160d90bc3dba1c63f2fdc73f884c9fd94395dbfc9c293b6',
+  dexyProvideLiquidity:
+    'https://dexy.interface-ggd.pages.dev/ergo/liquidity/0fa04f3851b18085f160d90bc3dba1c63f2fdc73f884c9fd94395dbfc9c293b6',
 };
diff --git a/src/components/BankInfo/BankInfo.tsx b/src/components/BankInfo/BankInfo.tsx
@@ -51,6 +51,8 @@ const BankInfo = () => {
         <div>
           <Typography.Link
             style={{ fontSize: valBySize('12px', '14px', '16px') }}
+            href={applicationConfig.dexyTradeLink}
+            target="_blank"
           >
             <Flex align="center" gap={0.5}>
               Liquidity pool price

diff --git a/src/components/CirculationSupply/CirculationSupply.tsx b/src/components/CirculationSupply/CirculationSupply.tsx
@@ -143,7 +143,7 @@ export const CirculationSupply: React.FC = () => {
       <Flex col position="relative">
         <Flex.Item marginTop={4} marginLeft={4} marginRight={4}>
           <Flex align="center">
-            <Typography.Text>Circulation Supply</Typography.Text>
+            <Typography.Text>Circulating Supply</Typography.Text>
             {!s && <Flex.Item marginLeft="auto">{tabs}</Flex.Item>}
           </Flex>
         </Flex.Item>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@ergolabs/ui-kit';
+import { Flex, Typography } from '@ergolabs/ui-kit';
 import React, { FC } from 'react';
 import styled from 'styled-components';
 

diff --git a/src/components/TradeInfo/TradeInfo.tsx b/src/components/TradeInfo/TradeInfo.tsx
@@ -1,6 +1,7 @@
 import { Box, Flex, Typography, useDevice } from '@ergolabs/ui-kit';
 import React from 'react';
 
+import { applicationConfig } from '../../applicationConfig';
 import { ReactComponent as OpenIcon } from '../../assets/OpeninNew.svg';
 
 const TradeInfo = () => {
@@ -11,6 +12,8 @@ const TradeInfo = () => {
         <Flex.Item marginRight={20}>
           <Typography.Link
             style={{ fontSize: valBySize('12px', '14px', '16px') }}
+            href={applicationConfig.dexyTradeLink}
+            target="_blank"
           >
             <Flex align="center" gap={0.5}>
               Trade DexyGold
@@ -22,6 +25,8 @@ const TradeInfo = () => {
         <Flex.Item>
           <Typography.Link
             style={{ fontSize: valBySize('12px', '14px', '16px') }}
+            href={applicationConfig.dexyProvideLiquidity}
+            target="_blank"
           >
             <Flex align="center" gap={0.5}>
               Provide Liquidity

diff --git a/yarn.lock b/yarn.lock
@@ -4865,10 +4865,10 @@ detect-port-alt@^1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-dexy-sdk-ts@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/dexy-sdk-ts/-/dexy-sdk-ts-0.2.3.tgz#abbf4a0563413dcbce1349cdd02b70a24f3f8b8d"
-  integrity sha512-Fvcziq/7O/++YWx+zAuYrtTcLZ/6iB2TKO4SjG9lHX5r0JXBo/EI/fngfFsq1TWDIbbxma5tbT7c3HJCuOaChA==
+dexy-sdk-ts@0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/dexy-sdk-ts/-/dexy-sdk-ts-0.2.4.tgz#7eedc35b90e86ab19242fa36257384135dc7b85b"
+  integrity sha512-9M8XL3SOGfERPNq8T+lgEicvnfmHlr3Vg9EPPrxwV0mGTS6/odpAl3NzKUzBQdP2TwVN7IvOfTqrtdTnmr9sng==
   dependencies:
     "@ergolabs/ergo-sdk" "^0.5.6"
     ergo-lib-wasm-browser "^0.23.0"