Skip to content

Commit

Permalink
run yarn format
Browse files Browse the repository at this point in the history
  • Loading branch information
@fionnachan
fionnachan committed Oct 17, 2023
1 parent 78042f6 commit aa22641
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 43 deletions.
105 changes: 81 additions & 24 deletions arbitrum-docs/for-devs/quickstart-solidity-hardhat.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,39 +302,96 @@ The `WEB3-LOCALHOST` architecture is similar to the `WEB2` architecture, with on
Let's take a closer look at the differences between our `VendingMachine` implementations:

<!-- todo: enhance precision RE where things are stored / executed / hashed-and-stored / etc -->

<table>
<thead style={{verticalAlign: 'top'}}>
<thead style={{ verticalAlign: 'top' }}>
<th></th>
<th><code>WEB2</code><br/>(the first one)</th>
<th><code>WEB3-LOCALHOST</code><br/>(the latest one)</th>
<th><code>WEB3-ARB-GOERLI</code><br/>(the next one)</th>
<th><code>WEB3-ARB-MAINNET</code><br/>(the final one)</th>
<th>
<code>WEB2</code>
<br />
(the first one)
</th>
<th>
<code>WEB3-LOCALHOST</code>
<br />
(the latest one)
</th>
<th>
<code>WEB3-ARB-GOERLI</code>
<br />
(the next one)
</th>
<th>
<code>WEB3-ARB-MAINNET</code>
<br />
(the final one)
</th>
</thead>
<tbody style={{verticalAlign: 'top'}}>
<tbody style={{ verticalAlign: 'top' }}>
<tr>
<td><strong>Data</strong> (cupcakes)</td>
<td>Stored only in your <strong>browser</strong>. (Usually, stored by centralized infrastructure.)</td>
<td>Stored on your <strong>device</strong> in an <strong>emulated Ethereum network</strong> (via smart contract).</td>
<td>Stored on Ethereum's <strong>decentralized test network</strong> (via smart contract).</td>
<td>Stored on Ethereum's <strong>decentralized mainnet network</strong> (via smart contract).</td>
<td>
<strong>Data</strong> (cupcakes)
</td>
<td>
Stored only in your <strong>browser</strong>. (Usually, stored by centralized
infrastructure.)
</td>
<td>
Stored on your <strong>device</strong> in an <strong>emulated Ethereum network</strong> (via
smart contract).
</td>
<td>
Stored on Ethereum's <strong>decentralized test network</strong> (via smart contract).
</td>
<td>
Stored on Ethereum's <strong>decentralized mainnet network</strong> (via smart contract).
</td>
</tr>
<tr>
<td><strong>Logic</strong> (vending)</td>
<td>Served from <strong>Offchain's servers</strong>. Executed by your <strong>browser</strong>.</td>
<td>Stored and executed by your <strong>locally emulated Ethereum network</strong> (via smart contract).</td>
<td>Stored and executed by Arbitrum's <strong>decentralized test network</strong> (via smart contract).</td>
<td>Stored and executed by Arbitrum's <strong>decentralized mainnet network</strong> (via smart contract).</td>
<td>
<strong>Logic</strong> (vending)
</td>
<td>
Served from <strong>Offchain's servers</strong>. Executed by your <strong>browser</strong>.
</td>
<td>
Stored and executed by your <strong>locally emulated Ethereum network</strong> (via smart
contract).
</td>
<td>
Stored and executed by Arbitrum's <strong>decentralized test network</strong> (via smart
contract).
</td>
<td>
Stored and executed by Arbitrum's <strong>decentralized mainnet network</strong> (via smart
contract).
</td>
</tr>
<tr style={{verticalAlign: 'middle'}}>
<td><strong>Presentation</strong> (UI)</td>
<td colspan="4" align="center">Served from <strong>Offchain's servers</strong>. Rendered and executed by your <strong>browser</strong>.</td>
<tr style={{ verticalAlign: 'middle' }}>
<td>
<strong>Presentation</strong> (UI)
</td>
<td colspan="4" align="center">
Served from <strong>Offchain's servers</strong>. Rendered and executed by your{' '}
<strong>browser</strong>.
</td>
</tr>
<tr>
<td><strong>Money</strong></td>
<td>Devs and users pay centralized service providers for server access using fiat currency.</td>
<td>← same, but only for the presentation-layer concerns (code that supports frontend UI/UX).</td>
<td>← same, but devs and users pay <strong>testnet $ETH</strong> to testnet validators.</td>
<td>← same, but instead of testnet $ETH, they use <strong>mainnet $ETH</strong>.</td>
<td>
<strong>Money</strong>
</td>
<td>
Devs and users pay centralized service providers for server access using fiat currency.
</td>
<td>
← same, but only for the presentation-layer concerns (code that supports frontend UI/UX).
</td>
<td>
← same, but devs and users pay <strong>testnet $ETH</strong> to testnet validators.
</td>
<td>
← same, but instead of testnet $ETH, they use <strong>mainnet $ETH</strong>.
</td>
</tr>
</tbody>
</table>
Expand Down
51 changes: 32 additions & 19 deletions website/src/components/VendingMachine/VendingMachine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@ import VendingMachineContract from './VendingMachine.sol/VendingMachine.json';

