feat: improve UX (#9)

packages/backend/src/app/app.module.ts

@@ -1,33 +1,33 @@
 import { Module } from '@nestjs/common'
-import { ConfigModule } from '@nestjs/config'
+import { ConfigModule, ConfigService } from '@nestjs/config'
 import { APP_GUARD } from '@nestjs/core'
 import { ServeStaticModule } from '@nestjs/serve-static'
 import { ThrottlerGuard, ThrottlerModule } from '@nestjs/throttler'
 import { join } from 'path'
 
 import { FaucetModule } from '../faucet/faucet.module'
 
-const THROTTLER_TTL_SECONDS = process.env.THROTTLER_TTL_SECONDS
-  ? parseInt(process.env.THROTTLER_TTL_SECONDS)
-  : 86_400
-
 @Module({
   imports: [
     ConfigModule.forRoot({ isGlobal: true }),
     ServeStaticModule.forRoot({
       rootPath: join(__dirname, '..', '..', '..', 'frontend', 'dist'),
     }),
-    // ThrottlerModule.forRoot({
-    //   ttl: THROTTLER_TTL_SECONDS,
-    //   limit: 1,
-    // }),
+    ThrottlerModule.forRootAsync({
+      imports: [ConfigModule],
+      inject: [ConfigService],
+      useFactory: (config: ConfigService) => ({
+        ttl: config.get('THROTTLER_TTL_SECONDS') || 86_400,
+        limit: 1,
+      }),
+    }),
     FaucetModule,
   ],
-  // providers: [
-  //   {
-  //     provide: APP_GUARD,
-  //     useClass: ThrottlerGuard,
-  //   },
-  // ],
+  providers: [
+    {
+      provide: APP_GUARD,
+      useClass: ThrottlerGuard,
+    },
+  ],
 })
 export class AppModule {}

packages/backend/src/faucet/faucet.controller.ts

@@ -1,15 +1,13 @@
-import { Body, Controller, Headers, Post, UseGuards } from '@nestjs/common'
+import { Body, Controller, Headers, Post } from '@nestjs/common'
 
 import { GetSubnetAssetsDto } from './faucet.dto'
 import { FaucetService } from './faucet.service'
-// import { ThrottlerBehindProxyGuard } from './throttler.guard'
 
 @Controller('faucet')
 export class FaucetController {
   constructor(private faucetService: FaucetService) {}
 
   @Post('getSubnetAssets')
-  // @UseGuards(ThrottlerBehindProxyGuard)
   async getSubnetAssets(
     @Body() getSubnetAssetsDto: GetSubnetAssetsDto,
     @Headers('traceparent') traceparent: string

packages/backend/src/main.ts

@@ -4,6 +4,7 @@ import { NestFactory } from '@nestjs/core'
 import * as ElasticAPM from 'elastic-apm-node'
 
 import { AppModule } from './app/app.module'
+import { NestExpressApplication } from '@nestjs/platform-express'
 
 export const SERVICE_NAME = process.env.TRACING_SERVICE_NAME || 'faucet-server'
 export const SERVICE_VERSION = process.env.TRACING_SERVICE_VERSION || 'unknown'
@@ -20,7 +21,11 @@ export const apm = ElasticAPM.start({
 })
 
 async function bootstrap() {
-  const app = await NestFactory.create(AppModule)
+  const app = await NestFactory.create<NestExpressApplication>(AppModule)
+
+  // See https://docs.nestjs.com/security/rate-limiting#proxies
+  app.set('trust proxy', true)
+
   app.useGlobalPipes(new ValidationPipe())
 
   const globalPrefix = 'api'

packages/frontend/src/App.tsx

@@ -19,6 +19,7 @@ import { BigNumber, ethers } from 'ethers'
 import { sanitizeURLProtocol } from './utils'
 import { SubnetsContext } from './contexts/subnets'
 import { toposCoreContract } from './contracts'
+import { SuccessesContext } from './contexts/successes'
 
 const Errors = styled.div`
   margin: 1rem auto;
@@ -27,15 +28,23 @@ const Errors = styled.div`
   z-index: 99999;
 `
 
+const Successes = styled.div`
+  margin: 1rem auto;
+  width: 80%;
+  max-width: 800px;
+  z-index: 99999;
+`
+
 const Layout = styled(AntdLayout)`
   min-height: 100vh;
 `
 
 const App = () => {
   const theme = useTheme()
+  const [successes, setSuccesses] = useState<string[]>([])
   const [errors, setErrors] = useState<string[]>([])
   const [subnets, setSubnets] = useState<SubnetWithId[]>()
-  const { loading, registeredSubnets } = useRegisteredSubnets()
+  const { registeredSubnets } = useRegisteredSubnets()
 
   useEffect(
     function onRegisteredSubnetsChange() {
@@ -86,27 +95,48 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <TracingContext.Provider value={{ transaction: apmTransaction }}>
         <ErrorsContext.Provider value={{ setErrors }}>
-          <SubnetsContext.Provider
-            value={{
-              loading,
-              data: subnets,
-            }}
-          >
-            <Layout>
-              <Header />
-              {Boolean(errors.length) && (
-                <Errors>
-                  {errors.map((e) => (
-                    <Alert type="error" showIcon closable message={e} key={e} />
-                  ))}
-                </Errors>
-              )}
-              <Content>
-                <FaucetForm />
-              </Content>
-              <Footer />
-            </Layout>
-          </SubnetsContext.Provider>
+          <SuccessesContext.Provider value={{ setSuccesses }}>
+            <SubnetsContext.Provider
+              value={{
+                loading: !Boolean(subnets),
+                data: subnets,
+              }}
+            >
+              <Layout>
+                <Header />
+                {Boolean(errors.length) && (
+                  <Errors>
+                    {errors.map((e) => (
+                      <Alert
+                        type="error"
+                        showIcon
+                        closable
+                        message={e}
+                        key={e}
+                      />
+                    ))}
+                  </Errors>
+                )}
+                {Boolean(successes.length) && (
+                  <Successes>
+                    {successes.map((e) => (
+                      <Alert
+                        type="success"
+                        showIcon
+                        closable
+                        message={e}
+                        key={e}
+                      />
+                    ))}
+                  </Successes>
+                )}
+                <Content>
+                  <FaucetForm />
+                </Content>
+                <Footer />
+              </Layout>
+            </SubnetsContext.Provider>
+          </SuccessesContext.Provider>
         </ErrorsContext.Provider>
       </TracingContext.Provider>
     </ThemeProvider>