fix: wrong sytle on load (#28)

* feat: add network config * feat: add connection context to app * feat: network selector * feat: add sass and primer css * fix: fix wallet styles * feat: add tokens filter * feat: send network to api * feat: add fallback rpc * refactor: refactor network selector * fix: merge error * fix: merge error * trigger deployment * fix: make sure connection is not undefined * fix * feat: add network to mongodb * feat: remove mongo from mainnet * style: fix header * fix: add connection to getTokenBalance * fix: fix connection context to have null default value * refactor: remove semantic primer css elements for jsx * fix: finish replacing box, text for jsx
boxfish-studio · Aug 1, 2022 · 371e067 · 371e067
1 parent d17f4a1
commit 371e067
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 165 deletions.
diff --git a/components/Layout/Flash.tsx b/components/Layout/Flash.tsx
@@ -23,18 +23,7 @@ const Toast: React.FC = () => {
 
   if (sendSuccess)
     return (
-      <div
-        ref={flashRef}
-        id="send-success"
-        style={{
-          position: "fixed",
-          bottom: "2rem",
-          right: "2rem",
-          width: "20rem",
-          fontSize: "1.1rem",
-          zIndex: 100,
-        }}
-      >
+      <div ref={flashRef} id="send-success">
         <Flash
           variant="success"
           sx={{ display: "flex", flexDirection: "column" }}

diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
@@ -1,36 +1,20 @@
-import { Box, Text } from "@primer/react";
 import { FontanaSVG } from "components/Layout";
 import { NetworkSelector, Wallet } from "components/Layout";
+
 const Header: React.FC = () => {
   return (
-    <Box
-      position="relative"
-      bg="navbarBackground"
-      width="100%"
-      top={0}
-      left={0}
-      height="4rem"
-      margin={0}
-      padding={0}
-      display="flex"
-      paddingLeft="6rem"
-      alignItems="center"
-      sx={{
-        gap: "1rem",
-        justifyContent: "space-between",
-      }}
-    >
+    <nav>
       <div className="d-flex flex-justify-center flex-items-center">
         <FontanaSVG width={27} />
-        <Text color="white" fontWeight={600} className="ml-2">
+        <h4 className="ml-3 text-bold color-white" style={{ color: "white" }}>
           Fontana - The Solana SPL multi-token generic faucet
-        </Text>
+        </h4>
       </div>
       <div className="d-flex flex-justify-center flex-items-center">
         <NetworkSelector />
         <Wallet />
       </div>
-    </Box>
+    </nav>
   );
 };
 

diff --git a/components/Layout/Wallet.tsx b/components/Layout/Wallet.tsx
@@ -1,4 +1,3 @@
-import { Box } from "@primer/react";
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 import { FC } from "react";
 

diff --git a/components/Table/HeaderTable.tsx b/components/Table/HeaderTable.tsx
@@ -1,4 +1,4 @@
-import { Header, Text, Button, Box, StyledOcticon } from "@primer/react";
+import { Header, Button, StyledOcticon } from "@primer/react";
 import { CheckIcon, SyncIcon } from "@primer/octicons-react";
 
 import { useWallet } from "@solana/wallet-adapter-react";
@@ -30,15 +30,16 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
         borderTopRightRadius: 5,
       }}
     >
-      <Box
-        color="text"
-        display="flex"
-        width="90rem"
-        height="4rem"
-        backgroundColor="transparent"
-        padding="13px 16px 12px"
-        alignItems="center"
-        style={{ gap: "16px" }}
+      <div
+        style={{
+          gap: "16px",
+          width: "90rem",
+          height: "4rem",
+          backgroundColor: "transparent",
+          padding: "13px 16px 12px",
+          alignItems: "center",
+        }}
+        className="d-flex color-fg-default"
       >
         <Header.Item
           style={{
@@ -89,9 +90,7 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
               onClick={createToken}
               leadingIcon={minting ? HourglassIcon : null}
             >
-              <Text marginLeft="4px" fontWeight={600}>
-                Create token
-              </Text>
+              <text className=" text-bold">Create token</text>
             </Button>
           )}
           <Button
@@ -106,12 +105,10 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
             onClick={triggerRefresh}
           >
             <StyledOcticon icon={SyncIcon} size={14} color="text" />
-            <Text marginLeft="4px" fontWeight={600}>
-              Refresh
-            </Text>
+            <text className="ml-2">Refresh</text>
           </Button>
         </Header.Item>
-      </Box>
+      </div>
     </Header>
   );
 };

diff --git a/components/Table/Row.tsx b/components/Table/Row.tsx
@@ -65,15 +65,16 @@ const Row: React.FC<RowProps> = (props) => {
           padding: 0,
         }}
       >
