chore: add faucet back (FuelLabs#191)

0xhousemd · Nov 8, 2022 · 632a1cd · 632a1cd
1 parent c2bde9c
commit 632a1cd
Show file tree

Hide file tree

Showing 8 changed files with 924 additions and 871 deletions.
diff --git a/packages/app/playwright/e2e/FaucetDialog.test.ts b/packages/app/playwright/e2e/FaucetDialog.test.ts
@@ -4,7 +4,7 @@ import test, { chromium } from '@playwright/test';
 import { getButtonByText, hasText, visit } from '../commons';
 import { mockData } from '../mocks';
 
-test.describe.skip('RecoverWallet', () => {
+test.describe('RecoverWallet', () => {
   let browser: Browser;
   let page: Page;
 

diff --git a/packages/app/playwright/e2e/HomeWallet.test.ts b/packages/app/playwright/e2e/HomeWallet.test.ts
@@ -1,8 +1,7 @@
 import type { Browser, Page } from '@playwright/test';
 import test, { chromium } from '@playwright/test';
 
-import { getByAriaLabel, hasText, visit } from '../commons';
-import { seedCurretAccount } from '../commons/seedWallet';
+import { getButtonByText, getByAriaLabel, hasText, visit } from '../commons';
 import { mockData } from '../mocks';
 
 test.describe('HomeWallet', () => {
@@ -18,7 +17,8 @@ test.describe('HomeWallet', () => {
 
   test('should change balance when select a new network', async () => {
     await visit(page, '/wallet');
-    await seedCurretAccount(page, 5_000_000);
+    await getButtonByText(page, 'Faucet').click();
+    await getButtonByText(page, 'Give me ETH').click();
     await hasText(page, /Ethereum/i);
     await hasText(page, /0,5 ETH/i);
 

diff --git a/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx b/packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx
@@ -1,13 +1,16 @@
 import { cssObj } from '@fuel-ui/css';
-import { BoxCentered, Heading } from '@fuel-ui/react';
+import { BoxCentered, Button, Heading, Icon, Text } from '@fuel-ui/react';
 
 import { ImageLoader, relativeUrl } from '~/systems/Core';
+import { useOpenFaucet } from '~/systems/Faucet';
 
 type AssetsEmptyProps = {
   isDevnet?: boolean;
 };
 
-export function AssetListEmpty(_: AssetsEmptyProps) {
+export function AssetListEmpty({ isDevnet }: AssetsEmptyProps) {
+  const openFaucet = useOpenFaucet();
+
   return (
     <BoxCentered css={styles.empty}>
       <ImageLoader
@@ -18,6 +21,16 @@ export function AssetListEmpty(_: AssetsEmptyProps) {
         wrapperCSS={{ mb: '$5' }}
       />
       <Heading as="h5">You don&apos;t have any assets</Heading>
+      {!isDevnet ? (
+        <Text fontSize="sm">Start depositing some assets</Text>
+      ) : (
+        /**
+         * TODO: need to add right faucet icon on @fuel-ui
+         */
+        <Button size="sm" leftIcon={Icon.is('Coffee')} onPress={openFaucet}>
+          Faucet
+        </Button>
+      )}
     </BoxCentered>
   );
 }

diff --git a/packages/app/src/systems/Home/routes.tsx b/packages/app/src/systems/Home/routes.tsx
@@ -1,6 +1,7 @@
 import { Outlet, Route } from 'react-router-dom';
 
 import { Pages } from '../Core/types';
+import { FaucetDialog } from '../Faucet';
 
 import { Home, Receive } from './pages';
 
@@ -15,6 +16,7 @@ export const homeRoutes = (
         </>
       }
     />
+    <Route path={Pages.faucet()} element={<FaucetDialog />} />
     <Route path={Pages.receive()} element={<Receive />} />
   </Route>
 );
diff --git a/packages/fuelhat/commands/start.mjs b/packages/fuelhat/commands/start.mjs
@@ -16,7 +16,12 @@ function label(str) {
 }
 
 export const handler = async (argv) => {
-  const { filepath: envPath, port, projectName } = await createEnv(argv);
+  const {
+    filepath: envPath,
+    port,
+    faucetPort,
+    projectName,
+  } = await createEnv(argv);
 
   const isTest = argv.t;
   const isDebug = argv.d;
@@ -56,6 +61,9 @@ export const handler = async (argv) => {
       `${label("⇢ Environment:")} ${isTest ? "Test" : "Development"}`
     );
     console.log(`${label("⇢ Provider URL:")} http://localhost:${port}/graphql`);
+    console.log(
+      `${label("⇢ Faucet URL:")} http://localhost:${faucetPort}/dispense`
+    );
   });
 };
 

diff --git a/packages/fuelhat/docker/docker-compose.yml b/packages/fuelhat/docker/docker-compose.yml
@@ -15,6 +15,23 @@ services:
       interval: 1s
       timeout: 5s
       retries: 10
+  faucet:
+    container_name: "${PROJECT:-fuelhat}_faucet"
+    environment:
+      MIN_GAS_PRICE: ${GAS_PRICE}
+      WALLET_SECRET_KEY: ${WALLET_SECRET}
+      DISPENSE_AMOUNT: ${DISPENSE_AMOUNT}
+      FUEL_NODE_URL: http://${PROJECT:-fuelhat}_fuel-core:4000/graphql
+    # Other configurations can be found at;
+    # https://github.com/FuelLabs/faucet#configuration
+    image: ghcr.io/fuellabs/faucet:v0.2.0
+    ports:
+      - "${FUEL_FAUCET_PORT:-4040}:3000"
+    links:
+      - fuel-core
+    depends_on:
+      fuel-core:
+        condition: service_healthy
 
 volumes:
   fuel-core-db:

diff --git a/packages/fuelhat/utils/createEnv.mjs b/packages/fuelhat/utils/createEnv.mjs
@@ -10,9 +10,12 @@ export async function createEnv(argv, createFile = true) {
   const projectName = isTest ? `${project}_test` : project;
   const filepath = isTest ? ".fuelhatenv" : ".fuelhatenv.test";
   const port = isTest ? "4001" : "4000";
+  const faucetPort = isTest ? "4041" : "4040";
   const data = `PROJECT=${projectName}
 FUEL_CORE_PORT=${port}
+FUEL_FAUCET_PORT=${faucetPort}
 WALLET_SECRET=0xa449b1ffee0e2205fa924c6740cc48b3b473aa28587df6dab12abc245d1f5298
+DISPENSE_AMOUNT=500000000
 GAS_PRICE=1
 PROVIDER_URL=http://localhost:${port}/graphql`;
 
@@ -22,6 +25,7 @@ PROVIDER_URL=http://localhost:${port}/graphql`;
   return {
     port,
     projectName,
+    faucetPort,
     filepath: resolve(filepath),
   };
 }