feat: first mvp (#8)

* Install deps

* Add react wallet deps

* Create wallet component

* Add wallet styles

* Add spl token fetching from env vars

* Create spl class to fetch tokens amount

* Create mintto ix

* Create tx ix

* mint API

* Move fetch balance to component

* Add css module for wallet

* Styled MintRow

* Create API for transfer

* Transfer APi call

* Added styling to buttons

* Add usecallback

* Add env example

* Improve class usage

* Add getLatestBlockhash and confirmTx to class

* Run yarn format

* Capitalize Class

* Move MintRow location

* Improve class usage

* Improved styles

* Style

* Styling index page

* Style bg-color

* Added vercelignore and trycatch

* add try catch

* Added debugging in API

* control unfunded acc

* add default val

* add default value as 1

* feat: add gh acts

* feat: style (#6)

* feat: add primer
* feat: add fontana config and ss funcs
* feat: add inline err
* feat: add context for refresh context
* feat: rename resfresh fun and remove unused code
* feat: add error keypair not found in env
* style: fix style
* fix: style overflow table
* fix: hide use wallet address button if no wallet connected
* chore: clear unused code
* feat: add rpc from env
* feat: update fontana config file to add some description
* fix: add number of spl tokens in header
* feat: apply correct styles with primer and deepmerge
* style: apply global theme
* style: fix style in row
* style: fix size of thead
* style: change colors to theme provider
* feat: add toast
* refactor: hardcode styles and rename ref
* fix: typo [skip ci]
* refactor: custom hook return tuple

Co-authored-by: Agustin Tena <[email protected]>

.env.example

@@ -0,0 +1,11 @@
+NEXT_PUBLIC_WL_MINT_SOLO=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_WL_MINT_CREW=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_WL_MINT_SQUAD=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_WL_MINT_CLAN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_WL_MINT_LEGION=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_WL_MINT_EMPIRE=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+NEXT_PUBLIC_SOLANA_NETWORK=devnet
+NEXT_PUBLIC_SOLANA_RPC_HOST=https://api.devnet.solana.com/
+
+NEXT_PUBLIC_SIGNER=[50,182,175,213]

.github/workflows/deploy_preview.yaml

@@ -0,0 +1,19 @@
+name: Deploy preview
+on:
+  pull_request:
+    branches: [dev]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Deploy to Vercel Action
+        uses: BetaHuhn/deploy-to-vercel-action@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          PRODUCTION: false # Don't deploy to production environment

.github/workflows/deploy_prod.yaml

@@ -0,0 +1,20 @@
+name: Deploy to production
+on:
+  push:
+    branches:
+      - dev
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Deploy to Vercel Action
+        uses: BetaHuhn/deploy-to-vercel-action@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          PRODUCTION: true

.gitignore

@@ -33,3 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+.env

.vercelignore

@@ -0,0 +1,6 @@
+.env
+.vercel
+build
+node_modules
+.prettierrc
+.gitignore

components/Layout/FontanaSVG.tsx

@@ -0,0 +1,17 @@
+const FontanaSVG: React.FC<{ width: number }> = ({ width }) => {
+  return (
+    <svg
+      width={width}
+      viewBox="0 0 243 356"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M235.713 111.422C226.622 101.841 211.31 100.41 202.991 100.41C199.881 100.41 196.793 100.601 193.815 100.977C167.84 104.261 148.09 105.899 129.608 106.259C128.459 102.261 126.249 98.299 122.022 98.1C122.315 91.387 122.937 84.675 123.936 78.034C125.211 69.541 126.897 60.552 130.788 52.814C132.544 49.319 135.03 46.005 138.481 44.039C142.094 41.979 146.345 41.736 150.338 42.671C153.744 43.469 157.038 45.033 159.815 47.166C162.09 48.914 163.751 52.002 167.12 50.954C170.593 49.874 171.165 45.587 168.71 43.219C168.741 43.249 168.788 43.295 168.707 43.216C168.682 43.192 168.689 43.199 168.702 43.212C160.668 35.582 146.553 32.284 136.698 38.134C125.374 44.854 123.55 60.073 122.22 71.92C121.949 63.604 122.631 55.159 123.135 46.858C123.674 37.963 124.233 28.969 125.841 20.192C126.571 16.207 127.633 12.409 130.239 9.206C132.688 6.191 136.266 4.571 140.155 4.908C143.772 5.221 147.544 6.905 150.176 9.417C151.042 10.244 151.627 11.186 152.91 11.417C154.519 11.707 156.142 10.716 156.609 9.146C157.464 6.272 154.074 4.279 152.001 3.103C149.053 1.43 145.719 0.348996 142.336 0.0639957C134.795 -0.571004 128.609 3.62 125.693 10.476C122.664 17.594 122.486 25.921 122.058 33.536C121.587 41.925 121.443 50.335 121.407 58.736C120.205 46.719 118.014 31.458 105.96 25.358C98.766 21.717 90.063 22.719 82.92 25.97C79.955 27.32 77.221 29.062 74.852 31.304C72.508 33.522 73.129 37.539 76.168 38.795C79.707 40.257 81.536 36.883 83.97 35.115C87.164 32.745 90.998 31.075 94.94 30.502C99.536 29.833 104.036 30.973 107.542 34.065C110.151 36.366 112.068 39.552 113.388 42.745C116.566 50.433 118.115 59.754 119.232 68.268C119.998 74.133 120.562 80.02 120.984 85.919C121.173 88.568 121.336 91.218 121.466 93.87C121.534 95.255 121.487 96.687 121.61 98.085C117.224 98.139 114.957 102.187 113.785 106.261C95.303 105.901 75.553 104.263 49.578 100.979C46.599 100.603 43.512 100.412 40.402 100.412C32.082 100.412 16.77 101.842 7.679 111.423C2.9 116.461 0.582994 123.119 0.979994 130.677C1.08399 132.609 2.111 134.374 3.741 135.417C5.372 136.459 7.405 136.651 9.202 135.933C15.723 133.325 21.582 132.057 27.119 132.057C36.924 132.057 46.012 136.008 57.497 142.381C70.994 149.872 85.371 154.147 102.715 155.713C99.787 171.144 94.887 190.399 86.19 213.67C68.633 260.645 76.651 294.978 89.667 313.103C81.616 327.28 71.397 353.931 107.271 355.395H119.776H123.622H136.127C172 353.931 161.781 327.281 153.731 313.103C166.747 294.978 174.763 260.645 157.208 213.67C148.511 190.399 143.61 171.144 140.683 155.713C158.027 154.147 172.404 149.872 185.9 142.381C197.386 136.007 206.474 132.057 216.279 132.057C221.814 132.057 227.675 133.325 234.196 135.933C235.994 136.653 238.026 136.46 239.657 135.417C241.287 134.375 242.314 132.609 242.417 130.677C242.81 123.118 240.493 116.461 235.713 111.422Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default FontanaSVG;

components/Layout/Header.tsx

@@ -0,0 +1,28 @@
+import { Box, Text } from "@primer/react";
+import { FontanaSVG } from "components/Layout";
+
+const Header: React.FC = () => {
+  return (
+    <Box
+      position="relative"
+      bg="navbarBackground"
+      width="100vw"
+      top={0}
+      left={0}
+      height="4rem"
+      display="flex"
+      paddingLeft="6rem"
+      alignItems="center"
+      sx={{
+        gap: "1rem",
+      }}
+    >
+      <FontanaSVG width={27} />
+      <Text color="white" fontWeight={600}>
+        Fontana - The Solana SPL multi-token generic faucet
+      </Text>
+    </Box>
+  );
+};
+
+export default Header;

components/Layout/Wallet.tsx

@@ -0,0 +1,25 @@
+import { Box } from "@primer/react";
+import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
+import { FC } from "react";
+
+const Wallet: FC = () => {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        top: 0,
+        right: 0,
+        display: "flex",
+        flexDirection: "row",
+        margin: "1rem",
+        marginTop: "0.5rem",
+        zIndex: 1,
+        transform: "scale(0.7)",
+      }}
+    >
+      <WalletMultiButton />
+    </Box>
+  );
+};
+
+export default Wallet;

components/Layout/index.ts

@@ -0,0 +1,3 @@
+export { default as Wallet } from "./Wallet";
+export { default as Header } from "./Header";
+export { default as FontanaSVG } from "./FontanaSVG";

components/Table/HeaderTable.tsx

@@ -0,0 +1,88 @@
+import { Header, Text, Button, Box, StyledOcticon } from "@primer/react";
+import { CheckIcon, SyncIcon } from "@primer/octicons-react";
+import { useRefresh } from "./Table";
+
+const HeaderTable: React.FC<{ tokensAmount: number }> = ({
+  tokensAmount = 0,
+}) => {
+  const { r, refresh } = useRefresh();
+
+  function triggerRefresh() {
+    refresh(!r);
+  }
+  return (
+    <Header
+      style={{
+        padding: 0,
+        borderBottom: "1px solid #eaeaea",
+        backgroundColor: "background",
+        borderTopLeftRadius: 5,
+        borderTopRightRadius: 5,
+      }}
+    >
+      <Box
+        color="text"
+        display="flex"
+        width="90rem"
+        height="4rem"
+        backgroundColor="transparent"
+        padding="13px 16px 12px"
+        alignItems="center"
+        style={{ gap: "16px" }}
+      >
+        <Header.Item
+          style={{
+            width: "18rem",
+          }}
+        >
+          <StyledOcticon icon={CheckIcon} size={16} color="primary" />
+          <Text as="p" marginLeft="0.5rem" color="primary">
+            {tokensAmount} SPL Tokens available
+          </Text>
+        </Header.Item>
+        <Header.Item
+          style={{
+            paddingLeft: "8rem",
+            fontSize:"1.05rem"
+          }}
+        >
+          Available
+        </Header.Item>
+        <Header.Item
+          style={{
+            paddingLeft: "6rem",
+            fontSize:"1.05rem"
+
+          }}
+        >
+          In wallet
+        </Header.Item>
+        <Header.Item
+          full
+          style={{
+            position: "relative",
+          }}
+        >
+          <Button
+            sx={{
+              position: "absolute",
+              right: "0",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "20px",
+            }}
+            onClick={triggerRefresh}
+          >
+            <StyledOcticon icon={SyncIcon} size={14} color="text" />
+            <Text marginLeft="4px" fontWeight={600}>
+              Refresh
+            </Text>
+          </Button>
+        </Header.Item>
+      </Box>
+    </Header>
+  );
+};
+
+export default HeaderTable;