utils#isWalletScheme TypeScript Examples

Preview = ({ descriptionText, schemeToUse }) => {
  const {
    context: { daoStore, configStore },
  } = useContext();
  const networkTokens = configStore.getTokensOfNetwork();
  const networkContracts = configStore.getNetworkContracts();
  const { assetLimits: transferLimits } = daoStore.getSchemeRecommendedCalls(
    schemeToUse.address
  );
  const networkAssetSymbol =
    NETWORK_ASSET_SYMBOL[configStore.getActiveChainName()];
  return (
    <>
      <MDEditor.Markdown
        source={descriptionText}
        style={{
          backgroundColor: 'white',
          borderRadius: '5px',
          border: '1px solid gray',
          padding: '20px 10px',
        }}
        linkTarget="_blank"
        skipHtml
        escapeHtml
      />
      {schemeToUse.type === 'ContributionReward' ||
      schemeToUse.type === 'GenericMulticall' ||
      schemeToUse.type === 'SchemeRegistrar' ||
      (isWalletScheme(schemeToUse) &&
        schemeToUse.controllerAddress === networkContracts.controller) ? (
        <h2>
          Calls executed from the avatar <Question question="9" />
        </h2>
      ) : (
        <h2>
          Calls executed from the scheme <Question question="9" />
        </h2>
      )}
      {Object.keys(transferLimits).map(assetAddress => {
        if (assetAddress === ZERO_ADDRESS)
          return (
            <h3>
              Transfer limit of{' '}
              {normalizeBalance(transferLimits[assetAddress]).toString()}{' '}
              {networkAssetSymbol}
            </h3>
          );
        else {
          const token = networkTokens.find(
            networkToken => networkToken.address === assetAddress
          );
          if (token)
            return (
              <h3>
                Transfer limit of{' '}
                {normalizeBalance(
                  transferLimits[assetAddress],
                  token.decimals
                ).toString()}{' '}
                {token.symbol}
              </h3>
            );
          else
            return (
              <h3>
                Transfer limit {transferLimits[assetAddress].toString()} of
                asset {assetAddress}
              </h3>
            );
        }
      })}
    </>
  );
}

Calls = observer(() => {
  const [showMore, setShowMore] = useState(false);
  const {
    context: { configStore, daoStore },
  } = useContext();

  const proposalId = useLocation().pathname.split('/')[3];
  const proposal = daoStore.getProposal(proposalId);
  const networkContracts = configStore.getNetworkContracts();
  const scheme = daoStore.getScheme(proposal.scheme);

  const { decodedCallData } = useABIService();
  const { getContractABI, error } = useEtherscanService();
  const [loading, setLoading] = useState(false);
  const [ProposalCallTexts, setProposalCallTexts] = useState<ProposalCalls[]>(
    new Array(proposal.to.length)
  );

  const proposalCallArray = [];
  const getProposalCalls = async () => {
    setLoading(true);
    const result = await Promise.all(
      proposal.to.map(item => getContractABI(item))
    );
    result.map((abi, i) => {
      proposalCallArray.push(
        decodedCallData(
          isWalletScheme(scheme) &&
            scheme.controllerAddress !== networkContracts.controller
            ? scheme.address
            : networkContracts.avatar,
          proposal.to[i],
          proposal.callData[i],
          proposal.values[i],
          abi
        )
      );
    });
    setLoading(false);
  };
  useEffect(() => {
    getProposalCalls();
    setProposalCallTexts(proposalCallArray);
  }, []);

  if (loading) {
    return <PendingCircle height="44px" width="44px" color="blue" />;
  }

  return (
    <div>
      <ShowMore showMore={showMore} setShowMore={setShowMore} />

      {ProposalCallTexts.map(
        (
          {
            to,
            from,
            recommendedCallUsed,
            callParameters,
            data,
            value,
            encodedFunctionName,
            contractABI,
          },
          i
        ) => {
          return (
            <div key={i}>
              {i > 0 ? <Divider></Divider> : null}
              <strong> Call #{i + 1}</strong>
              {recommendedCallUsed ? (
                <RecommendedCalls
                  to={to}
                  from={from}
                  recommendedCallUsed={recommendedCallUsed}
                  callParameters={callParameters}
                  data={data}
                  encodedFunctionName={encodedFunctionName}
                  // value={value}
                  // contractABI={contractABI}
                  showMore={showMore}
                />
              ) : contractABI.function ? (
                <EtherscanCalls
                  to={to}
                  from={from}
                  abi={contractABI}
                  showMore={showMore}
                />
              ) : (
                <BaseCalls
                  to={to}
                  from={from}
                  data={data}
                  value={value}
                  error={error}
                  showMore={showMore}
                />
              )}
            </div>
          );
        }
      )}
    </div>
  );
})

