🔄 synced file(s) with circlefin/pw-sample-app-internal (#14)

synced local file(s) with [circlefin/pw-sample-app-internal](https://github.com/circlefin/pw-sample-app-internal). <details> <summary>Changed files</summary> <ul> <li>synced local directory <code>app/</code> with remote directory <code>app/</code></li><li>synced local directory <code>public/</code> with remote directory <code>public/</code></li><li>synced local <code>next.config.js</code> with remote <code>next.config.js</code></li><li>synced local <code>package.json</code> with remote <code>package.json</code></li><li>synced local <code>yarn.lock</code> with remote <code>yarn.lock</code></li> </ul> </details> --- This PR was created automatically by the [repo-file-sync-action](https://github.com/BetaHuhn/repo-file-sync-action) workflow run [#9519957106](https://github.com/circlefin/pw-sample-app-internal/actions/runs/9519957106)
circlefin · Jun 21, 2024 · 13298a1 · 13298a1
1 parent f8475ad
commit 13298a1
Show file tree

Hide file tree

Showing 11 changed files with 1,724 additions and 79 deletions.
diff --git a/app/axios/axios.ts b/app/axios/axios.ts
@@ -52,6 +52,8 @@ axios.interceptors.response.use(undefined, async (error: unknown) => {
       redirect: true,
     });
   }
+
+  throw error;
 });
 
 export { axios };
diff --git a/app/axios/faucet.ts b/app/axios/faucet.ts
@@ -0,0 +1,28 @@
+// Copyright (c) 2024, Circle Technologies, LLC. All rights reserved.
+//
+// SPDX-License-Identifier: Apache-2.0
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+"use client";
+import { axios } from "@/app/axios";
+import { useMutation } from "react-query";
+import { FaucetDripInput } from "../shared/types";
+
+const faucetDripHelper = (input: FaucetDripInput) => {
+  return axios.post(`/faucet/drips`, input);
+};
+
+export const useFaucetDripMutation = () => {
+  return useMutation(faucetDripHelper);
+};
diff --git a/app/axios/index.ts b/app/axios/index.ts
@@ -19,3 +19,4 @@ export * from "./wallets";
 export * from "./transactions";
 export * from "./tokens";
 export * from "./users";
