Feat/faucet changes

webapps/world-builder-dashboard/constants.ts

@@ -52,6 +52,8 @@ export const L3_NETWORK: HighNetworkInterface = {
   staker: '0xa6B0461b7E54Fa342Be6320D4938295A81f82Cd3'
 }
 
+export const ALL_NETWORKS = [L1_NETWORK, L2_NETWORK, L3_NETWORK]
+
 export const L3_NATIVE_TOKEN_SYMBOL = 'TG7T'
 export const DEFAULT_LOW_NETWORK = L1_NETWORK
 export const DEFAULT_HIGH_NETWORK = L2_NETWORK

webapps/world-builder-dashboard/src/assets/IconChevronDownSelector.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IconChevronDownSelector: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+        <path d="M4 6L8 10L12 6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+)
+
+export default IconChevronDownSelector

webapps/world-builder-dashboard/src/assets/IconEthereum.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
 
 const IconEthereum: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' {...props}>
-    <path d='M12.2078 0L12.0469 0.54688V16.4161L12.2078 16.5767L19.5742 12.2225L12.2078 0Z' fill='#343434' />
-    <path d='M12.2078 0L4.84161 12.2225L12.2078 16.5767V0Z' fill='#8C8C8C' />
-    <path d='M12.2079 17.9717L12.1173 18.0822V23.7351L12.2079 24L19.5787 13.6196L12.2079 17.9717Z' fill='#3C3C3B' />
-    <path d='M12.2079 24V17.9717L4.84161 13.6196L12.2079 24Z' fill='#8C8C8C' />
-    <path d='M12.208 16.5781L19.5743 12.224L12.208 8.87578V16.5781Z' fill='#141414' />
-    <path d='M4.84161 12.224L12.208 16.5781V8.87578L4.84161 12.224Z' fill='#393939' />
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 40 41" fill="none" {...props}>
+    <g clipPath="url(#clip0_12825_139472)">
+      <path d="M40 20.5C40 31.5457 31.0457 40.5 20 40.5C8.9543 40.5 0 31.5457 0 20.5C0 9.4543 8.9543 0.5 20 0.5C31.0457 0.5 40 9.4543 40 20.5Z" fill="#627EEA" />
+      <path d="M19.996 5.5H19.9989V26.2209L19.996 26.2208L29.2039 20.7781L19.996 5.5Z" fill="#C1CCF8" />
+      <path d="M19.9989 5.5L10.7909 20.7781L19.9989 26.2209V5.5Z" fill="white" />
+      <path d="M19.998 27.9635V35.4989L29.2115 22.5234L19.998 27.9635Z" fill="#C1CCF8" />
+      <path d="M19.998 35.4989V27.9635L10.7909 22.5234L19.998 35.4989Z" fill="white" />
+      <path d="M19.998 26.2216L29.2058 20.779L19.998 16.5938V26.2216Z" fill="#8197EE" />
+      <path d="M10.7909 20.7781L19.998 26.2216V16.5938L10.7909 20.7781Z" fill="#C1CCF8" />
+    </g>
+    <defs>
+      <clipPath id="clip0_12825_139472">
+        <rect width="40" height="40" fill="white" transform="translate(0 0.5)" />
+      </clipPath>
+    </defs>
   </svg>
 )
 

webapps/world-builder-dashboard/src/assets/IconFullScreen.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IconFullScreen: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+    <path d="M11.6667 8.33333L17.5 2.5M17.5 2.5H12.5M17.5 2.5V7.5M8.33333 11.6667L2.5 17.5M2.5 17.5H7.5M2.5 17.5L2.5 12.5" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+export default IconFullScreen

