add strk

package.json

@@ -28,7 +28,7 @@
     "@reach/dialog": "^0.18.0",
     "@react-spring/web": "^9.7.2",
     "@reduxjs/toolkit": "^1.6.2",
-    "@rulesorg/sdk-core": "^1.5.0",
+    "@rulesorg/sdk-core": "1.4.33",
     "@rulesorg/serum": "^0.1.4",
     "@starknet-react/chains": "^0.1.0",
     "@starknet-react/core": "^2.1.0",

src/components/Input/CurrencyInput.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useRef } from 'react'
 import Column from 'src/components/Column'
 import Row, { RowCenter } from 'src/components/Row'
 import { ReactComponent as EthereumIcon } from 'src/images/ethereum.svg'
+import { ReactComponent as StarknetTokenIcon } from 'src/images/starknetToken.svg'
 import { TYPE } from 'src/styles/theme'
 import styled from 'styled-components/macro'
 
@@ -59,16 +60,19 @@ const Currency = styled(RowCenter)`
   border-radius: 6px;
 
   svg {
-    width: 20px;
+		width: auto;
+    height: 24px;
   }
 `
 
 interface CurrencyInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   onUserInput: (value: string) => void
   balance?: WeiAmount
+  currency: "ETH"|"STRK"
+  onCurrencyChange: () => void
 }
 
