Free domain

client/config.ts

@@ -13,6 +13,10 @@ const config = {
   sentryDSN: process.env.SENTRY_DSN || '',
   backendHost:
     process.env.BACKEND_HOST || 'https://mdo-dcobackend-01.t.hmny.io',
+  freeRentBackendHost:
+    process.env.FREE_RENT_BACKEND_HOST || 'https://1-country-api.fly.dev',
+  freeRentKey:
+    process.env.FREE_RENT_KEY || 'ZXRsLXNlcnZeeY2USS6QXNCkZmdoYjc5MA',
   registrar:
     process.env.REGISTRAR_RELAYER ||
     'https://1ns-registrar-relayer.hiddenstate.xyz',

client/src/Routes.tsx

@@ -10,7 +10,10 @@ const StatusPage = lazy(
   () => import(/* webpackChunkName: "Others" */ './routes/status/Status')
 )
 const AffiliateSalesPage = lazy(
-  () => import(/* webpackChunkName: "Others" */ './routes/affiliate/AffiliateStatus')
+  () =>
+    import(
+      /* webpackChunkName: "Others" */ './routes/affiliate/AffiliateStatus'
+    )
 )
 const WaitingRoom = lazy(
   () =>
@@ -30,6 +33,12 @@ const OpenWidgetsPage = lazy(
       /* webpackChunkName: "Others" */ './routes/openWidgets/OpenWidgetsPage'
     )
 )
+
+const ClaimFreePage = lazy(
+  () =>
+    import(/* webpackChunkName: "Others" */ './routes/claimFree/ClaimFreePage')
+)
+
 console.log('### WaitingRoom', WaitingRoom)
 
 const AppRoutes = () => {
@@ -44,6 +53,7 @@ const AppRoutes = () => {
         <Route path="stats/" element={<StatsPage />} />
         <Route path="affiliatesales/" element={<AffiliateSalesPage />} />
         <Route path="details/" element={<DetailsPage />} />
+        <Route path="claim-free" element={<ClaimFreePage />} />
         <Route path="live/" element={<LiveStreamPage />} />
         <Route path="*" element={<HomePage />} />
       </Routes>

client/src/api/mainApi.ts

@@ -27,10 +27,10 @@ export interface Link {
 export interface HtmlWidget {
   id: string
   attributes: {
-    any: string;
-  };
-  title: string;
-  owner: string;
+    any: string
+  }
+  title: string
+  owner: string
 }
 
 export const mainApi = {
@@ -50,6 +50,33 @@ export const mainApi = {
     })
   },
 
+  rentDomainForFree: ({
+    name,
+    owner,
+    freeRentKey,
+  }: {
+    name: string
+    owner: string
+    freeRentKey: string
+  }) => {
+    return axios.post<{ transactionHash: string }>(
+      `${config.freeRentBackendHost}/rent`,
+      {
+        domainName: name,
+        ownerAddress: owner,
+        freeRentKey,
+      }
+    )
+  },
+
+  isHasClaim: async ({ address }: { address: string }) => {
+    const response = await axios.get<{ hasClaim: boolean }>(
+      `${config.freeRentBackendHost}/hasClaim/${address}`
+    )
+
+    return response.data.hasClaim
+  },
+
   loadDomain: async ({ domain }: { domain: string }) => {
     const response = await base.get<{ data: Domain }>(`/domains/${domain}`)
     return response.data.data
@@ -96,27 +123,29 @@ export const mainApi = {
     return base.post<{ data: Link }>(`/links/`, {
       domainName,
       linkId,
-      url
+      url,
     })
   },
 
-  pinLink: (id: string, isPinned: boolean) => base.post<{ data: Link }>(`/links/pin`, {
-    id,
-    isPinned
-  }),
+  pinLink: (id: string, isPinned: boolean) =>
+    base.post<{ data: Link }>(`/links/pin`, {
+      id,
+      isPinned,
+    }),
 
-  getLinks: (domainName: string) => base.get<{ data: Link[] }>(`/links?domain=${domainName}`),
+  getLinks: (domainName: string) =>
+    base.get<{ data: Link[] }>(`/links?domain=${domainName}`),
 
   deleteLink: (id: string) => base.delete<{ data: string }>(`/links/${id}`),
 
   addHtmlWidget: (attributes: { any: string }, owner = '', title = '') => {
     return base.post<HtmlWidget>(`/widgets/`, {
       attributes,
       owner,
-      title
+      title,
     })
   },
-  
+
   getHtmlWidget: (id: string) => base.get<HtmlWidget>(`/widgets/${id}`),
 
   auth: async ({
@@ -144,4 +173,4 @@ export const mainApi = {
       .then((result) => result.status === 200)
       .catch(() => false)
   },
-}
+}

client/src/components/TextInput.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { TextInput as GrommetTextInput } from 'grommet/components/TextInput'
+
+import { palette } from '../constants'
+import styled, { css } from 'styled-components'
+
+export const TextInput = styled(GrommetTextInput)<{ isValid?: boolean }>`
+  border-radius: 20px;
+  box-shadow: none;
+  font-weight: 400;
+  border: 1px solid #dfe1e5;
+  color: #333437;
+  transition: border-color 250ms, box-shadow 250ms;
+
+  &:focus,
+  &:hover {
+    background-color: #fff;
+    box-shadow: 0 1px 5px rgb(32 33 36 / 26%);
+    border-color: rgba(223, 225, 229, 0);
+  }
+
+  ${(props) =>
+    !props.isValid &&
+    css`
+      border-color: ${palette.PinkRed};
+
+      &:hover,
+      &:focus {
+        border-color: ${palette.LightRed};
+        box-shadow: 0 1px 6px rgb(255 77 79 / 26%);
+      }
+    `}
+`

client/src/components/search-input/SearchInput.tsx

@@ -1,38 +1,10 @@
 import React, { useRef } from 'react'
 import { Box } from 'grommet/components/Box'
-import { TextInput, TextInputProps } from 'grommet/components/TextInput'
+import { TextInputProps } from 'grommet/components/TextInput'
 
 import { FormClose } from 'grommet-icons/icons/FormClose'
 import styled, { css } from 'styled-components'
-import { palette } from '../../constants'
-
-const TextInputWrapper = styled(TextInput)<{ isValid?: boolean }>`
-  border-radius: 20px;
-  box-shadow: none;
-  font-weight: 400;
-  border: 1px solid #dfe1e5;
-  color: #333437;
-  transition: border-color 250ms, box-shadow 250ms;
-
-  &:focus,
-  &:hover {
-    background-color: #fff;
-    box-shadow: 0 1px 5px rgb(32 33 36 / 26%);
-    border-color: rgba(223, 225, 229, 0);
-  }
-
-  ${(props) =>
-    !props.isValid &&
-    css`
-      border-color: ${palette.PinkRed};
-
-      &:hover,
-      &:focus {
-        border-color: ${palette.LightRed};
-        box-shadow: 0 1px 6px rgb(255 77 79 / 26%);
-      }
-    `}
-`
+import { TextInput } from '../TextInput'
 
 const InputSuffix = styled(Box)`
   position: absolute;
@@ -105,7 +77,7 @@ export const SearchInput = (props: SearchInputProps) => {
       justify={'center'}
       paddingLeft={props.icon ? null : '24px'}
     >
-      <TextInputWrapper {...inputProps} />
+      <TextInput {...inputProps} />
       {allowClear && !props.disabled && props.value && (
         <InputSuffix>
           <FormClose onClick={clearValue} />

client/src/custom.d.ts

@@ -14,4 +14,5 @@ declare module 'react-video-thumbnail-image'
 declare module 'react-fb-image-video-grid'
 declare module 'grommet-icons/icons/FormClose'
 declare module 'grommet-icons/icons/FormSearch'
+declare module 'grommet-icons/icons/User'
 declare module 'use-lodash-debounce'