Status = () => {
  const {
    context: { daoStore, configStore, providerStore, daoService },
  } = useContext();

  //State
  const networkContracts = configStore.getNetworkContracts();
  // We should get the ID in another way
  const proposalId = useLocation().pathname.split('/')[3];
  const proposal = daoStore.getProposal(proposalId);
  const { account } = providerStore.getActiveWeb3React();
  const scheme = daoStore.getScheme(proposal.scheme);

  const executionTimeoutTime = isWalletScheme(scheme)
    ? proposal.submittedTime.plus(scheme.maxSecondsForExecution)
    : bnum(0);

  const executePendingAction = function (pendingAction) {
    switch (pendingAction) {
      case PendingAction.Redeem:
        daoService.redeemContributionReward(
          networkContracts.daostack[scheme.address].redeemer,
          scheme.address,
          scheme.votingMachine,
          proposalId,
          account
        );
        break;
      case PendingAction.RedeemForBeneficiary:
        daoService.executeMulticall(scheme.address, proposalId);
        break;
      default:
        daoService.execute(proposalId);
        break;
    }
  };

  const votingMachineUsed = daoStore.getVotingMachineOfProposal(proposalId);

  const { status, boostTime, finishTime, pendingAction } =
    daoStore.getProposalStatus(proposalId);

  const autoBoost =
    networkContracts.votingMachines[votingMachineUsed.address].type ==
    'DXDVotingMachine';

  return (
    <>
      <h2 style={{ margin: '10px 0px 0px 0px', textAlign: 'center' }}>
        {status} <Question question="3" />
      </h2>
      <SpaceAroundRow style={{ margin: '0px 10px', flexDirection: 'column' }}>
        {boostTime.toNumber() > moment().unix() && (
          <span className="timeText">
            Boost in <Countdown date={boostTime.toNumber() * 1000} />{' '}
          </span>
        )}
        {finishTime.toNumber() > moment().unix() && (
          <span className="timeText">
            Finish in{' '}
            <Countdown
              autoStart={pendingAction === 1 && !autoBoost ? false : true}
              date={finishTime.toNumber() * 1000}
            />
            {pendingAction === 1 && !autoBoost && ' after boost'}
          </span>
        )}
        {status === 'Pending Execution' && executionTimeoutTime.toNumber() > 0 && (
          <span className="timeText">
            {' '}
            Execution timeout in{' '}
            <Countdown date={executionTimeoutTime.toNumber() * 1000} />{' '}
          </span>
        )}
      </SpaceAroundRow>
      {account && pendingAction > 0 && (
        <SpaceAroundRow
          style={{ flexDirection: 'column', alignItems: 'center' }}
        >
          <ActionButton
            color="blue"
            onClick={() => executePendingAction(pendingAction)}
          >
            <FiPlayCircle /> {PendingAction[pendingAction]}{' '}
          </ActionButton>
        </SpaceAroundRow>
      )}
    </>
  );
}