-        <Box
-          color="text"
-          display="flex"
-          width="90rem"
-          height="5rem"
-          backgroundColor="background"
-          padding="13px 16px 12px"
-          alignItems="center"
-          style={{ gap: "16px" }}
+        <div
+          style={{
+            gap: "16px",
+            width: "90rem",
+            height: "5rem",
+            backgroundColor: "white",
+            padding: "13px 16px 12px",
+            alignItems: "center",
+          }}
+          className="d-flex color-fg-default"
         >
           <Header.Item
             style={{
@@ -85,32 +86,17 @@ const Row: React.FC<RowProps> = (props) => {
               size={20}
               color={issueColor()}
             />
-            <Box
-              display={"flex"}
-              flexDirection={"column"}
-              justifyContent={"center"}
-              margin="0"
-              padding={0}
-              marginLeft="1rem"
-            >
-              <Text fontSize={17} fontWeight={600} margin={0} padding="0">
+            <div className="d-flex flex-column flex-justify-center ml-3">
+              <p className="f4 m-0 p-0 text-bold d-flex">
                 Token name{" "}
                 {props.tokenTicker && (
-                  <Text
-                    color={"primary"}
-                    fontSize={14}
-                    fontWeight="600"
-                    marginLeft="1rem"
-                  >
+                  <p className="m-0 ml-3 color-fg-muted text-bold f-5">
                     [{props.tokenTicker}]
-                  </Text>
+                  </p>
                 )}
-              </Text>
-
-              <Text fontSize={13} fontWeight="light">
-                {props.tokenName}
-              </Text>
-            </Box>
+              </p>
+              <p className="f5 text-light">{props.tokenName}</p>
+            </div>
           </Header.Item>
           <Header.Item
             style={{
@@ -122,7 +108,7 @@ const Row: React.FC<RowProps> = (props) => {
               marginLeft: "2rem",
             }}
           >
-            <Text textAlign={"center"}>{mintedAmount ?? "-"}</Text>
+            <p>{mintedAmount ?? "-"}</p>
           </Header.Item>
           <Header.Item
             style={{
@@ -140,25 +126,25 @@ const Row: React.FC<RowProps> = (props) => {
               position: "relative",
             }}
           >
-            <TextInput
-              width="8rem"
+            <input
               placeholder="Amount to mint"
               defaultValue={1}
               onChange={(e) => setMintAmount(parseInt(e.target.value))}
-              sx={{
+              className="p-1 rounded-2 pl-3"
+              style={{
                 border: "1px solid #ccc",
+                width: "8rem",
               }}
             />
-            <Text
-              display="flex"
-              sx={{
-                position: "absolute",
+            <p
+              className="d-flex position-absolute"
+              style={{
                 bottom: "-1rem",
+                color: "red",
               }}
-              color="red"
             >
               {mintError}
-            </Text>
+            </p>
             <Button
               style={{
                 display: "flex",
@@ -170,7 +156,7 @@ const Row: React.FC<RowProps> = (props) => {
               leadingIcon={action === Actions.Mint ? HourglassIcon : null}
               onClick={mintTokens}
             >
-              <Text fontWeight={600}>Mint</Text>
+              <text className="text-bold">Mint</text>
             </Button>
           </Header.Item>
           <Header.Item
@@ -180,36 +166,38 @@ const Row: React.FC<RowProps> = (props) => {
               gap: "0.5rem",
             }}
           >
-            <TextInput
-              width="32%"
+            <input
               placeholder="Amount to send"
               defaultValue={1}
               onChange={(e) => setTransferAmount(parseInt(e.target.value))}
-              sx={{
+              className="p-1 rounded-2 pl-3"
+              style={{
                 border: "1px solid #ccc",
+                width: "32%",
               }}
             />
-            <Text
-              display="flex"
-              sx={{
+            <p
+              className="d-flex position-absolute"
+              style={{
                 position: "absolute",
                 bottom: "-1rem",
+                color: "red",
               }}
-              color="red"
             >
               {sendError}
-            </Text>
-            <Box
-              display={"flex"}
-              flexDirection={"column"}
-              width="100%"
-              position={"relative"}
+            </p>
+            <div
+              className="d-flex flex-column position-relative"
+              style={{
+                width: "100%",
+              }}
             >
-              <TextInput
+              <input
                 placeholder="Address to send"
                 value={destinationAddress}
                 onChange={(e) => setDestinationAddress(e.target.value)}
-                sx={{
+                className="p-1 rounded-2 pl-3"
+                style={{
                   border: "1px solid #ccc",
                 }}
               />
@@ -230,7 +218,7 @@ const Row: React.FC<RowProps> = (props) => {
                   Use wallet address
                 </Button>
               )}
-            </Box>
+            </div>
             <Button
               style={{
                 display: "flex",
@@ -242,10 +230,10 @@ const Row: React.FC<RowProps> = (props) => {
               leadingIcon={action === Actions.Sending ? HourglassIcon : null}
               onClick={transferTokens}
             >
-              <Text fontWeight={600}>Send</Text>
+              <text className="text-bold">Send</text>
             </Button>
           </Header.Item>
-        </Box>
+        </div>
       </Header>
     </>
   );

diff --git a/components/Table/Table.tsx b/components/Table/Table.tsx
@@ -1,30 +1,19 @@
-import { Box } from "@primer/react";
-import { useState } from "react";
+import { useState, FC } from "react";
 import Row from "./Row";
 import HeaderTable from "./HeaderTable";
 import { Toast } from "components/Layout";
 import { SuccessContext, SiteMintingContext } from "contexts";
 import { Sources } from "types";
 import { useFetchTokens } from "hooks";
 
-const Table: React.FC = () => {
+const Table: FC = () => {
   const [message, setMessage] = useState("");
   const [mint, setMint] = useState<string | undefined>(undefined);
   const { mongoTokens, tokens, tokensAmount, walletTokens, r, refresh } =
     useFetchTokens();
 
   return (
-    <Box
-      display="flex"
-      margin={0}
-      marginTop={3}
-      style={{
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "0",
-      }}
-    >
+    <div className="d-flex flex-column flex-justify-center flex-items-center mt-4">
       {" "}
       <SuccessContext.Provider value={{ message, setMessage, mint, setMint }}>
         <SiteMintingContext.Provider value={{ r, refresh }}>
@@ -65,7 +54,7 @@ const Table: React.FC = () => {
           <Toast />
         </SiteMintingContext.Provider>
       </SuccessContext.Provider>
-    </Box>
+    </div>
   );
 };