-export default function CurrencyInput({ onUserInput, balance, ...props }: CurrencyInputProps) {
+export default function CurrencyInput({ onUserInput, balance, currency, onCurrencyChange, ...props }: CurrencyInputProps) {
   const handleInput = useCallback(
     (event) => {
       const value = event?.target?.value?.replace(',', '.')
@@ -86,9 +90,9 @@ export default function CurrencyInput({ onUserInput, balance, ...props }: Curren
     <StyledCurrencyInput onClick={setInputFocus}>
       <Row gap={8}>
         <Input onChange={handleInput} ref={inputRef} {...props} />
-        <Currency>
-          <EthereumIcon />
-          <TYPE.body>ETH</TYPE.body>
+        <Currency onClick={onCurrencyChange}>
+					{currency === 'ETH' ? (<EthereumIcon />) : (<StarknetTokenIcon />)}
+          <TYPE.body>{currency}</TYPE.body>
         </Currency>
       </Row>
       <TYPE.subtitle textAlign="right">

src/components/StarknetSigner/Transaction/index.tsx

@@ -188,7 +188,20 @@ export default function StarknetSigner({
                 </FeeWrapper>
               </Column>
 
-              {parsedTotalCost && !txValue.isNull() && (
+							{!txValue['STRK'].isNull() &&  (
+                <FeeWrapper>
+                  <TYPE.body fontWeight={700}>
+                    <Trans>Tokens</Trans>
+                  </TYPE.body>
+                  <Column gap={8} alignItems="end">
+                    <TYPE.body>
+										{txValue['STRK'].toSignificant(4)} STRK
+                    </TYPE.body>
+                  </Column>
+                </FeeWrapper>
+              )}
+
+              {parsedTotalCost && !(txValue['ETH'].isNull() && txValue['STRK'].isNull()) && (
                 <FeeWrapper>
                   <TYPE.body fontWeight={700}>
                     <Trans>Total</Trans>

src/components/WalletModal/StarkgateDeposit.tsx

@@ -139,6 +139,8 @@ export default function StarkgateDeposit() {
                 placeholder="0.0"
                 onUserInput={handleDepositAmountUpdate}
                 balance={balance}
+                currency={'ETH'}
+								onCurrencyChange={() => {}}
               />
 
               <ArrowWrapper>

src/components/WalletModal/StarkgateWithdraw.tsx

@@ -83,7 +83,7 @@ export default function StarkgateWithdraw() {
         calldata: [l1Account, amount, 0],
       },
     ])
-    increaseTxValue(parsedWithdrawAmount)
+    increaseTxValue('ETH', parsedWithdrawAmount)
     setSigning(true)
   }, [parsedWithdrawAmount, l1Account, setSigning, increaseTxValue, setCalls])
 
@@ -115,6 +115,8 @@ export default function StarkgateWithdraw() {
                 placeholder="0.0"
                 onUserInput={handleWithdrawAmountUpdate}
                 balance={balance}
+								currency={'ETH'}
+								onCurrencyChange={() => {}}
               />
 
               <ArrowWrapper>

src/components/WalletModal/StarknetWithdraw.tsx

@@ -14,7 +14,7 @@ import { ReactComponent as Arrow } from 'src/images/arrow.svg'
 import { rulesSdk } from 'src/lib/rulesWallet/rulesSdk'
 import { ApplicationModal } from 'src/state/application/actions'
 import { useModalOpened } from 'src/state/application/hooks'
-import { useETHBalance } from 'src/state/wallet/hooks'
+import { useETHBalance, useSTRKBalance } from 'src/state/wallet/hooks'
 import tryParseWeiAmount from 'src/utils/tryParseWeiAmount'
 import styled from 'styled-components/macro'
 
@@ -39,7 +39,12 @@ const ArrowWrapper = styled(Column)`
   }
 `
 
+function isEthCurrency(currency: 'ETH'|'STRK') {
+	return currency === 'ETH';
+}
+
 export default function StarknetWithdraw() {
+  const [withdrawCurrency, setWithdrawCurrency] = useState<'ETH'|'STRK'>('ETH')
   const [withdrawAmount, setWithdrawAmount] = useState('')
 
   // current user
@@ -53,7 +58,7 @@ export default function StarknetWithdraw() {
 
   // balance
   const address = currentUser?.starknetWallet.address ?? ''
-  const balance = useETHBalance(address)
+  const balance = isEthCurrency(withdrawCurrency) ? useETHBalance(address) : useSTRKBalance(address);
 
   // withdraw
   const handleWithdrawAmountUpdate = useCallback((value: string) => setWithdrawAmount(value), [setWithdrawAmount])
@@ -64,19 +69,19 @@ export default function StarknetWithdraw() {
 
   // call
   const handleConfirmation = useCallback(() => {
-    const ethAddress = constants.ETH_ADDRESSES[rulesSdk.networkInfos.starknetChainId]
-    if (!parsedWithdrawAmount || !l2Address || !ethAddress) return
+    const tokenAddress = isEthCurrency(withdrawCurrency) ? constants.ETH_ADDRESSES[rulesSdk.networkInfos.starknetChainId] : constants.STRK_ADDRESSES[rulesSdk.networkInfos.starknetChainId]
+    if (!parsedWithdrawAmount || !l2Address || !tokenAddress) return
 
     const amount = parsedWithdrawAmount.quotient.toString()
 
     setCalls([
       {
-        contractAddress: ethAddress,
+        contractAddress: tokenAddress,
         entrypoint: 'transfer',
         calldata: [l2Address, amount, 0],
       },
     ])
-    increaseTxValue(parsedWithdrawAmount)
+    increaseTxValue(isEthCurrency(withdrawCurrency) ? 'ETH' : 'STRK', parsedWithdrawAmount)
     setSigning(true)
   }, [parsedWithdrawAmount, l2Address, setSigning, increaseTxValue, setCalls])
 
@@ -92,7 +97,7 @@ export default function StarknetWithdraw() {
 
   return (
     <ModalBody>
-      <StarknetSigner action="ethTransfer">
+      <StarknetSigner action={isEthCurrency(withdrawCurrency) ? 'ethTransfer' : 'strkTransfer'}>
         <StarknetStatus>
           <Column gap={32}>
             <Column>
@@ -101,6 +106,8 @@ export default function StarknetWithdraw() {
                 placeholder="0.0"
                 onUserInput={handleWithdrawAmountUpdate}
                 balance={balance}
+								currency={withdrawCurrency}
+								onCurrencyChange={() => {setWithdrawCurrency(isEthCurrency(withdrawCurrency) ? 'STRK' : 'ETH')}}
               />
 
               <ArrowWrapper>
@@ -114,7 +121,7 @@ export default function StarknetWithdraw() {
               {!+withdrawAmount || !parsedWithdrawAmount ? (
                 <Trans>Enter an amount</Trans>
               ) : balance?.lessThan(parsedWithdrawAmount) ? (
-                <Trans>Insufficient ETH balance</Trans>
+                <Trans>Insufficient {withdrawCurrency} balance</Trans>
               ) : (
                 <Trans>Next</Trans>
               )}

src/hooks/useStarknetTx.ts

@@ -71,8 +71,8 @@ export function useEstimateFees() {
     if (!parsedNetworkFee) return null
 
     return {
-      cost: txValue.add(parsedNetworkFee.fee),
-      maxCost: txValue.add(parsedNetworkFee.maxFee),
+      cost: txValue['ETH'].add(parsedNetworkFee.fee),
+      maxCost: txValue['ETH'].add(parsedNetworkFee.maxFee),
     }
   }, [txValue, parsedNetworkFee?.maxFee])
 

src/hooks/useTrans.ts

@@ -33,6 +33,7 @@ const stxActionDesc: { [id in StxAction]: MessageDescriptor } = {
   offerCreation: msg`Sale listing...`,
   walletDeployment: msg`Wallet deployment...`,
   ethTransfer: msg`ETH transfer...`,
+  strkTransfer: msg`STRK transfer...`,
   packTransfer: msg`Pack transfer...`,
 }
 
@@ -43,6 +44,7 @@ const stxActionConfirm: { [id in StxAction]: MessageDescriptor } = {
   offerCreation: msg`Confirm offer creation`,
   walletDeployment: msg`Confirm deployment`,
   ethTransfer: msg`Confrim transfer`,
+  strkTransfer: msg`Confrim transfer`,
   packTransfer: msg`Confrim transfer`,
 }
 
@@ -53,6 +55,7 @@ const stxActionSuccess: { [id in StxAction]: MessageDescriptor } = {
   offerCreation: msg`Your card has been listed on the marketplace.`,
   walletDeployment: msg`Your wallet deployment is on its way !`,
   ethTransfer: msg`Your ETH is on its way !`,
+  strkTransfer: msg`Your STRK is on its way !`,
   packTransfer: msg`Your pack is on its way !`,
 }
 

src/locales/fr-FR.po

@@ -1048,6 +1048,10 @@ msgstr "retrait de {withdrawAmount} ETH vers ton portefeuille Ethereum"
 msgid "Your {withdrawAmount} ETH withdraw is on its way"
 msgstr "Ton retrait de {withdrawAmount} ETH est en route"
 
+#: src/components/WithdrawModal/index.tsx
+msgid "Your {withdrawAmount} STRK withdraw is on its way"
+msgstr "Ton retrait de {withdrawAmount} STRK est en route"
+
 #: src/components/WithdrawModal/index.tsx
 msgid "Deposit ETH from your Ethereum wallet"
 msgstr "Dépose de l'ETH depuis ton portefeuille Ethereum"
@@ -1594,10 +1598,18 @@ msgstr "Transfert de carte..."
 msgid "ETH transfer..."
 msgstr "Transfert d'ETH..."
 
+#: src/hooks/useTrans.ts
+msgid "STRK transfer..."
+msgstr "Transfert de STRK..."
+
 #: src/hooks/useTrans.ts
 msgid "Your ETH is on its way !"
 msgstr "Ton ETH est en route !"
 
+#: src/hooks/useTrans.ts
+msgid "Your STRK is on its way !"
+msgstr "Ton STRK est en route !"
+
 #: src/hooks/useTrans.ts
 msgid "Your card is on its way !"
 msgstr "Ta carte est en route !"

src/state/wallet/hooks.ts

@@ -69,6 +69,38 @@ export function useETHBalance(address?: string): WeiAmount | undefined {
   return balances?.[address]
 }
 
+function useSTRKBalances(...addresses: (string | undefined)[]): { [address: string]: WeiAmount | undefined } {
+  const results = useMultipleContractSingleData(
+    [constants.STRK_ADDRESSES[rulesSdk.networkInfos.starknetChainId]],
+    ERC20ABI as Abi,
+    'balanceOf',
+    { address: addresses[0] } // TODO use the right hook ^^
+  )
+
+  return useMemo(() => {
+    return addresses.reduce<{ [address: string]: WeiAmount | undefined }>(
+      (acc, address: string | undefined, index: number) => {
+        const balance = results[index]?.result?.balance as any // as any... We'll do better later é_è
+        if (!balance?.low || !balance?.high || !address) {
+          return acc
+        }
+
+        const amount = uint256.uint256ToBN(balance)
+        acc[address] = WeiAmount.fromRawAmount(num.toHex(amount))
+        return acc
+      },
+      {}
+    )
+  }, [results, addresses])
+}
+
+export function useSTRKBalance(address?: string): WeiAmount | undefined {
+  const balances = useSTRKBalances(address)
+  if (!address) return
+
+  return balances?.[address]
+}
+
 /**
  * Is deployed
  */

src/types/starknetTx.ts

@@ -8,6 +8,7 @@ export interface ParsedNetworkFee {
 
 export type StxAction =
   | 'ethTransfer'
+  | 'strkTransfer'
   | 'packTransfer'
   | 'transfer'
   | 'offerCreation'

src/zustand/starknetTx/index.ts

@@ -11,7 +11,7 @@ interface State {
   stxCalls: Call[]
   stxMessages: string[]
   stxAccountDeploymentPayload: DeployAccountContractPayload | null
-  stxValue: WeiAmount
+  stxValue: {'ETH': WeiAmount, 'STRK': WeiAmount}
   stxSigning: boolean
   stxHash: string | null
   stxMigration: boolean
@@ -31,7 +31,7 @@ interface Actions {
 
   stxResetStarknetTx: () => void
 
-  stxIncreaseValue: (amount: WeiAmount) => void
+  stxIncreaseValue: (currency: 'ETH'|'STRK', amount: WeiAmount) => void
 
   stxSetHash: (hash: string | null, action?: string | null) => void
 
@@ -44,7 +44,7 @@ const resetState = {
   stxCalls: [],
   stxMessages: [],
   stxAccountDeploymentPayload: null,
-  stxValue: WeiAmount.ZERO,
+  stxValue: {'ETH': WeiAmount.ZERO, 'STRK': WeiAmount.ZERO},
   stxSigning: false,
   stxMigration: false,
   stxBeforeExecutionCallback: null,
@@ -84,9 +84,9 @@ export const createStarknetTxSlice: StateCreator<StoreState, [['zustand/immer',
 
   // TX VALUE
 
-  stxIncreaseValue: (amount) =>
+  stxIncreaseValue: (currency, amount) =>
     set((state) => {
-      state.stxValue = state.stxValue.add(amount)
+      state.stxValue[currency] = state.stxValue[currency].add(amount);
     }),
 
   // SIGNING