Calls = ({
  schemeToUse,
  onContributionRewardValueChange,
  contributionRewardCalls,
  onSchemeRegistrarValueChange,
  schemeRegistrarProposalValues,
  calls,
  onToSelectChange,
  allowedToCall,
  onFunctionSelectChange,
  onFunctionParamsChange,
  addCall,
  onValueChange,
  networkAssetSymbol,
  removeCall,
  changeCallType,
}) => {
  return (
    <>
      {schemeToUse.type === 'ContributionReward' ? (
        // If scheme to use is Contribution Reward display a different form with less fields
        <ContributionRewardCall
          onContributionRewardValueChange={onContributionRewardValueChange}
          contributionRewardCalls={contributionRewardCalls}
        />
      ) : schemeToUse.type === 'SchemeRegistrar' ? (
        // If scheme to use is SchemeRegistrar display a different form with less fields
        <SchemeRegistrarCall
          onSchemeRegistrarValueChange={onSchemeRegistrarValueChange}
          schemeRegistrarProposalValues={schemeRegistrarProposalValues}
        />
      ) : (
        // If the scheme is GenericMulticall allow only advanced encoded calls
        // At last if the scheme used is a Wallet Scheme type allow a complete edition of the calls :)
        <div>
          {calls.map((call, i) => (
            <CallRow key={'call' + i}>
              <span>#{i}</span>

              {isWalletScheme(schemeToUse) && call.callType === 'simple' ? (
                <SelectInput
                  value={calls[i].to}
                  onChange={e => {
                    onToSelectChange(i, e.target.value);
                  }}
                  onClick={e => {
                    onToSelectChange(i, e.target.value);
                  }}
                  width={'20%'}
                >
                  {allowedToCall.map((allowedCall, allowedCallIndex) => {
                    return (
                      <option
                        key={'toCall' + allowedCallIndex}
                        value={allowedCall.value || ''}
                      >
                        {allowedCall.name}
                      </option>
                    );
                  })}
                </SelectInput>
              ) : (
                schemeToUse.type !== 'ContributionReward' && (
                  <TextInput
                    onChange={e => {
                      onToSelectChange(i, e.target.value);
                    }}
                    onClick={e => {
                      onToSelectChange(i, e.target.value);
                    }}
                    width={'20%'}
                  />
                )
              )}

              {call.callType === 'simple' ? (
                <div
                  style={{
                    display: 'flex',
                    width: call.callType === 'simple' ? '60%' : '50%',
                  }}
                >
                  <SelectInput
                    value={calls[i].functionName || ''}
                    onChange={event => {
                      const selectedFunction = calls[i].allowedFunctions.find(
                        allowedFunction => {
                          return (
                            allowedFunction.functionName === event.target.value
                          );
                        }
                      );
                      onFunctionSelectChange(
                        i,
                        event.target.value,
                        selectedFunction ? selectedFunction.params : ''
                      );
                    }}
                    onClick={event => {
                      const selectedFunction = calls[i].allowedFunctions.find(
                        allowedFunction => {
                          return (
                            allowedFunction.functionName === event.target.value
                          );
                        }
                      );
                      onFunctionSelectChange(
                        i,
                        event.target.value,
                        selectedFunction ? selectedFunction.params : ''
                      );
                    }}
                    width="40%"
                  >
                    {calls[i].allowedFunctions.map(
                      (allowedFunc, allowedFuncIndex) => {
                        return (
                          <option
                            key={'functionToCall' + allowedFuncIndex}
                            value={allowedFunc.functionName || ''}
                          >
                            {allowedFunc.functionName}
                          </option>
                        );
                      }
                    )}
                  </SelectInput>

                  <div
                    style={{
                      display: 'flex',
                      width: '100%',
                      flexDirection: 'column',
                      paddingRight: '10px',
                    }}
                  >
                    {calls[i].functionParams.length === 0 ? (
                      <TextInput
                        key={'functionParam00'}
                        disabled
                        type="text"
                        placeholder="Select address to call and function"
                        width="100%"
                        style={{ marginTop: '0px' }}
                      />
                    ) : (
                      calls[i].functionParams.map(
                        (funcParam, funcParamIndex) => {
                          return (
                            <TextInput
                              key={'functionParam' + funcParamIndex}
                              type="text"
                              onChange={value =>
                                onFunctionParamsChange(i, value, funcParamIndex)
                              }
                              onClick={value =>
                                onFunctionParamsChange(i, value, funcParamIndex)
                              }
                              value={calls[i].dataValues[funcParamIndex] || ''}
                              placeholder={funcParam.name}
                              width="100%"
                              style={{
                                marginTop: funcParamIndex > 0 ? '5px' : '0px',
                              }}
                            />
                          );
                        }
                      )
                    )}
                  </div>
                </div>
              ) : (
                <TextInput
                  type="text"
                  onChange={value => onFunctionParamsChange(i, value, 0)}
                  onClick={value => onFunctionParamsChange(i, value, 0)}
                  value={calls[i].dataValues[0] || ''}
                  placeholder="0x..."
                  width="100%"
                />
              )}

              <TextInput
                type="text"
                onChange={value => onValueChange(i, value)}
                onClick={value => onValueChange(i, value)}
                value={calls[i].value || ''}
                width="10%"
                placeholder={
                  calls[i].callType === 'advanced'
                    ? 'WEI'
                    : { networkAssetSymbol }
                }
              />

              <RemoveButton
                onClick={() => {
                  removeCall(i);
                }}
              >
                X
              </RemoveButton>
              {isWalletScheme(schemeToUse) ? (
                <div
                  style={{
                    padding: '0px 5px 0px 10px',
                    marginTop: '-10px',
                  }}
                >
                  <Toggle
                    onToggle={() => {
                      changeCallType(i);
                    }}
                    width={80}
                    height={35}
                    state={calls[i].callType === 'advanced'}
                    optionOne={'Simple'}
                    optionTwo={'Advanced'}
                  />
                </div>
              ) : (
                <div />
              )}
            </CallRow>
          ))}

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Button onClick={addCall}>Add Call</Button>
          </div>
        </div>
      )}
    </>
  );
}