webapps/world-builder-dashboard/src/assets/IconUSDC.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconUSDC: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+        <path d="M12 24C18.65 24 24 18.65 24 12C24 5.34996 18.65 0 12 0C5.34996 0 0 5.34996 0 12C0 18.65 5.34996 24 12 24Z" fill="#2775CA" />
+        <path d="M15.3 13.9C15.3 12.15 14.25 11.55 12.15 11.3C10.65 11.1 10.35 10.7 10.35 9.99996C10.35 9.29988 10.85 8.85 11.85 8.85C12.75 8.85 13.25 9.15 13.5 9.9C13.55 10.05 13.7 10.15 13.85 10.15H14.65C14.85 10.15 15 9.99996 15 9.80004V9.75C14.8 8.64996 13.9 7.8 12.75 7.70004V6.50004C12.75 6.3 12.6 6.15 12.35 6.09996H11.6C11.4 6.09996 11.25 6.24996 11.2 6.50004V7.65C9.69996 7.85004 8.75004 8.85 8.75004 10.1C8.75004 11.75 9.75 12.4 11.85 12.65C13.25 12.9 13.7 13.2 13.7 14C13.7 14.8001 13 15.35 12.05 15.35C10.75 15.35 10.3 14.8 10.15 14.05C10.1 13.85 9.95004 13.75 9.80004 13.75H8.94996C8.75004 13.75 8.60004 13.9 8.60004 14.1V14.15C8.79996 15.4 9.6 16.3 11.25 16.55V17.75C11.25 17.95 11.4 18.1 11.65 18.15H12.4C12.6 18.15 12.75 18 12.8 17.75V16.55C14.3 16.3 15.3 15.25 15.3 13.9Z" fill="white" />
+        <path d="M9.45 19.15C5.55 17.75 3.54996 13.4 5.00004 9.54996C5.75004 7.44996 7.40004 5.85 9.45 5.1C9.65004 5.00004 9.75 4.85004 9.75 4.59996V3.9C9.75 3.69996 9.65004 3.54996 9.45 3.50004C9.39996 3.50004 9.3 3.50004 9.24996 3.54996C4.5 5.04996 1.89996 10.1 3.39996 14.85C4.29996 17.65 6.45 19.8 9.24996 20.7C9.45 20.8 9.70008 20.7 9.75 20.5C9.75 20.4258 9.75 20.4 9.75 20.3V19.6C9.75 19.45 9.6 19.25 9.45 19.15ZM14.75 3.54996C14.55 3.45 14.35 3.54996 14.3 3.75C14.25 3.80004 14.25 3.84996 14.25 3.95004V4.65C14.25 4.85004 14.4 5.04996 14.55 5.15004C18.45 6.54996 20.45 10.9 19 14.75C18.25 16.85 16.6 18.45 14.55 19.2C14.35 19.3 14.25 19.45 14.25 19.7V20.4C14.25 20.6 14.35 20.75 14.55 20.8C14.6 20.8 14.7 20.8 14.75 20.75C19.5 19.25 22.1 14.2 20.6 9.45C19.7 6.6 17.5 4.44996 14.75 3.54996Z" fill="white" />
+    </svg>
+)
+
+export default IconUSDC

webapps/world-builder-dashboard/src/components/commonComponents/tokenRow/TokenRow.module.css