+export * from "./faucet";
diff --git a/app/containers/WalletActivity.tsx b/app/containers/WalletActivity.tsx
@@ -52,7 +52,7 @@ export const WalletActivity: React.FC<WalletActivityProps> = ({ id }) => {
           src={`/NoActivity.svg`}
           height={80}
           width={80}
-          className='mx-auto mt-4 mb-6'
+          className='mx-auto mt-6 mb-6'
         />
         <Typography
           level='title-lg'

diff --git a/app/containers/WalletDetails.tsx b/app/containers/WalletDetails.tsx
@@ -17,12 +17,17 @@
 "use client";
 import Button from "@mui/joy/Button";
 import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/16/solid";
+import FaucetSvg from "/public/Faucet.svg";
 import { TokenBalance } from "@/app/shared/types";
 import { useRouter } from "next/navigation";
-import { useWallet, useWalletBalances } from "@/app/axios/wallets";
+import {
+  useWallet,
+  useWalletBalances,
+  useFaucetDripMutation,
+} from "@/app/axios";
 import { LoadingWrapper, Content, TokenCard } from "@/app/components";
 import { Tab, TabList, TabPanel, Tabs, Typography } from "@mui/joy";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { blockchainMeta, tokenHelper } from "../shared/utils";
 import { WalletActivity } from "./WalletActivity";
 import Image from "next/image";
@@ -36,6 +41,7 @@ export const WalletDetails: React.FC<WalletDetailsProps> = ({ id }) => {
 
   const { data: balanceData, isLoading } = useWalletBalances(id);
   const { data: walletData } = useWallet(id);
+  const dripFaucet = useFaucetDripMutation();
 
   const mainBalance = useMemo(() => {
     if (!balanceData?.data) {
@@ -58,8 +64,21 @@ export const WalletDetails: React.FC<WalletDetailsProps> = ({ id }) => {
     return sorted[0];
   }, [balanceData?.data]);
 
+  const getUsdc = useCallback(async () => {
+    await dripFaucet.mutateAsync({
+      address: walletData?.data.wallet.address ?? "",
+      blockchain: walletData?.data.wallet.blockchain ?? "",
+    });
+  }, [
+    dripFaucet,
+    walletData?.data.wallet.address,
+    walletData?.data.wallet.blockchain,
+  ]);
+
   const nativeTokenInfo = tokenHelper(mainBalance?.token.name);
   const blockchainInfo = blockchainMeta(walletData?.data.wallet.blockchain);
+  const isWalletEmpty =
+    !isLoading && balanceData?.data.tokenBalances.length === 0;
 
   return (
     <>
@@ -83,56 +102,92 @@ export const WalletDetails: React.FC<WalletDetailsProps> = ({ id }) => {
             >
               Deposit
             </Button>
-            <Button
-              disabled={
-                !isLoading && balanceData?.data.tokenBalances.length === 0
-              }
-              startDecorator={<ArrowUpIcon width={16} />}
-              onClick={() => router.push(`/wallets/${id}/send`)}
-            >
-              Send
-            </Button>
+            {isWalletEmpty ? (
+              <Button
+                disabled={
+                  dripFaucet.isLoading ||
+                  dripFaucet.isSuccess ||
+                  dripFaucet.isError
+                }
+                variant='outlined'
+                startDecorator={<FaucetSvg width={20} />}
+                onClick={getUsdc}
+              >
+                Get USDC
+              </Button>
+            ) : (
+              <Button
+                startDecorator={<ArrowUpIcon width={16} />}
+                onClick={() => router.push(`/wallets/${id}/send`)}
+              >
+                Send
+              </Button>
+            )}
           </div>
+          {isWalletEmpty && (
+            <>
+              <Image
+                alt='no tokens'
+                src={`/NoTokens.svg`}
+                height={120}
+                width={120}
+                className='mx-auto'
+              />
+              <span className='text-center font-semibold text-gray-400'>
+                {(dripFaucet?.status === "idle" ||
+                  dripFaucet?.status === "loading") && (
+                  <Typography level='title-lg' className='text-inherit'>
+                    No tokens yet
+                  </Typography>
+                )}
+
+                {dripFaucet.isSuccess && (
+                  <Typography level='title-lg' className='text-inherit'>
+                    Your funds have been requested, please wait up to 10 seconds
+                    for the transaction to settle.
+                  </Typography>
+                )}
 
-          <Tabs className='bg-transparent'>
-            <TabList className='grid grid-cols-2'>
-              <Tab color='primary'>Tokens</Tab>
-              <Tab color='primary'>Activity</Tab>
-            </TabList>
-            <TabPanel value={0} className='px-0'>
-              <div className='flex grow w-full flex-col gap-2'>
-                {!isLoading &&
-                  balanceData?.data.tokenBalances.map((token: TokenBalance) => (
-                    <TokenCard
-                      key={token?.token.name}
-                      amount={token?.amount}
-                      token={token.token}
-                    />
-                  ))}
-                {!isLoading && balanceData?.data.tokenBalances.length === 0 && (
-                  <>
-                    <Image
-                      alt='no tokens'
-                      src={`/NoTokens.svg`}
-                      height={120}
-                      width={120}
-                      className='mx-auto'
-                    />
-                    <Typography
-                      level='title-lg'
-                      className='text-center font-semibold text-gray-400'
+                {dripFaucet.isError && (
+                  <Typography level='title-lg' className='text-inherit'>
+                    Oops! There was an issue requesting tokens, please use our{" "}
+                    <a
+                      href='https://faucet.circle.com'
+                      className='no-underline text-blue-500'
+                      target='_blank'
                     >
-                      No tokens yet
-                    </Typography>
-                  </>
+                      public faucet.
+                    </a>
+                  </Typography>
                 )}
-              </div>
-            </TabPanel>
+              </span>
+            </>
+          )}
+          {!isWalletEmpty && (
+            <Tabs className='bg-transparent'>
+              <TabList className='grid grid-cols-2'>
+                <Tab color='primary'>Tokens</Tab>
+                <Tab color='primary'>Activity</Tab>
+              </TabList>
+              <TabPanel value={0} className='px-0'>
+                <div className='flex grow w-full flex-col gap-2'>
+                  {balanceData?.data.tokenBalances.map(
+                    (token: TokenBalance) => (
+                      <TokenCard
+                        key={token?.token.name}
+                        amount={token?.amount}
+                        token={token.token}
+                      />
+                    ),
+                  )}
+                </div>
+              </TabPanel>
 
-            <TabPanel className='py-2 px-0' value={1}>
-              <WalletActivity id={id} />
-            </TabPanel>
-          </Tabs>
+              <TabPanel className='px-0' value={1}>
+                <WalletActivity id={id} />
+              </TabPanel>
+            </Tabs>
+          )}
         </Content>
       </LoadingWrapper>
     </>

diff --git a/app/favicon.ico → app/icon.ico b/app/favicon.ico → app/icon.ico
diff --git a/app/shared/types.ts b/app/shared/types.ts
@@ -55,17 +55,17 @@ export type WalletBalancesInput = {
 };
 
 export type WalletsInput = {
-  userId?: string,
-  address: string,
-  blockchain?: string,
-  walletSetId?: string,
-  refId?: string,
-  from?: Date,
-  to?: Date,
-  pageBefore?: string,
-  pageAfter?: string,
-  pageSize?: number,
-}
+  userId?: string;
+  address: string;
+  blockchain?: string;
+  walletSetId?: string;
+  refId?: string;
+  from?: Date;
+  to?: Date;
+  pageBefore?: string;
+  pageAfter?: string;
+  pageSize?: number;
+};
 
 export type Wallet = {
   id: string;
@@ -184,24 +184,29 @@ export const blockchainNames = {
 };
 
 export type EstimateFeeInput = {
-  amount: string[],
-  walletId: string,
-  destinationAddress: string,
-  tokenId: string
-}
+  amount: string[];
+  walletId: string;
+  destinationAddress: string;
+  tokenId: string;
+};
 
 export type GasFeeObject = {
-  gasLimit: string,
-  gasPrice: string,
-  maxFee: string,
-  priorityFee: string
-}
+  gasLimit: string;
+  gasPrice: string;
+  maxFee: string;
+  priorityFee: string;
+};
 
 export type EstimateFeeResponse = {
-  high: GasFeeObject,
-  medium: GasFeeObject,
-  low: GasFeeObject,
-  callGasLimit: string,
-  verificationGasLimit: string,
-  preVerificationGas: string
-}
+  high: GasFeeObject;
+  medium: GasFeeObject;
+  low: GasFeeObject;
+  callGasLimit: string;
+  verificationGasLimit: string;
+  preVerificationGas: string;
+};
+
+export type FaucetDripInput = {
+  address: string;
+  blockchain: string;
+};
diff --git a/next.config.js b/next.config.js
@@ -10,6 +10,13 @@ const nextConfig = {
     ];
   },
   output: "standalone",
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/public/Faucet.svg b/public/Faucet.svg