@@ -21,7 +21,7 @@ export default function TxContent({ isShow = true, isLoading, txResponse, classN
<>
{isLoading ? (
- "Loading..."
+ 'Loading...'
) : txResponse?.code === 0 ? (
<>
@@ -40,7 +40,7 @@ export default function TxContent({ isShow = true, isLoading, txResponse, classN
Transaction Hash
-
{txResponse?.transactionHash ?? ""}
+
{txResponse?.transactionHash ?? ''}
@@ -23,36 +25,39 @@ export default function WalletDialog() {
))}
- );
+ )
const DialogContentConnected = () => {
return (
@@ -89,10 +94,11 @@ export default function WalletDialog() {
@@ -58,11 +58,11 @@ export default function Header(props: HeaderProps) {
-
- );
+ )
}
diff --git a/src/components/layout/HeaderAccount.tsx b/src/components/layout/HeaderAccount.tsx
index b17ed89..b0cedc8 100644
--- a/src/components/layout/HeaderAccount.tsx
+++ b/src/components/layout/HeaderAccount.tsx
@@ -1,22 +1,22 @@
-import useWallet from "@/hooks/useWallet";
-import Button from "@/components/Button";
-import WalletDialog from "@/components/dialog/WalletDialog";
-import { useStore } from "@/store/index";
-import { shortAddress } from "@/utils/wallets";
+import useWallet from '~/hooks/useWallet'
+import Button from '~/components/Button'
+import WalletDialog from '~/components/dialog/WalletDialog'
+import { useStore } from '~/store/index'
+import { shortAddress } from '~/utils/wallets'
export default function Account() {
- const { isConnected, mycelAccount } = useWallet();
- const updateDialog = useStore((state) => state.updateDialog);
+ const { isConnected, mycelAccount } = useWallet()
+ const updateDialog = useStore((state) => state.updateDialog)
return (
<>
- );
+ )
}
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 6f619dd..151e76a 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,27 +1,27 @@
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import MessageBar from "@/components/MessageBar";
-import useWallet from "@/hooks/useWallet";
-import useOnboarding from "@/hooks/useOnboarding";
+import Header from '~/components/layout/Header'
+import Footer from '~/components/layout/Footer'
+import MessageBar from '~/components/MessageBar'
+import useWallet from '~/hooks/useWallet'
+import useOnboarding from '~/hooks/useOnboarding'
const items = [
{
- label: "Home",
- to: "/",
+ label: 'Home',
+ to: '/',
},
{
- label: "Register Domain",
- to: "/register",
+ label: 'Register Domain',
+ to: '/register',
},
{
- label: "Send",
- to: "/send",
+ label: 'Send',
+ to: '/send',
},
-];
+]
export default function Layout({ children }: { children: React.ReactNode }) {
- useWallet();
- useOnboarding();
+ useWallet()
+ useOnboarding()
return (
@@ -32,5 +32,5 @@ export default function Layout({ children }: { children: React.ReactNode }) {
- );
+ )
}
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
index f560583..5850dd2 100644
--- a/src/components/ui/Tooltip.tsx
+++ b/src/components/ui/Tooltip.tsx
@@ -1,13 +1,12 @@
-"use client";
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "@/utils/lib";
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '~/utils/lib'
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = TooltipPrimitive.Provider
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = TooltipPrimitive.Root
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef,
@@ -18,12 +17,12 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
- "z-50 overflow-hidden rounded-md border-2 border-black bg-white px-3 py-1.5 text-sm shadow-solid-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
- className,
+ 'z-50 overflow-hidden rounded-md border-2 border-black bg-white px-3 py-1.5 text-sm shadow-solid-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+ className
)}
{...props}
/>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/env.ts b/src/env.ts
index e371e56..4c4aa1a 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -1,9 +1,9 @@
-const apiURL = import.meta.env.VITE_API_COSMOS ?? "http://localhost:1317";
-const rpcURL = import.meta.env.VITE_WS_TENDERMINT ?? "http://localhost:26657";
-const prefix = import.meta.env.VITE_ADDRESS_PREFIX ?? "mycel";
+const apiURL = import.meta.env.VITE_API_COSMOS ?? 'http://localhost:1317'
+const rpcURL = import.meta.env.VITE_WS_TENDERMINT ?? 'http://localhost:26657'
+const prefix = import.meta.env.VITE_ADDRESS_PREFIX ?? 'mycel'
export const env = {
apiURL,
rpcURL,
prefix,
-};
+}
diff --git a/src/hooks/useBalance.tsx b/src/hooks/useBalance.tsx
deleted file mode 100644
index 7a52875..0000000
--- a/src/hooks/useBalance.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useState } from "react";
-import { useWallet } from "@/hooks/useWallet";
-import { useClient } from "@/hooks/useClient";
-
-export default function useBalance(denom = "umycel") {
- const { mycelAccount } = useWallet();
- const client = useClient();
- const [balance, setBalance] = useState(undefined);
-
- useEffect(() => {
- const fetchBalance = async (address: string) => {
- if (!address) return;
- const res = await client.CosmosBankV1Beta1.query.queryBalance(address, { denom });
- if (res.status === 200 && res.data.balance) setBalance(res.data.balance?.amount ?? 0);
- };
-
- if (mycelAccount?.address) {
- fetchBalance(mycelAccount.address);
- }
- }, [mycelAccount?.address]);
-
- return { balance };
-}
diff --git a/src/hooks/useBalances.tsx b/src/hooks/useBalances.tsx
deleted file mode 100644
index 432a2af..0000000
--- a/src/hooks/useBalances.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useState } from "react";
-import { useWallet } from "@/hooks/useWallet";
-import { useClient } from "@/hooks/useClient";
-
-export default function useBalances() {
- const { mycelAccount } = useWallet();
- const client = useClient();
- const [balances, setBalances] = useState(undefined);
-
- useEffect(() => {
- const fetchBalances = async (address: string) => {
- if (!address) return;
- const res = await client.CosmosBankV1Beta1.query.queryAllBalances(address);
- if (res.status === 200 && res.data.balances) setBalances(res.data.balances);
- };
-
- if (mycelAccount?.address) {
- fetchBalances(mycelAccount.address);
- }
- }, [mycelAccount?.address]);
-
- return { balances };
-}
diff --git a/src/hooks/useClient.ts b/src/hooks/useClient.ts
index b84af37..82833dd 100755
--- a/src/hooks/useClient.ts
+++ b/src/hooks/useClient.ts
@@ -1,15 +1,15 @@
-import { Client } from "mycel-client-ts";
-import { OfflineSigner } from "@cosmjs/proto-signing";
-import { env } from "@/env";
-import useWallet from "@/hooks/useWallet";
+import { Client } from 'mycel-client-ts'
+import { OfflineSigner } from '@cosmjs/proto-signing'
+import { env } from '~/env'
+import useWallet from '~/hooks/useWallet'
const useClientInstance = (signer?: OfflineSigner) => {
- const { mycelOfflineSigner } = useWallet();
- return new Client(env, signer ?? mycelOfflineSigner);
-};
-let clientInstance: ReturnType;
+ const { mycelOfflineSigner } = useWallet()
+ return new Client(env, signer ?? mycelOfflineSigner)
+}
+let clientInstance: ReturnType
export const useClient = (signer?: OfflineSigner) => {
- clientInstance = useClientInstance(signer);
- return clientInstance;
-};
+ clientInstance = useClientInstance(signer)
+ return clientInstance
+}
diff --git a/src/hooks/useMycel.tsx b/src/hooks/useMycel.tsx
index d54d899..50df368 100644
--- a/src/hooks/useMycel.tsx
+++ b/src/hooks/useMycel.tsx
@@ -1,64 +1,64 @@
-import useSWR from "swr";
-import { useClient } from "@/hooks/useClient";
-import { Domain } from "@/types/domain";
-import { useWallet } from "@/hooks/useWallet";
+import useSWR from 'swr'
+import { useClient } from '~/hooks/useClient'
+import { Domain } from '~/types/domain'
+import { useWallet } from '~/hooks/useWallet'
export const useAllRecords = (domain: Domain | undefined) => {
- const client = useClient();
- const { data, error, isLoading, isValidating } = useSWR(domain ? ["queryAllRecords", domain] : null, () =>
- client.MycelResolver.query.queryAllRecords(domain.name, domain.parent).then((res) => res.data),
- );
+ const client = useClient()
+ const { data, error, isLoading, isValidating } = useSWR(domain ? ['queryAllRecords', domain] : null, () =>
+ client.MycelResolver.query.queryAllRecords(domain.name, domain.parent).then((res) => res.data)
+ )
return {
data,
error,
isLoading,
isValidating,
- };
-};
+ }
+}
export const useDomainOwnership = (address: string | undefined) => {
- const client = useClient();
- const { data, error, isLoading, isValidating } = useSWR(address ? ["queryDomainOwnership", address] : null, () =>
- client.MycelRegistry.query.queryDomainOwnership(address).then((res) => res.data),
- );
+ const client = useClient()
+ const { data, error, isLoading, isValidating } = useSWR(address ? ['queryDomainOwnership', address] : null, () =>
+ client.MycelRegistry.query.queryDomainOwnership(address).then((res) => res.data)
+ )
return {
data,
error,
isLoading,
isValidating,
- };
-};
+ }
+}
-export const useBalance = (address?: string | undefined, denom = "umycel") => {
- const client = useClient();
- const { mycelAccount } = useWallet();
- const _address = address ?? mycelAccount?.address ?? null;
- const { data, error, isLoading, isValidating } = useSWR(_address ? ["queryBalance", _address] : null, () =>
- client.CosmosBankV1Beta1.query.queryBalance(_address, { denom }).then((res) => res.data),
- );
+export const useBalance = (address?: string | undefined, denom = 'umycel') => {
+ const client = useClient()
+ const { mycelAccount } = useWallet()
+ const _address = address ?? mycelAccount?.address ?? null
+ const { data, error, isLoading, isValidating } = useSWR(_address ? ['queryBalance', _address] : null, () =>
+ client.CosmosBankV1Beta1.query.queryBalance(_address, { denom }).then((res) => res.data)
+ )
return {
data,
error,
isLoading,
isValidating,
- };
-};
+ }
+}
export const useAllBalances = (address: string | undefined) => {
- const client = useClient();
- const { mycelAccount } = useWallet();
- const _address = address ?? mycelAccount?.address ?? null;
- const { data, error, isLoading, isValidating } = useSWR(_address ? ["queryAllBalances", _address] : null, () =>
- client.CosmosBankV1Beta1.query.queryAllBalances(_address).then((res) => res.data),
- );
+ const client = useClient()
+ const { mycelAccount } = useWallet()
+ const _address = address ?? mycelAccount?.address ?? null
+ const { data, error, isLoading, isValidating } = useSWR(_address ? ['queryAllBalances', _address] : null, () =>
+ client.CosmosBankV1Beta1.query.queryAllBalances(_address).then((res) => res.data)
+ )
return {
data,
error,
isLoading,
isValidating,
- };
-};
+ }
+}
diff --git a/src/hooks/useMycelRegistry.tsx b/src/hooks/useMycelRegistry.tsx
index 2a88044..26e1407 100644
--- a/src/hooks/useMycelRegistry.tsx
+++ b/src/hooks/useMycelRegistry.tsx
@@ -1,130 +1,127 @@
-import { useState, useEffect } from "react";
-import { useClient } from "@/hooks/useClient";
+import { useState, useEffect } from 'react'
+import { useClient } from '~/hooks/useClient'
import {
RegistryTopLevelDomain,
RegistrySecondLevelDomainResponse,
RegistryOwnedDomain,
RegistryQueryDomainRegistrationFeeResponse,
-} from "mycel-client-ts/mycel.registry/rest";
-import { useWallet } from "@/hooks/useWallet";
-import { Domain } from "@/types/domain";
-import { convertToDomainString } from "@/utils/domainName";
+} from 'mycel-client-ts/mycel.registry/rest'
+import { useWallet } from '~/hooks/useWallet'
+import { Domain } from '~/types/domain'
+import { convertToDomainString } from '~/utils/domainName'
type TopLevelDomain = {
- info: RegistryTopLevelDomain | undefined;
- isRegistered: boolean;
-};
+ info: RegistryTopLevelDomain | undefined
+ isRegistered: boolean
+}
type SecondLevelDomain = {
- info: RegistrySecondLevelDomainResponse | undefined;
- parent: TopLevelDomain | undefined;
- isRegistered: boolean;
-};
+ info: RegistrySecondLevelDomainResponse | undefined
+ parent: TopLevelDomain | undefined
+ isRegistered: boolean
+}
export const useMycelRegistry = () => {
- const client = useClient();
- const { mycelAccount } = useWallet();
- const [isLoading, setIsLoading] = useState(false);
- const [topLevelDomain, setTopLevelDomain] = useState(undefined);
- const [secondLevelDomain, setSecondLevelDomain] = useState(undefined);
- const [fee, setFee] = useState(undefined);
- const [ownedDomains, setOwnedDomains] = useState([]);
+ const client = useClient()
+ const { mycelAccount } = useWallet()
+ const [isLoading, setIsLoading] = useState(false)
+ const [topLevelDomain, setTopLevelDomain] = useState(undefined)
+ const [secondLevelDomain, setSecondLevelDomain] = useState(undefined)
+ const [fee, setFee] = useState(undefined)
+ const [ownedDomains, setOwnedDomains] = useState([])
useEffect(() => {
if (mycelAccount?.address) {
- registryQueryOwnedDomains(mycelAccount.address);
+ registryQueryOwnedDomains(mycelAccount.address)
}
- }, [mycelAccount]);
+ }, [mycelAccount])
// Query domain
const registryQueryDomain = async (domain: Domain) => {
- setIsLoading(true);
+ setIsLoading(true)
const queryDomain = async (queryFunc: () => Promise, isTopLevel: boolean) => {
try {
- const res = await queryFunc();
+ const res = await queryFunc()
if (res.data) {
- const domainData = isTopLevel ? res.data.topLevelDomain : res.data.secondLevelDomain;
+ const domainData = isTopLevel ? res.data.topLevelDomain : res.data.secondLevelDomain
return isTopLevel
? { info: domainData, isRegistered: !!domainData }
- : { info: domainData, isRegistered: !!domainData, parent: topLevelDomainResult };
+ : { info: domainData, isRegistered: !!domainData, parent: topLevelDomainResult }
}
return isTopLevel
? { info: undefined, isRegistered: false }
- : { info: undefined, isRegistered: false, parent: topLevelDomainResult };
+ : { info: undefined, isRegistered: false, parent: topLevelDomainResult }
} catch (error) {
return isTopLevel
? { info: undefined, isRegistered: false }
- : { info: undefined, isRegistered: false, parent: topLevelDomainResult };
+ : { info: undefined, isRegistered: false, parent: topLevelDomainResult }
}
- };
+ }
const topLevelDomainResult = await queryDomain(async () => {
// If parent is empty, query top level domain
- if (domain.parent === "") {
- return await client.MycelRegistry.query.queryTopLevelDomain(domain.name);
+ if (domain.parent === '') {
+ return await client.MycelRegistry.query.queryTopLevelDomain(domain.name)
} else {
- return await client.MycelRegistry.query.queryTopLevelDomain(domain.parent);
+ return await client.MycelRegistry.query.queryTopLevelDomain(domain.parent)
}
- }, true);
+ }, true)
- setTopLevelDomain(topLevelDomainResult);
+ setTopLevelDomain(topLevelDomainResult)
const secondLevelDomainResult =
- domain.parent !== ""
+ domain.parent !== ''
? await queryDomain(() => client.MycelRegistry.query.querySecondLevelDomain(domain.name, domain.parent), false)
- : { info: undefined, isRegistered: false, parent: topLevelDomainResult };
+ : { info: undefined, isRegistered: false, parent: topLevelDomainResult }
- setSecondLevelDomain(secondLevelDomainResult);
+ setSecondLevelDomain(secondLevelDomainResult)
- setIsLoading(false);
- };
+ setIsLoading(false)
+ }
// Query registration fee
const registryQueryRegistrationFee = async (domain: Domain) => {
- setIsLoading(true);
+ setIsLoading(true)
try {
const res = await client.MycelRegistry.query.queryDomainRegistrationFee(domain.name, domain.parent, {
- registrationPeriodInYear: "1",
- });
+ registrationPeriodInYear: '1',
+ })
if (res.data) {
- setFee(res.data);
+ setFee(res.data)
}
} catch (error) {
- setFee(undefined);
+ setFee(undefined)
}
- setIsLoading(false);
- };
+ setIsLoading(false)
+ }
// Query owned domains
const registryQueryOwnedDomains = async (address: string) => {
- setIsLoading(true);
+ setIsLoading(true)
try {
- const res = await client.MycelRegistry.query.queryDomainOwnership(address);
+ const res = await client.MycelRegistry.query.queryDomainOwnership(address)
if (res.data.domainOwnership?.domains) {
- setOwnedDomains(res.data.domainOwnership.domains);
+ setOwnedDomains(res.data.domainOwnership.domains)
}
} catch (error) {
- setOwnedDomains([]);
+ setOwnedDomains([])
}
- setIsLoading(false);
- };
+ setIsLoading(false)
+ }
// Query role
const registryQueryRole = async (domain: Domain, address: string) => {
- setIsLoading(true);
+ setIsLoading(true)
try {
- const res = await client.MycelRegistry.query.queryRole(
- convertToDomainString(domain.name, domain.parent),
- address,
- );
+ const res = await client.MycelRegistry.query.queryRole(convertToDomainString(domain.name, domain.parent), address)
if (res.data) {
- return res.data.role;
+ return res.data.role
}
} catch (error) {
- return undefined;
+ return undefined
}
- setIsLoading(false);
- };
+ setIsLoading(false)
+ }
return {
isLoading,
@@ -136,5 +133,5 @@ export const useMycelRegistry = () => {
registryQueryRegistrationFee,
registryQueryOwnedDomains,
registryQueryRole,
- };
-};
+ }
+}
diff --git a/src/hooks/useMycelResolver.tsx b/src/hooks/useMycelResolver.tsx
index 327ac54..580271c 100644
--- a/src/hooks/useMycelResolver.tsx
+++ b/src/hooks/useMycelResolver.tsx
@@ -1,40 +1,40 @@
-import { useState, useEffect } from "react";
-import { useClient } from "@/hooks/useClient";
-import { RegistryRecord, RegistryNetworkName } from "mycel-client-ts/mycel.resolver/rest";
-import { Domain } from "@/types/domain";
+import { useState, useEffect } from 'react'
+import { useClient } from '~/hooks/useClient'
+import { RegistryRecord, RegistryNetworkName } from 'mycel-client-ts/mycel.resolver/rest'
+import { Domain } from '~/types/domain'
export const useMycelResolver = () => {
- const client = useClient();
- const [isLoading, setIsLoading] = useState(false);
- const [mycelRecords, setMycelRecord] = useState | undefined>(undefined);
- const [mycelRecordsLength, setMycelRecordLength] = useState(0);
+ const client = useClient()
+ const [isLoading, setIsLoading] = useState(false)
+ const [mycelRecords, setMycelRecord] = useState | undefined>(undefined)
+ const [mycelRecordsLength, setMycelRecordLength] = useState(0)
const updateMycelRecords = async (domain: Domain) => {
- setIsLoading(true);
+ setIsLoading(true)
try {
- const record = await client.MycelResolver.query.queryAllRecords(domain.name, domain.parent);
- setMycelRecord(record.data.values || undefined);
+ const record = await client.MycelResolver.query.queryAllRecords(domain.name, domain.parent)
+ setMycelRecord(record.data.values || undefined)
} catch (e) {
- console.error(e);
- setMycelRecord(undefined);
- setIsLoading(false);
+ console.error(e)
+ setMycelRecord(undefined)
+ setIsLoading(false)
}
- setIsLoading(false);
- };
+ setIsLoading(false)
+ }
const getWalletAddr = (recordType: RegistryNetworkName) => {
if (!mycelRecords || !mycelRecords[recordType] || !mycelRecords[recordType].walletRecord) {
- return "";
+ return ''
} else {
- return mycelRecords[recordType].walletRecord?.value;
+ return mycelRecords[recordType].walletRecord?.value
}
- };
+ }
useEffect(() => {
- if (!!mycelRecords) {
- setMycelRecordLength(Object.keys(mycelRecords).length);
+ if (mycelRecords) {
+ setMycelRecordLength(Object.keys(mycelRecords).length)
}
- }, [mycelRecords]);
+ }, [mycelRecords])
return {
isLoading,
@@ -42,5 +42,5 @@ export const useMycelResolver = () => {
mycelRecordsLength,
updateMycelRecords,
getWalletAddr,
- };
-};
+ }
+}
diff --git a/src/hooks/useOnboarding.ts b/src/hooks/useOnboarding.ts
index f1d9806..faa35d9 100644
--- a/src/hooks/useOnboarding.ts
+++ b/src/hooks/useOnboarding.ts
@@ -1,87 +1,86 @@
-import { useEffect } from "react";
-import useWallet from "@/hooks/useWallet";
-import { useStore } from "@/store/index";
-import { useAllRecords, useDomainOwnership, useBalance, useAllBalances } from "@/hooks/useMycel";
+import { useEffect } from 'react'
+import useWallet from '~/hooks/useWallet'
+import { useStore } from '~/store/index'
+import { useAllRecords, useDomainOwnership, useBalance, useAllBalances } from '~/hooks/useMycel'
export const useOnboarding = () => {
- const { isConnected, evmAddress, mycelAccount } = useWallet();
- const onboardingStatus = useStore((state) => state.onboardingStatus);
- const updateOnboardingStatus = useStore((state) => state.updateOnboardingStatus);
- const updateDialog = useStore((state) => state.updateDialog);
- const { isLoading: isLoadingOwnDomain, data: dataOwnDomain } = useDomainOwnership(mycelAccount?.address);
- const { isLoading: isLoadingRecords, data: dataRecords } = useAllRecords(dataOwnDomain?.domainOwnership?.domains?.[0]);
- const { isLoading: isLoadingBalance, data: dataBalance } = useBalance(mycelAccount?.address);
+ const { isConnected, evmAddress, mycelAccount } = useWallet()
+ const onboardingStatus = useStore((state) => state.onboardingStatus)
+ const updateOnboardingStatus = useStore((state) => state.updateOnboardingStatus)
+ const updateDialog = useStore((state) => state.updateDialog)
+ const { isLoading: isLoadingOwnDomain, data: dataOwnDomain } = useDomainOwnership(mycelAccount?.address)
+ const { isLoading: isLoadingRecords, data: dataRecords } = useAllRecords(dataOwnDomain?.domainOwnership?.domains?.[0])
+ const { isLoading: isLoadingBalance, data: dataBalance } = useBalance(mycelAccount?.address)
const ONBOARDING_CONFIG = {
- "no-connection": {},
- "no-mycel-address": {
+ 'no-connection': {},
+ 'no-mycel-address': {
index: 1,
message: "You've connected, create mycel address.",
- action: () => updateDialog("wallet2"),
+ action: () => updateDialog('wallet2'),
},
faucet: {
index: 2,
- message: "Faucet MYCEL token next",
- link: "/",
+ message: 'Faucet MYCEL token next',
+ link: '/',
},
- "register-domain": {
+ 'register-domain': {
index: 3,
- message: "Get your.cel name!",
- link: "/register",
+ message: 'Get your.cel name!',
+ link: '/register',
},
- "add-record": {
+ 'add-record': {
index: 4,
- message: "Attach record to your.cel!",
- link: "/",
+ message: 'Attach record to your.cel!',
+ link: '/',
},
finish: {},
hide: {},
- };
-
+ }
useEffect(() => {
- if (onboardingStatus === "hide" || onboardingStatus === "finish") return;
+ if (onboardingStatus === 'hide' || onboardingStatus === 'finish') return
- const hasDomain = () => !isLoadingOwnDomain ? (dataOwnDomain?.domainOwnership?.domains?.length ?? 0) > 0 : false;
- const hasRecords = () => !isLoadingRecords && dataRecords?.values ? Object.keys(dataRecords?.values).length > 0 : false;
+ const hasDomain = () => (!isLoadingOwnDomain ? (dataOwnDomain?.domainOwnership?.domains?.length ?? 0) > 0 : false)
+ const hasRecords = () =>
+ !isLoadingRecords && dataRecords?.values ? Object.keys(dataRecords?.values).length > 0 : false
if (isConnected) {
if (!hasDomain()) {
- console.log('4');
- updateOnboardingStatus("register-domain");
+ console.log('4')
+ updateOnboardingStatus('register-domain')
}
if (hasDomain() && !hasRecords()) {
- console.log('5');
- updateOnboardingStatus("add-record");
+ console.log('5')
+ updateOnboardingStatus('add-record')
}
if (hasDomain() && hasRecords()) {
- console.log('6');
- updateOnboardingStatus("finish");
+ console.log('6')
+ updateOnboardingStatus('finish')
}
}
- }, [isConnected, isLoadingOwnDomain, dataOwnDomain, isLoadingRecords, dataRecords]);
-
+ }, [isConnected, isLoadingOwnDomain, dataOwnDomain, isLoadingRecords, dataRecords])
useEffect(() => {
- if (onboardingStatus === "hide" || onboardingStatus === "finish") return;
- const hasMycelAddress = () => !!mycelAccount?.address;
- const hasNoMycelBalance = () => !isLoadingBalance ? BigInt(dataBalance?.balance?.amount ?? 0) <= 0 : false;
+ if (onboardingStatus === 'hide' || onboardingStatus === 'finish') return
+ const hasMycelAddress = () => !!mycelAccount?.address
+ const hasNoMycelBalance = () => (!isLoadingBalance ? BigInt(dataBalance?.balance?.amount ?? 0) <= 0 : false)
if (!isConnected) {
- updateOnboardingStatus("no-connection");
+ updateOnboardingStatus('no-connection')
} else if (evmAddress && !hasMycelAddress()) {
- updateOnboardingStatus("no-mycel-address");
+ updateOnboardingStatus('no-mycel-address')
} else if (hasMycelAddress() && hasNoMycelBalance()) {
- updateOnboardingStatus("faucet");
+ updateOnboardingStatus('faucet')
}
- }, [isConnected, evmAddress, mycelAccount, isLoadingBalance, dataBalance]);
+ }, [isConnected, evmAddress, mycelAccount, isLoadingBalance, dataBalance])
- const onboardingStatusList = typeof ONBOARDING_CONFIG;
+ const onboardingStatusList = typeof ONBOARDING_CONFIG
return {
ONBOARDING_CONFIG,
- onboardingStatusList
+ onboardingStatusList,
}
-};
+}
-export default useOnboarding;
+export default useOnboarding
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
index 2facab0..d451f82 100644
--- a/src/hooks/useWallet.ts
+++ b/src/hooks/useWallet.ts
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState, useMemo } from "react";
-import { useStore } from "@/store/index";
+import { useCallback, useEffect, useState, useMemo } from 'react'
+import { useStore } from '~/store/index'
import {
useConnect as useConnectWagmi,
useAccount as useAccountWagmi,
@@ -9,16 +9,16 @@ import {
useSignTypedData,
useNetwork as useNetworkWagmi,
useSwitchNetwork as useSwitchNetworkWagmi,
-} from "wagmi";
+} from 'wagmi'
import {
useSuggestChainAndConnect as useConnectGraz,
useAccount as useAccountGraz,
useDisconnect as useDisconnectGraz,
useOfflineSigners as useOfflineSignersGraz,
WalletType as CosmosWalletType,
-} from "graz";
-import { LocalWallet, onboarding } from "@dydxprotocol/v4-client-js";
-import { DirectSecp256k1HdWallet, OfflineSigner } from "@cosmjs/proto-signing";
+} from 'graz'
+import { LocalWallet, onboarding } from '@dydxprotocol/v4-client-js'
+import { DirectSecp256k1HdWallet, OfflineSigner } from '@cosmjs/proto-signing'
import {
WALLET_CONFIG,
MYCEL_CHAIN_INFO,
@@ -29,105 +29,105 @@ import {
type MycelAddress,
type PrivateInformation,
type WalletType,
-} from "@/utils/wallets";
-import { AES, enc } from "crypto-js";
+} from '~/utils/wallets'
+import { AES, enc } from 'crypto-js'
export const useWallet = () => {
// EVM
- const evmAddress = useStore((state) => state.evmAddress);
- const updateEvmAddress = useStore((state) => state.updateEvmAddress);
- const { address: evmAddressWagmi, isConnected: isConnectedWagmi } = useAccountWagmi();
+ const evmAddress = useStore((state) => state.evmAddress)
+ const updateEvmAddress = useStore((state) => state.updateEvmAddress)
+ const { address: evmAddressWagmi, isConnected: isConnectedWagmi } = useAccountWagmi()
// const publicClientWagmi = usePublicClientWagmi();
- const { data: signerWagmi } = useWalletClientWagmi();
- const { disconnectAsync: disconnectWagmi } = useDisconnectWagmi();
+ const { data: signerWagmi } = useWalletClientWagmi()
+ const { disconnectAsync: disconnectWagmi } = useDisconnectWagmi()
// Cosmos
- const mycelAddress = useStore((state) => state.mycelAddress);
- const updateMycelAddress = useStore((state) => state.updateMycelAddress);
- const { data: mycelAccountGraz, isConnected: isConnectedGraz } = useAccountGraz();
- const { data: signerGraz } = useOfflineSignersGraz();
- const { disconnectAsync: disconnectGraz } = useDisconnectGraz();
- const mycelAddressGraz = mycelAccountGraz?.bech32Address as MycelAddress | undefined;
+ const mycelAddress = useStore((state) => state.mycelAddress)
+ const updateMycelAddress = useStore((state) => state.updateMycelAddress)
+ const { data: mycelAccountGraz, isConnected: isConnectedGraz } = useAccountGraz()
+ const { data: signerGraz } = useOfflineSignersGraz()
+ const { disconnectAsync: disconnectGraz } = useDisconnectGraz()
+ const mycelAddressGraz = mycelAccountGraz?.bech32Address as MycelAddress | undefined
// current wallet
- const currentWalletType = useStore((state) => state.currentWalletType);
- const updateCurrentWalletType = useStore((state) => state.updateCurrentWalletType);
+ const currentWalletType = useStore((state) => state.currentWalletType)
+ const updateCurrentWalletType = useStore((state) => state.updateCurrentWalletType)
- const { connectAsync: connectWagmi, connectors: connectorsWagmi } = useConnectWagmi();
- const { suggestAndConnect: connectGraz } = useConnectGraz();
+ const { connectAsync: connectWagmi, connectors: connectorsWagmi } = useConnectWagmi()
+ const { suggestAndConnect: connectGraz } = useConnectGraz()
// EVM → mycel account derivation
- const evmDerivedAddresses = useStore((state) => state.evmDerivedAddresses);
- const updateEvmDerivedAddress = useStore((state) => state.updateEvmDerivedAddress);
- const staticEncryptionKey = import.meta.env.VITE_PK_ENCRYPTION_KEY;
+ const evmDerivedAddresses = useStore((state) => state.evmDerivedAddresses)
+ const updateEvmDerivedAddress = useStore((state) => state.updateEvmDerivedAddress)
+ const staticEncryptionKey = import.meta.env.VITE_PK_ENCRYPTION_KEY
const connectWallet = useCallback(
async ({ walletType }: { walletType: WalletType }) => {
try {
- if (WALLET_CONFIG[walletType].chainType === "cosmos") {
+ if (WALLET_CONFIG[walletType].chainType === 'cosmos') {
if (!isConnectedGraz) {
connectGraz({
chainInfo: MYCEL_CHAIN_INFO,
walletType: WALLET_CONFIG[walletType].id,
- });
+ })
}
- } else if (WALLET_CONFIG[walletType].chainType === "evm") {
+ } else if (WALLET_CONFIG[walletType].chainType === 'evm') {
if (!isConnectedWagmi) {
await connectWagmi({
connector: connectorsWagmi.find((cn: any) => cn.name === WALLET_CONFIG[walletType].name),
- });
+ })
}
}
- updateCurrentWalletType(walletType);
+ updateCurrentWalletType(walletType)
} catch (error) {
- console.log(error);
+ console.log(error)
}
},
- [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi],
- );
+ [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]
+ )
// Disconnect
const disconnectLocalWallet = () => {
- setLocalMycelWallet(undefined);
- setHdKey(undefined);
- };
+ setLocalMycelWallet(undefined)
+ setHdKey(undefined)
+ }
const disconnectWallet = useCallback(async () => {
- if (isConnectedWagmi) await disconnectWagmi();
- if (isConnectedGraz) await disconnectGraz();
- updateEvmAddress(undefined);
- updateMycelAddress(undefined);
- disconnectLocalWallet();
+ if (isConnectedWagmi) await disconnectWagmi()
+ if (isConnectedGraz) await disconnectGraz()
+ updateEvmAddress(undefined)
+ updateMycelAddress(undefined)
+ disconnectLocalWallet()
// forgetEvmSignature();
- updateCurrentWalletType(undefined);
- }, [isConnectedGraz, isConnectedWagmi]);
+ updateCurrentWalletType(undefined)
+ }, [isConnectedGraz, isConnectedWagmi])
// mycel wallet
- const [localMycelWallet, setLocalMycelWallet] = useState();
- const [mycelOfflineSigner, setMycelOfflineSigner] = useState();
- const [hdKey, setHdKey] = useState();
+ const [localMycelWallet, setLocalMycelWallet] = useState()
+ const [mycelOfflineSigner, setMycelOfflineSigner] = useState()
+ const [hdKey, setHdKey] = useState()
- const mycelAccounts = useMemo(() => localMycelWallet?.accounts, [localMycelWallet]);
+ const mycelAccounts = useMemo(() => localMycelWallet?.accounts, [localMycelWallet])
const getWalletFromEvmSignature = async ({ signature }: { signature: string }) => {
- const { mnemonic, privateKey, publicKey } = onboarding.deriveHDKeyFromEthereumSignature(signature);
+ const { mnemonic, privateKey, publicKey } = onboarding.deriveHDKeyFromEthereumSignature(signature)
return {
wallet: await LocalWallet.fromMnemonic(mnemonic, BECH32_PREFIX),
mnemonic,
privateKey,
publicKey,
- };
- };
+ }
+ }
const setWalletFromEvmSignature = async (signature: string) => {
const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
signature,
- });
- setLocalMycelWallet(wallet);
- setHdKey({ mnemonic, privateKey, publicKey });
- setMycelOfflineSigner(await DirectSecp256k1HdWallet.fromMnemonic(mnemonic, { prefix: BECH32_PREFIX }));
- };
+ })
+ setLocalMycelWallet(wallet)
+ setHdKey({ mnemonic, privateKey, publicKey })
+ setMycelOfflineSigner(await DirectSecp256k1HdWallet.fromMnemonic(mnemonic, { prefix: BECH32_PREFIX }))
+ }
const saveEvmSignature = useCallback(
(encryptedSignature: string) => {
@@ -136,11 +136,11 @@ export const useWallet = () => {
evmAddress,
mycelAddress,
encryptedSignature,
- });
+ })
}
},
- [evmDerivedAddresses, evmAddress],
- );
+ [evmDerivedAddresses, evmAddress]
+ )
const forgetEvmSignature = useCallback(
(_evmAddress = evmAddress) => {
@@ -149,88 +149,88 @@ export const useWallet = () => {
evmAddress: _evmAddress,
mycelAddress,
encryptedSignature: undefined,
- });
+ })
}
},
- [evmDerivedAddresses, evmAddress],
- );
+ [evmDerivedAddresses, evmAddress]
+ )
- const signTypedData = getSignTypedData();
+ const signTypedData = getSignTypedData()
const { signTypedDataAsync } = useSignTypedData({
...signTypedData,
domain: {
...signTypedData.domain,
chainId: EVM_CHAINID,
},
- });
+ })
const deriveKeys = async () => {
- const signature = await signTypedDataAsync();
- await setWalletFromEvmSignature(signature);
- const encryptedSignature = AES.encrypt(signature, staticEncryptionKey).toString();
- saveEvmSignature(encryptedSignature);
- };
+ const signature = await signTypedDataAsync()
+ await setWalletFromEvmSignature(signature)
+ const encryptedSignature = AES.encrypt(signature, staticEncryptionKey).toString()
+ saveEvmSignature(encryptedSignature)
+ }
const decryptSignature = (encryptedSignature: string | undefined) => {
- if (!staticEncryptionKey) throw new Error("No decryption key found");
- if (!encryptedSignature) throw new Error("No signature found");
+ if (!staticEncryptionKey) throw new Error('No decryption key found')
+ if (!encryptedSignature) throw new Error('No signature found')
- const decrypted = AES.decrypt(encryptedSignature, staticEncryptionKey);
- const signature = decrypted.toString(enc.Utf8);
- return signature;
- };
+ const decrypted = AES.decrypt(encryptedSignature, staticEncryptionKey)
+ const signature = decrypted.toString(enc.Utf8)
+ return signature
+ }
useEffect(() => {
if (evmAddressWagmi) {
if (evmAddress && evmAddress !== evmAddressWagmi) {
- disconnectLocalWallet();
- forgetEvmSignature(evmAddressWagmi);
+ disconnectLocalWallet()
+ forgetEvmSignature(evmAddressWagmi)
}
- updateEvmAddress(evmAddressWagmi);
+ updateEvmAddress(evmAddressWagmi)
}
if (mycelAddressGraz) {
- updateMycelAddress(mycelAddressGraz);
+ updateMycelAddress(mycelAddressGraz)
}
- }, [evmAddressWagmi, mycelAddressGraz]);
+ }, [evmAddressWagmi, mycelAddressGraz])
// Change EVM network
- const { chain: chainWagmi } = useNetworkWagmi();
- const { switchNetworkAsync: switchNetworkAsyncWagmi } = useSwitchNetworkWagmi({ chainId: EVM_CHAINID });
+ const { chain: chainWagmi } = useNetworkWagmi()
+ const { switchNetworkAsync: switchNetworkAsyncWagmi } = useSwitchNetworkWagmi({ chainId: EVM_CHAINID })
const switchEvmNetworkAsync = useCallback(() => {
if (chainWagmi?.id !== EVM_CHAINID) {
- switchNetworkAsyncWagmi && switchNetworkAsyncWagmi();
+ switchNetworkAsyncWagmi && switchNetworkAsyncWagmi()
}
- }, [chainWagmi?.id]);
+ }, [chainWagmi?.id])
// LocalWallet
- const updateDialog = useStore((state) => state.updateDialog);
+ const updateDialog = useStore((state) => state.updateDialog)
useEffect(() => {
- (async () => {
+ ;(async () => {
if (mycelAddress && signerGraz?.offlineSigner) {
try {
- setLocalMycelWallet(await LocalWallet.fromOfflineSigner(signerGraz?.offlineSigner));
- setMycelOfflineSigner(signerGraz?.offlineSigner);
+ setLocalMycelWallet(await LocalWallet.fromOfflineSigner(signerGraz?.offlineSigner))
+ setMycelOfflineSigner(signerGraz?.offlineSigner)
} catch (error) {
- console.log(error);
+ console.log(error)
}
} else if (evmAddress) {
if (!localMycelWallet) {
- const evmDerivedAccount = evmDerivedAddresses[evmAddress];
+ const evmDerivedAccount = evmDerivedAddresses[evmAddress]
if (evmDerivedAccount?.encryptedSignature) {
try {
- const signature = decryptSignature(evmDerivedAccount.encryptedSignature);
- await setWalletFromEvmSignature(signature);
+ const signature = decryptSignature(evmDerivedAccount.encryptedSignature)
+ await setWalletFromEvmSignature(signature)
} catch (error) {
- console.log(error);
- forgetEvmSignature();
+ console.log(error)
+ forgetEvmSignature()
}
} else {
- updateDialog("wallet2");
+ updateDialog('wallet2')
}
}
}
- })();
- }, [evmAddress, evmDerivedAddresses, signerWagmi, mycelAddress, signerGraz]);
+ })()
+ }, [evmAddress, evmDerivedAddresses, signerWagmi, mycelAddress, signerGraz])
return {
// Wallet connection
@@ -261,7 +261,7 @@ export const useWallet = () => {
localMycelWallet,
mycelOfflineSigner,
mycelAccount: mycelAccounts?.[0],
- };
-};
+ }
+}
-export default useWallet;
+export default useWallet
diff --git a/src/hooks/useWebAuthn.tsx b/src/hooks/useWebAuthn.tsx
new file mode 100644
index 0000000..3295776
--- /dev/null
+++ b/src/hooks/useWebAuthn.tsx
@@ -0,0 +1,24 @@
+import { useStore } from '~/store/index'
+import { loginCredential, createNewCredential } from '~/utils/webauthn'
+
+const useWebAuthn = () => {
+ const { updateAuthenticator } = useStore()
+
+ const auth = async () => {
+ console.log('0', useStore.getState().authenticator)
+ if (!useStore.getState().authenticator?.id) {
+ const res = await createNewCredential()
+ updateAuthenticator(res)
+ console.log('1', useStore.getState().authenticator, res)
+ }
+ console.log('2', useStore.getState().authenticator)
+ const res = await loginCredential(useStore.getState().authenticator)
+ return res?.updatedSignature ?? false
+ }
+
+ return {
+ auth,
+ }
+}
+
+export default useWebAuthn
diff --git a/src/main.tsx b/src/main.tsx
index 10a608b..e05d9dd 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "@/components/App";
-import "@/index.css";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from '~/components/App'
+import '~/index.css'
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
- ,
-);
+
+)
diff --git a/src/router/index.tsx b/src/router/index.tsx
index e885937..9cba018 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,25 +1,25 @@
-import { createBrowserRouter, Outlet } from "react-router-dom";
-import PortfolioView from "@/views/PortfolioView";
-import ResolveView from "@/views/ResolveView";
-import RegisterView from "@/views/RegisterView";
-import SendView from "@/views/SendView";
-import Layout from "@/components/layout/Layout";
+import { createBrowserRouter, Outlet } from 'react-router-dom'
+import PortfolioView from '~/views/PortfolioView'
+import ResolveView from '~/views/ResolveView'
+import RegisterView from '~/views/RegisterView'
+import SendView from '~/views/SendView'
+import Layout from '~/components/layout/Layout'
const router = createBrowserRouter([
{
- path: "/",
+ path: '/',
element: (
),
children: [
- { path: "/", element: },
- { path: "/resolve", element: },
- { path: "/register", element: },
- { path: "/send", element: },
+ { path: '/', element: },
+ { path: '/resolve', element: },
+ { path: '/register', element: },
+ { path: '/send', element: },
],
},
-]);
+])
-export default router;
+export default router
diff --git a/src/shims-keplr.d.ts b/src/shims-keplr.d.ts
index e986734..778b533 100644
--- a/src/shims-keplr.d.ts
+++ b/src/shims-keplr.d.ts
@@ -1,22 +1,22 @@
/* eslint-disable */
-import { Window as KeplrWindow, Keplr } from "@keplr-wallet/types";
+import { Window as KeplrWindow, Keplr } from '@keplr-wallet/types'
declare global {
- import { OfflineDirectSigner } from "@cosmjs/proto-signing";
+ import { OfflineDirectSigner } from '@cosmjs/proto-signing'
interface KeplrIntereactionOptions {
- readonly sign?: KeplrSignOptions;
+ readonly sign?: KeplrSignOptions
}
export interface KeplrSignOptions {
- readonly preferNoSetFee?: boolean;
- readonly preferNoSetMemo?: boolean;
+ readonly preferNoSetFee?: boolean
+ readonly preferNoSetMemo?: boolean
}
interface CustomKeplr extends Keplr {
- enable(chainId: string | string[]): Promise;
- defaultOptions: KeplrIntereactionOptions;
+ enable(chainId: string | string[]): Promise
+ defaultOptions: KeplrIntereactionOptions
}
interface Window extends KeplrWindow {
- keplr: CustomKeplr;
+ keplr: CustomKeplr
}
}
diff --git a/src/store/index.ts b/src/store/index.ts
index 5b63def..ffd3230 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,46 +1,57 @@
-import { create } from "zustand";
-import { persist, devtools } from "zustand/middleware";
-import type { EvmAddress, MycelAddress } from "@/utils/wallets";
-import { ONBOARDING_CONFIG } from "@/hooks/useOnboarding";
+import { create } from 'zustand'
+import { persist, devtools } from 'zustand/middleware'
+import type { EvmAddress, MycelAddress } from '~/utils/wallets'
+import { ONBOARDING_CONFIG } from '~/hooks/useOnboarding'
-export type Dialog = "wallet" | "wallet2" | "tx" | "editRecord" | undefined;
+export type Dialog = 'wallet' | 'wallet2' | 'tx' | 'editRecord' | undefined
-export type OnboardingStatus = typeof ONBOARDING_CONFIG;
+export type OnboardingStatus = typeof ONBOARDING_CONFIG
export type EvmDerivedAddresses = {
- version?: string;
+ version?: string
[EvmAddress: EvmAddress]: {
- encryptedSignature?: string;
- mycelAddress?: MycelAddress;
- };
-};
+ encryptedSignature?: string
+ mycelAddress?: MycelAddress
+ }
+}
+
+export type Authenticator = {
+ id: string
+ credentialID: Uint8Array
+ credentialPublicKey: Uint8Array
+ counter: number
+ credentialDeviceType: string
+ transports?: AuthenticatorTransport[]
+}
type StoreState = {
- evmAddress: EvmAddress | undefined;
- mycelAddress: MycelAddress | undefined;
+ evmAddress: EvmAddress | undefined
+ mycelAddress: MycelAddress | undefined
// eslint-disable-next-line @typescript-eslint/ban-types
- evmDerivedAddresses: EvmDerivedAddresses | {};
- currentWalletType: string | undefined;
- dialog: Dialog;
- onboardingStatus: typeof ONBOARDING_CONFIG | undefined | false;
-};
+ evmDerivedAddresses: EvmDerivedAddresses | {}
+ currentWalletType: string | undefined
+ authenticator: Authenticator | undefined
+ dialog: Dialog
+ onboardingStatus: typeof ONBOARDING_CONFIG | undefined | false
+}
type StoreSAction = {
- updateEvmAddress: (address: StoreState["evmAddress"]) => void;
- updateMycelAddress: (address: StoreState["mycelAddress"]) => void;
- updateCurrentWalletType: (address: StoreState["currentWalletType"]) => void;
+ updateEvmAddress: (address: StoreState['evmAddress']) => void
+ updateMycelAddress: (address: StoreState['mycelAddress']) => void
+ updateCurrentWalletType: (address: StoreState['currentWalletType']) => void
updateEvmDerivedAddress: ({
evmAddress,
mycelAddress,
encryptedSignature,
}: {
- evmAddress: EvmAddress;
- mycelAddress?: MycelAddress;
- encryptedSignature?: string;
- }) => void;
- updateDialog: (dialog: StoreState["dialog"]) => void;
- updateOnboardingStatus: (payload: StoreState["onboardingStatus"]) => void;
-};
+ evmAddress: EvmAddress
+ mycelAddress?: MycelAddress
+ encryptedSignature?: string
+ }) => void
+ updateAuthenticator: (dialog: StoreState['authenticator']) => void
+ updateDialog: (dialog: StoreState['dialog']) => void
+ updateOnboardingStatus: (payload: StoreState['onboardingStatus']) => void
+}
export const useStore = create()(
devtools(
@@ -52,6 +63,7 @@ export const useStore = create()(
evmDerivedAddresses: {},
dialog: undefined,
onboardingStatus: undefined,
+ authenticator: undefined,
updateEvmAddress: (payload: EvmAddress | undefined) => set((state) => ({ ...state, evmAddress: payload })),
updateMycelAddress: (payload: MycelAddress | undefined) =>
set((state) => ({ ...state, mycelAddress: payload })),
@@ -60,7 +72,7 @@ export const useStore = create()(
...state,
evmDerivedAddresses: {
...state.evmDerivedAddresses,
- version: "v1",
+ version: 'v1',
[evmAddress]: {
mycelAddress,
encryptedSignature,
@@ -72,16 +84,19 @@ export const useStore = create()(
updateDialog: (payload: Dialog) => set((state) => ({ ...state, dialog: payload })),
updateOnboardingStatus: (payload: typeof ONBOARDING_CONFIG | undefined | false) =>
set((state) => ({ ...state, onboardingStatus: payload })),
+ updateAuthenticator: (payload: Authenticator | undefined) =>
+ set((state) => ({ ...state, authenticator: payload })),
}),
{
- name: "mycel",
+ name: 'mycel',
partialize: (state) => ({
evmAddress: state.evmAddress,
mycelAddress: state.mycelAddress,
+ authenticator: state.authenticator,
evmDerivedAddresses: state.evmDerivedAddresses,
onboardingStatus: state.onboardingStatus,
}),
- },
- ),
- ),
-);
+ }
+ )
+ )
+)
diff --git a/src/types/domain.ts b/src/types/domain.ts
index d78179b..ffd9283 100644
--- a/src/types/domain.ts
+++ b/src/types/domain.ts
@@ -1,4 +1,4 @@
export type Domain = {
- name: string;
- parent: string;
-};
+ name: string
+ parent: string
+}
diff --git a/src/utils/chains.ts b/src/utils/chains.ts
index 51bc8a5..62023ec 100644
--- a/src/utils/chains.ts
+++ b/src/utils/chains.ts
@@ -1,7 +1,5 @@
-import { Chain } from "@wagmi/core/chains";
-import { RegistryNetworkName } from "mycel-client-ts/mycel.resolver/rest";
-
import {
+ Chain,
mainnet,
sepolia,
goerli,
@@ -18,25 +16,26 @@ import {
arbitrum,
arbitrumGoerli,
shardeumSphinx,
-} from "wagmi/chains";
+} from 'wagmi/chains'
+import { RegistryNetworkName } from 'mycel-client-ts/mycel.resolver/rest'
const zetaAthens: Chain = {
id: 7001,
- name: "Zeta Athens 3",
- network: "zeta-athens-3",
- nativeCurrency: { name: "aZeta", symbol: "aZETA", decimals: 18 },
+ name: 'Zeta Athens 3',
+ network: 'zeta-athens-3',
+ nativeCurrency: { name: 'aZeta', symbol: 'aZETA', decimals: 18 },
rpcUrls: {
default: {
- http: ["https://zetachain-athens-evm.blockpi.network/v1/rpc/public"],
+ http: ['https://zetachain-athens-evm.blockpi.network/v1/rpc/public'],
},
public: {
- http: ["https://zetachain-athens-evm.blockpi.network/v1/rpc/public"],
+ http: ['https://zetachain-athens-evm.blockpi.network/v1/rpc/public'],
},
},
blockExplorers: {
- default: { name: "ZetaScan", url: "https://athens3.explorer.zetachain.com/ " },
+ default: { name: 'ZetaScan', url: 'https://athens3.explorer.zetachain.com/ ' },
},
-};
+}
export const chains: Chain[] = [
mainnet,
@@ -56,45 +55,45 @@ export const chains: Chain[] = [
arbitrumGoerli,
shardeumSphinx,
zetaAthens,
-];
+]
export const getConnectedNetworkName = (chainId: number) => {
switch (chainId) {
case mainnet.id:
- return RegistryNetworkName.ETHEREUM_MAINNET_MAINNET;
+ return RegistryNetworkName.ETHEREUM_MAINNET_MAINNET
case goerli.id:
- return RegistryNetworkName.ETHEREUM_TESTNET_GOERLI;
+ return RegistryNetworkName.ETHEREUM_TESTNET_GOERLI
case sepolia.id:
- return RegistryNetworkName.ETHEREUM_TESTNET_SEPOLIA;
+ return RegistryNetworkName.ETHEREUM_TESTNET_SEPOLIA
case polygon.id:
- return RegistryNetworkName.POLYGON_MAINNET_MAINNET;
+ return RegistryNetworkName.POLYGON_MAINNET_MAINNET
case polygonMumbai.id:
- return RegistryNetworkName.POLYGON_TESTNET_MUMBAI;
+ return RegistryNetworkName.POLYGON_TESTNET_MUMBAI
case bsc.id:
- return RegistryNetworkName.BNB_MAINNET_MAINNET;
+ return RegistryNetworkName.BNB_MAINNET_MAINNET
case bscTestnet.id:
- return RegistryNetworkName.BNB_TESTNET_TESTNET;
+ return RegistryNetworkName.BNB_TESTNET_TESTNET
case avalanche.id:
- return RegistryNetworkName.AVALANCHE_MAINNET_CCHAIN;
+ return RegistryNetworkName.AVALANCHE_MAINNET_CCHAIN
case avalancheFuji.id:
- return RegistryNetworkName.AVALANCHE_TESTNET_FUJI;
+ return RegistryNetworkName.AVALANCHE_TESTNET_FUJI
case gnosis.id:
- return RegistryNetworkName.GNOSIS_MAINNET_MAINNET;
+ return RegistryNetworkName.GNOSIS_MAINNET_MAINNET
case gnosisChiado.id:
- return RegistryNetworkName.GNOSIS_TESTNET_CHIADO;
+ return RegistryNetworkName.GNOSIS_TESTNET_CHIADO
case optimism.id:
- return RegistryNetworkName.OPTIMISM_MAINNET_MAINNET;
+ return RegistryNetworkName.OPTIMISM_MAINNET_MAINNET
case optimismGoerli.id:
- return RegistryNetworkName.OPTIMISM_TESTNET_GOERLI;
+ return RegistryNetworkName.OPTIMISM_TESTNET_GOERLI
case arbitrum.id:
- return RegistryNetworkName.ARBITRUM_MAINNET_MAINNET;
+ return RegistryNetworkName.ARBITRUM_MAINNET_MAINNET
case arbitrumGoerli.id:
- return RegistryNetworkName.ARBITRUM_TESTNET_GOERLI;
+ return RegistryNetworkName.ARBITRUM_TESTNET_GOERLI
case shardeumSphinx.id:
- return RegistryNetworkName.SHARDEUM_BETANET_SPHINX;
+ return RegistryNetworkName.SHARDEUM_BETANET_SPHINX
case zetaAthens.id:
- return RegistryNetworkName.ZETA_TESTNET_ATHENS;
+ return RegistryNetworkName.ZETA_TESTNET_ATHENS
default:
- throw new Error(`Unknown chainId: ${chainId}`);
+ throw new Error(`Unknown chainId: ${chainId}`)
}
-};
+}
diff --git a/src/utils/coin.ts b/src/utils/coin.ts
index e8f456e..a5a6c0f 100644
--- a/src/utils/coin.ts
+++ b/src/utils/coin.ts
@@ -1,10 +1,10 @@
-export const MYCEL_BASE_COIN_UNIT = "umycel";
-export const MYCEL_HUMAN_COIN_UNIT = "MYCEL";
-export const MYCEL_COIN_DECIMALS = 6;
+export const MYCEL_BASE_COIN_UNIT = 'umycel'
+export const MYCEL_HUMAN_COIN_UNIT = 'MYCEL'
+export const MYCEL_COIN_DECIMALS = 6
// Convert coin to human readable format
export function convertToDecimalString(amount: string, decimal: number, format = true): string {
- const numericAmount = parseInt(amount, 10);
- const adjustedAmount = numericAmount / Math.pow(10, decimal);
- return format ? new Intl.NumberFormat().format(adjustedAmount) : adjustedAmount.toString();
+ const numericAmount = parseInt(amount, 10)
+ const adjustedAmount = numericAmount / Math.pow(10, decimal)
+ return format ? new Intl.NumberFormat().format(adjustedAmount) : adjustedAmount.toString()
}
diff --git a/src/utils/decode.ts b/src/utils/decode.ts
new file mode 100644
index 0000000..c6b91fe
--- /dev/null
+++ b/src/utils/decode.ts
@@ -0,0 +1,169 @@
+import * as cborx from 'cbor-x'
+import base64 from '@hexagon/base64'
+import { AsnParser } from '@peculiar/asn1-schema'
+import { ECDSASigValue } from '@peculiar/asn1-ecc'
+
+const encoder = new cborx.Encoder({
+ mapsAsObjects: false,
+ tagUint8Array: false,
+})
+
+export function decodeFirst(input: Uint8Array): Type {
+ const decoded = encoder.decodeMultiple(input) as undefined | Type[]
+
+ if (decoded === undefined) {
+ throw new Error('CBOR input data was empty')
+ }
+
+ /**
+ * Typing on `decoded` is `void | []` which causes TypeScript to think that it's an empty array,
+ * and thus you can't destructure it. I'm ignoring that because the code works fine in JS, and
+ * so this should be a valid operation.
+ */
+ const [first] = decoded
+
+ return first
+}
+
+function toDataView(array: Uint8Array): DataView {
+ return new DataView(array.buffer, array.byteOffset, array.length)
+}
+
+export function parseAuthenticatorData(authData: Uint8Array) {
+ if (authData.byteLength < 37) {
+ throw new Error(`Authenticator data was ${authData.byteLength} bytes, expected at least 37 bytes`)
+ }
+
+ let pointer = 0
+ const dataView = toDataView(authData)
+
+ const rpIdHash = authData.slice(pointer, (pointer += 32))
+
+ const flagsBuf = authData.slice(pointer, (pointer += 1))
+ const flagsInt = flagsBuf[0]
+
+ // Bit positions can be referenced here:
+ // https://www.w3.org/TR/webauthn-2/#flags
+ const flags = {
+ up: !!(flagsInt & (1 << 0)), // User Presence
+ uv: !!(flagsInt & (1 << 2)), // User Verified
+ be: !!(flagsInt & (1 << 3)), // Backup Eligibility
+ bs: !!(flagsInt & (1 << 4)), // Backup State
+ at: !!(flagsInt & (1 << 6)), // Attested Credential Data Present
+ ed: !!(flagsInt & (1 << 7)), // Extension Data Present
+ flagsInt,
+ }
+
+ const counterBuf = authData.slice(pointer, pointer + 4)
+ const counter = dataView.getUint32(pointer, false)
+ pointer += 4
+
+ let aaguid: Uint8Array | undefined = undefined
+ let credentialID: Uint8Array | undefined = undefined
+ let credentialPublicKey: Uint8Array | undefined = undefined
+ let credentialPublicKeyDecoded: Uint8Array | undefined = undefined
+
+ if (flags.at) {
+ aaguid = authData.slice(pointer, (pointer += 16))
+
+ const credIDLen = dataView.getUint16(pointer)
+ pointer += 2
+
+ credentialID = authData.slice(pointer, (pointer += credIDLen))
+
+ // Decode the next CBOR item in the buffer, then re-encode it back to a Buffer
+ const firstDecoded = decodeFirst(authData.slice(pointer))
+ const firstEncoded = Uint8Array.from(encoder.encode(firstDecoded))
+
+ credentialPublicKey = firstEncoded
+ credentialPublicKeyDecoded = firstDecoded as any
+ pointer += firstEncoded.byteLength
+ }
+
+ return {
+ rpIdHash,
+ flagsBuf,
+ flags,
+ counter,
+ counterBuf,
+ aaguid,
+ credentialID,
+ credentialPublicKey,
+ credentialPublicKeyDecoded,
+ }
+}
+
+export function concatUint8Arrays(a: Uint8Array, b: Uint8Array): Uint8Array {
+ const result = new Uint8Array(a.length + b.length)
+ result.set(a, 0)
+ result.set(b, a.length)
+ return result
+}
+
+export function shouldRemoveLeadingZero(bytes: Uint8Array): boolean {
+ return bytes[0] === 0x0 && (bytes[1] & (1 << 7)) !== 0
+}
+
+export async function getSignature(authenticationResponse, authenticator) {
+ const clientDataJSON = base64.toArrayBuffer(authenticationResponse.response.clientDataJSON, true)
+ const authenticatorData = base64.toArrayBuffer(authenticationResponse.response.authenticatorData, true)
+ const signature = base64.toArrayBuffer(authenticationResponse.response.signature, true)
+ const parsed = parseAuthenticatorData(new Uint8Array(authenticatorData))
+
+ const hashedClientData = await window.crypto.subtle.digest('SHA-256', clientDataJSON)
+ const preimage = concatUint8Arrays(new Uint8Array(authenticatorData), new Uint8Array(hashedClientData))
+ const hashedMessage = await window.crypto.subtle.digest('SHA-256', preimage)
+
+ const publicKey = decodeFirst(Uint8Array.from(authenticator.credentialPublicKey))
+ const kty = publicKey.get(1)
+ const alg = publicKey.get(3)
+ const crv = publicKey.get(-1)
+ const x = publicKey.get(-2)
+ const y = publicKey.get(-3)
+ const n = publicKey.get(-1)
+
+ const keyData = {
+ kty: 'EC',
+ crv: 'P-256',
+ x: base64.fromArrayBuffer(x, true),
+ y: base64.fromArrayBuffer(y, true),
+ ext: false,
+ }
+
+ const parsedSignature = AsnParser.parse(signature, ECDSASigValue)
+ let rBytes = new Uint8Array(parsedSignature.r)
+ let sBytes = new Uint8Array(parsedSignature.s)
+
+ if (shouldRemoveLeadingZero(rBytes)) {
+ rBytes = rBytes.slice(1)
+ }
+
+ if (shouldRemoveLeadingZero(sBytes)) {
+ sBytes = sBytes.slice(1)
+ }
+
+ const updatedSignature = concatUint8Arrays(rBytes, sBytes)
+
+ const key = await window.crypto.subtle.importKey(
+ 'jwk',
+ keyData,
+ {
+ name: 'ECDSA',
+ namedCurve: 'P-256',
+ },
+ false,
+ ['verify']
+ )
+
+ const result = await window.crypto.subtle.verify(
+ { hash: { name: 'SHA-256' }, name: 'ECDSA' },
+ key,
+ updatedSignature,
+ preimage
+ )
+
+ return {
+ result,
+ updatedSignature,
+ }
+}
diff --git a/src/utils/domainName.ts b/src/utils/domainName.ts
index 9bdc29c..c9a83a1 100644
--- a/src/utils/domainName.ts
+++ b/src/utils/domainName.ts
@@ -1,19 +1,19 @@
-import { Domain } from "@/types/domain";
+import { Domain } from '~/types/domain'
export const convertToDomain = (domain: string) => {
- const s = domain.split(".");
+ const s = domain.split('.')
if (s.length === 1) {
- return { name: s[0], parent: "" } as Domain;
+ return { name: s[0], parent: '' } as Domain
}
- return { name: s[0], parent: s.slice(1).join(".") } as Domain;
-};
+ return { name: s[0], parent: s.slice(1).join('.') } as Domain
+}
export const convertToDomainString = (name: string | undefined, parent: string | undefined) => {
if (name && parent) {
- return name + "." + parent;
+ return name + '.' + parent
} else if (name) {
- return name;
+ return name
} else {
- return "";
+ return ''
}
-};
+}
diff --git a/src/utils/lib.ts b/src/utils/lib.ts
index 897174c..ca376bc 100644
--- a/src/utils/lib.ts
+++ b/src/utils/lib.ts
@@ -1,33 +1,33 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-import MobileDetet from "mobile-detect";
-import tailwindConfig from "../../tailwind.config.js";
-import resolveConfig from "tailwindcss/resolveConfig";
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import MobileDetet from 'mobile-detect'
+import tailwindConfig from '../../tailwind.config.js'
+import resolveConfig from 'tailwindcss/resolveConfig'
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
-export const wait = (msec: number) => new Promise((resolve) => setTimeout(resolve, msec));
+export const wait = (msec: number) => new Promise((resolve) => setTimeout(resolve, msec))
-export const twConfig = resolveConfig(tailwindConfig);
+export const twConfig = resolveConfig(tailwindConfig)
export const copyClipboard = async (str: string | undefined) => {
- if (!str) return;
- navigator.clipboard.writeText(str);
-};
+ if (!str) return
+ navigator.clipboard.writeText(str)
+}
export const isMobile = (): boolean => {
- const md = new MobileDetet(window.navigator.userAgent);
- return !!md.mobile();
-};
+ const md = new MobileDetet(window.navigator.userAgent)
+ return !!md.mobile()
+}
-export const isPC = (): boolean => !isMobile();
+export const isPC = (): boolean => !isMobile()
export const isOKXApp = (): boolean => {
- if (!window) return false;
- return typeof window?.okxwallet !== "undefined";
-};
+ if (!window) return false
+ return typeof window?.okxwallet !== 'undefined'
+}
export const isBitGetApp = (): boolean => {
- if (!window) return false;
- return typeof window?.bitkeep !== "undefined";
-};
+ if (!window) return false
+ return typeof window?.bitkeep !== 'undefined'
+}
diff --git a/src/utils/wallets.ts b/src/utils/wallets.ts
index aab9b33..87c1486 100644
--- a/src/utils/wallets.ts
+++ b/src/utils/wallets.ts
@@ -1,39 +1,41 @@
-import { onboarding } from "@dydxprotocol/v4-client-js";
-import { ChainInfo } from "@keplr-wallet/types";
-import { WalletType as CosmosWalletType } from "graz";
-import { MYCEL_BASE_COIN_UNIT, MYCEL_HUMAN_COIN_UNIT, MYCEL_COIN_DECIMALS } from "@/utils/coin";
-import MetamaskIcon from "@/assets/icons/wallets/metamask.svg";
-import CoinbaseWalltIcon from "@/assets/icons/wallets/coinbase-wallet.svg";
-import GenericWalletWalltIcon from "@/assets/icons/wallets/generic-wallet.svg";
-import KeplrIcon from "@/assets/icons/wallets/keplr.svg";
-import WalletConnectIcon from "@/assets/icons/wallets/walletconnect.svg";
-import OKXIcon from "@/assets/icons/wallets/okx.svg";
-import BitGetIcon from "@/assets/icons/wallets/bitget.png";
+import { onboarding } from '@dydxprotocol/v4-client-js'
+import { ChainInfo } from '@keplr-wallet/types'
+import { WalletType as CosmosWalletType } from 'graz'
+import { MYCEL_BASE_COIN_UNIT, MYCEL_HUMAN_COIN_UNIT, MYCEL_COIN_DECIMALS } from '~/utils/coin'
+import MetamaskIcon from '~/assets/icons/wallets/metamask.svg'
+import CoinbaseWalltIcon from '~/assets/icons/wallets/coinbase-wallet.svg'
+import GenericWalletWalltIcon from '~/assets/icons/wallets/generic-wallet.svg'
+import KeplrIcon from '~/assets/icons/wallets/keplr.svg'
+import WalletConnectIcon from '~/assets/icons/wallets/walletconnect.svg'
+import OKXIcon from '~/assets/icons/wallets/okx.svg'
+import BitGetIcon from '~/assets/icons/wallets/bitget.png'
+import PasskeyIcon from '~/assets/icons/wallets/passkey.svg'
+import { isWebAuthnSupported } from '~/utils/webauthn'
-export type EvmAddress = `0x${string}`;
-export type MycelAddress = `mycel${string}`;
+export type EvmAddress = `0x${string}`
+export type MycelAddress = `mycel${string}`
-export const EVM_CHAINID = 1;
+export const EVM_CHAINID = 1
-export type PrivateInformation = ReturnType;
+export type PrivateInformation = ReturnType
-export const BECH32_PREFIX = "mycel";
+export const BECH32_PREFIX = 'mycel'
export const MYCEL_CHAIN_INFO: ChainInfo = {
- rpc: import.meta.env.VITE_WS_TENDERMINT ?? "",
- rest: import.meta.env.VITE_API_COSMOS ?? "",
- chainId: import.meta.env.VITE_CHAIN_ID ?? "",
- chainName: import.meta.env.VITE_CHAIN_NAME ?? "",
+ rpc: import.meta.env.VITE_WS_TENDERMINT ?? '',
+ rest: import.meta.env.VITE_API_COSMOS ?? '',
+ chainId: import.meta.env.VITE_CHAIN_ID ?? '',
+ chainName: import.meta.env.VITE_CHAIN_NAME ?? '',
bip44: {
coinType: 118,
},
bech32Config: {
bech32PrefixAccAddr: BECH32_PREFIX,
- bech32PrefixAccPub: BECH32_PREFIX + "pub",
- bech32PrefixValAddr: BECH32_PREFIX + "valoper",
- bech32PrefixValPub: BECH32_PREFIX + "valoperpub",
- bech32PrefixConsAddr: BECH32_PREFIX + "valcons",
- bech32PrefixConsPub: BECH32_PREFIX + "valconspub",
+ bech32PrefixAccPub: BECH32_PREFIX + 'pub',
+ bech32PrefixValAddr: BECH32_PREFIX + 'valoper',
+ bech32PrefixValPub: BECH32_PREFIX + 'valoperpub',
+ bech32PrefixConsAddr: BECH32_PREFIX + 'valcons',
+ bech32PrefixConsPub: BECH32_PREFIX + 'valconspub',
},
currencies: [
{
@@ -55,54 +57,64 @@ export const MYCEL_CHAIN_INFO: ChainInfo = {
coinDecimals: MYCEL_COIN_DECIMALS,
},
beta: true,
-};
+}
export const WALLET_CONFIG = {
MetaMask: {
- id: "injected",
- name: "Injected",
- display: "EVM Wallet",
- chainType: "evm",
+ id: 'injected',
+ name: 'Injected',
+ display: 'EVM Wallet',
+ chainType: 'evm',
icon: [MetamaskIcon, CoinbaseWalltIcon, GenericWalletWalltIcon],
- getUrl: "https://metamask.io/download.html",
+ getUrl: 'https://metamask.io/download.html',
showMobile: true,
},
WalletConnect: {
- id: "walletConnect",
- name: "WalletConnect",
- display: "Wallet Connect",
- chainType: "evm",
+ id: 'walletConnect',
+ name: 'WalletConnect',
+ display: 'Wallet Connect',
+ chainType: 'evm',
icon: WalletConnectIcon,
- getUrl: "",
+ getUrl: '',
showMobile: true,
},
OKXWallet: {
- id: "okx",
- name: "OKXWallet",
- display: "OKX Wallet",
- chainType: "evm",
+ id: 'okx',
+ name: 'OKXWallet',
+ display: 'OKX Wallet',
+ chainType: 'evm',
icon: OKXIcon,
- getUrl: "https://www.okx.com/web3",
+ getUrl: 'https://www.okx.com/web3',
showMobile: true,
},
BitGetWallet: {
- id: "bitget",
- name: "BitGetWallet",
- display: "BitGet Wallet",
- chainType: "evm",
+ id: 'bitget',
+ name: 'BitGetWallet',
+ display: 'BitGet Wallet',
+ chainType: 'evm',
icon: BitGetIcon,
- getUrl: "https://web3.bitget.com",
+ getUrl: 'https://web3.bitget.com',
showMobile: true,
},
Keplr: {
id: CosmosWalletType.KEPLR,
- name: "Keplr",
- display: "Keplr",
- chainType: "cosmos",
+ name: 'Keplr',
+ display: 'Keplr',
+ chainType: 'cosmos',
icon: KeplrIcon,
- getUrl: "https://www.keplr.app/download",
+ getUrl: 'https://www.keplr.app/download',
showMobile: false,
},
+ Passkey: {
+ id: 'passkey',
+ name: 'Passkey',
+ display: 'Passkey',
+ chainType: '',
+ icon: PasskeyIcon,
+ getUrl: '',
+ disabled: !isWebAuthnSupported,
+ showMobile: true,
+ },
// KeplrMobile: {
// id: CosmosWalletType.WC_KEPLR_MOBILE,
// name: "KeplrMobile",
@@ -113,25 +125,25 @@ export const WALLET_CONFIG = {
// showMobile: true,
// hidePC: true,
// },
-};
+}
-export type WalletType = keyof typeof WALLET_CONFIG;
+export type WalletType = keyof typeof WALLET_CONFIG
export const getSignTypedData = () =>
({
- primaryType: "mycel",
+ primaryType: 'mycel',
domain: {
- name: "Mycel Chain",
+ name: 'Mycel Chain',
},
types: {
- mycel: [{ name: "action", type: "string" }],
+ mycel: [{ name: 'action', type: 'string' }],
},
message: {
- action: "Mycel Chain Authentication",
+ action: 'Mycel Chain Authentication',
},
- }) as const;
+ }) as const
export const shortAddress = (address: string | undefined, prefix = 8, suffix = 4) => {
- if (!address) return "";
- return `${address.slice(0, prefix)}...${address.slice(-suffix)}`;
-};
+ if (!address) return ''
+ return `${address.slice(0, prefix)}...${address.slice(-suffix)}`
+}
diff --git a/src/utils/webauthn.ts b/src/utils/webauthn.ts
new file mode 100644
index 0000000..17e2f16
--- /dev/null
+++ b/src/utils/webauthn.ts
@@ -0,0 +1,122 @@
+import { startAuthentication, startRegistration, browserSupportsWebAuthn } from '@simplewebauthn/browser'
+import {
+ generateRegistrationOptions,
+ verifyRegistrationResponse,
+ generateAuthenticationOptions,
+ verifyAuthenticationResponse,
+ type GenerateRegistrationOptionsOpts,
+} from '@simplewebauthn/server'
+import { Authenticator } from '~/store'
+import { getSignature, decodeFirst } from '~/utils/decode'
+
+const REGISTRATION_OPTIONS: GenerateRegistrationOptionsOpts = {
+ rpName: 'Mycel',
+ rpID: typeof window !== 'undefined' ? window.location.hostname : import.meta.env.VITE_HOSTNAME ?? '',
+ userID: 'Mycel user',
+ userName: 'A Mycel user',
+ attestationType: 'none',
+ supportedAlgorithmIDs: [-7],
+ challenge: 'asdf',
+ authenticatorSelection: {
+ residentKey: 'required',
+ userVerification: 'preferred',
+ },
+}
+
+export const createNewCredential = async () => {
+ try {
+ const registrationOptions = await generateRegistrationOptions({ excludeCredentials: [], ...REGISTRATION_OPTIONS })
+ const startRegistrationResponse = await startRegistration(registrationOptions)
+ console.log('startRegistrationResponse:', startRegistrationResponse)
+ const { verified, registrationInfo } = await verifyRegistrationResponse({
+ response: startRegistrationResponse,
+ expectedOrigin:
+ typeof window !== 'undefined' ? window.location.origin : `https://${import.meta.env.VITE_HOSTNAME}` ?? '',
+ expectedChallenge: registrationOptions.challenge,
+ supportedAlgorithmIDs: [-7],
+ requireUserVerification: true,
+ })
+ console.log('4:', verified, registrationInfo)
+ if (!registrationInfo) {
+ return
+ }
+ const { id, response } = startRegistrationResponse
+ const { credentialID, credentialPublicKey, counter, credentialDeviceType } = registrationInfo
+
+ const publicKey = decodeFirst(credentialPublicKey)
+ const kty = publicKey.get(1)
+ const alg = publicKey.get(3)
+ const crv = publicKey.get(-1)
+ const x = publicKey.get(-2)
+ const y = publicKey.get(-3)
+ const n = publicKey.get(-1)
+ console.log('5:', id, credentialID, credentialPublicKey, credentialDeviceType, counter)
+ console.log(typeof credentialID)
+
+ return {
+ id,
+ credentialID,
+ credentialPublicKey,
+ credentialDeviceType,
+ counter,
+ transports: response.transports,
+ }
+ } catch (e) {
+ console.log(e?.message || 'An unknown error occured')
+ }
+}
+function objectToUint8Array(inputObject: Record) {
+ const sortedKeys = Object.keys(inputObject).sort((a, b) => parseInt(a) - parseInt(b))
+ const uint8Array = new Uint8Array(sortedKeys.map((key) => inputObject[key]))
+ return uint8Array
+}
+export const loginCredential = async (authenticator: Authenticator | undefined) => {
+ if (typeof authenticator?.credentialID == 'object' && typeof authenticator?.credentialPublicKey == 'object') {
+ authenticator.credentialID = objectToUint8Array(authenticator?.credentialID)
+ authenticator.credentialPublicKey = objectToUint8Array(authenticator?.credentialPublicKey)
+ }
+
+ try {
+ const authenticationOptions = await generateAuthenticationOptions({
+ rpID: REGISTRATION_OPTIONS.rpID,
+ allowCredentials: [
+ {
+ id: authenticator?.credentialID,
+ type: 'public-key',
+ transports: authenticator?.transports,
+ },
+ ],
+ challenge: 'asdf',
+ userVerification: 'preferred',
+ })
+ console.log('authenticationOptions', authenticationOptions)
+ const authenticationResponse = await startAuthentication(authenticationOptions)
+ console.log('authenticationResponse', authenticationResponse)
+ const { result, updatedSignature } = await getSignature(authenticationResponse, authenticator)
+ console.log('3', authenticationResponse, result, updatedSignature)
+
+ const response = await verifyAuthenticationResponse({
+ response: authenticationResponse,
+ expectedOrigin:
+ typeof window !== 'undefined' ? window.location.origin : `https://${import.meta.env.VITE_HOSTNAME}` ?? '',
+ expectedChallenge: authenticationOptions.challenge,
+ expectedRPID: window.location.hostname,
+ authenticator: {
+ credentialID: authenticator?.credentialID as Uint8Array,
+ credentialPublicKey: authenticator?.credentialPublicKey as Uint8Array,
+ counter: authenticator?.counter as number,
+ },
+ requireUserVerification: true,
+ })
+
+ return {
+ result,
+ response,
+ updatedSignature,
+ }
+ } catch (e) {
+ console.log(e?.message || 'An unknown error occured')
+ }
+}
+
+export const isWebAuthnSupported = browserSupportsWebAuthn()
diff --git a/src/views/PortfolioView.tsx b/src/views/PortfolioView.tsx
index 42b6716..a33c486 100644
--- a/src/views/PortfolioView.tsx
+++ b/src/views/PortfolioView.tsx
@@ -1,5 +1,5 @@
-import MyDomains from "@/components/MyDomains";
-import Faucet from "@/components/Faucet";
+import MyDomains from '~/components/MyDomains'
+import Faucet from '~/components/Faucet'
export default function PortfolioView() {
return (
@@ -9,5 +9,5 @@ export default function PortfolioView() {
- );
+ )
}
diff --git a/src/views/RegisterView.tsx b/src/views/RegisterView.tsx
index 828e938..6bb313a 100644
--- a/src/views/RegisterView.tsx
+++ b/src/views/RegisterView.tsx
@@ -1,93 +1,93 @@
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { useForm } from "react-hook-form";
-import { valibotResolver } from "@hookform/resolvers/valibot";
-import { object, string } from "valibot";
-import { useClient } from "@/hooks/useClient";
-import useWallet from "@/hooks/useWallet";
-import { useMycelRegistry } from "@/hooks/useMycelRegistry";
-import { DeliverTxResponse } from "@cosmjs/stargate";
-import { PencilRuler, PiggyBank, Search } from "lucide-react";
-import TxDialog from "@/components/dialog/TxDialog";
-import ResolveButton from "@/components/ResolveButton";
-import { convertToDomain } from "@/utils/domainName";
-import { Domain } from "@/types/domain";
-import { MYCEL_COIN_DECIMALS, MYCEL_HUMAN_COIN_UNIT, convertToDecimalString } from "@/utils/coin";
-import { useStore } from "@/store/index";
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useForm } from 'react-hook-form'
+import { valibotResolver } from '@hookform/resolvers/valibot'
+import { object, string } from 'valibot'
+import { useClient } from '~/hooks/useClient'
+import useWallet from '~/hooks/useWallet'
+import { useMycelRegistry } from '~/hooks/useMycelRegistry'
+import { DeliverTxResponse } from '@cosmjs/stargate'
+import { PencilRuler, PiggyBank, Search } from 'lucide-react'
+import TxDialog from '~/components/dialog/TxDialog'
+import ResolveButton from '~/components/ResolveButton'
+import { convertToDomain } from '~/utils/domainName'
+import { Domain } from '~/types/domain'
+import { MYCEL_COIN_DECIMALS, MYCEL_HUMAN_COIN_UNIT, convertToDecimalString } from '~/utils/coin'
+import { useStore } from '~/store/index'
export default function RegisterView() {
- const { isConnected, mycelAccount } = useWallet();
- const client = useClient();
- const navigate = useNavigate();
- const { secondLevelDomain, fee, registryQueryDomain, registryQueryRegistrationFee } = useMycelRegistry();
- const [query, setQuery] = useState("");
- const [domain, setDomain] = useState();
- const [isLoading, setIsLoading] = useState(false);
- const [txResponse, setTxResponse] = useState();
- const [error, setError] = useState("");
- const updateDialog = useStore((state) => state.updateDialog);
+ const { isConnected, mycelAccount } = useWallet()
+ const client = useClient()
+ const navigate = useNavigate()
+ const { secondLevelDomain, fee, registryQueryDomain, registryQueryRegistrationFee } = useMycelRegistry()
+ const [query, setQuery] = useState('')
+ const [domain, setDomain] = useState()
+ const [isLoading, setIsLoading] = useState(false)
+ const [txResponse, setTxResponse] = useState()
+ const [error, setError] = useState('')
+ const updateDialog = useStore((state) => state.updateDialog)
useEffect(() => {
- setDomain(convertToDomain(query));
- }, [query]);
+ setDomain(convertToDomain(query))
+ }, [query])
useEffect(() => {
if (domain) {
- registryQueryRegistrationFee(domain);
- registryQueryDomain(domain);
+ registryQueryRegistrationFee(domain)
+ registryQueryDomain(domain)
}
- setError("");
- }, [domain]);
+ setError('')
+ }, [domain])
const registerDomain = async () => {
- setIsLoading(true);
- updateDialog("tx");
+ setIsLoading(true)
+ updateDialog('tx')
if (domain) {
- if (domain.parent === "") {
+ if (domain.parent === '') {
// Register top level domain
await client.MycelRegistry.tx
.sendMsgRegisterTopLevelDomain({
value: {
- creator: mycelAccount?.address ?? "",
- name: domain?.name ?? "",
+ creator: mycelAccount?.address ?? '',
+ name: domain?.name ?? '',
registrationPeriodInYear: 1,
},
})
.then((res) => {
- setIsLoading(false);
- setTxResponse(res as DeliverTxResponse);
+ setIsLoading(false)
+ setTxResponse(res as DeliverTxResponse)
})
.catch((error) => {
- setError(error.message);
- updateDialog(undefined);
- });
+ setError(error.message)
+ updateDialog(undefined)
+ })
} else {
// Register second level domain
await client.MycelRegistry.tx
.sendMsgRegisterSecondLevelDomain({
value: {
- creator: mycelAccount?.address ?? "",
- name: domain?.name ?? "",
- parent: domain?.parent ?? "",
+ creator: mycelAccount?.address ?? '',
+ name: domain?.name ?? '',
+ parent: domain?.parent ?? '',
registrationPeriodInYear: 1,
},
})
.then((res) => {
- setIsLoading(false);
- setTxResponse(res as DeliverTxResponse);
+ setIsLoading(false)
+ setTxResponse(res as DeliverTxResponse)
})
.catch((error) => {
- setError(error.message);
- updateDialog(undefined);
- });
+ setError(error.message)
+ updateDialog(undefined)
+ })
}
}
- };
+ }
const RegisterInputSchema = object({
text: string(),
- });
+ })
const {
register,
@@ -95,13 +95,13 @@ export default function RegisterView() {
formState: { errors: formErrors },
getValues,
} = useForm({
- mode: "onBlur",
+ mode: 'onBlur',
resolver: valibotResolver(RegisterInputSchema),
- });
+ })
const onSubmit = (data: any) => {
- setQuery(data.text);
- };
+ setQuery(data.text)
+ }
return (
<>
@@ -116,7 +116,7 @@ export default function RegisterView() {
type="search"
className="w-full leading-tight h-12"
placeholder="Enter TLD(.xxx) or SLD(yourname.cel) Name"
- {...register("text", { onBlur: () => onSubmit(getValues()) })}
+ {...register('text', { onBlur: () => onSubmit(getValues()) })}
/>