@@ -0,0 +1,62 @@
+  .tokenRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex: 1 0 0;
+  }
+
+  .tokenInformation {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .tokenIconContainer {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    align-items: flex-start;
+  }
+
+  .token {
+    width: 39.583px;
+    height: 39.583px;
+    flex-shrink: 0;
+  }
+
+  .tokenTextContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .tokenTitle {
+    color: var(--Gray-900, #101828);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 24px; /* 171.429% */
+  }
+
+  .tokenSymbol {
+    color: var(--Gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 171.429% */
+  }
+
+  .balanceText {
+    display: flex;
+    color: var(--Gray-700, #344054);
+
+    /* Text sm/Regular */
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+  }
+

webapps/world-builder-dashboard/src/components/commonComponents/tokenRow/TokenRow.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styles from './TokenRow.module.css'
+import { ZERO_ADDRESS } from '@/utils/web3utils'
+import useNativeBalance from '@/hooks/useNativeBalance'
+import useERC20Balance from '@/hooks/useERC20Balance'
+import { useBlockchainContext } from '@/contexts/BlockchainContext'
+
+interface TokenRowProps {
+    name: string
+    address: string
+    symbol: string
+    rpc: string
+    Icon: React.FC<React.SVGProps<SVGSVGElement>>
+}
+
+const useTokenBalance = (address: string, rpc: string, connectedAccount: string | undefined) => {
+    if (address === ZERO_ADDRESS) {
+        const { data: balance, isFetching } = useNativeBalance({
+            account: connectedAccount,
+            rpc,
+        });
+        return { balance, isFetching };
+    } else {
+        const { data: balance, isFetching } = useERC20Balance({
+            tokenAddress: address,
+            account: connectedAccount,
+            rpc,
+        });
+        const formattedBalance = balance?.formatted
+        return { balance: formattedBalance, isFetching };
+    }
+};
+
+
+const TokenRow: React.FC<TokenRowProps> = ({ name, address, symbol, rpc, Icon }) => {
+    const { connectedAccount } = useBlockchainContext()
+    const { balance } = useTokenBalance(address, rpc, connectedAccount);
+
+    return (
+        <div className={styles.tokenRow}>
+            <div className={styles.tokenInformation}>
+                <div className={styles.tokenIconContainer}>
+                    <Icon className={styles.token} />
+                </div>
+                <div className={styles.tokenTextContainer}>
+                    <div className={styles.tokenTitle}>{name}</div>
+                    <div className={styles.tokenSymbol}>{symbol}</div>
+                </div>
+            </div>
+            <div className={styles.balanceText}>
+                {balance ? `${Number(balance).toFixed(4)}` : '0'}
+            </div>
+        </div>
+    )
+}
+
+export default TokenRow

webapps/world-builder-dashboard/src/components/commonComponents/valueSelector/ValueSelector.module.css

@@ -0,0 +1,83 @@
+.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);
+  width: 191px !important;
+  height: 36px;
+}
+
+.inputBase:hover {
+  background: var(--Gray-25, #fcfcfd);
+}
+
+.inputBaseNetworkName {
+  color: var(--Gray-500, #344054) !important;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+/* Mantine modules use !important please */
+
+.dropdown {
+  padding: 0 !important;
+  background: var(--Base-White, #fff) !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--Gray-200, #eaecf0) !important;
+  background: var(--Base-White, #fff) !important;
+  box-shadow:
+    0 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
+  width: fit-content !important;
+}
+
+.options {
+  padding: 2px 6px !important;
+}
+
+.option {
+  height: 36px;
+  padding: 0 !important;
+  color: var(--Gray-500, #344054) !important;
+  font-size: 14px !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 20px !important; /* 142.857% */
+}
+
+.option:hover {
+  background-color: transparent !important;
+}
+
+.optionContainer,
+.optionContainerSelected {
+  height: 36px;
+  display: flex;
+  padding: 10px 10px 10px 8px;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+
+  border-radius: 6px;
+}
+.optionContainerSelected {
+  background: var(--Gray-50, #f9fafb);
+}
+
+.optionLeftSection {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.chevron {
+  stroke: var(--Gray-500, #667085);
+}

webapps/world-builder-dashboard/src/components/commonComponents/valueSelector/ValueSelector.tsx

@@ -0,0 +1,78 @@
+import styles from './ValueSelector.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
+}
+
+type ValueSelectorProps = {
+  values: ValueSelect[]
+  selectedValue: ValueSelect
+  onChange: (value: ValueSelect) => void
+} & InputBaseProps
+
+const ValueSelector = ({ values, onChange, selectedValue }: ValueSelectorProps) => {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption()
+  })
+
+  return (
+    <Combobox
+      store={combobox}
+      variant='unstyled'
+      onOptionSubmit={(val: string) => {
+        const newSelection = values.find((n) => String(n.valueId) === val)
+        if (newSelection) {
+          onChange(newSelection)
+        }
+        combobox.closeDropdown()
+      }}
+      classNames={{ options: styles.options, option: styles.option, dropdown: styles.dropdown }}
+    >
+      <Combobox.Target>
+        <InputBase
+          component='button'
+          className={styles.inputBase}
+          pointer
+          variant='unstyled'
+          rightSection={values.length > 0 ? <IconChevronDownSelector className={styles.chevron} /> : ''}
+          rightSectionPointerEvents='none'
+          onClick={() => combobox.toggleDropdown()}
+        >
+          <span className={styles.inputBaseNetworkName}>{selectedValue.displayName}</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
+              return 0
+            })
+            .map((n) => (
+              <Combobox.Option value={String(n.valueId)} key={n.valueId}>
+                <Group>
+                  <div
+                    className={
+                      n.valueId === selectedValue.valueId ? styles.optionContainerSelected : styles.optionContainer
+                    }
+                  >
+                    <div className={styles.optionLeftSection}>
+                      {n.displayName}
+                    </div>
+                    {n.valueId === selectedValue.valueId && <IconCheck />}
+                  </div>
+                </Group>
+              </Combobox.Option>
+            ))}
+        </Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  )
+}
+export default ValueSelector