Merge pull request #87 from G7DAO/feat/faucet-changes

Feat/faucet changes
G7DAO · Oct 4, 2024 · 4a4fe89 · 4a4fe89
2 parents e1c20e3 + a7a970f
commit 4a4fe89
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 65 deletions.
diff --git a/...ts/valueSelector/ValueSelector.module.css → ...ccountSelector/AccountSelector.module.css b/...ts/valueSelector/ValueSelector.module.css → ...ccountSelector/AccountSelector.module.css
@@ -81,3 +81,17 @@
 .chevron {
   stroke: var(--Gray-500, #667085);
 }
+
+@media (max-width: 1199px) {
+  .inputBase {
+    padding: 0px 0px 0px 12px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-100, #f2f4f7);
+    background: var(--Base-White, #fff);
+    height: 36px;
+    width: 100% !important;
+  }
+}
diff --git a/...omponents/valueSelector/ValueSelector.tsx → ...nents/accountSelector/AccountSelector.tsx b/...omponents/valueSelector/ValueSelector.tsx → ...nents/accountSelector/AccountSelector.tsx
@@ -1,21 +1,17 @@
-import styles from './ValueSelector.module.css'
+import styles from './AccountSelector.module.css'
 import { Combobox, Group, InputBase, InputBaseProps, useCombobox } from 'summon-ui/mantine'
 import IconCheck from '@/assets/IconCheck'
 import IconChevronDownSelector from '@/assets/IconChevronDownSelector'
 
-export interface ValueSelect {
-  valueId: number,
-  displayName: string,
-  value: string | undefined
-}
+export type AccountType = 'External Address' | 'Connected Account'
 
-type ValueSelectorProps = {
-  values: ValueSelect[]
-  selectedValue: ValueSelect
-  onChange: (value: ValueSelect) => void
+type AccountSelectorProps = {
+  values: AccountType[]
+  selectedValue: AccountType 
+  onChange: (value: AccountType) => void
 } & InputBaseProps
 
-const ValueSelector = ({ values, onChange, selectedValue }: ValueSelectorProps) => {
+const AccountSelector = ({ values, onChange, selectedValue }: AccountSelectorProps) => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption()
   })
@@ -25,7 +21,7 @@ const ValueSelector = ({ values, onChange, selectedValue }: ValueSelectorProps)
       store={combobox}
       variant='unstyled'
       onOptionSubmit={(val: string) => {
-        const newSelection = values.find((n) => String(n.valueId) === val)
+        const newSelection = values.find((n) => String(n) === val)
         if (newSelection) {
           onChange(newSelection)
         }
@@ -43,29 +39,29 @@ const ValueSelector = ({ values, onChange, selectedValue }: ValueSelectorProps)
           rightSectionPointerEvents='none'
           onClick={() => combobox.toggleDropdown()}
         >
-          <span className={styles.inputBaseNetworkName}>{selectedValue.displayName}</span>
+          <span className={styles.inputBaseNetworkName}>{selectedValue}</span>
         </InputBase>
       </Combobox.Target>
       <Combobox.Dropdown className='!bg-dark-900 !rounded-md !border-dark-700'>
         <Combobox.Options>
           {values
             .sort((a, b) => {
-              if (a.valueId === selectedValue.valueId) return 1
-              if (b.valueId === selectedValue.valueId) return -1
+              if (a === selectedValue) return 1
+              if (b === selectedValue) return -1
               return 0
             })
             .map((n) => (
-              <Combobox.Option value={String(n.valueId)} key={n.valueId}>
+              <Combobox.Option value={n} key={n}>
                 <Group>
                   <div
                     className={
-                      n.valueId === selectedValue.valueId ? styles.optionContainerSelected : styles.optionContainer
+                      n === selectedValue ? styles.optionContainerSelected : styles.optionContainer
                     }
                   >
                     <div className={styles.optionLeftSection}>
-                      {n.displayName}
+                      {n}
                     </div>
-                    {n.valueId === selectedValue.valueId && <IconCheck />}
+                    {n === selectedValue && <IconCheck />}
                   </div>
                 </Group>
               </Combobox.Option>
@@ -75,4 +71,4 @@ const ValueSelector = ({ values, onChange, selectedValue }: ValueSelectorProps)
     </Combobox>
   )
 }
-export default ValueSelector
+export default AccountSelector
diff --git a/webapps/world-builder-dashboard/src/components/faucet/FaucetView.module.css b/webapps/world-builder-dashboard/src/components/faucet/FaucetView.module.css
@@ -200,25 +200,21 @@
   border-radius: 8px;
   border: 1px solid var(--Primary-600, #ef233b);
   background: var(--Primary-600, #ef233b);
-
-  /* Shadow/xs */
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 }
 
 .requestTokensButtonDisabled {
+  cursor: not-allowed;
   display: flex;
   height: 36px;
   padding: 8px var(--14px, 14px);
   justify-content: center;
   align-items: center;
   gap: 8px;
-  cursor: not-allowed;
   border-radius: 8px;
+  border: 1px solid var(--Gray-600, #475467);
   background: var(--Gray-600, #475467);
-
-  /* Shadow/xs */
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  border: none;
 }
 
 .requestTokensButtonText {
@@ -352,6 +348,22 @@
   color: var(--Error-700, #b42318);
 }
 
+.availableFundsContainer {
+  text-align: center;
+  width: 100%;
+  justify-content: center;
+  padding: 2px 8px;
+  align-items: center;
+  gap: 4px;
+  border-radius: 16px;
+  color: var(--Success-700, #027a48);
+  background: var(--Success-50, #ecfdf3);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+}
+
 .time {
   display: inline-block;
   min-width: 11ch;
@@ -405,11 +417,53 @@
     align-self: stretch;
   }
 
+  .selectorContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    align-self: stretch;
+  }
+
+  .addressContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    align-self: stretch;
+  }
+
   .address {
     display: flex;
     padding: 8px 12px;
     align-items: center;
     gap: 8px;
-  align-self: stretch;
+    align-self: stretch;
+  }
+
+  .connectWalletButton {
+    display: flex;
+    height: 36px;
+    padding: 8px var(--14px, 14px);
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+  }
+
+  .textSeparator {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    width: 100%;
+  }
+
+  .bar {
+    width: 137px;
+    height: 1px;
+    background: #d0d5dd;
   }
 }