function truncateAddress(text: string) {
if (text == null || text === '') {
return 'no name'
return 'no name';
}
if (text.length < 10) {
return text
return text;
}
return text.slice(0, 5) + '...' + text.slice(-3)
};
return text.slice(0, 5) + '...' + text.slice(-3);
}

export const VendingMachine = (props: { id: string; type: string }) => {
const [identity, setIdentity] = useState<string>('')
const [contractAddress, setContractAddress] = useState<string>()
const [cupcakeBalance, setCupcakeBalance] = useState<number>(0)
const cupcakeRef = useRef(null)
const errorIndicatorRef = useRef(null)
const [identity, setIdentity] = useState<string>('');
const [contractAddress, setContractAddress] = useState<string>();
const [cupcakeBalance, setCupcakeBalance] = useState<number>(0);
const cupcakeRef = useRef(null);
const errorIndicatorRef = useRef(null);

class Web2VendingMachineClient {
// UI concerns
Expand Down Expand Up @@ -145,23 +145,28 @@ export const VendingMachine = (props: { id: string; type: string }) => {

const prefillWeb3Identity = async () => {
// if the user has metamask installed, prefill the identity input with their wallet address
const identityFromWallet = (await (vendingMachineClient as Web3VendingMachineClient).getWalletAddress());
const identityFromWallet = await (
vendingMachineClient as Web3VendingMachineClient
).getWalletAddress();
if (identityFromWallet) {
setIdentity(identityFromWallet)
setIdentity(identityFromWallet);
}
};

useEffect(() => {
prefillWeb3Identity()
}, [])
prefillWeb3Identity();
}, []);

const updateSuccessIndicator = (success: boolean) => {
errorIndicatorRef.current.classList.toggle('visible', !success);
};

const callWeb3VendingMachine = useCallback(async (func) => {
return await func(identity, contractAddress);
}, [identity, contractAddress]);
const callWeb3VendingMachine = useCallback(
async (func) => {
return await func(identity, contractAddress);
},
[identity, contractAddress],
);

const handleCupcakePlease = useCallback(async () => {
try {
Expand All @@ -170,7 +175,9 @@ export const VendingMachine = (props: { id: string; type: string }) => {
await prefillWeb3Identity();
gotCupcake = await callWeb3VendingMachine(vendingMachineClient.giveCupcakeTo);
} else {
gotCupcake = await (vendingMachineClient as Web2VendingMachineClient).giveCupcakeTo(identity || 'no name');
gotCupcake = await (vendingMachineClient as Web2VendingMachineClient).giveCupcakeTo(
identity || 'no name',
);
}

let existingFadeout;
Expand Down Expand Up @@ -206,7 +213,11 @@ export const VendingMachine = (props: { id: string; type: string }) => {
await prefillWeb3Identity();
setCupcakeBalance(await callWeb3VendingMachine(vendingMachineClient.getCupcakeBalanceFor));
} else {
setCupcakeBalance(await (vendingMachineClient as Web2VendingMachineClient).getCupcakeBalanceFor(identity || 'no name'));
setCupcakeBalance(
await (vendingMachineClient as Web2VendingMachineClient).getCupcakeBalanceFor(
identity || 'no name',
),
);
}
updateSuccessIndicator(true);
} catch (err) {
Expand Down Expand Up @@ -245,7 +256,9 @@ export const VendingMachine = (props: { id: string; type: string }) => {
</span>
<p className="balance-wrapper">
<span>Cupcake balance:</span>
<span>{cupcakeBalance} {`(${truncateAddress(identity)})`}</span>
<span>
{cupcakeBalance} {`(${truncateAddress(identity)})`}
</span>
</p>
<span className="success-indicator" />
<span className="error-indicator" ref={errorIndicatorRef} />
Expand Down

0 comments on commit aa22641

Please sign in to comment.