init

packages/site/src/App.tsx

@@ -1,10 +1,14 @@
 import type { FunctionComponent, ReactNode } from 'react';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { Footer, Header } from './components';
+import { Header } from './components';
 import { GlobalStyle } from './config/theme';
+import { useInvokeSnap, useMetaMaskContext } from './hooks';
 import { ToggleThemeContext } from './Root';
+import { useStore } from './state';
+import { walletSelector } from './state/wallet';
+import type { Account, Currency } from './types';
 
 const Wrapper = styled.div`
   display: flex;
@@ -20,14 +24,52 @@ export type AppProps = {
 
 export const App: FunctionComponent<AppProps> = ({ children }) => {
   const toggleTheme = useContext(ToggleThemeContext);
+  const request = useInvokeSnap();
+  const { provider } = useMetaMaskContext();
+  const { setAccounts, setBalances, setCurrencies } = useStore(walletSelector);
+
+  useEffect(() => {
+    if (!provider) {
+      return;
+    }
+
+    // eslint-disable-next-line no-void
+    void (async () => {
+      try {
+        const account = (await request({
+          method: 'nill_createAccount',
+        })) as Account;
+        setAccounts([account]);
+
+        const balance = (await request({
+          method: 'nill_getBalance',
+          params: {
+            userAddress: account.account,
+          },
+        })) as string;
+
+        setBalances({ [account.account]: balance });
+
+        const currencies = (await request({
+          method: 'nill_getCurrencies',
+          params: {
+            userAddress: account.account,
+          },
+        })) as Currency[];
+
+        setCurrencies({ [account.account]: currencies });
+      } catch (error) {
+        //
+      }
+    })();
+  }, [provider]);
 
   return (
     <>
       <GlobalStyle />
       <Wrapper>
         <Header handleToggleClick={toggleTheme} />
         {children}
-        <Footer />
       </Wrapper>
     </>
   );

packages/site/src/components/Buttons.tsx

@@ -86,6 +86,22 @@ export const ConnectButton = (props: ComponentProps<typeof Button>) => {
   );
 };
 
+export const FaucetButton = (props: ComponentProps<typeof Button>) => {
+  return <Button {...props}>Faucet</Button>;
+};
+
+export const DeployButton = (props: ComponentProps<typeof Button>) => {
+  return <Button {...props}>Deploy Account</Button>;
+};
+
+export const MintAndCreateButton = (props: ComponentProps<typeof Button>) => {
+  return <Button {...props}>Create and Mint Currency</Button>;
+};
+
+export const SendButton = (props: ComponentProps<typeof Button>) => {
+  return <Button {...props}>Mint Token</Button>;
+};
+
 export const ReconnectButton = (props: ComponentProps<typeof Button>) => {
   return (
     <Button {...props}>

packages/site/src/components/Card.tsx

@@ -54,7 +54,7 @@ export const Card = ({ content, disabled = false, fullWidth }: CardProps) => {
     <CardWrapper fullWidth={fullWidth} disabled={disabled}>
       {title && <Title>{title}</Title>}
       <Description>{description}</Description>
-      {button}
+      {button && button}
     </CardWrapper>
   );
 };

packages/site/src/components/Header.tsx

@@ -47,7 +47,7 @@ export const Header = ({
     <HeaderWrapper>
       <LogoWrapper>
         <SnapLogo color={theme.colors.icon?.default} size={36} />
-        <Title>template-snap</Title>
+        <Title>=nil;-snap</Title>
       </LogoWrapper>
       <RightContainer>
         <Toggle

packages/site/src/hooks/useInvokeSnap.ts

@@ -24,14 +24,15 @@ export const useInvokeSnap = (snapId = defaultSnapOrigin) => {
    * @param params.params - The method params.
    * @returns The Snap response.
    */
-  const invokeSnap = async ({ method, params }: InvokeSnapParams) =>
-    request({
+  const invokeSnap = async ({ method, params }: InvokeSnapParams) => {
+    return await request({
       method: 'wallet_invokeSnap',
       params: {
         snapId,
         request: params ? { method, params } : { method },
       },
     });
+  };
 
   return invokeSnap;
 };

packages/site/src/hooks/useRequest.ts

@@ -30,6 +30,8 @@ export const useRequest = () => {
 
       return data;
     } catch (requestError: any) {
+      console.log(requestError);
+
       setError(requestError);
 
       return null;