diff --git a/package.json b/package.json index 715a1c7..5ae2516 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.7.1", - "grommet": "^2.20.0", + "grommet": "^2.20.1", "near-api-js": "^0.44.2", "next": "12.0.7", "react": "17.0.2", diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 61ff60b..f628c25 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -11,6 +11,7 @@ import { } from 'grommet' import { List, Unlink, Link } from 'grommet-icons' import Image from 'next/image' +import { utils } from 'near-api-js' import { NearContext } from 'src/near/nearContext' import { CONTRACT_NAME } from 'src/near/config' @@ -26,6 +27,10 @@ export const Navbar: React.FC = () => { `qUId`, `${location.origin}/stake` ) + // await walletConnection?.requestSignTransactions({ + // transactions: ['deposit'], + // callbackUrl: `${location.origin}/stake`, + // }) } const onDisconnectClick = async () => { await walletConnection?.signOut() @@ -69,25 +74,25 @@ export const Navbar: React.FC = () => { /> router.push('/stake')} /> @@ -108,7 +113,7 @@ export const Navbar: React.FC = () => { {currentUser && currentUser?.isSignedIn ? ( { height="40px" justify="center" pad="small" - background="linear-gradient(126deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(56.144% 92.77% 92.417%) 6.25%, rgb(61.342% 86.373% 93.395%) 12.5%, rgb(66.181% 80.417% 94.305%) 18.75%, rgb(70.662% 74.902% 95.147%) 25%, rgb(74.784% 69.828% 95.922%) 31.25%, rgb(78.548% 65.196% 96.63%) 37.5%, rgb(81.953% 61.005% 97.27%) 43.75%, rgb(85% 57.255% 97.843%) 50%, rgb(87.688% 53.946% 98.349%) 56.25%, rgb(90.018% 51.078% 98.787%) 62.5%, rgb(91.99% 48.652% 99.157%) 68.75%, rgb(93.603% 46.667% 99.461%) 75%, rgb(94.858% 45.123% 99.697%) 81.25%, rgb(95.754% 44.02% 99.865%) 87.5%, rgb(96.291% 43.358% 99.966%) 93.75%, rgb(96.471% 43.137% 100%) 100% )" + background="gradient" + // background="linear-gradient(126deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(56.144% 92.77% 92.417%) 6.25%, rgb(61.342% 86.373% 93.395%) 12.5%, rgb(66.181% 80.417% 94.305%) 18.75%, rgb(70.662% 74.902% 95.147%) 25%, rgb(74.784% 69.828% 95.922%) 31.25%, rgb(78.548% 65.196% 96.63%) 37.5%, rgb(81.953% 61.005% 97.27%) 43.75%, rgb(85% 57.255% 97.843%) 50%, rgb(87.688% 53.946% 98.349%) 56.25%, rgb(90.018% 51.078% 98.787%) 62.5%, rgb(91.99% 48.652% 99.157%) 68.75%, rgb(93.603% 46.667% 99.461%) 75%, rgb(94.858% 45.123% 99.697%) 81.25%, rgb(95.754% 44.02% 99.865%) 87.5%, rgb(96.291% 43.358% 99.966%) 93.75%, rgb(96.471% 43.137% 100%) 100% )" > - - {/* Todo: find the correct way to compute the decimals value*/} - {/* @ts-ignore*/} - {(currentUser?.balance / 1000000000000000000000000).toFixed( - 3 - )} + + {Number( + utils.format.formatNearAmount(currentUser?.balance) + ).toFixed(2)} } /> @@ -143,7 +142,7 @@ export const Navbar: React.FC = () => { ) : ( + // css` + // transition: all 0.2s; + // :hover { + // transition: all 0.2s; + // // background: ${normalizeColor('gradient', theme)}; + // } + // //background-color: blue; + // `, }, calendar: { small: { @@ -478,6 +534,7 @@ export const grommetTheme = deepMerge(grommet, { size: '19px', height: '25px', maxWidth: '461px', + // weight: '100', }, xlarge: { size: '20px', @@ -492,6 +549,7 @@ export const grommetTheme = deepMerge(grommet, { }, anchor: { color: 'text', + hover: { textDecoration: 'none', fontWeight: 'bold' }, }, formField: { border: { @@ -545,26 +603,43 @@ export const grommetTheme = deepMerge(grommet, { }, round: '8px', }, + tab: { + color: 'text-weak', + border: { + side: 'bottom', + size: 'xsmall', + color: { + dark: 'none', + light: 'brand', + }, + active: { + color: { + dark: 'text-weak', + light: 'text-weak', + }, + }, + hover: { + color: { + dark: 'white', + light: 'black', + }, + // extend: undefined, + }, + }, + }, + round: '0px', - // global: { - // breakpoints: { - // xsmall: { - // value: 400, - // }, - // }, - // }, - // heading: { - // extend: () => `margin-top: 12px; margin-bottom: 12px;`, - // }, - // paragraph: { - // extend: () => `font-weight: 300; margin-top: 0;`, - // xxlarge: { - // size: '28px', - // }, - // }, // textInput: { // placeholder: { - // extend: () => `color: #44444`, + // color: 'text-weak', // }, + // // color: 'text-weak', + // // extend: () => + // // css` + // // background-color: #555; + // // `, + // // placeholder: { + // // extend: () => `color: #44444`, + // // }, // }, }) diff --git a/src/near/config.ts b/src/near/config.ts index f1db6a8..78b0f43 100644 --- a/src/near/config.ts +++ b/src/near/config.ts @@ -1,5 +1,5 @@ export const CONTRACT_NAME = - process.env.CONTRACT_NAME || 'dev-1636228513801-61777166297956' + process.env.CONTRACT_NAME || 'dev-1642588138566-86232214910457' export enum NETWORK_TYPE { PRODUCTION = 'production', diff --git a/src/near/initContract.ts b/src/near/initContract.ts index 9794ae4..009ef38 100644 --- a/src/near/initContract.ts +++ b/src/near/initContract.ts @@ -1,9 +1,56 @@ import * as nearAPI from 'near-api-js' import { getConfig } from './config' +interface ContractType extends nearAPI.Contract { + deposit: ( + { amount: string, live: boolean }: Record, + gas?: string, + deposit?: string + ) => void + borrow: ( + { amount: string, short: boolean }: Record, + gas?: string, + deposit?: string + ) => void + new: ( + { owner_id: string }: Record, + gas?: string, + deposit?: string + ) => void + /* + * This function exists to allow withdraw of deposits, either from + * a user's SolvencyPool deposit, or LivePool (borrowing) position + * Hence, the first boolean parameter (for indicating which pool), + * last boolean parameter indicates the currency being withdrawn. + */ + renege: ( + // @ts-ignore Todo: find a solution for this weird duplicate alert + { amount: string, sp: boolean, qd: boolean }: Record, + gas?: string, + deposit?: string + ) => void + /* + * Close out caller's borrowing position by paying + * off all pledge's own debt with own collateral + */ + fold: ( + { short: boolean }: Record, + gas?: string, + deposit?: string + ) => void + /* + * Call this function to attempt liquidating a single Pledge + */ + clip: ( + { account: string }: Record, + gas?: string, + deposit?: string + ) => void +} + export interface NearContextType { + contract: ContractType | null walletConnection: nearAPI.WalletConnection | null - contract: nearAPI.Contract | null currentUser?: { accountId: string balance: string @@ -49,15 +96,15 @@ export const initContract = async (): Promise => { nearConfig.contractName, { // View methods are read-only – they don't modify the state, but usually return some value - viewMethods: ['get'], + viewMethods: ['get_pledge'], // Change methods can modify the state, but you don't receive the returned value when called - changeMethods: ['create', 'update', 'del'], + changeMethods: ['renege', 'borrow', 'deposit', 'fold', 'clip', 'new'], // Sender is the account ID to initialize transactions. // getAccountId() will return empty string if user is still unauthorized // Todo: check if sender is needed // sender: walletConnection.getAccountId(), } ) - + // @ts-ignore - Todo: verify whats the problem with Contract ts type return { contract, currentUser, nearConfig, walletConnection } } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bcea8b9..afbd606 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,10 +1,12 @@ // import '../styles/globals.css' import * as React from 'react' -import { Grommet } from 'grommet' +import { Grommet, Box } from 'grommet' import styled from 'styled-components' import type { AppProps } from 'next/app' import { Provider } from 'react-redux' +import 'src/styles/globals.css' + import { NearProvider } from 'src/near/nearContext' import { grommetTheme } from 'src/grommetTheme' import { store } from 'src/redux/store' @@ -18,14 +20,14 @@ const MainContainer = styled.div` function MyApp({ Component, pageProps }: AppProps) { return ( - + - <> + - + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7b587c9..a2c9700 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -33,9 +33,15 @@ const Home: NextPage = () => { height={200} />
- + Stable Coin
- on Near Protocol + on Near Protocol diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx index 617e380..5788de6 100644 --- a/src/pages/stake.tsx +++ b/src/pages/stake.tsx @@ -1,8 +1,14 @@ import * as React from 'react' import Head from 'next/head' -import { Box, Text, Tabs, Tab } from 'grommet' +import { Box, Text, Tabs, Tab, TextInput, Button } from 'grommet' +import { utils } from 'near-api-js' + +import { NearContext } from 'src/near/nearContext' const Stake: React.FC = () => { + const [depositAmnt, setDepositAmnt] = React.useState(null) + const { contract } = React.useContext(NearContext) + return ( <> @@ -27,18 +33,87 @@ const Stake: React.FC = () => { Lend your Nears or qUids - + - Coming soon... +
+ + + { + setDepositAmnt(e?.target?.value) + }} + /> + + Near + + +
+