ens tweaks

.config/blog.config.ts

@@ -9,7 +9,10 @@ export default {
     mastodon: 'https://mas.to/@krema',
     github: 'https://github.com/kremalicious',
     bitcoin: '171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V',
-    ether: '0xf50F267b5689b005FE107cfdb34619f24c014457'
+    ether: {
+      ens: 'krema.eth',
+      address: '0xf50F267b5689b005FE107cfdb34619f24c014457'
+    }
   },
   rss: '/feed.xml',
   jsonfeed: '/feed.json',

src/features/Web3/components/Conversion/Conversion.tsx

@@ -8,6 +8,8 @@ export function Conversion({ amount }: { amount: string }): ReactElement {
   const [dollar, setDollar] = useState('0.00')
   const [euro, setEuro] = useState('0.00')
 
+  console.log(selectedToken?.price)
+
   useEffect(() => {
     if (!selectedToken?.price || !amount) {
       setDollar('0.00')
@@ -21,7 +23,7 @@ export function Conversion({ amount }: { amount: string }): ReactElement {
     const euro = eur ? (Number(amount) * eur).toFixed(2) : '0.00'
     setDollar(dollar)
     setEuro(euro)
-  }, [selectedToken, amount])
+  }, [selectedToken?.price, amount])
 
   return (
     <div

src/features/Web3/components/Form/index.module.css

@@ -3,7 +3,6 @@
   margin-right: auto;
   max-width: 25rem;
   width: 100%;
-  text-align: center;
 }
 
 .rainbowkit button > div {

src/features/Web3/components/Form/index.tsx

@@ -63,7 +63,7 @@ export default function Web3Form(): ReactElement {
       )}
 
       <div className={styles.disclaimer}>
-        Sends tokens to this address, suitable for any ERC-20 token.
+        Sends tokens to my account, suitable for any ERC-20 token.
       </div>
     </form>
   )

src/features/Web3/components/SendPrepare/SendErc20.tsx

@@ -1,5 +1,5 @@
 import { parseUnits } from 'viem'
-import { useContractWrite, usePrepareContractWrite } from 'wagmi'
+import { useContractWrite, useEnsAddress, usePrepareContractWrite } from 'wagmi'
 import siteConfig from '@config/blog.config'
 import { abiErc20Transfer } from './abiErc20Transfer'
 import { useEffect } from 'react'
@@ -13,15 +13,16 @@ export function SendPrepareErc20({
   setSendFormData: any
 }) {
   const { selectedToken } = useTokens()
+  const { data: to } = useEnsAddress({
+    name: siteConfig.author.ether.ens,
+    chainId: 1
+  })
 
   const { config } = usePrepareContractWrite({
     address: selectedToken?.address,
     abi: abiErc20Transfer,
     functionName: 'transfer',
-    args: [
-      siteConfig.author.ether,
-      parseUnits(amount, selectedToken?.decimals || 18)
-    ]
+    args: [to || undefined, parseUnits(amount, selectedToken?.decimals || 18)]
   })
 
   const {

src/features/Web3/components/SendPrepare/SendNative.tsx

@@ -1,5 +1,6 @@
 import { parseEther } from 'viem'
 import {
+  useEnsAddress,
   useNetwork,
   usePrepareSendTransaction,
   useSendTransaction
@@ -15,9 +16,13 @@ export function SendPrepareNative({
   setSendFormData: any
 }) {
   const { chain } = useNetwork()
+  const { data: to } = useEnsAddress({
+    name: siteConfig.author.ether.ens,
+    chainId: 1
+  })
   const { config } = usePrepareSendTransaction({
     chainId: chain?.id,
-    to: siteConfig.author.ether,
+    to: to || undefined,
     value: parseEther(amount)
   })
   const {

src/features/Web3/hooks/useTokens/useTokens.tsx

@@ -30,10 +30,10 @@ export function useTokens() {
   // Set default token data to first item,
   // which most of time is native token
   useEffect(() => {
-    if (!tokens?.[0]?.address) return
+    if (!tokens?.[0]?.chainId) return
 
     setSelectedToken(tokens?.[0])
-  }, [tokens?.[0]?.address])
+  }, [tokens?.[0]?.chainId])
 
   return { ...fetchResults, selectedToken, setSelectedToken }
 }

src/pages/thanks.astro

@@ -59,6 +59,12 @@ import CodeCopy from '@components/CopyCode.astro'
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
   }
+
+  .metaText {
+    display: block;
+    font-size: var(--font-size-mini);
+    margin: calc(var(--spacer) / 6) 0;
+  }
 </style>
 
 <LayoutBase title="Say Thanks">
@@ -68,14 +74,14 @@ import CodeCopy from '@components/CopyCode.astro'
       <h3 class="subTitle">Send Magic Internet Money</h3>
 
       <section class="section">
-        If you like what I do and want to support me in a decentralized way, you
-        can send me some Ether or Bitcoin.
+        If you like what I do and want to support me in a decentralized way,
+        send me some Ether, ERC-20 token, or Bitcoin.
       </section>
 
       <section class="section highlight">
         <h4 class="titleCoin"><Wallet /> Web3 Wallet</h4>
         <Web3 client:load />
-        <CodeCopy address={config.author.ether} />
+        <CodeCopy address={config.author.ether.ens} />
       </section>
 
       <section class="section">